A blank browser tab types <div>, and over eight bars the page builds itself in blueprint lines. Every piece is labelled with the real code that makes it: the grid, the orb's grid-column, the headline's font, a cubic-bezier the hills rise on, a palette that fills one plate per beat, and a GSAP tween the sun rises with. The finished poster plays, then a scrubber rewinds it all to the blank tab, and that's the loop. The whole scene is drawn from one number, the build progress, which is why the loop is exact. You get the exact prompts, a check for every step, and the complete source.
Before you start
Uses your AI plan
You’ll need
Claude Code
HyperFrames
GSGSAP
NoNode.js
FFFFmpeg
What it uses
4 prompts to your coding assistantCounts toward your assistant’s usual allowance. Nothing extra to buy.
The tutorial
Free with an account · 4 steps
Free with an account. Your assistant runs on the plan you already have.
The recipe
4 steps, from nothing to yours.
Every step gives you the action, the exact input (a prompt, settings or a file) and a check to compare your result against the original.
Step 01
Set the clock (project, beat grid, blank tab)
Step 02
Build the finished page first (two skins, one geometry)
Step 03
Write the build on the beat grid, with the real code on screen
YoursStep 04
Play the payoff, add the rewind, render
Exactly what the creator used
Claude Code
Any recent version
HyperFrames
Any recent version
GSAP
Any recent version
Node.js
Any recent version
FFmpeg
Any recent version
Claude Code: Claude Opus 5.5 (claude-opus-5-5). Wrote every file. Uses your Claude plan.
HyperFrames: 0.8.74 (npx hyperframes@0.8.74). Preview, check, snapshot, render (HTML → MP4). Free, runs locally.
GSAP: 3.14.2 (jsDelivr CDN). The one paused timeline and its eases. Free.
Node.js: 24.x. Runs the HyperFrames CLI. Free.
FFmpeg: any recent build. The Instagram encode and the loop check. Free.
Fonts: League Gothic, JetBrains Mono. The poster headline, and everything that is code. Free (OFL).
Codex or any agent that can run shell commands works too. HyperFrames downloads its own headless Chrome on first run, and on the first check or render it fetches the two fonts from Google Fonts and caches them.
Provenance: Recorded September 24, 2026: Claude Code with Claude Opus 5.5 (claude-opus-5-5); HyperFrames 0.8.74 (headless Chrome 152.0.7977.30, beginframe capture, software GPU); GSAP 3.14.2; Node.js 24.13.1. The build session ran past midnight, and the final render was made at 00:10 on September 25. Master rendered locally at 1080×1920, 30 fps, 24.0 s, H.264 High (HyperFrames "looks" quality, CRF 16). Instagram copy: libx264 preset slow, CRF 23, maxrate 16M, yuv420p, faststart, no audio. Loop check: SSIM 0.9994 (master) and 0.9987 (Instagram) between the first and last frames after a sigma-4 blur, and pixel-identical before encoding. No external images, footage or generative-media models were used.
Claude Code
HyperFrames