HyperFrames 到 Remotion 遷移工作流程
將舊版或現有的 HyperFrames HTML 編排轉換為純 React Remotion 程式碼。
對照表
| HyperFrames 概念 | Remotion 等效項目 |
|---|---|
GSAP Timeline .to() / .from() | useCurrentFrame() + spring() / interpolate() |
<div class="clip" data-start data-end> | <Sequence from={start} durationInFrames={duration}> |
<video> 元素 | <OffthreadVideo src={staticFile('...')} /> |
<audio> 元素 | <Audio src={staticFile('...')} /> |
npx hyperframes render | npx remotion render src/index.ts MyComp out/video.mp4 |
遷移步驟
- 解析 HyperFrames 的 HTML 結構與時間軸數值。
- 將場景版面重建為 React
<AbsoluteFill>元件。 - 以 frame 確定性的 Remotion
spring()與interpolate()基本元件取代 GSAP 插值動畫。 - 在 Remotion Studio 中驗證輸出結果。