A collection of 19 free, ready-to-use HTML video blocks for creating programmatic videos, compatible with HeyGen HyperFrames (HTML to deterministic MP4). Each block is a single, self-contained HTML file: markup plus a scoped <style> (and occasionally a tiny <script>). No framework, no build step, no dependencies.
See every block previewed and copyable at reactvideoeditor.com/hyperframes-templates.
| Block | File | Description |
|---|---|---|
| Activity Rings | activity-rings.html |
Three concentric rings fill on a stagger while their values count up |
| Animated Bar Chart | bar-chart.html |
Bars grow from the baseline with staggered timing |
| Dual Area Chart | dual-area.html |
Two series draw on together over a grid, each with a glowing leading dot |
| Liquid Counter | liquid-counter.html |
A number that fills with gooey liquid as it counts up, then drains and loops |
| Metric Grid | metric-grid.html |
Three glass KPI tiles: numbers count up while sparklines draw in |
| Radial Gauge | radial-gauge.html |
A donut gauge sweeps to its value with a glowing tip and a counting centre |
| Ranked Bars | ranked-bars.html |
A horizontal ranking where bars grow and values count up on a stagger |
| Signal Line | signal-line.html |
An area chart that draws on with a glowing leading dot and a gradient fill |
| Stat Counter | stat-counter.html |
A big number that counts up to its target |
| Block | File | Description |
|---|---|---|
| Aurora Headline | aurora-headline.html |
Masked kinetic type over a slow aurora wash with fine grain and bloom |
| Kinetic Title | kinetic-title.html |
Gradient title that rises and settles, a clean opener for any video |
| Particle Wordmark | particle-wordmark.html |
Glowing particles swarm in, assemble your word, then disperse |
| Block | File | Description |
|---|---|---|
| Lower Third | lower-third.html |
Name-and-role banner that slides in from the edge |
| Prism Lower Third | prism-lower-third.html |
A slim glass name badge that tilts in with a light bar and a soft sheen |
| Block | File | Description |
|---|---|---|
| Follow Pill | follow-pill.html |
Social-style follow prompt that pops in with an avatar |
| Notification Stack | notification-stack.html |
Glass notifications that spring in and stack with real depth blur |
| Spotlight Testimonial | spotlight-testimonial.html |
A glass review card tilts into a moving spotlight with parallax and pop-in stars |
| Block | File | Description |
|---|---|---|
| Fade Through White | fade-through-white.html |
A bright flash wipe between two scenes |
| Light Leak Wipe | light-leak-wipe.html |
A blooming light-leak sweeps between two scenes with an RGB-split fringe |
Each block is a complete HTML document. The file is both the preview and the source.
- Clone or download this repository.
- Copy the
.htmlblock(s) you want. - Preview by opening the file in a browser, or render to video with HyperFrames:
# render an HTML block to a deterministic MP4 with HeyGen HyperFrames
npx hyperframes render templates/bar-chart.html --out bar-chart.mp4Or embed the markup directly into your own HTML canvas or HyperFrames composition and drive it off the frame clock.
Note: For gallery convenience these blocks loop via CSS
animation. A real HyperFrames render drives the same markup off the deterministic frame clock instead ofinfiniteloops, so swap the loop for a fixed duration when you wire it into a composition. Editable knobs (data, colours, timing) live in:rootcustom properties or a small<script>config at the top of each file.
These blocks are plain HTML and CSS (plus occasional vanilla JS). They render:
- In any modern browser (open the file directly)
- With HeyGen HyperFrames (HTML to MP4)
- Inside any HTML-to-video pipeline that captures a headless Chrome frame clock
Contributions are welcome. Ideas for new blocks or improvements to existing ones: open an issue or a pull request.
All blocks in this repository are available under the MIT License. Use them in personal and commercial projects; attribution is appreciated where applicable.
Not affiliated with HeyGen. "HyperFrames" is a trademark of HeyGen, used here descriptively to describe format compatibility.