Opening tutorial…
Motion & 3D · Intermediate
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- GSAP
- Node.js
- FFmpeg
- 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
Tutorial outline
4 steps, in order. Open the tutorial for the instructions, prompts, settings and checks.
Build the tower (project, rooms and the one clock)
Program the fall (camera, punches, shutter, elevator display)
Fill the six floors
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.