phamthanhnghia/remotion-agent-skills

Flujo de Trabajo de Migración de HyperFrames a Remotion

Migra composiciones HTML heredadas o existentes de HyperFrames a código React puro de Remotion.

Tabla de Mapeo

Concepto de HyperFrames	Equivalente en Remotion
Línea de tiempo 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

Pasos de Migración

1. Analiza la estructura HTML de HyperFrames y los valores de la línea de tiempo.
2. Vuelve a crear los diseños de escena como componentes React <AbsoluteFill>.
3. Reemplaza las interpolaciones GSAP con las primitivas deterministas de Remotion spring() e interpolate().
4. Verifica la salida en Remotion Studio.