01 · Education explainer
Internet Intro
An explainer-style education intro about how the internet works, with motion graphics and code-driven animation.
02 · Wonderloop v2
Moon Intro
A cinematic lunar intro for Wonderloop, combining typography, camera moves, and space visuals.
03 · Documentary preview
Dyatlov Pass
A documentary-style mystery preview about the Dyatlov Pass incident, with editorial maps and annotation.
How it's made
Video, engineered.
HyperFrames is an open-source framework that turns HTML into video. It lets me treat motion like code: versioned, precise and fast to change.
Write it
Each scene is HTML and CSS — type, layout and brand colors exact to the pixel.
Animate it
GSAP timelines drive everything: kinetic type, highlights, maps, camera moves.
Render it
HyperFrames renders every frame deterministically to MP4. Re-render any time.
// one scene of an explainer video — it's just code
<section class="clip" data-start="0" data-duration="4">
<h1 id="title">How the internet works</h1>
</section>
tl.from("#title", { y: 80, opacity: 0, ease: "power4.out" });
tl.to(".marker", { scaleX: 1, duration: 0.6 });