Workflow de Migration HyperFrames vers Remotion
Migrez les compositions HTML HyperFrames existantes ou héritées vers du code React Remotion pur.
Table de Correspondance
| Concept HyperFrames | Équivalent Remotion |
|---|---|
GSAP Timeline .to() / .from() | useCurrentFrame() + spring() / interpolate() |
<div class="clip" data-start data-end> | <Sequence from={start} durationInFrames={duration}> |
Élément <video> | <OffthreadVideo src={staticFile('...')} /> |
Élément <audio> | <Audio src={staticFile('...')} /> |
npx hyperframes render | npx remotion render src/index.ts MyComp out/video.mp4 |
Étapes de Migration
- Analyser la structure HTML HyperFrames et les valeurs de la timeline.
- Recréer les dispositions des scènes sous forme de composants React
<AbsoluteFill>. - Remplacer les interpolations GSAP par les primitives déterministes de Remotion
spring()etinterpolate()basées sur la trame. - Vérifier la sortie dans Remotion Studio.