Skip to main content

​
What HyperFrames can make

Every film below is 100% HyperFrames — HTML rendered frame by frame, no other tool. They are grouped by what they show off. Where a source project is public, the card links to it.

​
Product & launch films

A whole product cut into a launch film — its own screens, type and colour.
HeyGen × StripeProduct launch, 4K · 100% HyperFrames
HyperFrames launchThe framework’s own launch · source included
Website → videoA live site becomes a promo · source included
SpaceX explainerData and motion at scale · source included
K3 promoShort product spot · 100% HyperFrames

​
The tooling, shown working

Each film is HyperFrames demonstrating one of its own features.
Agent skillsThe skill system · 100% HyperFrames
KeyframesSeek-safe animation · 100% HyperFrames
Timeline editorStudio timeline · source included
Studio inspectorEditing on the canvas · source included
VariablesOne composition, many versions · source included
Cloud renderingRender on HeyGen’s cloud · source included

​
Motion, sound & effects

Motion is the message — kinetic type, beat-synced cuts, texture and VFX.
Texture launchMotion design · 100% HyperFrames
VFX reelShaders and effects · 100% HyperFrames
Music to videoCuts synced to a track · 100% HyperFrames
Sound & musicSFX and music with the CLI · source included

​
Workflows & integrations

A PR, a Figma file, a design brief — turned into a finished film.
PR to videoA GitHub PR as a reveal · source included
Figma → HyperFramesA design brought to motion · source included
Claude DesignFrom a design draft · 100% HyperFrames
FRAME.md storyboardBrief-driven direction · source included

​
Where HyperFrames plugs in

The same engine, reached from the tools teams already use. Use the player controls to watch and listen.
Codex pluginHyperFrames inside Codex · 100% HyperFrames
VercelDeploy from a template · 100% HyperFrames
Open models (Ollama)Build with local models · 100% HyperFrames
Community · hyperframes.devPublish and remix · 100% HyperFrames

​
Recreate any video, 1:1

Point HyperFrames at a finished video and it rebuilds the same film in editable HTML — gestures, type, timing and all. Below, each reference (the original, on the left) sits next to its HyperFrames replica (on the right), matched frame for frame.

​
Most-installed blocks

These ready-to-run examples are ordered by human requested installs from the last 30 days. Add any block to a project, then customize its content in place.

​
Project templates

The init templates remain available for scaffolding complete projects.
Use npx hyperframes init my-video —example <name> for a full project template, or npx hyperframes add <block> to start from one of the examples above.