Morphing UI xeev voj voog

Nug kuv txog: 8 txog 12 lub xeev UI uas kuv xav kom daim duab zoo li (piv txwv li khawm, loader, player, slider, toggle, tabs, chart, command palette, toast), xim dub thiab dawb huv si lossis ib xim accent, thiab ib zaj nkauj royalty-free li ntawm 120 BPM (piv txwv li Mixkit, pub dawb rau kev siv lag luam).

Kev txav mus los ntawm theem UI Dribbble. Ib daim duab, tsis txhob txiav: txhua lub xeev yog tib yam khoom hloov pauv nws qhov loj me, lub vojvoog thiab xim thaum nws cov ntsiab lus pauv nrog qhov luv luv. Tus cursor tsav txhua qhov kev hloov pauv nrog kev nyem tiag tiag thiab rubs. Lub teeb sov-grey canvas, cov khoom dub thiab dawb, ib qho UI font huv si (Geist). Springs txhua qhov chaw, me me overshoot ntawm qhov siab tshaj plaws. Lub koob yees duab zooms yog li txhua lub xeev puv lub thav duab. Lub thav duab kawg yog thawj thav duab, yog li nws loops.
Txwv tsis pub: bouncy easing, particle bursts, glows, gradients ntawm UI chrome, mismatched icon strokes, dead time, txhua yam uas zoo li ib tug template.

120 BPM, 7 bars, muaj qee yam tshwm sim rau txhua lub suab nrov.
Khawm → loader → kuaj xyuas → kob dynamic → lub tshuab ua suab paj nruag nrog lub morph ua si / ncua → txhuam lub bar kev nce qib → nws dhau los ua lub ntim slider uas ncab thaum rub dhau qhov siab tshaj plaws → lub toggle flips ntawm lub suab nrov → lub pob qhov rooj dhau los ua lub cim qhia kua → cov tabs qhib rau hauv daim ntawv qhia uas kos nws tus kheej, nrog rau cov cuab yeej ntawm hover → nws collapses rau hauv ⌘K → hom rau lim → nkag mus → toast → rov qab mus rau lub pob.

1. Ib daim ntawv HTML, plaub fab 1440x1440. Txhua tus qauv yog suav los ntawm lub sijhawm hauv seek(t): tsis muaj CSS hloov pauv, tsis muaj timers, tsis muaj lub xeev nqa ntawm cov thav duab.
2. Cov caij nplooj ntoos hlav yog cov lus teb kaw-daim ntawv. Tus nqi uas hloov lub hom phiaj ntau zaus yog qhov sib npaug ntawm ib lub caij nplooj ntoos hlav rau ib qho kev hloov pauv, yog li nws tseem yog lub luag haujlwm dawb huv ntawm lub sijhawm.
3. Ob sab ntug ntawm lub cim qhia tab caij cov caij sib txawv, yog li ntug sab saud ncab ua ntej ntawm ntug tom qab. Tib yam li ntawd rau lub pob toggle.
4. Kev rub yog kev tswj hwm ncaj qha: thaum tus cursor raug tuav, tus nqi raug suav los ntawm nws qhov chaw. Thaum tso nws rov qab los ntawm qhov twg nws nyob.
5. Tshawb xyuas zaj nkauj nrog tus lej numpy rau lub beat grid thiab pib ntawm lub downbeat. Muab txhua lub suab UI tso rau ntawm nws qhov siab tshaj plaws uas ntsuas tau.
6. Tsim nrog Playwright: 4 lub subframes ib lub thav duab, sib xyaw nrog ffmpeg tmix rau kev txav tsis meej ntawm 60fps.
7. Ua ib daim duab rau ib lub suab ua ntej ua tiav daim duab tag nrho. Kho txhua yam uas tsis nyob hauv daim duab, nqaim lossis nyuaj nyeem.

Tsis txhob muab qhov will-change rau txhua yam uas lub koob yees duab ntsuas lossis cov ntawv ua rau tsis meej. Cov ntawv uas hloov pauv hauv lub thawv hloov pauv xav tau nws lub sijhawm nkag thiab tawm lossis nws sib tshooj. Ua kom lub thav duab kawg zoo ib yam li thawj, qhov chaw cursor thiab qhov ceev suav nrog, lossis lub voj voog stutters.

Nug kuv txog cov tswv yim, tom qab ntawd qhia kuv daim ntawv teev npe ntawm lub beat grid ua ntej koj sau cov lej.

Ask me for: 8 to 12 UI states I want the shape to become (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), pure black and white or one accent color, and a royalty-free song around 120 BPM (e.g. Mixkit, free for commercial use).

Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Light warm-gray canvas, black and white components, one clean UI font (Geist). Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. The last frame is the first frame, so it loops.
Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template.

120 BPM, 7 bars, something happens on every beat.
Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it becomes a volume slider that stretches when dragged past max → a toggle flips on the beat → the knob becomes a liquid tab indicator → the tabs open into a chart that draws itself, with a tooltip on hover → it collapses into ⌘K → type to filter → enter → toast → back to the button.

1. One HTML file, square 1440x1440. Every style is computed from time inside seek(t): no CSS transitions, no timers, no state carried between frames.
2. Springs are closed-form step responses. A value that changes target many times is the sum of one spring per change, so it stays a pure function of time.
3. The tab indicator's two edges ride different springs, so the leading edge stretches ahead of the trailing one. Same trick for the toggle knob.
4. Drags are direct manipulation: while the cursor is held, the value is computed from its position. On release it springs back from wherever it was.
5. Analyze the song with numpy for the beat grid and start on a downbeat. Place every UI sound by its measured peak.
6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps.
7. Render one frame per beat before the full render. Fix anything off the grid, cramped or hard to read.

Never put will-change on anything the camera scales or the text renders blurry. Text that swaps inside a morphing container needs its own enter and exit timing or it overlaps. Make the last frame identical to the first, cursor position and speed included, or the loop stutters.

Ask me for the inputs, then show me the state list on the beat grid before you write any code.

Cov lus qhia tau los ntawm tus ncej @demonugc.