3D 数据一键互传工具
2026/7/21 15:56:29
用 AI 生成了一个还不错的网页，结果一到"加动效"这一步就傻眼:要么整页重新生成、面目全非,要么只能自己手写 CSS 和 GSAP——如何把动态网页给做好，这个项目绝对值得关注。
它叫motion-anything,来自 nexu.io 团队(也是 Open Design开源设计工具家族的一员)。
一句话说清楚:它是什么
你描述"想要什么感觉",AI 帮你把动效做出来。
官方的定位是"agentic motion layer"(智能体动效层)——一个本地优先、聊天原生的动效引擎。你只需要用一句话描述想要的画面感,它就能生成带动效的页面或宣传视频,而且最关键的是:生成之后还能在运行中的页面上,逐个组件继续精修动效,而不是像大部分 AI 生成工具那样,改一下就得整页重新跑一遍。
一图看懂它长什么样:
这里要先说清楚一件容易被误解的事:motion-anything 本身不是一个大模型,也不内置任何模型。它更像一个"动效工作台 + 调度层",负责把你的需求转发给你自己已经在用的 AI 编程工具(比如 Claude Code),再把结果渲染成可视化、可精修的动效编辑界面。也就是说,装完它之后,你还需要额外接入一个 AI 引擎才能真正生成东西——具体怎么接,后面「怎么安装使用」那节会详细说。
它解决了什么问题
官方 README 里提到了四个动效领域长期存在的痛点,这也是我觉得这个项目立意比较清楚的地方:
- AI 生成的页面是"死胡同"
:生成一个落地页容易,但想调整动效,往往只能推倒重来或者手写 CSS。motion-anything 支持直接在运行中的页面上,针对单个组件改动效,改完还能写回源文件。
- AI 没有"审美"
:很多工具生成的动效要么全部同时淡入淡出,要么像放烟花一样过度花哨。motion-anything 给每个动效配方都标注了"什么时候不该用"(avoid_when)和"克制预算"(restraint budget),编辑器还会在动效"用力过猛"时主动提醒,并且始终遵循系统的"减少动效"无障碍设置。
- 动效生态太分散
:GSAP、Framer Motion、anime.js、Lottie……每一个都要单独学。motion-anything 让你只需要表达意图(比如"一个液态金属质感的背景"),系统会自动从内置的动效库里帮你匹配,不需要你认识任何一个库的名字。
- 很多工具把你锁死在平台里
:专有模型、按次收费、加水印、只能导出成交接文件。motion-anything 采用Apache-2.0 开源协议、本地优先、不限定 AI 引擎,而且生成的所有内容都可以自由导出。
核心能力一览
- 403 个精选动效配方
,涵盖氛围背景、交互反馈、文字特效、页面转场等类别,其中 77 个带实时预览效果,像打字机文字、故障风终端、发光边框按钮、丝绸/波浪 GPU 光影特效等,都是拿来即用的"零依赖"实现(不需要 React,不需要 three.js,不需要打包构建,两行 <script> 标签就能跑起来)。
- 8 大 AI 编程引擎 + BYOK(自带 API Key)
:Claude Code、Codex CLI、Cursor Agent、OpenCode、Grok Build、Hermes、Gemini CLI,以及 Open Design Cloud,全部自动检测识别,或者你也可以直接填自己的 Anthropic / OpenAI / Google API Key。所有请求都跑在你自己的会话或密钥上,不经过任何第三方服务器中转。
- 视频编辑器
:内置一个基于 Canvas 的合成器,可以做文字/形状/图片/视频图层、五段式转场的宣传短片,浏览器端直接用 WebCodecs 导出 MP4,无水印、不联网上传、不收费。
- 运动路径(Motion Path)
:直接在画布上画一条线,选中的图层就能沿着这条线运动,还能一键吸附成直线、圆形或椭圆。
- 动效预设
:入场、强调、注意力吸引、退场四类预设可以随意叠加到任意图层上,再加上 200+ 配方库一键调用。
- 暗色模式
、多语言界面等基础体验也都做了。
和 Open Design 生态打通
motion-anything 不是孤立的小工具,而是 Open Design 这个开源设计生态里的"动效层"。两者之间的联动是实打实的:
库里的每个动效配方都是一份 Open Design 兼容的 SKILL.md 文件,230 个可移植 Skill 可以直接导出扔进 Open Design 或任何支持 Skill 的 Agent 里用。
内置了 59 套 Open Design 格式的品牌设计系统(DESIGN.md)、58 个 HyperFrames 视频模板、112 个 HTML 原型模板,生成动效时可以直接从这些"品牌级"素材起步,而不是从空白画布开始。
图标库共享,2,680 个图标、38 个分类。
简单说就是:先用 Open Design 挑一套好看的设计系统,生成品牌级页面 → 再用 motion-anything 给每个组件加动效 → 最后导出成 Skill,让任何人的 AI Agent 都能复用这套动效。
怎么安装使用?
好消息是:这玩意儿零 npm 依赖,不用 npm install,三行命令就能跑起来。
git clone https://github.com/nexu-io/motion-anything.git
cd motion-anything
node cli/bin/motion.js serve 4399
# 然后打开浏览器访问 http://localhost:4399
但要注意:跑起来 ≠ 能用。这三行命令只是把本地网页服务器和工作台界面启动起来,页面能打开,但如果不接一个 AI 引擎,你没法生成任何动效。所以真正的完整安装要求是这两条:
- Node.js 18 及以上版本
(唯一的运行环境依赖,项目本身零 npm 包依赖)
- 必须准备好至少一个 AI 引擎
,二选一:
方式一:本地已装好的 AI 编程 CLI 工具(推荐,免额外配置)
如果你电脑上已经装了下面 8 款工具中的任意一个,并且加到了系统 PATH 里,motion-anything 启动时会自动检测识别,直接拿来用,不用你手动配置:
用这种方式,消耗的是你原本就在付费使用的那个 CLI 工具的额度或会话,motion-anything 本身不额外收费,也不会把你的请求转发到它自己的服务器。
方式二:BYOK(Bring Your Own Key,自带 API Key)
如果你没装上面任何一个 CLI,也可以在网页里打开 设置 → Execution mode(执行模式),直接填入你自己的 Anthropic / OpenAI / Google 官方 API Key,系统会直接调用对应厂商的 API。密钥只保存在你本地,不会上传到 nexu.io 的服务器。
换句话说:用哪个大模型完全由你决定,项目本身不绑定任何一家。但反过来说,如果你手头一个 CLI 工具都没装、也不打算申请任何 API Key,那这个项目目前是用不起来的——这是它比较容易被忽略的前置门槛,官方 README 里对这一点写得比较简略,建议提前准备好。
装完、接好引擎之后,打开网页,基本流程是这样的:
- 首页
:用一句话描述你想要的动效或页面,选一个设计系统(59 套品牌包可选)和一个"克制程度"(从 Subtle 克制到 Cinematic 电影级),回车,AI 就会生成对应的动效页面或产物。
- 工作台(Workbench)
:这是核心界面。左侧是 AI 的规划和自检过程,右侧就是"正在运行的页面"本身——点击页面上任意一个组件,就能单独给它配置触发方式(4 种触发器)、动效动词(13 种,比如淡入、弹跳、缩放等)、弹簧缓动参数,或者直接打开完整的六轨关键帧编辑器手动拖拽调整。
- 视频编辑器
:如果你要做的是产品宣传视频而不是网页动效,可以切到视频编辑器,拖入图层、设置转场,导出 MP4/GIF。
- 素材库(Library)
:403 个动效配方可以按意图关键词搜索,每张卡片都能实时预览效果。
- 导出
:满意之后,单个组件的动效可以导出成 JSON、CSS、React 代码或 Lottie 文件;整个动效页面可以导出成 MP4、GIF 或单文件 HTML;整个配方还能直接导出成一份 Skill 文件,以后其他 AI Agent 也能直接复用。
适合谁用
需要频繁做落地页、产品发布页、宣传视频的独立开发者或小团队,想要"AI 生成 + 人工精修"两不误
已经在用 Claude Code / Cursor / Codex 之类编程 Agent 做开发,想顺手把动效这一环也交给 AI
不想被某个 SaaS 工具的水印、按次收费或专有格式锁死,更倾向于本地跑、开源可控的方案
对动效"克制感"有要求的设计师和前端——这个项目在"防止 AI 一言不合就做成烟花秀"这件事上,确实下了不少功夫
写在最后
比起单纯"生成一个动效",motion-anything 更像是想把"AI 生成 + 组件级精修 + 多引擎自由选择 + 可导出复用"这套完整链路跑通。而且完全开源(Apache-2.0)、零依赖、本地跑、不加水印,对于想摆脱各种"AI 设计工具月费陷阱"的人来说,是个值得关注的方向。
更多transformer，VIT，swin tranformer 参考头条号：人工智能研究所 v号：人工智能研究Suo, 启示AI科技动画详解transformer 在线视频教程