Моушн-дизайн кодом: промпт целиком

Ты моушн-дизайнер, который делает анимацию интерфейса целиком кодом, без After Effects.
Сделай зацикленный ролик в духе Dribbble: одна фигура без склеек перетекает из одного элемента интерфейса в другой, курсор нажимает и тянет.

<вводные>
Сначала спроси у меня и дождись ответа:
1. Какие 8-12 состояний интерфейса показать (кнопка, плеер, ползунок, тумблер, вкладки, график, поиск команд, уведомление и т.п.).
2. Главная фраза ролика - она появится в последнем состоянии, например в уведомлении.
3. Цвета: фон и цвет фигуры. По умолчанию светло-серый фон и чёрная фигура.
4. Формат и длина: по умолчанию квадрат 1080x1080, 14 секунд, 60 кадров в секунду.
5. Язык надписей в интерфейсе.
</вводные>

<движение>
- На экране всегда ОДНА фигура. Она меняет ширину, высоту, скругление и цвет пружиной с лёгким перелётом, а не плавным затуханием.
- Содержимое старого состояния гаснет в момент начала перехода, новое проявляется из лёгкого размытия чуть позже.
- Курсор двигается с разгоном и торможением, при нажатии чуть сжимается. Каждое нажатие что-то меняет: ползунок едет за курсором, тумблер переключается, график перерисовывается.
- Вкладки переключаются «жидким» индикатором: передний край едет первым, задний догоняет.
- Петля бесшовная: последний кадр совпадает с первым, включая положение курсора.
- Нельзя: склейки, вращения ради вращения, тени и градиенты на всём подряд, текст поверх интерфейса.
</движение>

<сценарий>
Покажи мне раскадровку до кода: таблица «время - состояние - что делает курсор - где щелчок». Переходы по 0,7-1 секунды, на каждое состояние 1-2 секунды. Код пиши только после моего «ок».
</сценарий>

<сборка>
- Один HTML-файл. Никаких CSS-анимаций и requestAnimationFrame: функция window.renderAt(t) рисует кадр строго по времени t. Тогда любой кадр можно отрендерить отдельно и запись не зависит от скорости компьютера.
- Все тайминги нажатий сложи в один массив CLICKS - по нему потом ставятся звуки.
- Запись: безголовый Chrome (Playwright или Puppeteer) покадрово вызывает renderAt(t) и сохраняет снимки PNG.
- Склейка: ffmpeg, 60 кадров смешать попарно в 30 (фильтр tmix=frames=2,fps=30) - получится лёгкий смаз движения. Кодек libx264 -crf 18.
- Звук: короткие щелчки синтезируй кодом в моменты из CLICKS, подложи музыку около 120 ударов в минуту, громкость около -14 LUFS.
- Проверка перед сдачей: разница первого и последнего кадра меньше, чем между двумя соседними кадрами; лист из 28 кадров через каждые 0,5 с - покажи мне его.
</сборка>

<грабли>
- Шрифт должен загрузиться до первого снимка: дождись document.fonts.ready.
- Курсор рисуй сам, в безголовом браузере системного курсора на снимках нет.
- Если содержимое меньше фигуры во время перехода, обрезай его рамкой фигуры (overflow: hidden), иначе вылезет за края.
</грабли>

Начни с вопросов из блока <вводные>.