Морфинг UI состояний в единый зацикленный ролик: промт и пример ролика

<inputs> Спроси у меня: от 8 до 12 UI состояний, в которые должна превращаться фигура (например кнопка, загрузчик, плеер, слайдер, переключатель, вкладки, график, командная палитра, тост), чисто черно белую палитру или один акцентный цвет, а также бесплатную для коммерческого использования песню на 120 BPM (например с {сайт}). </inputs> <direction> Уровень моушена как на {платформа}. Одна фигура без единой склейки: каждое состояние это один и тот же элемент, который меняет размер, радиус и цвет, при этом его содержимое сменяется с коротким блюром. Курсор управляет каждым изменением с настоящими кликами и перетаскиваниями. Теплый светло серый холст, черно белые компоненты, один чистый UI шрифт ({шрифт}). Везде пружины, максимум небольшой перелет. Камера приближается так, чтобы каждое состояние заполняло кадр. Последний кадр это первый кадр, поэтому ролик зацикливается. Запрещено: пружинистый (bouncy) easing, взрывы частиц, свечения, градиенты на UI chrome, несовпадающие по толщине иконки, мертвое время, что либо похожее на шаблон. </direction> <structure> 120 BPM, 7 тактов, на каждый бит что то происходит. Кнопка → загрузчик → галочка → динамический остров → музыкальный плеер с морфингом play/pause → перемотка прогресс бара → он превращается в слайдер громкости, который растягивается при перетаскивании за максимум → переключатель включается на бит → ручка переключателя становится жидким индикатором вкладок → вкладки открываются в график, который сам себя рисует, с тултипом при наведении → он сворачивается в ⌘K → печатаешь для фильтрации → enter → тост → снова кнопка. </structure> <build> 1. Один HTML файл, квадрат 1440x1440. Каждый стиль вычисляется из времени внутри seek(t): никаких CSS transitions, никаких таймеров, никакого состояния, переносимого между кадрами. 2. Пружины это ступенчатые отклики в замкнутой форме (closed-form). Значение, которое много раз меняет цель, это сумма одной пружины на каждое изменение, поэтому оно остается чистой функцией времени. 3. Два края индикатора вкладок едут на разных пружинах, поэтому ведущий край растягивается впереди ведомого. Тот же трюк для ручки переключателя. 4. Перетаскивания это прямое управление: пока курсор удерживается, значение вычисляется из его позиции. При отпускании оно пружинит обратно оттуда, где было. 5. Проанализируй песню с помощью numpy, чтобы получить сетку битов, и начни с сильной доли. Размести каждый звук интерфейса по измеренному пику. 6. Рендери через Playwright: 4 подкадра на кадр, смешанные через ffmpeg tmix для моушен блюра при 60fps. 7. Отрендери по одному кадру на бит перед полным рендером. Исправь все, что выбивается из сетки, выглядит тесно или трудно читается. </build> <gotchas> Никогда не ставь will-change на то, что камера масштабирует, иначе текст рендерится размыто. Текст, который сменяется внутри морфящегося контейнера, нуждается в собственном тайминге появления и исчезновения, иначе он накладывается. Сделай последний кадр идентичным первому, включая позицию и скорость курсора, иначе цикл дергается. </gotchas> <start> Спроси у меня исходные данные, затем покажи список состояний на сетке битов, прежде чем писать код. </start>