22-second looping motion design template for an app promo

<inputs> Ask me for: one question a user asks my product and its one-line answer, two album covers, a royalty-free song around 110 BPM with a quiet intro and a hard drop (Mixkit, free for commercial use), and my logo for the ending. If I skip anything, use these defaults: "is this all code?" / "yes. every frame.", two atmospheric photos, and Mixkit "Head Bang". </inputs> <direction> A 22-second square loop, 1440x1440 at 60fps. 2D only, one continuous take. Nothing cuts: each scene grows from the one before it, and every gesture carries the camera into the next space. Each morph takes 0.8s on cubic-bezier(.45,0,.15,1). The camera zoom follows the same curve, making the shape changes feel almost invisible. Content dissolves during the second half of each glide. One gesture per scene. Look: a warm light stage (#f3f3f0 to #e3e3de), black UI, and a dark app world (#121212) tinted by the current album cover. Use one green accent (#1ed760), Geist for UI, the real macOS pointer, and soft layered shadows that grow as shapes lift. Banned: hard cuts, bouncy springs, particles, glows, zooming in and immediately back out, holds longer than 1s, anything that feels like a template. </direction> <structure> Follow the song's beats. The press lands on the drop. Generate: the cursor clicks. The pill glides into a spinner, then becomes a check. Chat: the check splits into three typing dots with goo. The left dot flies up, becomes the question bubble and types the question. The right dot flies down into the reply. Both bubbles shrink back into dots as they glide toward the center and merge with the middle dot. Play: the middle dot bends into a play triangle, one point at a time. The cursor presses it on the drop. A white button appears under the click as the dark app floods the frame around it, leaving the white shape as the play button. The camera pulls back to reveal the full now-playing screen: large cover, title, heart (liked, filling green), progress bar, controls and volume. Swipe: the cursor drags the cover sideways. The next track slides in, and the app changes its tint to match the new cover. Drag: the camera glides toward the volume slider. The cursor pulls it to max and keeps going. The bar rubber-bands, dragging the camera sideways out of the app and onto a dark dotted canvas while the camera follows the knob. Chart: the line lands and curves upward into a green chart as the number counts up. The volume knob becomes the chart's final point. Dive: the cursor clicks that point. The camera dives into it until the light stage fills the frame. Ending: an "Ask [my product]" button grows from the light, narrows into a line, then fans out into my logo (default: the Claude spark, with six copies rotating into twelve rays in Claude orange). The logo folds back into the line, which thickens into Generate. Last frame = first frame. </structure> <build> 1. One HTML canvas. Everything is computed from time inside seek(t): no timers or state carried between frames. 2. Use a camera with position and log-space zoom. Place scenes side by side in one world so every pan actually travels between them. 3. Goo: blur and alpha threshold on an offscreen layer for the split and merges. 4. Floods: grow circles from the point that caused them to the farthest corner in about 0.4s. Change the color underneath. 5. Sound: before the press, play the song through a low-pass filter so it feels like it's in the next room. Open it to full sound on the drop. Use a downloaded Mixkit SFX for every event, positioned by its measured peak. Loudnorm to -14 LUFS. 6. Render with Playwright at 60fps using 4 motion-blur subframes, and 12 for the fast pan. Scan every frame for single-frame jumps and fix them. </build> <gotchas> A handoff between two drawings will pop unless the first has fully landed. Keep the cursor attached to whatever it drags, even when that object stretches. Counters and tooltips that update every frame smear under motion blur, so swap complete values instead. </gotchas> <start> Ask me for the inputs, then show me the beat map and 6 stills (chat, play, app, drag, chart, logo) before rendering.