Fluxo de Trabalho de Migração de HyperFrames para Remotion
Migre composições HTML legadas ou existentes do HyperFrames para código React puro com Remotion.
Tabela de Mapeamento
| Conceito HyperFrames | Equivalente Remotion |
|---|---|
Linha do tempo GSAP .to() / .from() | useCurrentFrame() + spring() / interpolate() |
<div class="clip" data-start data-end> | <Sequence from={start} durationInFrames={duration}> |
Elemento <video> | <OffthreadVideo src={staticFile('...')} /> |
Elemento <audio> | <Audio src={staticFile('...')} /> |
npx hyperframes render | npx remotion render src/index.ts MyComp out/video.mp4 |
Etapas de Migração
- Analisar a estrutura HTML do HyperFrames e os valores da timeline.
- Recriar os layouts de cena como componentes React
<AbsoluteFill>. - Substituir interpolações GSAP por primitivas determinísticas de quadro do Remotion:
spring()einterpolate(). - Verificar a saída no Remotion Studio.