Моушн-шоурил интерфейсов на коде: одна фигура превращается в кнопку, загрузчик, плеер, слайдер и другие состояния

Промпт

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

<direction>
UI-анимация уровня Dribbble. Одна форма, без склеек: каждое состояние — это тот же элемент, меняющий размер, радиус и цвет, в то время как его содержимое сменяется быстрым размытием. Курсор запускает каждое изменение через реальные клики и перетаскивания. Используйте светлый тепло-серый холст, черно-белые компоненты и один чистый UI-шрифт (Geist). Пружины повсюду, с лишь небольшим перелетом. Приблизьте камеру так, чтобы каждое состояние заполняло кадр. Совместите финальный кадр с первым для бесшовного зацикливания.
Запрещено: пружинящая анимация, вспышки частиц, свечение, градиенты на UI-хроме, непоследовательные обводки иконок, мертвые паузы, все, что похоже на шаблон.
</direction>

<structure>
120 BPM, 7 тактов, с действием на каждую долю.
Кнопка → загрузчик → галочка → динамический остров → музыкальный плеер с морфом play/pause → перемотка прогресс-бара → он превращается в слайдер громкости, который растягивается при перетаскивании за максимум → переключатель включается на долю → его ползунок становится жидким индикатором вкладок → вкладки расширяются в график, который рисуется сам, с всплывающей подсказкой при наведении → он складывается в ⌘K → ввод текста для фильтрации → ввод → уведомление → обратно к кнопке.
</structure>

<build>
1. Один HTML-файл, квадрат 1440x1440. Вычислите все стили из времени внутри seek(t): никаких CSS-переходов, таймеров или состояний, переносимых между кадрами.
2. Используйте замкнутые ступенчатые отклики для пружин. Если значение многократно меняет цель, добавьте по одной пружине для каждого изменения, чтобы оно оставалось чистой функцией времени.
3. Придайте двум краям индикатора вкладок отдельные пружины, позволяя ведущему краю растягиваться впереди отстающего. Используйте тот же подход для ползунка переключателя.
4. Сделайте перетаскивания прямыми: пока курсор зажат, вычисляйте значение по его положению. При отпускании пружиньте обратно из этого положения.
5. Проанализируйте песню с помощью numpy, чтобы найти сетку ударов и начать с сильной доли. Разместите каждый UI-звук, используя его измеренный пик.
6. Рендеринг с Playwright: 4 субкадра на кадр, смешанные с помощью tmix от ffmpeg для размытия движения при 60fps.
7. Перед полным рендерингом отрендерите один кадр на каждую долю. Исправьте все, что находится вне сетки, тесно или трудно читается.
</build>

<gotchas>
Не используйте will-change ни на чем, что масштабирует камера, иначе текст будет выглядеть размытым. Смена текста внутри морфящегося контейнера требует отдельного времени входа и выхода, чтобы избежать наложения. Сделайте финальный кадр идентичным первому, включая положение и скорость курсора, иначе цикл будет прерывистым.
</gotchas>

<start>
Запросите у меня входные данные, затем покажите список состояний на сетке ударов перед написанием какого-либо кода.
</start>

<inputs>
Ask me for: 8 to 12 UI states the shape should turn into (e.g. button, loader, player, slider, toggle, tabs, chart, command palette, toast), a pure black-and-white palette or one accent color, and a royalty-free track around 120 BPM (e.g. from Mixkit, free for commercial use).
</inputs>

<direction>
Dribbble-level UI motion. One shape, no cuts: each state is the same element changing size, radius and color, while its content swaps with a quick blur. A cursor triggers every change through actual clicks and drags. Use a light warm-gray canvas, black-and-white components and one clean UI font (Geist). Springs throughout, with only a slight overshoot. Zoom the camera so each state fills the frame. Match the final frame to the first for a seamless loop.
Banned: bouncy easing, particle bursts, glows, gradients on UI chrome, inconsistent icon strokes, dead time, anything that feels like a template.
</direction>

<structure>
120 BPM, 7 bars, with an action on every beat.
Button → loader → check → dynamic island → music player with a play/pause morph → scrub the progress bar → it turns into a volume slider that stretches when dragged past max → a toggle switches on the beat → its knob becomes a liquid tab indicator → the tabs expand into a chart that draws itself, with a tooltip on hover → it folds into ⌘K → type to filter → enter → toast → back to the button.
</structure>

<build>
1. One HTML file, square 1440x1440. Compute every style from time inside seek(t): no CSS transitions, timers or state carried between frames.
2. Use closed-form step responses for springs. If a value changes target multiple times, add one spring for each change so it remains a pure function of time.
3. Give the tab indicator’s two edges separate springs, letting the leading edge stretch ahead of the trailing one. Use the same approach for the toggle knob.
4. Make drags direct: while the cursor is held down, calculate the value from its position. On release, spring back from that position.
5. Analyze the song with numpy to find the beat grid and begin on a downbeat. Position each UI sound using 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-grid, cramped or difficult to read.
</build>

<gotchas>
Don’t use will-change on anything the camera scales, or the text will look blurry. Text swapping inside a morphing container needs separate enter and exit timing to avoid overlap. Make the final frame identical to the first including cursor position and speed or the loop will stutter.
</gotchas>

<start>
Ask me for the inputs, then show me the state list on the beat grid before writing any code.
</start>