HyperframesTop pick
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips…
Video & Motion
HeyGen79k
Bring existing video code or footage into HyperFrames and verify it frame by frame against the original - Remotion first, also Motion Canvas, Lottie, Three.js, p5.js, canvas or plain HTML/CSS animation, or renders from Manim, After Effects or Blender. Use to port, convert, migrate or reuse work made with another tool.
Install
Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.
$ npx skills add heygen-com/hyperframes --skill remotion-to-hyperframesNeeds Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.
How to use Remotion To Hyperframes
Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /remotion-to-hyperframes.
It includes scripts that Claude may run on your computer, so skim them on GitHub before you install.
What the instructions cover
- 1Native: translate, then verify
- 2Hosted
- 3Media
Section headings from the skill's SKILL.md file.
What's inside · 76 files
- SKILL.md
- assets/.gitkeep
- assets/test-corpus/.gitignore
- assets/test-corpus/run.sh
- assets/test-corpus/tier-1-title-card/.gitignore
- assets/test-corpus/tier-1-title-card/README.md
- assets/test-corpus/tier-1-title-card/expected.json
- assets/test-corpus/tier-1-title-card/hf-src/compositions/title.html
- assets/test-corpus/tier-1-title-card/hf-src/index.html
- assets/test-corpus/tier-1-title-card/remotion-src/package.json
- assets/test-corpus/tier-1-title-card/remotion-src/remotion.config.ts
- assets/test-corpus/tier-1-title-card/remotion-src/src/Root.tsx
- assets/test-corpus/tier-1-title-card/remotion-src/src/TitleCard.tsx
- assets/test-corpus/tier-1-title-card/remotion-src/src/index.ts
- assets/test-corpus/tier-1-title-card/remotion-src/tsconfig.json
- assets/test-corpus/tier-2-multi-scene/.gitignore
- assets/test-corpus/tier-2-multi-scene/README.md
- assets/test-corpus/tier-2-multi-scene/expected.json
- assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-1.html
- assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-2.html
- assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-3.html
- assets/test-corpus/tier-2-multi-scene/hf-src/index.html
- assets/test-corpus/tier-2-multi-scene/remotion-src/package.json
- assets/test-corpus/tier-2-multi-scene/remotion-src/remotion.config.ts
- assets/test-corpus/tier-2-multi-scene/remotion-src/src/MultiScene.tsx
- assets/test-corpus/tier-2-multi-scene/remotion-src/src/Root.tsx
- assets/test-corpus/tier-2-multi-scene/remotion-src/src/index.ts
- assets/test-corpus/tier-2-multi-scene/remotion-src/tsconfig.json
- assets/test-corpus/tier-2-multi-scene/setup.sh
- assets/test-corpus/tier-3-data-driven/.gitignore
- assets/test-corpus/tier-3-data-driven/README.md
- assets/test-corpus/tier-3-data-driven/expected.json
- assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-1.html
- assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-2.html
- assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-3.html
- assets/test-corpus/tier-3-data-driven/hf-src/index.html
- assets/test-corpus/tier-3-data-driven/remotion-src/package.json
- assets/test-corpus/tier-3-data-driven/remotion-src/remotion.config.ts
- assets/test-corpus/tier-3-data-driven/remotion-src/src/Root.tsx
- assets/test-corpus/tier-3-data-driven/remotion-src/src/Stargazed.tsx
- + 36 more files on GitHub →
More from HeyGen
See all →Figma
Bring Figma into a HyperFrames video - rendered assets, brand tokens, components, storyboard frames as reconstructed motion (frames read as states, not slides), shaders and…
Design & UIHeyGen79k
Hyperframes CLI
The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and…
Video & MotionHeyGen79k
Hyperframes Registry
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera…
Video & MotionHeyGen79k
More Claude skills for video editing
See all →Slack GIF Creator
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for…
Video & Motion
Anthropic187k
AI Video Gen
Generate AI videos from text prompts using multiple provider gateways. Use when: (1) Generating videos from text descriptions, (2) Creating AI-generated video clips for content…
Video & Motion
OpenMontage76k
Create Video
Create videos from a text prompt using HeyGen's Video Agent. Use when: (1) Creating a video from a description or idea, (2) Generating explainer, demo, or marketing videos from a…
Video & MotionOpenMontage76k