HyperFrames から Remotion への移行ワークフロー
既存のHyperFrames HTMLコンポジションを、純粋なReact Remotionコードに移行します。
マッピングテーブル
| HyperFrames の概念 | Remotion の対応物 |
|---|---|
GSAP タイムライン .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>コンポーネントとして再作成します。 - GSAPの補間を、フーム決定論的なRemotionの
spring()およびinterpolate()プリミティブに置き換えます。 - Remotion Studioで出力を検証します。