Kinetic typography video made entirely in code with Claude Opus 5.5, shared with a build prompt: Claude Opus launch video

Originally posted by @twoclipping on X · posted Sep 23, 2026 · curated by MotionHunt, updated Oct 15, 2026

In short

A shared prompt and build spec for a code-built promo video planned at 1920x1080, structured as 10 bars at 120 BPM with 2 seconds per bar. It runs from a word-by-word hook and a UI morph through a drop, a series of real-footage moments, and ends with a logo reveal and fade to black.

Prompt

Reconstructed

Ask me for: the product name and a one-line promise, 3 to 5 UI moments to show, one accent color, 10 to 20 real vertical clips I own, and a royalty-free song with a clear drop (e.g. Mixkit, free for commercial use).

<direction>
High-end minimal. One idea per shot, lots of empty space, one accent color, one clean sans (Geist or Inter) with tight tracking. Masked type reveals, match cuts, one smooth camera language. Real footage only, never placeholder cards. No full stops in on-screen text.
Banned: shockwave rings, particle bursts, RGB split, camera shake, lens flares, neon glows, grid floors, flashing backgrounds, bouncy easing.
</direction>

<structure>
10 bars at 120 BPM, 2 seconds each.
Bar 1: the hook lands word by word on the beats.
Bar 2: one hook word morphs into the product UI. A cursor types and clicks.
The drop: a circle opens out of the button into a dark scene.
Then one move per bar: a wall of real clips with a scan line and 3 winners, the key output as big type, a 3D carousel of real videos with floor reflections and a motion-blurred whip onto one hero clip, the hero in a phone next to a panel that flips into results, big stats on push cuts, a 3-word ticker, a logo reveal, a fade to black.
</structure>

<build>
1. One HTML file at 1920x1080. Every style is computed from time inside https://t.co/aSbWNhjgSI(t)  : no CSS animations, no timers, no state between frames.
2. Real video: extract clips to 30fps JPEG sequences with ffmpeg and swap img sources per frame. seek awaits the image decodes.
3. Analyze the song with numpy: tempo, beat grid, energy per bar, the drop. Calibrate the grid to the real kick hits. Every cut sits on a downbeat, every UI hit on a beat.
4. Render with Playwright: 3 subframes per frame at t minus, at, and plus 1/240s, then blend with ffmpeg tmix for real motion blur at 60fps.
5. Place each sound effect so its measured peak, not its file start, lands on the event. Keep the effects quiet under the music. Loudnorm to -14 LUFS.
6. Probe 20 or more frames before the full render. Fix anything cluttered, overlapping or hard to read.
</build>

<gotchas>
Never set opacity or filter on a preserve-3d element, because it flattens and both faces show. Fade its wrapper instead. Measure element positions at runtime for match cuts. Only use music and sound effects whose license allows commercial use.
</gotchas>

How it was made

The author says Opus 5.5 built the whole video as code, including picking the music, downloading the sound effects, building every frame, and syncing everything to the beat. The shared build spec calls for one HTML file at 1920x1080, ffmpeg for clip extraction and motion-blur blending, numpy for song analysis, and Playwright for rendering. No run time or cost was shared.

Tools: Claude Opus

Shot breakdown

0:00-0:02Bar 1: the hook lands word by word on the beats.
0:02-0:04Bar 2: one hook word morphs into the product UI, and a cursor types and clicks.
Not timedAfter bar 2: the drop, a circle opens out of the button into a dark scene.
Not timedA wall of real clips with a scan line and 3 winners.
Not timedThe key output as big type.
Not timedA 3D carousel of real videos with floor reflections, then a motion-blurred whip onto one hero clip.
Not timedThe hero clip in a phone next to a panel that flips into results.
Not timedBig stats on push cuts.
Not timedA 3-word ticker.
Not timedA logo reveal.
Not timedA fade to black. The author lists 11 moves for 10 bars, so exact bar placement after the drop is not stated.

Breakdown written by AI from the prompt and post, reviewed by MotionHunt.

Why it works

Cuts and UI hits are tied to a 120 BPM grid with 2-second bars, so changes land on beats.
One accent color, one clean sans with tight tracking, and no full stops keep the on-screen type calm and readable.
A banned list (camera shake, lens flares, neon glows, bouncy easing, and similar) keeps the motion restrained and smooth.
Motion blur comes from blending three subframes per frame, so movement reads smoothly at 60fps.
Real footage only, with sound effects placed on measured peaks, ties the visuals and audio together.

Remix it for your product

Make one HTML file at 1920x1080 promoting [PRODUCT]. Ask me for the product name and a one-line promise, 3 to 5 UI moments of [FEATURES] to show, one accent color, 10 to 20 real vertical clips I own, and a royalty-free song with a clear drop (license must allow commercial use). Direction: high-end minimal, one idea per shot, lots of empty space, one accent color, one clean sans (Geist or Inter) with tight tracking, masked type reveals, match cuts, one smooth camera language. Real footage only, never placeholder cards. No full stops in on-screen text. Banned: shockwave rings, particle bursts, RGB split, camera shake, lens flares, neon glows, grid floors, flashing backgrounds, bouncy easing. Structure: 10 bars at 120 BPM, 2 seconds each. Bar 1: the hook lands word by word on the beats. Bar 2: one hook word morphs into the [PRODUCT] UI showing [FEATURES]; a cursor types and clicks. The drop: a circle opens out of the button into a dark scene. Then one move per bar: a wall of real clips with a scan line and 3 winners, the key output as big type, a 3D carousel of real videos with floor reflections and a motion-blurred whip onto one hero clip, the hero in a phone next to a panel that flips into results, big stats on push cuts, a 3-word ticker, a logo reveal, a fade to black. Build rules: every style computed from time t with no CSS animations, timers, or state between frames. Extract clips to 30fps JPEG sequences with ffmpeg and swap img sources per frame, awaiting decodes on seek. Analyze the song with numpy for tempo, beat grid, energy per bar, and the drop; calibrate the grid to real kick hits; every cut on a downbeat, every UI hit on a beat. Render with Playwright at t-1/240, t, and t+1/240 per frame, then blend with ffmpeg tmix for 60fps motion blur. Place each sound effect so its measured peak lands on the event, keep effects quiet under the music, and loudnorm to -14 LUFS. Probe 20 or more frames before the full render and fix clutter, overlap, or hard-to-read text. Never set opacity or filter on a preserve-3d element; fade its wrapper instead. Measure element positions at runtime for match cuts.