Gushyiraho: Uburyo bwo guhindura imiterere ya UI

Mumbaze: imiterere ya UI kuva kuri 8 kugeza kuri 12 Ndashaka ko ishusho iba (urugero: buto, loader, player, slider, toggle, tabs, chart, command palette, toast), umukara n'umweru gusa cyangwa ibara rimwe ry'ubuhanga, n'indirimbo idafite agaciro ka 120 BPM (urugero: Mixkit, ubuntu ku bucuruzi).

Inzira ya UI yo ku rwego rwa Dribbble. Ishusho imwe, ntizigera icibwa: buri state ni ikintu kimwe gihindura ingano, radius n'ibara byayo mu gihe ibikubiye muri yo bihinduranya hakoreshejwe ibara rigufi. Indanga iyobora buri mpinduka hamwe no gukanda nyabyo. Canvas yoroheje ishyushye-imvi, ibice by'umukara n'umweru, inyuguti imwe isukuye ya UI (Geist). Irasohoka ahantu hose, ni gato cyane. Kamera irakora cyane kugira ngo buri state yuzuze frame. Iframe ya nyuma ni frame ya mbere, bityo irazunguruka.
Byabujijwe: gukurura imirasire, guturika kw'uduce, urumuri, imirasire kuri chrome ya UI, imirasire y'inyuguti idahuye, igihe cyapfuye, ikintu cyose gisa n'icyitegererezo.

BPM 120, imigozi 7, hari ikintu kibaho kuri buri muvuduko.
Akabuto → umukiliya → kugenzura → icyerekezo gihindagurika → icyuma gicuranga umuziki gifite uburyo bwo gucuranga/guhagarika → gukaraba umurongo w'iterambere → kiba icyuma gisunika ijwi kigenda kirambuka iyo gikuruwe hejuru ya max → guhindukira ku murongo → akabuto kaba ikimenyetso cy'akantu k'amazi → utubuto dufunguka mu mbonerahamwe yishushanya, hamwe n'agasanduku k'ibikoresho kuri hover → bigwa muri ⌘K → andika kugirango uyungurure → shyiramo → toast → subira kuri buto.

1. Dosiye imwe HTML, kare 1440x1440. Buri buryo bubarwa uhereye ku gihe imbere muri seek(t): nta mpinduka CSS, nta gihe, nta miterere igendanwa hagati y'amadirishya.
2. Impinduka ni ibisubizo by'intambwe zifunze. Agaciro gahinduka intego inshuro nyinshi ni igiteranyo cy'impinduka imwe kuri buri mpinduka, bityo iguma ari imikorere y'igihe gusa.
3. Impande ebyiri z'ikimenyetso cya tab zigenda ku masoko atandukanye, bityo impande ibanziriza imbere y'inyuma. Ni kimwe no ku gice cyo gukururaho.
4. Gukurura ni uguhindura ibintu mu buryo butaziguye: mu gihe indangare iba ihari, agaciro kayo kabarwa uhereye aho yari iri. Iyo irekuwe igaruka aho yari iri hose.
5. Sesengura indirimbo ukoresheje numpy kugira ngo ubone grid y'indirimbo hanyuma utangire kuri downbeat. Shyira buri jwi rya UI ukurikije uburebure bwaryo.
6. Gushushanya hakoreshejwe Playwright: uduce duto 4 kuri buri gasanduku, bivanze na ffmpeg tmix kugira ngo habeho ihinduka ry'ishusho kuri 60fps.
7. Shyiraho ishusho imwe kuri buri gishushanyo mbere yuko igaragara neza. Kosora ikintu cyose kiri ku rukuta, cyaba gito cyangwa kigoye gusoma.

Ntukigere ushyira ubushake ku kintu icyo ari cyo cyose kamera ipima cyangwa inyandiko ihindura mu buryo butagaragara. Inyandiko ihinduranya mu gikoresho gihinduranya ikenera igihe cyayo cyo kwinjira no gusohoka cyangwa irahuza. Kora fremu ya nyuma isa n'iya mbere, aho cursor iherereye n'umuvuduko birimo, cyangwa stutters za loop.

Mbaza ibitekerezo, hanyuma unyereke urutonde rw'imiterere y'amakuru ari kuri beat grid mbere yuko wandika kode iyo ari yo yose.

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.

Itangazo ryavuye kuri ubutumwa @demonugc.