Usoro steeti Morphing UI

Jụọ m maka: 8 ruo 12 UI steeti Achọrọ m ka ọdịdị ahụ bụrụ (dịka ọmụmaatụ bọtịnụ, loader, player, slider, toggle, tabs, chart, command palette, toast), agba ojii na ọcha dị ọcha ma ọ bụ otu olu, na egwu na-enweghị royalty ihe dịka 120 BPM (dịka ọmụmaatụ Mixkit, n'efu maka ojiji azụmaahịa).

Mmegharị UI nke ọkwa Dribbble. Otu ọdịdị, nke a na-anaghị ebipụ: ọnọdụ ọ bụla bụ otu ihe na-agbanwe nha ya, radius na agba ya ebe ọdịnaya ya na-agbanwe na obere blur. Kọọsụ na-eduzi mgbanwe ọ bụla site na ịpị na ịdọrọ n'ezie. Kanvas na-ekpo ọkụ-isi awọ dị mfe, ihe mejupụtara ojii na ọcha, otu mkpụrụedemede UI dị ọcha (Geist). Na-agbapụta ebe niile, obere ihe karịrị akarị. Igwefoto na-eme ka ọ zoo ka steeti ọ bụla jupụta na fremu ahụ. Frame ikpeazụ bụ fremu mbụ, yabụ ọ na-agagharị.
Amachibidoro: mbelata ụda, mgbawa nke ihe ndị dị n'ime ya, na-enwu gbaa, na-agbanwe agbanwe na chrome UI, akara ngosi na-adabaghị adaba, oge adịghị mma, ihe ọ bụla yiri ndebiri.

120 BPM, ogwe asaa, ihe na-eme na ụda ọ bụla.
Bọtịnụ → ihe na-ebuga → lelee → agwaetiti dị ike → onye ọkpụkpọ egwu nwere egwu egwu/kwụsịtụ → hichaa ogwe ọganihu → ọ na-aghọ ihe mmịfe olu nke na-agbatị mgbe a dọkpụrụ ya gafere oke → ihe ntụgharị na-atụgharị na ụda → ihe mkpịsị aka ahụ na-aghọ ihe ngosi taabụ mmiri mmiri → taabụ ndị ahụ na-emepe n'ime chaatị nke na-adọta onwe ya, yana ndụmọdụ ngwaọrụ na hover → ọ na-adaba n'ime ⌘K → ụdị iji nzacha → tinye → achịcha → laghachi na bọtịnụ ahụ.

1. Otu faịlụ HTML, square 1440x1440. A na-agbakọ ụdị ọ bụla site na oge dị n'ime search(t): enweghị mgbanwe CSS, enweghị ihe ngụ oge, enweghị ọnọdụ ebu n'etiti fremu.
2. Isi iyi bụ nzaghachi nzọụkwụ mechiri emechi. Uru nke na-agbanwe ihe mgbaru ọsọ ọtụtụ oge bụ ngụkọta nke otu isi iyi kwa mgbanwe, yabụ ọ na-anọgide na-arụ ọrụ dị ọcha nke oge.
3. Akụkụ abụọ nke ihe ngosi taabụ na-agba mmiri dị iche iche, yabụ akụkụ mbụ na-agbatị tupu nke na-esote. Otu aghụghọ ahụ maka bọtịnụ ntụgharị.
4. Dragọ bụ njikwa kpọmkwem: ebe a na-ejide kọsọ, a na-agbakọ uru site n'ọnọdụ ya. Mgbe ewepụrụ ya, ọ na-esi n'ebe ọ bụla ọ dị laghachi azụ.
5. Jiri numpy nyochaa egwu ahụ maka usoro ịkụ ọkpọ wee malite na ụda dị ala. Tinye ụda UI ọ bụla dabere na oke ya.
6. Jiri Playwright mee ihe ngosi: frame anọ n'ime otu fremu, agwakọtara ya na ffmpeg tmix maka mmegharị ihe na 60fps.
7. Mee otu fremu maka otu ọkpọ tupu eserese ahụ zuru oke. Hazie ihe ọ bụla dị na grid, ma ọ bụ nke dị warara ma ọ bụ nke siri ike ịgụ.

Etinyela mgbanwe uche n'ihe ọ bụla igwefoto na-eme ka ọ dị nro ma ọ bụ ederede ahụ mee ka ọ ghara ịdị nkọ. Ederede nke na-agbanwe n'ime akpa na-agbanwe agbanwe chọrọ oge nke ya ịbanye na ọpụpụ ma ọ bụ ya apụta ma ọ bụ ya apụta. Mee ka etiti ikpeazụ yie nke mbụ, tinyekwa ọnọdụ kọsọ na ọsọ, ma ọ bụ akaụntụ ahụ na-azọ ụkwụ.

Jụọ m maka ihe ndị dị mkpa, wee gosi m ndepụta steeti dị na grid tupu ị dee koodu ọ bụla.

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.

E si na ya nweta ndụmọdụ ahụ ozi @demonugc.