phamthanhnghia/remotion-agent-skills

HyperFrames to Remotion Migrations-Workflow

Migriere bestehende oder ältere HyperFrames HTML-Compositionen zu reinem React Remotion-Code.

Mapping-Tabelle

HyperFrames-Konzept	Remotion-Äquivalent
GSAP-Timeline .to() / .from()	useCurrentFrame() + spring() / interpolate()
<div class="clip" data-start data-end>	<Sequence from={start} durationInFrames={duration}>
<video>-Element	<OffthreadVideo src={staticFile('...')} />
<audio>-Element	<Audio src={staticFile('...')} />
npx hyperframes render	npx remotion render src/index.ts MyComp out/video.mp4

Migrationsschritte

1. Analysiere die HyperFrames HTML-Struktur und die Timeline-Werte.
2. Erstelle Szenenlayouts als React <AbsoluteFill>-Komponenten neu.
3. Ersetze GSAP-Interpolationen durch frame-deterministische Remotion spring()- und interpolate()-Primitive.
4. Überprüfe die Ausgabe im Remotion Studio.