Зміна форми через стани інтерфейсу користувача

Запитайте мене про: від 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.