Saitawa: Tsarin yanayin UI na Morphing

Tambaye ni: Jihohin UI 8 zuwa 12 Ina so siffar ta zama (misali maɓalli, mai lodawa, mai kunnawa, slider, toggle, tabs, chart, command palette, toast), launin baƙi da fari mai tsabta ko launin lafazi ɗaya, da kuma waƙa mara royalty kusan 120 BPM (misali Mixkit, kyauta don amfanin kasuwanci).

Motsin UI na matakin Dribbble. Siffa ɗaya, ba a taɓa yankewa ba: kowace yanayi iri ɗaya ce ke canza girmanta, radius da launinta yayin da abubuwan da ke cikinta ke canzawa da ɗan gajeren haske. Siginar kwamfuta tana jagorantar kowane canji tare da dannawa da jan gaske. Zane mai haske mai launin toka-launin ɗumi, abubuwan baƙi da fari, font ɗaya mai tsabta na UI (Geist). Yana buɗe ko'ina, ƙaramin abu mai yawa a mafi yawan lokuta. Kyamarar tana zuƙowa don haka kowace jiha ta cika firam ɗin. Firam ɗin ƙarshe shine firam na farko, don haka yana madauki.
An haramta: sassautawa, fashewar barbashi, walƙiya, gradients akan UI chrome, alamun da ba su dace ba, lokacin da ya ƙare, duk wani abu da yayi kama da samfuri.

120 BPM, sanduna 7, wani abu yana faruwa a kowane bugun.
Maɓalli → mai lodawa → duba → tsibiri mai ƙarfi → mai kunna kiɗa tare da yanayin wasa/dakatarwa → goge sandar ci gaba → ya zama mai zamewa mai girma wanda ke shimfiɗa lokacin da aka ja shi sama da matsakaicin → juyawa yana juyawa akan bugun → maɓallin ya zama alamar shafin ruwa → shafuka suna buɗewa zuwa jadawalin da ke jawo kansa, tare da jagorar kayan aiki akan hawa → yana rushewa zuwa ⌘K → nau'in don tacewa → shigar → gasa → komawa maɓallin.

1. Fayil ɗin HTML guda ɗaya, murabba'i 1440x1440. Ana ƙididdige kowane salo daga lokaci a cikin search(t): babu sauye-sauyen CSS, babu masu ƙidayar lokaci, babu yanayin da ake ɗauka tsakanin firam.
2. Maɓuɓɓugan ruwa amsoshi ne na matakai a rufe. Ƙimar da ke canzawa sau da yawa ita ce jimlar bazara ɗaya a kowace canji, don haka ta kasance cikakkiyar aikin lokaci.
3. Gefuna biyu na alamar shafi suna tafiya a kan maɓuɓɓugan ruwa daban-daban, don haka gefen gaba yana miƙewa a gaban wanda ke biye. Wannan dabarar don maɓallin juyawa.
4. Jawowa magudanar kai tsaye ce: yayin da ake riƙe da siginar, ana ƙididdige ƙimar daga matsayinta. Lokacin da aka sake shi, yana fitowa daga duk inda yake.
5. Yi nazarin waƙar da numpy don bugun grid ɗin kuma fara da downbeat. Sanya kowane sautin UI daidai da kololuwar da aka auna.
6. Yi wasa da Playwright: ƙananan firam 4 a kowane firam, an haɗa su da ffmpeg tmix don motsi blur a 60fps.
7. Yi amfani da firam ɗaya a kowace bugun kafin cikakken aikin. Gyara duk wani abu da ke kan grid, ko mai kunci ko mai wahalar karantawa.

Kada a taɓa sanya canjin nufin a kan duk wani abu da kyamara ke aunawa ko kuma rubutun ya zama mara haske. Rubutun da ke canzawa a cikin akwati mai canzawa yana buƙatar lokacin shiga da fita nasa ko kuma ya yi karo. Sanya firam na ƙarshe yayi kama da na farko, an haɗa matsayin siginar da saurin, ko kuma madaukin ya yi ta stuttering.

Tambaye ni abubuwan da aka bayar, sannan ka nuna min jerin jihohi a kan grid kafin ka rubuta kowace lamba.

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.

An ɗauko umarni daga rubutu @demonugc.