One-take product-launch UI film morphing from prompt bar to toast

Ask me for: a one-word product name for the wordmark, one accent color, and a royalty-free track around 120 BPM (e.g. Mixkit, free for commercial use). </inputs> <direction> Product-launch UI motion in one continuous take. One shape tells the whole story: a prompt bar becomes a button, the button becomes a progress ring, the ring becomes a preview window, the window fills the screen, then shrinks into a toast and back into the prompt bar. No cuts, no fades between scenes: objects transform. A cursor triggers every change with real clicks. Warm off-white canvas, black UI, one accent color, Inter for UI and the wordmark. Springs everywhere with only a slight overshoot. Zoom the camera so each moment fills the square. Banned: crossfades, gradients on UI, particles, glows, bouncy easing, dead beats, anything that feels like a template. </direction> <structure> 120 BPM, 24 beats, something happens on every beat. Type the request into the prompt bar → click send → the bar collapses into a black circle → a progress ring fills in four steps while four chips spring out (concept, storyboard, motion, sound) → the chips fly into a timeline and the circle becomes a preview window → a playhead sweeps the clips → inside the preview an orbit draws itself, a planet starts moving and the wordmark rises letter by letter from a mask line → the preview fills the screen → the letters drop away, the planet flies into a toast and becomes its checkmark → "Rendered in code · 60 fps" → the toast turns back into an empty prompt bar. Last frame = first frame. </structure> <build> 1. One HTML file with a 1440x1440 canvas. Draw everything inside seek(t): no CSS transitions, timers or state carried between frames. 2. Use closed-form spring step responses. When a value changes target several times, add one spring per change so it stays a pure function of time. 3. The main shape is one rounded rect whose width, height, radius, position and color are each a chain of springs. 4. Typing is derived from time: characters shown = floor(progress × length), with a caret that blinks only when idle. 5. Find the beat grid of the track, start on a downbeat and place every click, pop and chime on its measured peak. 6. Render with Playwright at 60 fps, then encode H.264 CRF 16 and loudnorm to -14 LUFS. 7. Render one still per beat first. Fix anything cramped, off-grid or hard to read before the full render. </build> <gotchas> Text inside a morphing shape needs its own clip and separate enter/exit timing. Text swaps need their own fade so they never overlap. The cursor must end at the exact position it started, or the loop will stutter. </gotchas> <start> Ask me for the inputs, then show me the beat map and 4 stills (prompt, progress, preview, toast) before writing the full film.