Тағйирёбии шакл тавассути ҳолатҳои UI

Аз ман пурсед: 8 то 12 ҳолати корбарии ман, ки ман мехоҳам шакл ба он табдил ёбад (масалан, тугма, боркунанда, плеер, слайдер, тугмача, ҷадвалҳо, диаграмма, палитраи фармонҳо, тост), сиёҳу сафеди холис ё як ранги аксент ва як суруди ройгон тақрибан 120 BPM (масалан, Mixkit, ройгон барои истифодаи тиҷоратӣ).

Ҳаракати UI дар сатҳи дриббл. Як шакл, ҳеҷ гоҳ бурида намешавад: ҳар як ҳолат ҳамон як унсур аст, ки андоза, радиус ва ранги онро тағйир медиҳад, дар ҳоле ки мундариҷаи он бо норавшании кӯтоҳ иваз мешавад. Курсор ҳар як тағиротро бо кликҳо ва кашолакунии воқеӣ идора мекунад. Канваси гарми хокистарии равшан, ҷузъҳои сиёҳу сафед, як шрифти UI-и тоза (Geist). Дар ҳама ҷо пружинаҳо, ҳадди аксар як шохаи хурд. Камера масштаб мекунад, то ҳар як ҳолат чаҳорчӯбаро пур кунад. Чаҳорчӯбаи охирин чаҳорчӯбаи аввал аст, бинобар ин он давр мезанад.
Манъ карда шудааст: сабукшавии босуръат, таркиши зарраҳо, дурахшишҳо, градиентҳо дар UI chrome, зарбаҳои номувофиқи нишонаҳо, вақти мурда, ҳама чизе, ки ба шаблон монанд аст.

120 BPM, 7 такт, дар ҳар як зарба чизе рӯй медиҳад.
Тугма → боркунак → санҷиш → ҷазираи динамикӣ → плеери мусиқӣ бо морфияи бозӣ/таваққуф → скраб кардани сатри пешрафт → он ба слайдери баландии овоз табдил меёбад, ки ҳангоми кашидан аз ҳадди аксар дароз мешавад → тугма дар зарба лағжиш мекунад → тугма ба нишондиҳандаи ҷадвали моеъ табдил меёбад → ҷадвалҳо ба диаграммае кушода мешаванд, ки худ аз худ кашида мешавад ва дар болои тугма нишонаи тугмачаи болоӣ нишон дода мешавад → он ба ⌘K → type to filter → enter → toast → бозгашт ба тугма фурӯ меравад.

1. Як файли HTML, андозаи мураббаъ 1440x1440. Ҳар як услуб аз вақт дар дохили seek(t) ҳисоб карда мешавад: бе гузаришҳои CSS, бе таймерҳо, бе ҳолати интиқолшуда байни фреймҳо.
2. Пружинаҳо вокунишҳои қадамии шакли пӯшида мебошанд. Арзише, ки ҳадафро чандин маротиба тағйир медиҳад, ҷамъи як пружинаи ҳар як тағйирот аст, аз ин рӯ, он функсияи холиси вақт боқӣ мемонад.
3. Ду канори нишондиҳандаи ҷадвал пружинаҳои гуногунро идора мекунанд, аз ин рӯ канори пеш аз канори ақиб дароз мешавад. Ҳамин ҳила барои тугмаи гузариш низ ҳаст.
4. Кашолакунӣ манипулятсияи мустақим аст: ҳангоми нигоҳ доштани курсор, арзиш аз мавқеи он ҳисоб карда мешавад. Ҳангоми раҳо кардан, он аз ҳар ҷое, ки буд, бармегардад.
5. Сурудро бо истифода аз numpy барои шабакаи ритм таҳлил кунед ва аз ритми даун-ритм оғоз кунед. Ҳар як садои UI-ро дар қуллаи ченшудааш ҷойгир кунед.
6. Рендер бо Playwright: 4 зеркадр барои ҳар як кадр, бо ffmpeg tmix барои норавшании ҳаракат дар 60 кадр/сония омехта карда шудааст.
7. Пеш аз рендери пурра, як кадрро барои ҳар як зарба рендер кунед. Ҳар чизеро, ки аз шабака берун аст, танг ё хонданаш душвор аст, ислоҳ кунед.

Ҳеҷ гоҳ ба чизе, ки камера миқёс кунад ва ё матн норавшан бошад, "will change"-ро истифода набаред. Матне, ки дар дохили контейнери тағйирёбанда иваз мешавад, ба вақти вуруд ва баромади худ ниёз дорад, вагарна он бо ҳам мепайвандад. Кадрҳои охиринро бо аввал якхела кунед, мавқеъ ва суръати курсор дохил карда шудааст, вагарна ҳалқа лағжиш мекунад.

Пеш аз навиштани ягон рамз, аз ман маълумоти вурудӣ пурсед, сипас рӯйхати ҳолатро дар шабакаи ритмҳо нишон диҳед.

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.

Супориш аз пост @twoclipping.