Build a motion alphabet: 26 techniques in 28 seconds
A type-specimen poster that comes to life. Every second a new letter arrives on the beat and shows the motion technique it is named after, from A Arc and B Bounce to X eXplode and Z Zoom, and no letter is ever cut or crossfaded into the next. At the end the camera flies into Z's counter and lands on the opening A, so the vertical video loops. You get the exact prompts, a check for every step, and the complete source: one 26-row table you can extend with your own letters.
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
Print the specimen sheet (grid, measured type, one clock)
Step 02
Write the recipe: one table, and hand-offs that never cut
Step 03
Fill the alphabet (C to Y)
YoursStep 04
Zoom into Z, 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). Check, snapshot, render (HTML → MP4). Free, runs locally.
GSAP: 3.14.2 (jsDelivr CDN, inlined at render). The one paused timeline. Free.
Node.js: 24.x. Runs the HyperFrames CLI. Free.
FFmpeg: any recent build. Instagram encode, loop check. Free.
Fonts: Archivo Black 400, IBM Plex Mono 400/700. Glyphs + annotations (embedded by HyperFrames). Free (OFL).
Codex or any agent that can run shell commands works too. HyperFrames downloads its own headless Chrome on first run.
Provenance: Recorded September 25, 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, 28 s (840 frames), H.264, HyperFrames "standard" quality, beginframe capture, software GPU, 6 workers, 14 s; Instagram copy with FFmpeg libx264 CRF 23, High profile, no audio. Fonts: Archivo Black and IBM Plex Mono (OFL), fetched from Google Fonts by HyperFrames at compile time. No external images, footage or generative-media models were used.
Build a motion alphabet: 26 techniques in 28 secondsUses your AI plan
Claude Code
HyperFrames