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 schemas
│   ├── 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 影格）。

屬性結構 (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 "您的目標描述"
# 或者使用包裝腳本：
./scripts/render_and_verify.sh BloomDemo out/demo.mp4 "此處填入目標"

修正任何標記的問題並重新渲染。不要交付未通過 QA 的影片。

---

提示

• 為社群媒體將影片保持在 15-30 秒
• 使用高對比度顏色以便於行動裝置觀看
• 加入字幕/文字疊層（多數觀看者會靜音觀看）
• 在發佈前測試方形與垂直兩種格式
• 社群媒體渲染使用 30fps（高動態內容使用 60fps）
• 在從頭建立動畫之前，優先使用 remotion-bits 元件