MOTION DESIGN / CODE VIDEO
One Shape — A Continuous UI Loop.
One shape follows a 120 BPM beat through twelve interface states, then returns to where it began.
Rhythm and structure
The music is House Vibes by Alejandro Magaña from Mixkit, measured at 120.01 BPM. The sequence starts on the downbeat of bar 8 and uses seven bars, or 28 beats. Every beat has a click, drag, morph or input. Interface sounds are aligned to the beat using their measured peaks.
One shape, one highlight
The scene contains one outer shape and one inner highlight. That highlight becomes a progress bar, volume fill, switch thumb, tab indicator, selected command, notification icon and button arrow. The two edges of the tab indicator and switch thumb use different springs: the leading edge arrives first and the trailing edge stretches behind it.
Every frame comes from time
All styles are calculated from time in seek(t), without CSS transitions or timers. Springs use a closed-form step response. During a drag, the value follows the cursor directly; on release, it springs back from its current position. Colors interpolate in OKLab to avoid muddy transitions between orange and black.
Rendering and checks
Playwright renders four subframes per frame. FFmpeg tmix combines them into motion blur at 60fps. Before the full render, a still frame is produced for every beat to check spacing, occlusion and readability. Changes across the loop seam are comparable to those between adjacent frames, with continuous cursor position and velocity.
Assets and credits
The original English prompt was shared publicly by zero (@twoclipping) for a continuous interface-morphing example. The prompt below is this site’s English rendering of its Chinese adaptation. Music comes from Mixkit under its free license; interface sound effects are synthesized. Track details, data and text shown in the film are demonstration content.
PROMPT / ENGLISH
English prompt
Translated from this site’s Chinese adaptation of the original English prompt. Claude first asks for the interface states, colors and music, then places the states on a beat grid for confirmation before writing code.
Inputs for this film: 12 states in the sequence described above; black and white with one signal-orange accent, #FF5A1F; House Vibes from Mixkit.
[INPUTS] First ask me for: 8–12 interface states for the shape to become, such as a button, loader, player, slider, switch, tabs, chart, command palette or notification; whether to use pure black and white or a single accent color; and a royalty-free track around 120 BPM, such as one from Mixkit that allows free commercial use. [DIRECTION] Dribbble-quality interface motion. One shape, no cuts: every state is the same element changing its size, corner radius and color. Its content changes through a brief blur. A cursor drives every transition with realistic clicks and drags. Use a light warm-gray canvas, black-and-white components and a single clean interface font, Geist. Use springs throughout, with at most a little overshoot. The camera zooms so each state fills the frame. The last frame is the first frame, creating a loop. Avoid bouncy easing, particle bursts, glow, gradients on the interface shell, icons with inconsistent stroke widths, empty beats without action and anything that looks like a template. [STRUCTURE] 120 BPM, seven bars, with something happening on every beat. Button → loader → checkmark → Dynamic Island → music player with a morphing play/pause icon → drag the progress bar → progress bar becomes a volume slider that stretches when dragged past its maximum → switch flips on the beat → switch thumb becomes a liquid tab indicator → tabs expand into a self-drawing chart with a hover tooltip → collapse into a ⌘K command palette → type to filter → Enter → notification → back to the button. [PRODUCTION] 1. A single HTML file, square at 1440×1440. Calculate every style from time in seek(t): no CSS transitions, no timers and no state carried between frames. 2. Springs use a closed-form step response. When a value changes target more than once, sum the spring response from each change so it always remains a pure function of time. 3. Use different springs for the two edges of the tab indicator, making the leading edge stretch ahead of the trailing edge. Apply the same technique to the switch thumb. 4. Dragging is direct manipulation: while the cursor is held down, derive the value from its position; on release, spring back from the current position. 5. Analyze the track with numpy to obtain a beat grid and start on a downbeat. Align every interface sound by its measured peak. 6. Render with Playwright: four subframes per frame, mixed with ffmpeg tmix for motion blur, output at 60fps. 7. Before the full render, produce one frame per beat. Fix anything off the beat, crowded or hard to read. [NOTES] Do not add will-change to any element the camera scales, or text will become blurry. Text switching inside the morphing container needs separate entrance and exit timing to prevent overlap. The last frame must match the first exactly, including the cursor’s position and velocity, or the loop will stutter. [START] First ask me for the inputs above. Before writing any code, show me the state list arranged on the beat grid.