mcpField
H
hyperframes-to-remotion

hyperframes-to-remotion

github.com/phamthanhnghiaCreative & media356 installsUpdated 14w ago
Repository

About hyperframes-to-remotion

A migration workflow for converting existing HyperFrames HTML compositions into React-based Remotion code. It is intended for creators or developers moving scene layouts and timelines to Remotion’s frame-based primitives.

Key features

  1. 01Parse HTML structure and timelines
  2. 02Rebuild scenes as React components
  3. 03Replace GSAP interpolation with Remotion primitives
  4. 04Verify results in Remotion Studio

Use cases

  1. 01Migrate a legacy HyperFrames composition
  2. 02Recreate timeline animation in Remotion
  3. 03Check converted output in Remotion Studio

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/phamthanhnghia/remotion-agent-skills --skill hyperframes-to-remotion

After installing, type/hyperframes-to-remotionin Claude Code to confirm it loaded.

Details

From the project README

HyperFrames to Remotion Migration Workflow

Migrate legacy or existing HyperFrames HTML compositions to pure React Remotion code.

Mapping Table

HyperFrames ConceptRemotion Equivalent
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 rendernpx remotion render src/index.ts MyComp out/video.mp4

Migration Steps

  1. Parse HyperFrames HTML structure and timeline values.
  2. Re-create scene layouts as React <AbsoluteFill> components.
  3. Replace GSAP interpolations with frame-deterministic Remotion spring() and interpolate() primitives.
  4. Verify output in Remotion Studio.

Comments

Markdown supported