import { DocsVideo } from "/snippets/docs-video.jsx"; import { ReplicaCompare } from "/snippets/replica-compare.jsx"; import { ExamplePlayer } from "/snippets/example-player.jsx";
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.
A whole product cut into a launch film — its own screens, type and colour.
Each film is HyperFrames demonstrating one of its own features.
Motion is the message — kinetic type, beat-synced cuts, texture and VFX.
A PR, a Figma file, a design brief — turned into a finished film.
The same engine, reached from the tools teams already use. Use the player controls to watch and listen.
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.
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.
| Example | Start here |
|---|---|
| logo-outro | npx hyperframes add logo-outro |
| data-chart | npx hyperframes add data-chart |
| editorial-flash-overlay | npx hyperframes add editorial-flash-overlay |
| organic-light-leak-overlay | npx hyperframes add organic-light-leak-overlay |
| mk-progress-stat | npx hyperframes add mk-progress-stat |
| flowchart | npx hyperframes add flowchart |
| mk-specs-list | npx hyperframes add mk-specs-list |
| mk-callout-highlight | npx hyperframes add mk-callout-highlight |
| hw-title | npx hyperframes add hw-title |
| code-typing | npx hyperframes add code-typing |
| lt-dark-card | npx hyperframes add lt-dark-card |
| cinematic-zoom | npx hyperframes add cinematic-zoom |
The init templates remain available for scaffolding complete projects.