hyperframes lets developers author motion graphics, data visualizations, and product videos using standard HTML, CSS, and SVG timelines. It captures deterministic frame-by-frame browser renders and pipes them into hardware-accelerated MP4/WebM encoders for jitter-free 60 FPS video production.
$ npx hyperframes render
<section class="hyperframe-stage" data-fps="60" data-frames="180" width="1920" height="1080">
<h1 class="kinetic-headline"
style="transform: translateY(calc((1 - var(--progress)) * 48px)); opacity: var(--progress);">
Write HTML. Render Video.
</h1>
</section>Repository: https://github.com/bhubbard/hyperframes
Live Studio: https://code.brandonhubbard.com/hyperframes/
Portal: https://code.brandonhubbard.com/
Install: npx hyperframes render scene.html --fps 60 --out promo.mp4
Design System: Brandon Hubbard Swiss Modernist (#0A0A0C / 1px Exposed Structural Grid)