motion-anything - Open Design 开源本地优先动效引擎

motion-anything是什么

motion-anything 是 Open Design 团队开源的本地优先动效引擎，定位为免费版 Figma Motion + 无水印动效视频工坊。工具让动效直接活在真实运行的网页上，所见即所得，改完可部署上线。用户可通过自然语言描述让 AI Agent 生成动效，支持关键帧精调，导出格式涵盖代码、视频与可移植技能。

motion-anything的主要功能

• 真实网页动效：产物为可直接运行的 HTML/CSS/JS，非设计稿原型，改完即可部署。
• AI 自然语言生成：通过描述感觉可生成动效，同时支持关键帧与弹簧曲线精调。
• 策展级动效生态：内置 403 个动效配方、230 套 Skills、59 套设计系统与 2680 枚图标。
• 无水印视频工坊：支持多镜头编排、逐字动效与路径绘制，浏览器本地渲染 MP4/GIF。
• 多 Agent 集成：自动识别 Claude Code、Cursor 等 8+ 本地代码 Agent，支持云端与 BYOK。
• 克制引擎：配方自带 avoid_when 标注，检测到过度动效时自动警告。
• 七种导出格式：支持 JSON、CSS、React、Lottie、MP4、GIF 与 SKILL.md。

微信关注回复“开源”，加入AI开源项目交流群

如何使用motion-anything

• 安装启动：克隆 GitHub 仓库到本地，进入目录后执行 node cli/bin/motion.js serve 4399 启动服务，浏览器访问 localhost:4399 打开工作台。
• 生成页面：在首页输入页面描述，选择设计系统与动效风格，点击生成初始页面。
• 组件编辑：选中任意组件，在 Inspector 面板调整参数或通过聊天框用自然语言描述想要的动效。
• 时间轴编排：在底部时间轴拖放组件，调整整页动效的触发顺序、持续时长与延迟间隔。
• 导出交付：完成编辑后，选择 JSON、CSS、React、Lottie、MP4、GIF 或 SKILL.md 格式导出交付。
• 配置 Agent：进入 Settings → Execution mode，选择已安装的本地 Agent CLI 或配置 BYOK 填入 API Key 直连模型。

motion-anything的核心优势

• 真实网页动效：产物是可直接运行的 HTML/CSS/JS，非静态原型，改完写回文件即可部署。
• 零门槛 AI 创作：设计小白用自然语言描述感觉即可出片，专业用户能精调关键帧。
• 无水印本地渲染：视频导出无需 ffmpeg、不上云、不按次收费，全部在浏览器完成。
• 生态统一：一套动效模型打通设计、开发、视频制作与 Agent 协作，告别碎片化工具链。

motion-anything的项目地址

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

motion-anything的同类竞品对比

对比维度motion-anythingFigma Motion核心定位开源本地优先动效引擎，动效直接运行在真实网页上闭源插件，动效主要在设计稿内预览开源协议Apache 2.0 完全开源免费闭源商业产品，部分功能付费AI 生成支持自然语言让 Agent 生成并修改动效依赖手动配置，AI 能力有限代码产出直接导出可运行的 HTML/CSS/JS/React 并写回文件需借助第三方工具转代码，非原生视频导出浏览器本地无水印渲染 MP4/GIF，内置视频工坊无原生视频导出能力，需借助外部工具本地优先完全本地运行，支持自托管与离线使用云端优先，依赖 Figma 平台与网络

motion-anything的应用场景

• 产品发布页：快速生成带滚动触发与悬停动效的产品官网，导出代码直接部署上线。
• 营销视频制作：用多镜头模板与逐字动效制作无水印产品宣传短片，无需借助外部剪辑工具。
• AI 页面后期：为 AI 生成的静态网页批量添加交互动效，解决生成页面一次性无法修改的问题。
• 设计系统沉淀：将动效配方保存为可移植 Skills，在团队多项目中统一复用，保持品牌动效一致性。
• 前端开发提效：设计师直接产出 React/CSS 代码，减少设计稿到开发之间的还原损耗与沟通成本。