Open Design 团队开源了 motion-anything，一个能直接在真实网页上运行的动效引擎。与大多数原型工具不同，motion-anything 生成的动效是真实的 HTML + CSS + JavaScript，部署即可上线，且支持随时回来继续编辑。

项目简介

motion-anything 让动效直接活在正在运行的网页上。你在编辑器里看到的每一个动效都是可执行的代码，选中任意组件，用自然语言描述想要的效果即可即时调整。

核心功能

403 个精选动效配方

• 403 个策展动效配方：从终端风打字机效果到 GPU 着色器、波浪线场
• 230 套可移植 Skills，可被 AI Agent 带到下一个项目
• 59 套顶级设计系统，动效与设计规范天然统一
• 58 套 HyperFrames 视频模板，专为产品发布视频打造
• 2680 枚图标覆盖各种场景

支持以插件形式导入自有设计资产——从 GitHub 拉、传 zip、拖文件夹均可。

自然语言驱动动效设计

设计小白零门槛，用自然语言描述即可生成动效：

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

专业设计师也能精调：支持关键帧、弹簧曲线、自定义轨迹，以及 4 种触发方式（加载/滚动到/悬停/点击）、13 个动法（位移/缩放/旋转/透明/模糊等），甚至可以直接在画布上画路径让元素沿路径运动。

无水印视频工坊

内置完整的视频工坊功能：

• 多镜头 + 流动过渡，像专业视频编辑软件一样编排场景
• 13 种字符/单词级别的文字动效预设
• 手绘运动路径，自动吸附成直线/圆/椭圆
• 参考复刻：丢入 GIF 或视频当参考，照着复刻

导出 MP4 / GIF 无水印、不装 ffmpeg、不上云、不按次收费——所有渲染在浏览器中完成。

8+ Code Agent 自动识别

自动识别本地代码 Agent：Claude Code、Codex、Cursor、OpenCode、Grok Build、Hermes、Gemini、Open Design Cloud。顶栏一键切换，零配置复用已登录会话。

克制引擎

每个动效配方都带"什么时候别用我"的标注（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

基本使用流程：一句话生成动效 → 逐组件编辑 → 时间轴编排 → 导出。

总结

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

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

GitHub：nexu-io/motion-anything