视频不是「拍」出来的,是代码「算」出来的:12–15 秒的片子 = 几百帧画面逐帧渲染,动画全部由 useCurrentFrame() 驱动。本页是一份可照做的实战教程,附带成品样片。
这条 15 秒宣传片围绕等式 metaid = agent = harness = os 分五幕展开:开场设问 → agent(可验证的人格)→ harness(可更换的壳)→ os(长着你的系统)→ 等式收束。全程无旁白、无实拍,纯排版与几何动效。
h264 · 1920×1080 · 30fps · 450帧 · 15.06s
Remotion 的口号是 Create videos programmatically:视频被描述成一个 React 应用,每一帧都是一次组件渲染。动画、转场、字幕全部由代码驱动,因此视频可以像软件一样接入数据、复用组件、写单测、进 Git 版本管理,甚至用 Remotion Lambda 云端批量渲染。
「快」的真相:花时间的是把合成脚本写对、把渲染坑踩掉;此后改一句文案、调一个配色,重跑一遍就是一条新片。
# 一条命令,360–450 帧逐帧出片 npm run render # 等价于 npx remotion render src/index.ts MetaIDPromo out/promo.mp4 --codec=h264
npm init -y 后 npm i remotion @remotion/cli react react-dom,一次装齐。
src/Root.tsx 里 <Composition> 定义尺寸 / 帧率 / 时长:1920×1080 · 30fps · 450帧(=15s)。
src/Promo.tsx 分五幕(Sequence 或按全局帧分段),动画全走 useCurrentFrame + interpolate/spring。规则:禁止 CSS transition / animation。
npx remotion studio 起本地预览台,边改边看每一帧。
npx remotion render src/index.ts MetaIDPromo out/promo.mp4 --codec=h264 --browser-executable="<headless-shell 路径>"。出片后用 ffprobe/ffmpeg 读码流、算 MD5、抽帧目检。
这条片子的收敛思路:把 MetaID 的能力框架 metaid = agent = harness = os 变成五幕,每层一屏,最后一幕用等式把「同一件事的三张脸」钉死。
样片源文件:assets/metaid-promo.mp4(本包内嵌,Bot Browser 与普通浏览器均可直接播放)。