Gurnaýar: UI ýagdaýlary arkaly şekiliň üýtgemegi

Menden soraň: Şekiliň nähili bolmagyny isleýän 8-12 UI ýagdaýy (meselem, düwme, ýükleýji, oýnatgyç, sürgüç, aç-açan, tablar, diagramma, buýruk palitrasy, tost), arassa gara we ak ýa-da bir aksent reňki we takmynan 120 BPM royaltisiz aýdym (meselem, Mixkit, täjirçilik maksady bilen mugt).

Dribbble derejesindäki interfeýs hereketi. Bir görnüş, hiç haçan kesilmeýär: her ýagdaý şol bir element bolup, onuň ölçegini, radiusyny we reňkini üýtgedýär, mazmuny bolsa gysga bulanyklyk bilen çalşýar. Kursor her üýtgeşmäni hakyky basyşlar we süýräp hereketler bilen amala aşyrýar. Açyk ýyly çal reňkli kanwas, gara we ak komponentler, bir arassa interfeýs şrifti (Geist). Ähli ýerde ýaýlar, iň köp kiçijik bir öňe çykma. Kamera her ýagdaý kadry doldurmak üçin zumlaýar. Soňky kadr ilkinji kadr, şonuň üçin ol aýlanýar.
Gadagan edildi: bökýän ýumşatma, bölejikleriň partlamasy, ýalpyldawuklyk, UI hromynda gradientler, gabat gelmeýän nyşan şekiljikleri, öli wagt, şablona meňzeş islendik zat.

120 BPM, 7 takt, her ritmde bir zatlar bolup geçýär.
Düwme → ýükleýji → barlag → dinamiki ada → oýnatma/sagalma morfly saz oýnatyjy → ösüş panelini arassalamak → ol maksimumdan geçende uzalýan ses slaýderine öwrülýär → ritmde açar öwrülýär → düwme suwuklyk tab görkezijisine öwrülýär → tablar öz-özüni çekýän diagramma açylýar, göterilende gurallar üçin maslahat berilýär → ol ⌘K → süzgüçlemek üçin ýaz → giriş → tost → düwmä gaýdyp gelýär.

1. Bir HTML faýly, kwadrat 1440x1440. Her stil seek(t)-niň içindeki wagtdan hasaplanýar: CSS geçişleri, taýmerler, kadrlaryň arasynda geçirilýän ýagdaý ýok.
2. Ýaýlar ýapyk görnüşli ädim jogaplarydyr. Nyşany köp gezek üýtgedýän gymmatlyk her üýtgeşme üçin bir ýaýyň jemidir, şonuň üçin ol wagtyň arassa funksiýasy bolup galýar.
3. Tab görkezijisiniň iki gyrasy dürli ýazlarda hereket edýär, şonuň üçin öňdäki gyra yzdaky gyradan öňe uzalýar. Açma düwmesi üçin hem şol bir usul.
4. Sürüklemek göni manipulýasiýadyr: kursor saklananda, gymmatlyk onuň ýerleşýän ýerinden hasaplanýar. Goýberilende, ol nirede bolsa-da, şol ýerden yzyna gaýdýar.
5. Aýdymy ritm toruna görä numpy bilen seljeriň we aşaky ritmden başlaň. Her bir UI sesini onuň ölçenen pikine görä ýerleşdiriň.
6. Playwright bilen render: her kadrda 4 kiçi kadr, 60 kadr/sek tizlikde hereket bulanyşygy üçin ffmpeg tmix bilen garyşdyrylan.
7. Doly renderden öň her bir urgy üçin bir kadr render ediň. Tordan daşardaky, dar ýa-da okamak kyn bolan islendik zady düzediň.

Kameranyň ölçeginiň üýtgemegi ýa-da tekstiň bulanyk bolmagy ýaly zatlara hiç haçan "will change" goýmaň. Özgerýän konteýneriň içinde çalşyp bolýan tekstiň öz giriş we çykyş wagty bolmaly ýa-da üst-üste düşýän bolsa. Soňky kadry birinji kadr bilen deň ediň, kursoryň ýerleşýän ýeri we tizligi goşulan bolsa, aýlaw kesiler.

Giriş maglumatlaryny soraň, soňra islendik kod ýazmazdan öň maňa ritm torundaky ýagdaý sanawyny görkeziň.

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.

Sorag şu ýerden alyndy poçta @twoclipping.