原作品:浙大猫学长《VibeCoding 大赏｜vibe-motion v1.1.0 正式发布!音画同步的动画才是真正的好动画!》 本文做了两件事:① 把这个作品深扒清楚(它到底是什么、强在哪);② 亲手在本机把它完整部署跑通并渲染出一条视频,把可复制的步骤和踩的坑都记下来。

先说结论:vibe-motion 是一个”用嘴做动效视频”的 Vibe Coding 应用。 你用自然语言描述想要什么动画,它在底层让 Claude Code 去写 Remotion(用 React 写视频的框架)代码,实时预览、一键导出成专业视频。它把传统上”程序员一帧帧抠 React 动画”的高门槛活,变成了”你说意图、AI 写确定性代码、框架保证可渲染”。

作者是浙大猫学长(zjucat),MIT 开源,本次拆的是 v1.1.0。

它解决的真问题

传统做动效有两条路,各有难处:

  • 专业软件(AE / 剪映):能做,但精确控制(比如”在第 30 帧让这个组件做一次脉冲”)靠手 K 帧,繁琐。
  • Remotion 裸写:用代码定义动画,精确、可复用、能版本管理,但要会 React/TypeScript,门槛高。

vibe-motion 在 Remotion 外面套了一层”AI 壳”:每个项目自带一个 CLAUDE.md,把分辨率、帧率、时长、目录规则都喂给 AI。 你只需要在项目里跟 Claude Code 说”logo 淡入后滑到角落、同时标题出现”,它直接改 Main.tsx,Remotion Studio 热更新预览。这就是 vibe coding 的典型形态——人给意图,AI 落成代码,框架兜住确定性。

v1.1.0 的真创新:音画同步(audio-first)

视频的本质无非是”画面 + 音频”。难点在于让动画卡上音频的节奏。vibe-motion v1.1.0 的做法很反直觉,但方向是对的:

先把音频拖进时间轴(像剪映 / PR 那样拖文件即用),再让 AI 按音频的节奏去调动画帧。

为什么是这个顺序?作者在视频里讲得很清楚:音频不能随便动——你读完一段文案,如果对音频变速,它会变调,这不是想要的;但动画的关键帧是代码,随便调。所以正确的工作流是”锁住音频 → 改画面去对齐”,而不是”先做画面再配音”。

他举的例子:口播说到”画面、音频”这两个词时,让对应组件在那一帧做一次脉冲动画;想让脉冲提前,就让 AI 把它从第 50 帧改到第 30 帧——一句话的事。

而原版 Remotion 加音轨,要你先手动把音频文件拷到项目目录、再写一行代码引入,挺麻烦。vibe-motion 把这一步做成了拖拽即用,痛点抓得准。

两种用法,门槛差很多

方式是什么门槛
完整 web app网页后台:内嵌终端跑 Claude Code + 内嵌 Remotion Studio + 资源拖拽 + 一键导出 mp4/webm/gif重,要 PostgreSQL
轻量脚手架 npx create-vibe-motion只生成一个 Remotion 项目骨架(带 CLAUDE.md),你自己 cd 进去开 Claude Code 对话轻,只要 Node + Claude Code

视频里”怎么用”演示的其实是轻量那条:npx create-vibe-motion → 进目录 → 跟 AI 说要做什么动画。另外还有 npx skills add vibe-motion/skills,给 AI 装一批可复用的动效 skill(进度条、打字机、SVG 拼装、3D 地球航线等),省 token。

技术栈

层技术
前端Next.js 16(App Router)+ React 19
UITailwind 4 + shadcn/ui
终端xterm.js + WebSocket + node-pty(网页里跑真终端,Claude Code 在每个项目的 remotion 目录里运行)
视频Remotion 4 + @remotion/player
数据库PostgreSQL + Prisma
媒体Sharp(图)+ FFmpeg(视频缩略图)

架构关键:server.ts 是一个自定义 Next 服务器,把 WebSocket(终端)和 Next 挂在同一个端口;每个项目在 projects/{uuid}/remotion/ 下是一个独立的 Remotion 工程,Claude Code 就在那个目录里跑、读那个目录的 CLAUDE.md;导出走 npx remotion render 起子进程。

本地部署完整步骤(亲测跑通)

环境前提:Node(项目文档说 24+,我用 22.22 也跑通了,代码里没有 engines 强制)、FFmpeg、Claude Code CLI、git。 不用预装 PostgreSQL——用 Prisma 自带的本地 PG。

# 1. clone + 装依赖
git clone https://github.com/GurYN/vibe-motion.git
cd vibe-motion
bun install            # 或 npm install(794 个包,bun 约 12s)

# 2. 起本地 Postgres(Prisma 自带,免装系统库)—— 单开一个终端常驻
npx prisma dev --name vibemotion
#   它会打印一行 DATABASE_URL="postgres://postgres:postgres@localhost:5121X/template1?..."

# 3. 写 .env,把上面那行 DATABASE_URL 填进去
cp .env.example .env
#   编辑 .env:DATABASE_URL=<上一步打印的串>  PORT=3000  HOST=localhost

# 4. 生成 Prisma client + 建表
npx prisma generate
npx prisma db push     # 用 db push 不用 migrate,免 shadow DB

# 5.(macOS arm)修 node-pty 权限,否则网页终端报 posix_spawnp failed
chmod +x node_modules/node-pty/prebuilds/darwin-arm64/spawn-helper

# 6. 起服务
bun dev                # 或 npm run dev
#   → Ready on http://localhost:3000  +  WebSocket ws://localhost:3000/api/ws

打开 http://localhost:3000 → 新建项目(选分辨率 / 帧率 / 时长)→ 它自动在 projects/{uuid}/remotion/ 生成 Remotion 骨架 + CLAUDE.md → 网页内嵌终端里 Claude Code 自动起在该目录 → 你描述动画 → Studio 实时预览 → 导出 mp4。

我建了个测试项目、用默认合成渲染了一条 1920×1080 / 30fps / 5 秒的 mp4,完整链路(建项目 → 生成骨架 → 渲染出片)全部跑通。

部署时实际踩的坑

  • 本机可能只有 libpq 的 psql 客户端、没有 PG 服务端:别折腾 brew 装 postgres,直接 npx prisma dev 最省事,.env.example 官方就推荐这条路。
  • prisma db push --skip-generate 会报 help:这个子命令不吃这个 flag,直接 prisma db push 即可。
  • 渲染要在项目子目录自己装 Remotion CLI:主项目只装了 @remotion/player + remotion core,没装 @remotion/cli。渲染走的是在 projects/{uuid}/remotion/ 里 npx remotion render,首次会自动下 @remotion/cli + 一个 headless Chromium(几百 MB)。
  • 首次渲染卡在下载 Chrome Headless Shell(SSL 握手失败):如果网络环境抓不到 Google 的下载源,加 --browser-executable="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" 让 Remotion 直接用系统 Chrome,跳过下载,立刻就渲染出来了。
  • 多 lockfile 警告:home 目录如果有 package-lock.json,Next 会误判 workspace root,不影响运行,设 turbopack.root 可消除。

适合谁、怎么用上

  • 做口播 / 科普 / 产品类短视频的片头片尾、数据动效、进度条、打字机、转场:它比纯 AI 生成视频更可控(代码是确定性的),又比手 K 帧省事(说人话让 AI 写)。尤其适合需要”精确卡音频节奏”的内容。
  • 想快速试水:不用部署整个 web app,直接 npx create-vibe-motion 起一个骨架,开 Claude Code 跟它聊就行。
  • 本质判断:vibe-motion 的价值不在”又一个 AI 生视频工具”,而在它示范了一种把”创意软件”重做成”AI 对话 + 确定性框架”的范式——音频锁定、画面用代码对齐,这个思路本身比工具更值钱。

链接