Morphing UI loop driven by a clicking cursor
<direction> Make a 14-second square video (1440x1440, 30 fps): a seamless UI-motion loop, all drawn, with no cuts. One rounded shape keeps morphing from one interface component into the next: button, loader, check, island pill, music player, volume slider, toggle, tabs, chart, search pill, command palette, toast, and back to the button. An on-screen cursor drives every change and really clicks and drags. The last frame must match the first so it loops. The look is clean and calm: a lavender canvas, deep-ink and white components and one clean UI font. The only colour comes from my logo, which stands in for an album cover. Something happens on nearly every beat at about 120 BPM. Avoid glows, gradients on the UI chrome, particles, bouncy easing, cuts and voice. All on-screen words below are examples to replace with mine. Keep each one about the same length so the layout holds. </direction> <structure> 0.0-0.6 s: a deep-ink pill button "Open app" (about 640x200 px, 62 px white type). The cursor glides in from the lower right and presses it at 0.46 s, and the button dips to 96%. 0.6-1.25 s: it shrinks into a 230 px circle with a white spinning arc, then a white check draws itself. 1.25-1.75 s: the circle stretches into an island pill (about 860x210) with my logo as a small rounded square on the left and five bouncing white waveform bars on the right. 1.75-3.7 s: the island opens into a deep-ink player card (about 990x630, 72 px corners). The logo grows into a 224 px cover as a shared element, next to the title "Ideas in motion" and "[your site]" in soft lavender. Below them sit a thin white progress bar with a knob, "01" and "03" at its ends, and previous / pause / next icons. The cursor clicks pause, which becomes play through a quick blur, then clicks it back to pause. It then grabs the knob, which grows 25%, and drags it from about a third to most of the way. 3.7-5.25 s: the card collapses into a wide volume pill (about 1070x186) with a speaker icon. The cursor drags the level almost to zero, back up and past the maximum. The whole pill stretches to the right like rubber, up to about 170 px, then springs back with one small wobble when released. 5.25-6.25 s: it becomes a toggle (about 520x260). The knob appears grey in the middle, then flips on, off, on, off with a press each time. On is a deep-ink track with the white knob on the right. Off is a pale #E9E4F2 track with the knob on the left. 6.25-7.25 s: the knob grows into the deep-ink indicator of a white tab bar "Pick" / "Describe" / "Export". The cursor clicks "Describe", then "Export". The indicator stretches ahead and catches up, and the label under it turns white. 7.25-9.7 s: the tab bar opens into a white chart card (about 1100x840), with the tabs moved to the top and the indicator now a small pill. A big bold number rolls "01", "02", "03" with a slight blur over the caption "Refine in words, then export". Meanwhile a deep-ink line draws itself left to right in about half a second over a lavender area and four hairlines. The cursor sweeps along the line with a deep-ink tooltip reading "01", "02", "03" along the way, followed by a dot and a dashed guide. Clicking "Describe" rolls the number to "02" with the caption "Describe your idea", and the curve morphs into a lower, wavier one. 9.7-10.1 s: the card collapses into a white search pill with a search icon, "Edit in words" and "⌘K" on the right. 10.1-11.75 s: the pill opens into a command palette (about 1060x830). At the top is a search row with the placeholder "Describe your idea" and a blinking caret, then a hairline. Five rows follow, entering 40 ms apart, each with a lavender icon tile: "Pick a template ⌘N", "MP4 export ⌘E", "Ideas in motion", "Live preview", "Your AI motion designer ↵". The word "motion" is typed one letter per keystroke, about 0.1 s apart and slightly uneven, with the caret solid while typing. The typed word must match exactly two rows. Rows that no longer match blur away, the two matches slide up, the panel springs shorter and the view pushes in. A lavender highlight sits on the first match, moves down to "Your AI motion designer" and turns deep ink on Enter. 11.75-12.6 s: the palette folds through a lighter tint into a deep-ink toast (about 970x180) with a white check and "Your AI motion designer", as the view eases back. 12.6-14 s: the toast's text blurs into "Open app" and the pill shrinks back to the opening button. It holds to the end, with the cursor resting at the lower right, so the last frame matches the first. </structure> <composition> The canvas is lavender #F0EDFF with a soft white glow just above the middle and a faint vignette. Components are deep ink #1C0B5D or white panels #FFFFFF. Muted text is #6B6385, and hairlines and the toggle's off state are #E9E4F2. All panels cast soft, long drop shadows tinted with the ink. The only colour accents are my logo's colours, pink #FB2D89 and orange #FE9117 here, so use the colours of your logo. The logo appears as the island's small rounded square and as the player's cover. Set all text in Geist, and the player's small numbers in Geist Mono. The cursor is a near-black arrow (#0D0B1E) with a white outline. Everything stays centred on the canvas. </composition> <techniques> The one shape changes width, height, corner radius and colour on tight springs: about 0.25 s to settle, at most about 1% overshoot. Whatever sits inside each state fades in and out over 0.1 s with a 10 px blur, so text never overlaps while the container resizes. Text swaps, like pause to play and the toast text back to "Open app", also go through a quick blur. The cursor moves on smooth curves and shrinks about 14% while its button is held. The logo moves from the island into the player cover as a shared element. The volume pill stretches like rubber when pulled past the maximum, then springs back with one small wobble. The toggle knob's leading edge rides a stiffer spring than its trailing edge, so the knob stretches as it travels. The tab indicator stretches ahead and catches up the same way. The chart's numbers roll with a slight blur, the line draws itself left to right in about 0.5 s, and the curve morphs into its new shape on the tab change. Palette rows enter 40 ms apart, and filtered-out rows blur away. The camera stays put, except for a gentle 17% push-in while the command palette is short, easing back as the toast forms. </techniques> <music> Generate an upbeat instrumental rockabilly / country-rock track in E-flat at about 120 BPM, exactly as long as the video. It has a boom-chick groove, with the kick on the beat and the snare on the eighths between, and twangy lead guitar licks over bass and drums. It starts at full energy on the first frame and stays steady. Lay the cursor actions and morphs on its beat grid. At about 13.4 s the band stops on one hit with a crash and lets it ring, so the loop comes round in time. </music> <sound> Sound effects composed for the picture, on top of the music: - Every cursor press clicks with a short bright tick and a small pitched ring. Every release gives a softer, higher tick. Both are panned gently with the cursor. - A tiny blip as the check appears. - A reverse cymbal swelling into the "Export" tab click. - A soft low boom as the chart card opens. - The search is typed on a typewriter: two keys for ⌘K, one clack per typed letter, a lighter key for the arrow down, and a heavy Enter with a small typewriter bell. - A carriage-return zip as the palette folds into the toast, ending in a clunk as the toast lands. - A deep boom and a splash under the final stop. The music's top end dips for a moment under each click and key so they read. No voice. Mix to about -14 LUFS, with true peak below -1 dBTP. </sound> <references> Fluid single-shape interface morph loops like product UI showreels and dynamic-island-style transitions, where one container keeps reshaping into the next component in a single continuous shot. </references>
