UI Morph Loop

What it is

The Dribbble-style UI motion loop that took over X in late September 2026: a single element never cuts away. A cursor clicks the button, it shrinks into a spinner, turns into a check, grows into a music player whose play icon splits into pause, the progress bar is dragged and becomes a volume slider that stretches when pulled past the end, a toggle flips with a stretchy knob, the toggle opens into a chart that draws itself with a tooltip, and the chart collapses into a command palette where typing filters the list. The camera zooms so every state fills the frame and the last frame is the first. Pick the sequence of states, your four colours, the button and notification text, how springy it feels, and whether the cursor, labels and motion blur show.

Reuse it in your own idea

• Cut it to your music: set cycleSeconds to six bars of your track and every state change lands on a beat.
• End a launch video on it: let Kinetic Title Reveal put your product name over the last state, or replace the button text with your call to action.
• Use the Launch sequence with your accent colour as a looping hero on a landing page or a Product Hunt gallery video.
• Copy springStep for your own UI animation: sum one spring per change of target and any value stays a pure function of time.

Which part is reusable

src/ui-morph-loop.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

• The UI states are fixed drawings (a music player, a chart, a command list). Changing what they show means editing their draw functions; only the button and notification text are parameters.
• It does not play sound. The original trend syncs clicks and whooshes to music; add your own audio in the edit.
• Single-line, left-to-right text. Long labels are shrunk to fit rather than wrapped.