Quickstart
Author, preview, and render your first deterministic MP4 in five minutes. Each step has a live preview you can scrub.
Five minutes, three commands, one MP4. Each step below shows the source on one tab and the rendered result on the other.
What you'll learn
- Install the CLI and scaffold a project
- Write a composition and preview it live
- Render to a hash-stable MP4
1. Install and scaffold
npm install -g hyperframes
hyperframes init hello-video
cd hello-video2. Write the composition
A composition is just HTML. The root declares dimensions; children declare timing.
<!doctype html>
<div data-width="1920" data-height="1080" data-duration="5" data-fps="60">
<div data-start="0" data-duration="5" class="bg"></div>
<h1 data-start="1" data-duration="4" data-fade="in">Hello, friend.</h1>
</div>Now make it yours — drag the knobs and watch the preview update.
0.00s
3. Preview with the dev server
hyperframes preview comp.html
# → http://localhost:51734. Render to MP4
hyperframes render comp.html --out video.mp4
sha256sum video.mp4Try it without installing
Next
- Your first video — a longer, richer walkthrough
- Install — full install matrix and Docker