Змяненне формы праз станы карыстальніцкага інтэрфейсу

Запытайце ў мяне: ад 8 да 12 станаў карыстальніцкага інтэрфейсу, якімі я хачу бачыць форму (напрыклад, кнопка, загрузчык, прайгравальнік, паўзунок, перамыкач, укладкі, дыяграма, палітра каманд, падказка), чыста чорна-белы колер або адзін акцэнтны колер, і бясплатную песню з тэмпам каля 120 BPM (напрыклад, Mixkit, бясплатна для камерцыйнага выкарыстання).

Рух інтэрфейсу на ўзроўні Dribbble. Адна форма, ніколі не абрэзана: кожны стан — гэта адзін і той жа элемент, які змяняе свой памер, радыус і колер, а яго змесціва мяняецца з дапамогай кароткага размыцця. Курсор кіруе кожнай зменай з дапамогай рэальных клікаў і перацягванняў. Светла-цёпла-шэрае палатно, чорна-белыя кампаненты, адзін чысты шрыфт інтэрфейсу (Geist). Спружыны паўсюль, максімум невялікі перакос. Камера маштабуецца, таму кожны стан запаўняе кадр. Апошні кадр — гэта першы кадр, таму ўсё зацыкліваецца.
Забаронена: энергічнае згасанне, выбліскі часціц, свячэнне, градыенты ў карыстальніцкім інтэрфейсе Chrome, няроўныя штрыхі значкоў, мёртвы час, усё, што выглядае як шаблон.

120 BPM, 7 тактаў, нешта адбываецца на кожным удары.
Кнопка → загрузчык → праверка → дынамічны востраў → музычны прайгравальнік з пераўтварэннем прайгравання/паўзы → пракрутка паласы прагрэсу → яна становіцца паўзунком гучнасці, які расцягваецца пры перацягванні за максімум → перамыкач перагортваецца ў адпаведнасці з рытмам → ручка становіцца вадкім індыкатарам укладак → укладкі адкрываюцца ў дыяграму, якая малюецца сама сабой, з падказкай пры навядзенні курсора → яна згортваецца ў ⌘K → увядзіце для фільтра → Enter → усплывальнае паведамленне → назад да кнопкі.

1. Адзін HTML файл, квадратны 1440x1440. Кожны стыль вылічваецца з часу ўнутры seek(t): ніякіх пераходаў CSS, ніякіх таймераў, ніякага пераносу стану паміж кадрамі.
2. Спружыны — гэта замкнёная ступеньчатая рэакцыя. Значэнне, якое змяняе мэтавае значэнне шмат разоў, — гэта сума значэнняў адной спружыны за кожную змену, таму яно застаецца чыстай функцыяй часу.
3. Два краю індыкатара ўкладкі мацуюцца да розных спружын, таму пярэдні край выцягваецца наперадзе задняга. Той жа прыём для пераключальніка.
4. Перацягванне — гэта прамая маніпуляцыя: пакуль курсор утрымліваецца, значэнне вылічваецца з яго пазіцыі. Пасля адпускання яно вяртаецца туды, дзе было раней.
5. Прааналізуйце песню з дапамогай numpy для пошуку сеткі рытмаў і пачніце з нізкай долі. Размясціце кожны гук карыстальніцкага інтэрфейсу па яго вымераным піку.
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.