Konfiguratzen: UI egoeren itxuraldaketa begizta

Eskatu iezadazu: Formak izan dezan nahi ditudan 8 eta 12 UI egoera (adibidez, botoia, kargatzailea, erreproduzitzailea, graduatzailea, txandakatzailea, fitxak, grafikoa, komando paleta, tostada), zuri-beltza edo azentu kolore bat, eta 120 BPM inguruko errege-eskubiderik gabeko abesti bat (adibidez, Mixkit, erabilera komertzialerako doakoa).

Dribbble mailako UI mugimendua. Forma bakarra, inoiz moztu gabea: egoera bakoitza elementu bera da, bere tamaina, erradioa eta kolorea eraldatzen dituena, bere edukia lausotze labur batekin aldatzen den bitartean. Kurtsore batek aldaketa guztiak gidatzen ditu klik eta arrastatze errealekin. Gris epel koloreko mihise argia, osagai zuri-beltzak, UI letra-tipo garbi bakarra (Geist). Malgukiak nonahi, gehienez gainditze txiki bat. Kamerak zooma egiten du egoera bakoitzak fotograma bete dezan. Azken fotograma lehenengoa da, beraz, begizta egiten du.
Debekatuta: errebote-erreakzionamendua, partikulen eztandak, distirak, Chrome-ko UI-ko gradienteak, ikonoen trazu desegokiak, denbora hila, txantiloi baten itxura duen edozer.

120 BPM, 7 konpas, zerbait gertatzen da taupada bakoitzean.
Botoia → kargatzailea → egiaztatu → irla dinamikoa → musika erreproduzitzailea erreproduzitu/pausatu morfologia batekin → aurrerapen barra mugitu → bolumen graduatzaile bihurtzen da, maximoa gainditzen denean luzatzen dena → etengailu bat erritmoan aldatzen da → botoia fitxa likidoaren adierazle bihurtzen da → fitxak bere burua marrazten duen diagrama batean irekitzen dira, gainean jartzean tresna-informazio batekin → ⌘K-n erortzen da → idatzi iragazteko → sartu → tostada → itzuli botoiari.

1. HTML fitxategi karratu bat, 1440x1440 neurrikoa. Estilo guztiak seek(t) barruko denboratik kalkulatzen dira: ez CSS trantsiziorik, ez tenporizadorerik, ez fotogramen arteko egoerarik.
2. Malgukiak erantzun itxiak dira. Helburua hainbat aldiz aldatzen duen balioa aldaketa bakoitzeko malguki baten batura da, beraz, denboraren funtzio hutsa izaten jarraitzen du.
3. Fitxa-adierazlearen bi ertzek malguki desberdinetan dabiltza, beraz, aurreko ertza atzekoaren aurretik luzatzen da. Trikimailu bera botoiarekin.
4. Arrastatzeak manipulazio zuzena dira: kurtsorea sakatuta edukitzen den bitartean, balioa bere posiziotik kalkulatzen da. Askatzean, zegoen tokitik itzultzen da.
5. Analizatu abestia numpy erabiliz erritmo-sareta gisa eta hasi erritmo baxu batean. Kokatu UI soinu bakoitza bere gailur neurtuaren arabera.
6. Playwright -ekin errendatzea: 4 azpifotograma fotograma bakoitzeko, ffmpeg tmix nahastuta 60 fps-tan mugimendu lausotasuna lortzeko.
7. Errendatu fotograma bat taupada bakoitzeko errendatze osoa egin aurretik. Konpondu saretatik kanpo dagoen edozer, estua edo irakurtzeko zaila den edozer.

Ez jarri inoiz aldaketa erabakia kamerak eskalatzen duen edo testuak lausotzen duen ezertan. Morfologia-edukiontzi baten barruan aldatzen den testuak bere sarrera eta irteera denbora behar du, bestela gainjarri egingo da. Egin azken fotograma lehenengoaren berdina, kurtsorearen posizioa eta abiadura barne, bestela begizta trabatu egingo da.

Eskatu sarrerak, eta gero erakutsi egoera zerrenda erritmo-sarearen edozein kode idatzi aurretik.

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.

Gomendioa hemendik hartua mezua @demonugc.