exiao/skills

Remotion 视频

使用 Remotion (React) 创建动画视频。基于官方 remotion-dev 最佳实践以及 Bloom 专用的合成。

快速路由

根据任务阅读相关的规则文件：

核心动画

任务	规则文件
插值、缓动、弹簧	references/rules/timing.md
动画基础	references/rules/animations.md
文本动画（打字机效果、逐词显示等）	references/rules/text-animations.md
场景过渡（滑动、淡入淡出、擦除、翻转）	references/rules/transitions.md
序列化（延迟、修剪、限制时长）	references/rules/sequencing.md
修剪（裁剪开头/结尾）	references/rules/trimming.md

媒体

任务	规则文件
图像（Img 组件）	references/rules/images.md
视频（嵌入、修剪、音量、速度、循环）	references/rules/videos.md
音频（导入、修剪、音量、速度、音调）	references/rules/audio.md
音频可视化（频谱、波形）	references/rules/audio-visualization.md
与时间线同步的 GIF	references/rules/gifs.md
字体（Google Fonts、本地）	references/rules/fonts.md
资产（导入图像/视频/音频）	references/rules/assets.md

字幕与画外音

任务	规则文件
生成字幕（转录音频）	references/rules/transcribe-captions.md
导入 SRT 字幕	references/rules/import-srt-captions.md
显示字幕（动画字幕）	references/rules/display-captions.md
字幕概述	references/rules/subtitles.md
AI 画外音（ElevenLabs TTS）	references/rules/voiceover.md

高级

任务	规则文件
3D 内容（Three.js / React Three Fiber）	references/rules/3d.md
图表（柱状图、饼图、折线图、股票图）	references/rules/charts.md
地图（Mapbox）	references/rules/maps.md
Lottie 动画	references/rules/lottie.md
漏光覆盖	references/rules/light-leaks.md
透明视频渲染	references/rules/transparent-videos.md

设置与配置

任务	规则文件
合成、静态帧、文件夹、默认属性	references/rules/compositions.md
动态元数据 (calculateMetadata)	references/rules/calculate-metadata.md
使用 Zod schema 参数化	references/rules/parameters.md
在 Remotion 中使用 TailwindCSS	references/rules/tailwind.md
测量文本（适配、溢出）	references/rules/measuring-text.md
测量 DOM 节点	references/rules/measuring-dom-nodes.md

FFmpeg 与媒体工具

任务	规则文件
FFmpeg 操作（修剪、静音检测）	references/rules/ffmpeg.md
从视频中提取帧	references/rules/extract-frames.md
获取视频时长	references/rules/get-video-duration.md
获取视频尺寸	references/rules/get-video-dimensions.md
获取音频时长	references/rules/get-audio-duration.md
检查视频是否可解码	references/rules/can-decode.md

---

remotion-bits 组件套件

预构建的动画组件。安装：npm install remotion-bits

核心组件：AnimatedText（逐词/逐字符/逐行显示）、ParticleSystem（五彩纸屑、雪花、萤火虫）、GradientTransition、Scene3D（3D 摄像机移动）、Typewriter、CodeBlock（带语法高亮的打字效果）。

完整目录和用法示例请参见 references/remotion-bits.md。

---

Bloom 项目

项目路径：~/clawd/remotion-videos/

remotion-videos/
├── src/
│   ├── Root.tsx          # 所有合成在此注册
│   ├── ProductDemo.tsx   # 主要产品演示组件
│   ├── schema.ts         # 属性的 Zod schema
│   ├── scenes/           # 独立的场景组件
│   │   ├── TerminalTyping.tsx
│   │   ├── FileScanning.tsx
│   │   ├── ScoreReveal.tsx
│   │   ├── ResultsSummary.tsx
│   │   └── TextOverlay.tsx
│   └── Composition.tsx
├── public/               # 静态资产
├── out/                  # 渲染输出
├── remotion.config.ts
└── package.json

现有合成

ID	尺寸	用途
ProductDemo	1080x1080	Twitter/Instagram 方形
ProductDemoVertical	1080x1920	TikTok/Reels/Shorts 竖屏
BloomDemo	1080x1080	Bloom 品牌方形
BloomDemoVertical	1080x1920	Bloom 品牌竖屏

所有合成：15 秒 @ 30fps（450 帧）。

属性 Schema (ProductDemoProps)

{
  command: string;           // 显示的打字终端命令
  files: Array<{             // 扫描动画的文件列表
    name: string;
    errors: number;
    warnings: number;
  }>;
  score: number;             // 要显示的分数 (0-maxScore)
  maxScore: number;          // 最高分数值
  statusLabel: string;       // 例如 "Critical", "Moderate Risk"
  statusColor: string;       // 状态的十六进制颜色
  resultLines: string[];     // 摘要发现
  title: string;             // 视频标题文本
  logoText: string;          // 品牌/产品名称
}

---

预合成：真实 Bloom 截图

如果视频中包含 Bloom 应用 UI，请先捕获真实截图：

1. 启动 PhoneAgent 桥接（请参见 ~/clawd/skills/phoneagent/SKILL.md）
2. 运行：python scripts/capture_bloom_screenshots.py --feature <portfolio|stock_detail|watchlist> --output public/screenshots/<feature>
3. 在合成中引用截图：staticFile("screenshots/<feature>/home.png")

如果桥接未运行，则会优雅地回退。

---

渲染

cd ~/clawd/remotion-videos

# 在浏览器中预览 (Remotion Studio)
npm run dev

# 渲染为 MP4
npx remotion render ProductDemo out/product-demo.mp4

# 为 TikTok 渲染竖屏版本
npx remotion render ProductDemoVertical out/product-demo-vertical.mp4

# 自定义属性
npx remotion render ProductDemo out/custom.mp4 --props='{"command":"my command","score":85}'

# 渲染为 GIF
npx remotion render ProductDemo out/demo.gif --image-format=png --codec=gif

# 指定帧范围
npx remotion render ProductDemo out/clip.mp4 --frames=0-150

创建新的合成

1. 在 src/scenes/ 中创建场景组件
2. 在 src/ 中创建主合成组件
3. 在 src/schema.ts 中定义 Zod schema
4. 在 src/Root.tsx 中注册，并指定尺寸：
   • 方形：1080x1080（Twitter, Instagram）
   • 竖屏：1080x1920（TikTok, Reels, Shorts）
   • 横屏：1920x1080（YouTube）

---

渲染后 QA

每次渲染后务必运行 QA：

python scripts/visual_qa.py out/video.mp4 "Your goal description"
# 或者使用包装脚本：
./scripts/render_and_verify.sh BloomDemo out/demo.mp4 "Goal here"

修复所有标记的问题并重新渲染。不要交付未通过 QA 的视频。

---

提示

• 社交媒体视频保持在 15-30 秒
• 为移动端观看使用高对比度颜色
• 添加字幕/文本叠加（大多数观众静音观看）
• 发布前测试方形和竖屏两种尺寸
• 为社交媒体渲染为 30fps（高动态场景使用 60fps）
• 在从头构建动画之前，优先使用 remotion-bits 组件