正式开源！motion-anything：免费版 Figma Motion + 无水印动效视频工坊来了

昨天 Open Design 团队又开源了一个力作：motion-anything。

这几年动效工具层出不穷，但大多数都卡在一个尴尬的位置：设计稿里动得再美，一旦变成代码，就像被施了定身咒。

AI 生成页面更是如此，动效永远是"一次性"的——生成完就定型，想改就得重来。

动效本应该是网页的灵魂，却成了最尴尬的"半成品"。

直到 motion-anything 的出现，这个问题有了真正的答案。

项目简介

motion-anything 是 Open Design 团队原班人马打造的开源动效引擎。

和市面上大多数工具不同，它不做"设计稿里的动效"，而是让动效直接活在真实的、正在运行的网页上。

你在编辑器里看到的每一个动效，都是真实的 HTML + CSS + JavaScript，双击就能运行，部署就能上线。

更厉害的是，你可以随时回来继续编辑——选中任意组件，在聊天里说一句"让它悬停时弹一下"，它就立刻动起来。

这不是原型，这是能直接交付的产品。

而且它完全免费，遵循 Apache 2.0 开源协议。

403 个精选动效，2680 枚图标，全部互通

motion-anything 自带一个庞大的动效生态：

• • 403 个策展动效配方：从终端风打字机效果、赛博故障 CRT 网格，到丝绸般流动的 GPU 着色器、有机的波浪线场，每一个都是经过精心挑选的精品。
• • 230 套 Skills：这些动效配方同时也是可移植的 SKILL，能被你的 AI Agent 带到下一个项目。
• • 59 套顶级设计系统：直接内置 Open Design 生态的品牌包，动效和设计规范天然统一。
• • 58 套 HyperFrames 视频模板：专门为产品发布视频打造的多镜头模板。
• • 2680 枚图标：覆盖各种场景的矢量图标库。

更贴心的是，你可以用插件形式导入自己的设计资产——从 GitHub 拉、传 zip、拖文件夹都行，导入即用。

一句话让 Agent 变成顶尖动效设计师

这是 motion-anything 最让人兴奋的功能。

设计小白零门槛：不用懂任何术语，说"感觉"就能出顶尖动效。比如：

• • "让这个按钮悬停时像 iOS 一样弹一下"
• • "标题逐字浮现，带打字机光标"
• • "卡片滚动进视线时缓缓浮现"

专业设计师和 AE 老手也够用：关键帧、弹簧曲线、自定义轨迹全都能上手精调。

它支持 4 种触发方式（加载/滚动到/悬停/点击）、13 个动法（位移/缩放/旋转/透明/模糊等），还有完整的 6 轨关键帧编辑器——你甚至可以直接在画布上画一条线，让元素沿着这条路径运动。

完整的视频工坊，无水印导出

动效不只是网页的专利，motion-anything 还自带一个完整的视频工坊：

• • 多镜头 + 流动过渡：像专业视频编辑软件一样编排多个场景，实现平滑过渡。
• • 逐字文字动效：13 种字符/单词级别的动效预设，让文字活起来。
• • 运动路径：手绘路径、自动吸附成直线/圆/椭圆，配缓动速度。
• • 参考复刻：看到喜欢的视频直接丢 GIF 或视频进来当参考，照着复刻。

最重要的是，导出 MP4 / GIF 无水印、不装 ffmpeg、不上云、不按次收费——所有渲染都在你的浏览器里完成。

8+ Code Agent 自动识别，零配置切换

motion-anything 会自动识别你本地的代码 Agent：

• • Claude Code
• • Codex
• • Cursor
• • OpenCode
• • Grok Build
• • Hermes
• • Gemini
• • Open Design Cloud（云端跑模型）

顶栏一键切换，复用已登录会话零配置。本地一个 CLI 都没有？开通 Open Design Cloud 就能云端跑各种模型，长任务不中断，填个 API key 直连也行。

克制引擎

这是 motion-anything 最特别的设计——它内置了一套"克制引擎"。

每个动效配方都带"什么时候别用我"的标注（avoid_when），时间轴检测到太多元素挤在同一入场窗口会直接警告你。

开发团队亲身实践告诉我们：好动效的秘密不是多，是收着用。太多动效反而会让用户分心，好的动效应该像呼吸一样自然。

七种导出格式

改好的动效是你的资产，想怎么用就怎么用：

• • JSON：可被 AI 读写的动效描述
• • CSS：纯样式代码
• • React：组件级动效
• • Lottie：跨平台动效格式
• • MP4 / GIF：视频格式
• • SKILL.md：可移植的动效技能

快速上手

安装运行

# 克隆仓库
git clone https://github.com/nexu-io/motion-anything.git
cd motion-anything

# 启动服务
node cli/bin/motion.js serve 4399

# 打开浏览器访问
# http://localhost:4399

基本使用

1. 1. 一句话生成动效：在首页输入描述（如"做一个科技感的产品发布页面"），选择设计系统和动效风格，点击生成。
2. 2. 逐组件编辑：在工作台中选中任意组件，通过 Inspector 调整动效参数，或在聊天框里用自然语言描述想要的效果。
3. 3. 时间轴编排：底部时间轴可以编排整页动效顺序，拖放调整时长和延迟。
4. 4. 导出：完成后导出为 JSON / CSS / React / Lottie / MP4 / GIF 等格式。

配置 Agent

在 Settings → Execution mode 中选择已安装的 Agent CLI，或配置 BYOK（使用自己的 API Key 直连 Anthropic / OpenAI / Google）。

写在最后

motion-anything 解决了动效领域的四大痛点：

1. 1. AI 生成的页面是死的——它在跑着的页面上逐组件改动效，改完写回文件
2. 2. AI 没有品味——每个配方声明克制预算，超预算系统警告
3. 3. 生态碎到没法学——统一的动效模型，一套学习曲线
4. 4. 交付物是半成品——产物是真实可运行的网页，部署即用

如果你是设计师、开发者，或者只是想让自己的网页更有灵魂，motion-anything 值得一试。

GitHub：https://github.com/nexu-io/motion-anything

如果本文对您有帮助，也请帮忙点个 赞👍 哈！❤️