🎯

remotion-to-hyperframes

🎯Skill

from heygen-com/hyperframes

What it does

A skill for the HyperFrames open-source video rendering framework that teaches AI agents to write correct HTML-based video compositions and GSAP animations, enabling them to render video from HTML code.

Overview

The remotion-to-hyperframes skill teaches AI coding agents how to translate Remotion (React-based) video compositions into HyperFrames HTML compositions. HyperFrames is an open-source video rendering framework by HeyGen that uses plain HTML with data attributes instead of React JSX, removing the need for a build step. This skill automates the conversion of React component trees, timeline logic, and animation code into equivalent HTML structures.

Key Features

Converts Remotion React (TSX) compositions into HyperFrames HTML with matching layout, timing, and track structure using data-start, data-duration, and data-track-index attributes
Maps animation logic from Remotion to HyperFrames Frame Adapter patterns including GSAP, CSS keyframes, Lottie, and Web Animations API
Preserves media references (video, audio, image assets) and their timing/volume settings during conversion
Works with the full HyperFrames dev-loop: preview in browser with live reload, lint compositions, and render to MP4 using FFmpeg
Supports deterministic rendering where the same input always produces identical output, suitable for automated pipelines

Who is this for?

Teams currently using Remotion who want to migrate to an Apache 2.0 licensed framework with no per-render fees or seat caps
Developers building agent-driven video pipelines who prefer HTML-native authoring over React JSX
AI agent users who need to convert existing Remotion projects into HyperFrames format for programmatic video generation

📦

Same repository

heygen-com/hyperframes(48 items)

remotion-to-hyperframes

Installation

Vibe Index InstallInstalls to .claude/skills/

npx vibeindex add heygen-com/hyperframes --skill remotion-to-hyperframes

skills.sh Install⚠ Installs to .agents/skills/

npx skills add heygen-com/hyperframes --skill remotion-to-hyperframes

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/remotion-to-hyperframes/SKILL.md

SKILL.md

198,142Installs

AddedApr 28, 2026

View on GitHub Back to Skills

More from this repository10

🎯

hyperframes-cli🎯Skill

CLI tool for the Hyperframes video rendering framework that provides commands to create, preview, lint, and render HTML-based video compositions to MP4.

🎯

hyperframes🎯Skill

Skill for authoring HTML-based video compositions with the Hyperframes framework, covering captions, TTS, audio-reactive animation, and transitions for AI agent-driven video creation.

🎯

hyperframes-registry🎯Skill

Skill for installing blocks and components into Hyperframes projects via the `hyperframes add` command, providing access to 50+ ready-to-use overlays, shader transitions, and data visualizations.

🎯

hyperframes-core🎯Skill

The foundational technical contract for HyperFrames HTML video compositions, defining data attributes, clip/track structure, sub-compositions, variables, media playback, deterministic rendering rules, and project validation.

🎯

hyperframes-animation🎯Skill

Comprehensive animation skill for HyperFrames providing atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and seven runtime adapters including GSAP, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU.

🎯

hyperframes-creative🎯Skill

Non-animation creative direction for HyperFrames videos covering design specs, color palettes, typography, narration scripting, beat planning, audio-reactive visuals, composition patterns, and brand/style decisions.

🎯

media-use🎯Skill

Resolves media needs (background music, sound effects, images, icons) into frozen local files by searching the HeyGen catalog, downloading the best match, and registering it in a manifest. One resolve command handles the full cascade from cache lookup to provider search to file freezing.

🎯

hyperframes-media🎯Skill

A media framework by HeyGen for building interactive video experiences with composable frames and real-time rendering capabilities.

🎯

general-video🎯Skill

A fallback HyperFrames composition authoring skill for custom video creation when no specialized workflow fits. Handles multi-scene pieces, brand reels, montages, title cards, motion posters, static loops, and freeform compositions at any length or format.

🎯

faceless-explainer🎯Skill

Converts arbitrary text (articles, notes, topics, briefs) into faceless explainer videos with auto-generated TTS narration and LLM-designed visuals including typography, abstract graphics, diagrams, and data visualizations.