Formo-transformiĝo tra UI-statoj

Petu de mi: 8 ĝis 12 uzulinterfacajn statojn, kiujn mi volas, ke la formo fariĝu (ekz. butono, ŝargilo, ludanto, ŝovilo, ŝaltilo, langetoj, diagramo, komandpaletro, rostpano), pure nigrablanka aŭ unu akcenta koloro, kaj senkopirajta kanto ĉirkaŭ 120 BPM (ekz. Mixkit, senpaga por komerca uzo).

Movado en la uzulinterfaco je dribbble-nivelo. Unu formo, neniam tranĉita: ĉiu stato estas la sama elemento, kiu metamorfozas sian grandecon, radiuson kaj koloron, dum ĝia enhavo ŝanĝiĝas kun mallonga malklareco. Kursilo pelas ĉiun ŝanĝon per realaj klakoj kaj trenoj. Hela varmgriza kanvaso, nigraj kaj blankaj komponantoj, unu pura uzulinterfaco-tiparo (Geist). Risortoj ĉie, maksimume eta troŝovo. La fotilo zomas tiel ke ĉiu stato plenigas la kadron. La lasta kadro estas la unua kadro, do ĝi ripetas sin.
Malpermesitaj: resalta malstreĉiĝo, partiklaj eksplodoj, briloj, gradientoj en la kroma uzantinterfaco, nekongruaj ikonstrekoj, morta tempo, ĉio, kio aspektas kiel ŝablono.

120 BPM, 7 taktoj, io okazas ĉe ĉiu takto.
Butono → ŝargilo → kontroli → dinamika insulo → muzikludilo kun lud/paŭzo-morfo → froti la progresbreton → ĝi fariĝas laŭtvoĉa ŝovilo kiu etendiĝas kiam trenite preter la maksimumo → ŝaltilo turniĝas laŭ la ritmo → la tenilo fariĝas likva langeto-indikilo → la langetoj malfermiĝas en diagramon kiu desegnas sin, kun ŝveb-apelo → ĝi kolapsas en ⌘K → tajpi por filtri → enigi → rostpano → reen al la butono.

1. Unu HTML dosiero, kvadrata grandeco 1440x1440. Ĉiu stilo estas kalkulata ekde la tempo ene de seek(t): neniuj CSS transiroj, neniuj tempigiloj, neniu stato portata inter kadroj.
2. Risortoj estas fermitformaj paŝorespondoj. Valoro kiu ŝanĝas celon multajn fojojn estas la sumo de unu risorto por ŝanĝo, do ĝi restas pura funkcio de tempo.
3. La du randoj de la klapeto-indikilo rajdas malsamajn risortojn, do la antaŭa rando etendiĝas antaŭ la malantaŭa. Sama truko por la ŝaltilo.
4. Trenoj estas rekta manipulado: dum la kursoro estas tenata, la valoro estas kalkulata ekde ĝia pozicio. Kiam ĝi estas liberigita, ĝi resaltas de kie ajn ĝi estis.
5. Analizu la kanton per numpy por la taktokrado kaj komencu sur antaŭtakto. Metu ĉiun UI-sonon laŭ ĝia mezurita pinto.
6. Bildigo per Playwright: 4 subkadroj po kadro, miksitaj kun ffmpeg tmix por moviĝmalklareco je 60 kadroj po sekundo.
7. Bildigu unu kadron por ĉiu takto antaŭ la plena bildigo. Riparu ĉion ekster la krado, malvastan aŭ malfacile legeblan.

Neniam metu ŝanĝon sur ion, kion la fotilo skalas aŭ la teksto malklarigas. Teksto, kiu ŝanĝiĝas ene de metamorfoza ujo, bezonas sian propran eniron kaj eliron, alie ĝi interkovriĝas. Igu la lastan kadron identa al la unua, inkluzive de la kursorpozicio kaj rapideco, alie la buklo haltos.

Petu de mi la enigaĵojn, poste montru al mi la statliston sur la taktokrado antaŭ ol vi skribos iun ajn kodon.

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.

Instigo prenita de afiŝo @twoclipping.