yyl-remotion-video

YYL Remotion 视频

将文章、脚本、笔记或清晰的大纲转化为 Remotion 视频项目。 此技能以视频为先：不制作由点击驱动的网页播放器，不使用网页 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/       # color / typography systems
templates/    # copyable Remotion TSX starting points
references/   # craft, theme, and template guidance

执行强度

开始写入文件前，先做出判断：

强度	适用情形	行为
快速	<= 450 个汉字，时长 <= 60s，主题测试、草稿演示	1 个章节、少量节拍、直接实现
标准	1-4 min，常规可发布的讲解视频	脚本 + 大纲，以第一个章节为锚点，然后继续
严格	> 4 min，品牌/商业/高风险内容	更充分的规划、更多静帧检查、更慢的章节审核

用一行报告：

I will use <Quick/Standard/Strict> because <length / risk / target>.

工作流

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 默认无声，除非用户之后在后期制作中提供音频。