Динамичная промо-презентация UI-элементов с плавной анимацией и интерактивностью

Промпт

Проанализируй http://sprites.ai и создай промо продукта на основе нашего собственного UI, а не универсальных компонентов.

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

<structure>
120 BPM, 7 тактов, что-то происходит на каждой доле.
Подключение рекламного аккаунта (логотипы Meta, Google, LinkedIn, TikTok, Reddit) → лоадер → галочка → в строке промпта набирается "Launch ads that convert" → островок "Researching 42 competitors" → стена Ads Library с прокруткой реальных объявлений останавливается на самом эффективном → карточка подтверждения → Approve & launch → ползунок бюджета растягивается за предел максимума → переключатель Autopilot → ручка превращается в жидкий индикатор вкладок, перемещающийся между каналами → график ROAS рисуется сам, при наведении появляется всплывающая подсказка → ⌘K → вводится "pause" → тост "Paused 3 losing ads" → возврат к кнопке.
</structure>

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

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

Покажи мне список состояний на сетке долей, прежде чем писать какой-либо код.

Analyze http://sprites.ai and build a product promo from our own UI, not generic components.

<direction>
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. Warm-gray canvas, black and white components, one accent (#FD9543), Geist. Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. Last frame = first frame, so it loops.
Banned: bouncy easing, particles, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template.
</direction>

<structure>
120 BPM, 7 bars, something on every beat.
Connect ad account (Meta, Google, LinkedIn, TikTok, Reddit logos) → loader → check → prompt bar types "Launch ads that convert" → island "Researching 42 competitors" → Ads Library wall of real ads scrolls and lands on a top performer → approval card → Approve & launch → budget slider that stretches past max → Autopilot toggle → knob becomes a liquid tab indicator across channels → ROAS chart draws itself with hover tooltip → ⌘K → type "pause" → toast "Paused 3 losing ads" → back to the button.
</structure>

<build>
1. One HTML file, 1440x1440. Every style is computed inside seek(t): no CSS transitions, no timers, no state between frames.
2. Springs are closed-form step responses. A value that changes target many times is a sum of springs, so it stays a pure function of time.
3. Tab indicator and toggle knob: the two edges ride different springs, so the leading edge stretches ahead.
4. Drags are direct manipulation: while held, the value follows the cursor. On release it springs back from wherever it was.
5. No music. Synthesize UI sounds with numpy and place each one by its measured peak on the beat grid.
6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps.
7. Render one frame per beat first. Fix anything off-grid, cramped or hard to read.
</build>

<gotchas>
No will-change on anything the camera scales. Swapped text needs its own enter/exit timing. Match the last frame to the first, cursor position and speed included, or the loop stutters.
</gotchas>

Show me the state list on the beat grid before writing any code.