thatrebeccarae/claude-marketing

Remotion 影片製作

使用 Remotion 建立程式化影片的最佳實踐 — 動畫、轉場、圖表與渲染。

安裝

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/remotion-video ~/.claude/skills/

核心能力

• 彈簧動畫預設（彈跳、流暢、清脆、交錯）
• 插值模式（相機縮放、視差、滾動模擬）
• SVG 繪製動畫（路徑追蹤、描邊揭示）
• 透過 TransitionSeries 進行場景轉場
• AbsoluteFill 圖層合成
• 圖表動畫（長條圖成長、折線圖繪製、圓餅圖揭示、數字計數）
• 音訊整合與同步
• 渲染配置

彈簧動畫預設

使用 Remotion 的 spring() 進行物理基礎動畫：

預設	配置	使用情境
彈跳	mass: 0.5, damping: 8, stiffness: 120	俏皮的揭示、標誌彈跳
流暢	mass: 1, damping: 15, stiffness: 80	UI 轉場、滑入效果
清脆	mass: 0.8, damping: 20, stiffness: 200	輕快的互動、切換開關
交錯	任何預設搭配每個項目的影格偏移	列表揭示、網格動畫

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const scale = spring({
  frame,
  fps,
  config: { mass: 0.5, damping: 8, stiffness: 120 },
});

插值模式

相機縮放

import { interpolate } from "remotion";

const zoom = interpolate(frame, [0, 30], [1, 1.5], {
  extrapolateRight: "clamp",
});

視差圖層

const bgX = interpolate(frame, [0, 100], [0, -50]);
const fgX = interpolate(frame, [0, 100], [0, -150]);

滾動模擬

const scrollY = interpolate(frame, [0, 90], [0, -800], {
  extrapolateRight: "clamp",
});

SVG 繪製效果

動畫化 strokeDashoffset 以揭示 SVG 路徑：

const pathLength = 500;
const draw = interpolate(frame, [0, 60], [pathLength, 0], {
  extrapolateRight: "clamp",
});

<path
  d="..."
  strokeDasharray={pathLength}
  strokeDashoffset={draw}
/>

圖表動畫模式

模式	技術
長條圖成長	將高度從 0 動畫到目標值，每個長條交錯 3-5 影格
折線圖繪製	使用 strokeDashoffset 動畫的 SVG 路徑
圓餅圖/甜甜圈圖揭示	動畫化 conic-gradient 停點或 SVG 弧形路徑
數字計數	從 0 到目標值進行插值，用 Math.round() 顯示

場景轉場

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <SceneOne />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    timing={linearTiming({ durationInFrames: 15 })}
    presentation={fade()}
  />
  <TransitionSeries.Sequence durationInFrames={90}>
    <SceneTwo />
  </TransitionSeries.Sequence>
</TransitionSeries>

效能規則

1. 動畫不要使用 useEffect。 請用 useCurrentFrame() + interpolate()。
2. 將靜態元件記憶化。 對不依賴影格的任何元件使用 React.memo。
3. 預載資源。 本地檔案用 staticFile()，遠端網址用 prefetch()。
4. 開發期間保持組合影片在 30 秒以下，以加速渲染迭代。
5. 在最終渲染前於目標解析度（1920x1080 或 1080x1080）測試。

反模式

• 不要使用 CSS transition 或 animation — 使用 Remotion 的 interpolate() 和 spring()
• 不要使用 setTimeout 或 setInterval — 只基於影格計時
• 響應式佈局不要使用絕對像素定位 — 使用 AbsoluteFill + flex
• 不要每個影格重建內聯 style 物件 — 提取到常數或用 useMemo
• 不要使用不受控的音訊 — 務必設定明確的 volume 和 startFrom

完整的程式碼範例和組合模板請參閱 REFERENCE.md。