YYL Remotion 视频制作

YYL Remotion 视频

将文章、脚本、笔记或清晰大纲转化为一个 Remotion 视频项目。 本技能视频优先：无点击驱动网页播放器，无 Web presentation/，工作流内不含 TTS 合成。

核心输出

my-video/
├── article.md
├── script.md
├── outline.md
├── notes.md
└── remotion/
    ├── src/Root.tsx
    ├── src/Composition.tsx
    ├── src/chapters/<NN>-<id>/
    │   ├── <Chapter>.tsx
    │   ├── narrations.ts
    │   └── timing.ts
    ├── public/assets/
    ├── preview-stills/
    └── out/

捆绑的技能资源：

themes/       # 配色/字体系统
templates/    # 可复制的 Remotion TSX 起始点
references/   # 工艺、主题和模板指南

执行强度

在写入文件之前决定：

强度	使用时机	行为
快速	<= 450 中文字符，<= 60 秒，主题测试，草稿演示	1 章节，少量节拍，直接实现
标准	1-4 分钟，普通可发布的解说视频	脚本 + 大纲，首个章节锚定，然后继续
严格	> 4 分钟，品牌/商业/高风险内容	更全面的规划，更多的静帧检查，更慢的章节审查

用一行报告：

我将使用 <快速/标准/严格>，因为 <长度/风险/目标>。

工作流

1. 输入门控

   • 仅当用户提供了源文本、脚本、笔记或清晰大纲时才继续。
   • 如果用户只给了一个主题，请向其索要材料。不要自行构思完整的视频。

2. 内容文件

   • 在提供源素材时，将其保存到 article.md。
   • 将最终的旁白文本保存到 script.md。
   • 将开发计划保存到 outline.md。
   • outline.md 规划章节、节拍、屏幕内容、信息池、资源。
   • outline.md 不规定精确的动画实现方式。

3. 主题选择

   • 仅使用本技能捆绑的主题：themes/command-film、 themes/studio-white、themes/research-desk。
   • 不要重复使用或从 web-video-presentation 导入主题。

4. 模板选择

   • 如果用户询问已知的布局或动画机制，请阅读 references/TEMPLATES.md。
   • 对于高端暗色作品集、3D 透视横向轮播或高级代理画廊需求，使用 templates/luxury-perspective-gallery。

5. Remotion 项目

   • 如果存在现有的 remotion/，则复用。
   • 仅当缺失时创建：

     npx create-video@latest --yes --blank --no-tailwind remotion
     

   • 如果所选模板需要 Tailwind，则以支持 Tailwind 的方式创建项目，或在复制模板文件之前添加 Tailwind。
   • 仅当 remotion/node_modules 缺失或 Remotion 命令因缺少依赖而失败时，才安装依赖。

6. 时间安排

   • 不要合成音频。
   • 根据旁白和视觉复杂度估算时长。
   • 默认 fps = 30，width = 1920，height = 1080。
   • 将文本存储在 narrations.ts 中；将估算的 durationFrames 存储在 timing.ts 中。

7. 实现

   • 在编写每个章节之前，阅读 references/REMOTION-CRAFT.md。
   • 使用 useCurrentFrame()、interpolate()、Easing 和 Sequence 进行动画制作。
   • 主要动画不要使用 CSS transition / CSS animation / GSAP。
   • Tailwind 可以对静态布局进行样式设置，但不允许使用 Tailwind 动画工具。

8. 验证

   • 运行：

     cd remotion
     npm run lint
     

   • 每个章节至少渲染一张静帧，或者对于短的完整视频渲染 2-4 张静帧：

     npx remotion still <composition-id> --frame=<frame> --scale=0.5 --output=preview-stills/<name>.png
     

   • 静帧看起来正确后渲染 mp4：

     npx remotion render <composition-id> out/<name>.mp4
     

9. 笔记

   • 更新 notes.md，包含 fps、分辨率、总帧数、预估时长、已检查的静帧、渲染的 mp4 路径，以及音频/字幕为后期制作内容。

主题选择

主题	最佳用途	感觉
command-film	Agent、终端、自动化、开发者工具	暗色电影感指令室
studio-white	SaaS 演示、发布、课程、产品教程	洁净白色产品工作室
research-desk	论文、报告、白皮书、业务分析	安静的分析工作台

如需完整的主题笔记，请阅读 references/THEMES.md。

模板选择

模板	最佳用途	感觉
luxury-perspective-gallery	高端作品集、产品展示、3D 横向轮播	暗色赛博极简主义机构滑块
charity-doodle-poster	非营利组织海报、手绘动物英雄、线稿-沸腾式编辑网页特效	复古墨水笔触定格动画海报

如需完整的模板笔记，请阅读 references/TEMPLATES.md。

Remotion 规则

• 在 Root.tsx 中使用 Composition。
• 使用 Sequence 在时间线上放置节拍。
• 使用 useCurrentFrame() + interpolate() 实现运动。
• 将静态资源放置在 remotion/public/assets/ 中；使用 staticFile() 引用。
• 最终渲染前必须进行静帧检查。
• 最终的 mp4 为静音，除非用户稍后在后期制作中提供音频。