Hyperframes to remotion
Skill phamthanhnghia/remotion-agent-skills/skills/hyperframes-to-remotion
Migration workflow from HyperFrames to Remotion: convert HyperFrames HTML compositions to React Remotion code. Use when translating HTML GSAP timelines into Remotion frame-deterministic React components.From its SKILL.md
npx -y skills add phamthanhnghia/remotion-agent-skills --skill hyperframes-to-remotionAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.1 KB, 224 tokens by cl100k_base, as published. Nobody here has run it
HyperFrames to Remotion Migration Workflow
Migrate legacy or existing HyperFrames HTML compositions to pure React Remotion code.
Mapping Table
| HyperFrames Concept | Remotion 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 render | npx remotion render src/index.ts MyComp out/video.mp4 |
Migration Steps
- Parse HyperFrames HTML structure and timeline values.
- Re-create scene layouts as React
<AbsoluteFill>components. - Replace GSAP interpolations with frame-deterministic Remotion
spring()andinterpolate()primitives. - Verify output in Remotion Studio.
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.