remotion-to-hyperframes
🎯Skillfrom heygen-com/hyperframes
|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(24 items)
Installation
npx vibeindex add heygen-com/hyperframes --skill remotion-to-hyperframesnpx skills add heygen-com/hyperframes --skill remotion-to-hyperframes~/.claude/skills/remotion-to-hyperframes/SKILL.mdSKILL.md
More from this repository10
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.
CLI tool for the Hyperframes video rendering framework that provides commands to create, preview, lint, and render HTML-based video compositions to MP4.
Skill that teaches AI agents the GSAP animation API for Hyperframes compositions, including timelines, easing, ScrollTrigger, plugins, and performance best practices across React, Vue, and Svelte.
Skill that enables AI agents to convert existing websites, PDFs, CSVs, and other content into Hyperframes video compositions, supporting format-specific outputs like TikTok-style vertical videos.
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.
A CSS Animations adapter skill for HyperFrames, the open-source HTML-to-video rendering framework by HeyGen. Enables AI coding agents to use CSS animations and keyframes within HyperFrames video compositions.
Part of HyperFrames, an open-source video rendering framework for creating HTML-based video compositions with AI agents; this skill provides Tailwind CSS v4 browser-runtime styling guidance for video compositions.
An Anime.js adapter skill for HyperFrames, the open-source HTML-to-video rendering framework by HeyGen. Teaches AI coding agents how to use Anime.js animations within HyperFrames video compositions.
A Three.js adapter skill for HyperFrames, the open-source HTML-to-video rendering framework by HeyGen. Enables AI coding agents to create 3D scenes and animations within HyperFrames video compositions.
A Lottie adapter skill for HyperFrames, the open-source HTML-to-video rendering framework by HeyGen. Enables AI coding agents to embed and control Lottie animations within HyperFrames video compositions.