Build a free-fall through six motion-design showrooms
One unbroken camera fall down a dark, glossy tower. Every floor is a showroom for one technique: kinetic type, a particle vortex, liquid chrome, an isometric city, a halftone ripple and a fan of frosted glass cards. The camera punches through each slab on the beat while an elevator display counts the floors, then lands back on the roof, so the Reel loops. You get the exact prompts, a check for every step, and the complete source for a 24-second, 120 BPM vertical video.
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
Build the tower (project, rooms and the one clock)
Step 02
Program the fall (camera, punches, shutter, elevator display)
Step 03
Fill the six floors
YoursStep 04
Crack the roof, close the loop, 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). Snapshot, check, render (HTML → MP4). Free, runs locally.
GSAP: 3.14.2 (jsDelivr CDN). The one paused timeline. Free.
Node.js: 24.x. Runs the HyperFrames CLI. Free.
FFmpeg: any recent build. The Instagram re-encode and the loop test. Free.
Fonts: Archivo Black, JetBrains Mono. Display type, the elevator display and labels (bundled by HyperFrames). Free (OFL).
Codex or any agent that can run shell commands works too. HyperFrames downloads its own headless Chrome the first time it runs.
Provenance: Recorded September 24, 2026: Claude Code with Claude Opus 5.5 (claude-opus-5-5); HyperFrames 0.8.74; GSAP 3.14.2; Node.js 24.13.1. Rendered locally at 1080×1920, 30 fps, 24 s, H.264 (HyperFrames "looks" quality, CRF 16), with beginframe capture, a software GPU and 6 workers, and no audio. The Reels copy was re-encoded with FFmpeg (libx264, CRF 23, High profile, faststart). No external images, footage or generative-media models were used.
Build a free-fall through six motion-design showroomsUses your AI plan
Claude Code
HyperFrames