Drop a HyperFrames composition into the editor, hit render, and download a deterministic MP4. The full encoder lives in the Playground — open it there.
Any HTML works. Set body dimensions and duration with data-attributes. Use any CSS animation library you like.
The Playground spins up a hidden render target, seeks through every frame, and feeds them into an in-browser encoder.
Save the file, embed it, share it. The output is byte-stable — re-running the same composition produces the same hash.
A six-second editorial pull quote. Paste it into the editor on the Playground page and hit render — the MP4 lands in your downloads.
<!-- A 6-second editorial pull quote. -->
<!DOCTYPE html>
<html>
<head>
<style>
body { background: #f6f5f1; font-family: "Newsreader", serif; }
.quote { animation: rise 1s 0.4s both; font-size: 96px; line-height: 1.05; }
.cite { animation: rise 1s 1.4s both; color: #6b6862; }
@keyframes rise { from { transform: translateY(20px); opacity: 0 } }
</style>
</head>
<body data-width="1920" data-height="1080" data-fps="30" data-duration="6">
<blockquote class="quote">“The best video tool<br/>is the one you can <em>git push</em>.”</blockquote>
<p class="cite">— HyperFrames docs</p>
</body>
</html>We considered shipping a bare-bones tool here too, but the Playground already has the editor, the live preview, the examples library, and the export pipeline. A second copy would be worse, not better. Open the Playground and you get all of it — for free, in your tab.
When you outgrow the browser (longer renders, batch jobs, CI), the CLI takes over with the same engine and the same output guarantees.
The encoder lives there. So does the editor, examples and live preview.