HyperFrames launch
by HeyGen · Apache-2.0
The framework's own launch film, built entirely in HyperFrames HTML.
HyperFrames
Plain HTML compositions rendered to deterministic video, agent-first.
Apache-2.0 · ★ 54.9k · 191 clips
HyperFrames clips191
Filter in ExploreHow people build with HyperFrames
Works where the prompt, the code or the video is public. Videos load from the creator's own host when you press play.
Website → video
by HeyGen · Apache-2.0
A live marketing site captured and recut into a promo film.
SpaceX explainer
by HeyGen · Apache-2.0
Data-heavy explainer with large-scale motion and charts.
Timeline editor
by HeyGen · Apache-2.0
Feature film for the Studio timeline editor.
Studio inspector
by HeyGen · Apache-2.0
Shows on-canvas editing in HyperFrames Studio.
Variables
by HeyGen · Apache-2.0
One composition rendered into many versions via variables.
Cloud rendering
by HeyGen · Apache-2.0
Launch film for HeyGen-hosted cloud rendering.
Sound & music
by HeyGen · Apache-2.0
Demonstrates SFX and music placed through the CLI.
PR to video
by HeyGen · Apache-2.0
A GitHub pull request turned into an animated reveal.
FRAME.md storyboard
by HeyGen · Apache-2.0
Brief-driven direction from a FRAME.md design spec to film.
Claude Design → HyperFrames launch
by HeyGen · Apache-2.0 · AI-made
Agent-built launch film; the repo includes the BRIEF.md and storyboard the agent worked from.
Canopy Part Title
by HeyGen (HyperFrames catalog) · Apache-2.0
Leaves sweep through the frame and part to reveal the headline.
Glass Shard Title
by HeyGen (HyperFrames catalog) · Apache-2.0
Glass shards fly in through fog and tile themselves into the headline.
Wireframe Portal Title
by HeyGen (HyperFrames catalog) · Apache-2.0
A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.
Cuboid Carousel
by HeyGen (HyperFrames catalog) · Apache-2.0
A chain of bevelled cuboids rides a travelling wave as a content carousel.
Code Slice Hero
by HeyGen (HyperFrames catalog) · Apache-2.0
A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline.
Code Morph
by HeyGen (HyperFrames catalog) · Apache-2.0
One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.
Flash Through White
by HeyGen (HyperFrames catalog) · Apache-2.0
Shader transition with white flash crossfade
Kinetic Slam
by HeyGen (HyperFrames catalog) · Apache-2.0
Full-screen single-word display with alternating entrance directions
@jake11moran 会话历史动画 skill
by jake11moran · CC-BY-4.0, CC0-1.0, MIT, NOASSERTION, NOASSERTION, none · AI-made
@jake11moran 会话历史动画 skill — generated with claude-opus-5.5; public prompt, source, render.
Prompt
/session-story created a skill for opus 5.5 using @HyperFrames_ - claude reads your local claude code history, finds what an average session with you looks like and animates it start to finish with your messages try here: https://github.com/heygen-com/hyperframes-community-skills/tree/master/skills/session-story
Rain Station, a 2D animated previs short
by zhu185178 · CC-BY-4.0, MIT, NOASSERTION, none · AI-made
Rain Station, a 2D animated previs short — generated with claude-opus-5.5; public prompt, source, render.
Captioned vertical clip with local TTS voiceover (HyperFrames)
by bilaldemirerr · MIT · AI-made
Captioned vertical clip with local TTS voiceover (HyperFrames) — generated with claude-opus-5.5; public prompt, source, render.
Prompt
Make a 15-second 1080×1920 vertical clip with HyperFrames from this script: "I made this video without opening a video editor. I gave Claude Opus 5.5 one prompt. It wrote HTML, and HyperFrames rendered it to MP4. The captions, the voice, the motion. All local. Here is the exact recipe." Generate the voiceover locally, get word timestamps with npx hyperframes transcribe, and show big centered captions in the lower third, 3–6 words per group, highlighting each word as it is spoken. Above them, a code card whose lines fade in. Dark background, one warm accent. Run check, then render.
Product video for Distilbook
by ajith_io · CC-BY-4.0, MIT, NOASSERTION, NOASSERTION, none · AI-made
Product video for Distilbook — generated with claude-opus-5.5; public prompt, render.
Prompt
Research Distilbook.Make a dynamic 40-second motion graphics video on Distilbook that shows what an incredible motion designer you are. like it's your showreel - Go all out.
About HyperFramesagents, rendering, runtime
- With agents
- Ships 21 agent skills (npx skills add heygen-com/hyperframes) with a /hyperframes router skill plus a CLI (init/lint/check/preview/render) and a hosted MCP connector; works with Claude Code, Codex, Cursor, Gemini CLI.
- Render path
- npx hyperframes render (headless Chrome seeks each frame, FFmpeg encodes MP4); also HeyGen cloud render, AWS Lambda, Cloud Run.
- Runtime
- HTML/CSS/JS; Node CLI; headless Chrome + FFmpeg renderer
- Best for
- product launch films · kinetic typography · captioned social clips · data/chart animation · code explainers · PR-to-video · website-to-video
Worth knowing
- Apache-2.0 open source; README states no per-render fees or commercial-use thresholds (~54.9k stars) source ↗
- Videos are plain HTML/CSS/JS; renderer seeks each frame in headless Chrome and encodes with FFmpeg, so output is deterministic source ↗
- 21 agent skills (npx skills add heygen-com/hyperframes) for Claude Code, Codex, Cursor, Gemini CLI, plus a hosted MCP connector source ↗
- Adapters for GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, TypeGPU; ~387 installable catalog blocks/components (npx hyperframes add <name>) source ↗
- HeyGen open-sourced the compositions behind its own launch films source ↗
For the HyperFrames team
Featured on 24fps
This page is free and always will be. If it helps your users, drop the badge on your showcase or README.
<a href="https://24fps.dev/tools/hyperframes"><img src="https://24fps.dev/badge/hyperframes.svg" alt="Featured on 24fps" height="28"></a>