Анимационный фильм в стиле UI с элементами Pokémon и интерактивной 3D-моделью

Промпт

ПРОМПТ:
<inputs>
Попроси меня указать: моего избранного Pokémon или стартовую тройку, 8–12 состояний интерфейса в тематике Pokémon, а также песню без лицензионных отчислений примерно на 120 BPM с игривым приключенческим или электронным настроением. Подтверди, что лицензия песни разрешает предполагаемое использование.Палитра по умолчанию: тёплый почти белый, чёрный и красный цвет Poké Ball. Иллюстрации Pokémon сохраняют свои исходные цвета.
</inputs>

<direction>
Моушн-фильм об интерфейсе в духе Pokémon с уровнем качества Dribbble. Представь прекрасно спроектированный современный Pokédex: игривый, точный и мгновенно http://recognizable.Одна форма, никогда не разрезается: Poké Ball непрерывно превращается в каждый компонент интерфейса, меняя размер, радиус и цвет. Её центральная кнопка, разделительная линия и внешняя оболочка становятся элементами управления и структурой каждого нового состояния. Содержимое сменяется с коротким размытием и тщательно разделённым таймингом появления и исчезновения.

Видимый курсор управляет каждым взаимодействием с помощью кликов, перетаскиваний и жестов при наведении. Используй светлый тёплый серый холст, чистую типографику Geist, единообразную толщину линий иконок и чёткие иллюстрации Pokémon.

Используй жёстко затухающие пружины с лишь едва заметным перелётом. Камера плавно меняет кадрирование каждого состояния, чтобы интерфейс оставался крупным и разборчивым. В финале происходит точное возвращение к исходной Poké Ball для бесшовного зацикливания.

Запрещено: чрезмерные подпрыгивания, вспышки частиц, свечение, градиенты на элементах интерфейса, несогласованная толщина линий иконок, пустые промежутки, шаблонные макеты дашбордов, резкие смены сцен и не связанные с интерфейсом плавающие элементы.
</direction>

<structure>
120 BPM, размер 4/4, 7 тактов: 28 долей, примерно 14 секунд. На каждой http://beat.Такте должно происходить что-то осмысленное.Такт 1 — активация Poké Ball

1. Закрытая Poké Ball находится по центру; курсор приближается.
2. Курсор нажимает на её центральную кнопку.
3. Кнопка превращается в круговой индикатор сканирования.
4. Сканирование завершается галочкой, а оболочка растягивается в компактный Pokédex.

Такт 2 — обнаружение Pokémon
5. Pokédex расширяется, открывая избранного Pokémon.
6. Его имя, номер и тип появляются в быстрой последовательности.
7. Курсор нажимает на элемент управления криком/воспроизведением.
8. Элемент управления превращается в кнопку паузы, а компактная волна плавно анимируется.

Такт 3 — элементы управления тренером
9. Волна сплющивается и превращается в регулятор громкости.
10. Курсор перетаскивает его ручку в форме Poké Ball до максимального значения.
11. При перетаскивании за пределы максимума регулятор упруго растягивается.
12. После отпускания он стабилизируется и сжимается, превращаясь в переключатель режима shiny.

Такт 4 — сведения о Pokémon
13. Курсор переключает режим shiny; иллюстрация меняется на соответствующий вариант shiny.
14. Ручка переключателя растягивается и превращается в индикатор вкладки с жидкой анимацией.
15. Курсор выбирает “Stats”.
16. Карточка раскрывается в аккуратную диаграмму характеристик Pokémon.

Такт 5 — от характеристик к поиску
17. Столбцы характеристик прорисовываются синхронно с долей.
18. Курсор наводится на столбец; появляется разборчивая всплывающая подсказка.
19. Диаграмма сворачивается обратно в тот же контейнер.
20. Контейнер сжимается и превращается в поле поиска Pokédex.

Такт 6 — поиск и выбор
21. Поле поиска расширяется в командную палитру.
22. Вводится короткое имя Pokémon; результаты фильтруются по совпадению.
23. Курсор выбирает результат, открывая миниатюрную иллюстрацию и тип.
24. Нажатие Enter подтверждает выбор; палитра складывается в уведомление “Added to team”.

Такт 7 — возвращение к Poké Ball
25. Знак подтверждения в уведомлении становится центральной кнопкой Poké Ball.
26. Уведомление сжимается; его края становятся круглой оболочкой.
27. Красная верхняя половина, белая нижняя половина и чёрная разделительная линия занимают свои места.
28. Курсор возвращается по плавной траектории, совпадая с исходными положением и скоростью в момент зацикливания.

Последовательно используй выбранного Pokémon на протяжении всей анимации. Видимый текст должен быть достаточно коротким, чтобы его можно было прочитать в таком темпе.
</structure>

<build>
1. Создай один автономный HTML-файл с квадратной композицией 1440×1440. Вычисляй каждый анимируемый стиль из времени внутри seek(t): без CSS-переходов, таймеров и состояния, сохраняемого между кадрами.
2. На протяжении всей последовательности сохраняй один постоянный внешний элемент. Его внутренние иллюстрации, подписи и элементы управления могут меняться, но основной силуэт должен визуально связывать все состояния.
3. Используй замкнутые переходные функции пружины. Для повторных изменений целевого значения суммируй по одной реакции пружины на каждое изменение, чтобы анимация оставалась чистой функцией времени.
4. Задай для двух краёв индикатора вкладки разные пружины, чтобы передний край растягивался вперёд относительно заднего. Примени тот же приём к ручке переключателя.
5. Сделай перетаскивание прямым манипулированием: пока кнопка удерживается, значения следуют за положением курсора. После отпускания используй замкнутую переходную функцию пружины, соответствующую положению и скорости в момент отпускания.
6. Проанализируй предоставленную песню с помощью numpy, чтобы оценить сетку долей, проверить сильную долю и синхронизировать последовательность. Если темп отличается от 120 BPM, адаптируй тайминг под фактическую музыку.
7. Используй лицензированные звуки интерфейса и выровняй их измеренные пиковые переходные процессы с кликами, подтверждениями и акцентами морфинга.
8. Рендерь с помощью Playwright по четыре субкадра на каждый выходной кадр. Объедини каждую группу из четырёх кадров с помощью ffmpeg в видео 60fps для создания эффекта размытия движения.
9. Перед созданием полного видео отрендерь по одному предварительному кадру на каждую долю. Исправь всё, что выглядит тесным, неразборчивым, визуально разорванным или не совпадает с сеткой долей.
10. Встрой иллюстрации и шрифты внутрь HTML, чтобы рендеринг не зависел от сетевых запросов.
</build><gotchas>
Никогда не добавляй will-change к объектам, масштабируемым камерой; текст может стать размытым.Задай для исходящего и входящего содержимого раздельный тайминг, чтобы подписи никогда не перекрывались во время морфинга.

Используй точные иллюстрации Pokémon, имена, типы, цвета shiny и характеристики. Не придумывай варианты и не растягивай иллюстрации персонажей при изменении формы контейнера.

Сохраняй основной контейнер узнаваемым во время каждого перехода. Иллюстрация Pokémon — это содержимое внутри морфирующего интерфейса, а не замена постоянной формы.

Точно совмести границу цикла: геометрию, содержимое, камеру, положение курсора и скорость курсора. Экспортируй интервал [0, duration), не дублируя конечный кадр. Аудио тоже должно зацикливаться без шва.
</gotchas>

<start>
Попроси меня предоставить входные данные, затем покажи предложенный список состояний Pokémon на сетке из 28 долей, прежде чем писать какой-либо код.
</start>

<inputs>
Ask me for: my featured Pokémon or starter trio, 8–12 Pokémon-themed UI states, and a royalty-free song around 120 BPM with a playful adventure or electronic feel. Confirm that the song’s license permits the intended use.Default palette: warm off-white, black, and Poké Ball red. Pokémon artwork keeps its original colors.
</inputs>

<direction>
A Pokémon-inspired UI motion film with Dribbble-level polish. Imagine a beautifully designed modern Pokédex: playful, precise, and instantly http://recognizable.One shape, never cut: a Poké Ball continuously morphs into every interface component by changing its size, radius, and color. Its central button, dividing line, and outer shell become the controls and structure of each new state. Content swaps with a short blur and carefully separated enter/exit timing.

A visible cursor drives every interaction with clicks, drags, and hover gestures. Use a light warm-gray canvas, clean Geist typography, consistent icon strokes, and crisp Pokémon artwork.

Use tightly damped springs with only a tiny overshoot. The camera smoothly reframes each state so the interface stays large and readable. The ending returns exactly to the opening Poké Ball for a seamless loop.

Banned: excessive bouncing, particle bursts, glows, gradients on UI chrome, mismatched icon strokes, dead time, generic dashboard layouts, abrupt scene changes, and unrelated floating elements.
</direction>

<structure>
120 BPM, 4/4 time, 7 bars: 28 beats, approximately 14 seconds. Something intentional happens on every http://beat.Bar 1 — Poké Ball activation

1. A closed Poké Ball sits centered; the cursor approaches.
2. The cursor clicks its central button.
3. The button becomes a circular scanning loader.
4. The scan resolves into a check, and the shell stretches into a compact Pokédex.

Bar 2 — Pokémon discovery
5. The Pokédex expands to reveal the featured Pokémon.
6. Its name, number, and type appear in a quick stagger.
7. The cursor clicks the cry/play control.
8. The control morphs into pause while a compact waveform animates.

Bar 3 — Trainer controls
9. The waveform flattens into a volume slider.
10. The cursor drags its Poké Ball-shaped knob to maximum.
11. Dragging beyond maximum elastically stretches the slider.
12. On release, it settles and compresses into a shiny-mode toggle.

Bar 4 — Pokémon details
13. The cursor flips shiny mode; the artwork changes to the correct shiny variant.
14. The toggle knob stretches into a liquid tab indicator.
15. The cursor selects “Stats.”
16. The card opens into a clean Pokémon stat chart.

Bar 5 — Stats to search
17. Stat bars draw themselves in sync with the beat.
18. The cursor hovers over a bar; a readable tooltip appears.
19. The chart retracts into the same container.
20. The container compresses into a Pokédex search field.

Bar 6 — Find and select
21. The search field expands into a command palette.
22. A short Pokémon name is typed; matching results filter.
23. The cursor selects a result, revealing its miniature artwork and type.
24. Enter confirms; the palette folds into an “Added to team” toast.

Bar 7 — Return to the Poké Ball
25. The toast’s confirmation mark becomes the Poké Ball’s central button.
26. The toast contracts; its edges become the circular shell.
27. The red upper half, white lower half, and black dividing line settle into place.
28. The cursor returns along a smooth path, matching the opening position and velocity as the loop wraps.

Use the chosen Pokémon consistently throughout. Keep visible text brief enough to read at this pace.
</structure>

<build>
1. Build one self-contained HTML file with a square 1440×1440 composition. Compute every animated style from time inside seek(t): no CSS transitions, timers, or state carried between frames.
2. Keep one persistent outer element throughout the sequence. Its internal artwork, labels, and controls may change, but the main silhouette must visibly connect every state.
3. Use closed-form spring step responses. For repeated target changes, sum one spring response per change so animation remains a pure function of time.
4. Give the tab indicator’s two edges different springs so the leading edge stretches ahead of the trailing edge. Apply the same technique to the toggle knob.
5. Make drags direct manipulation: while held, values follow cursor position. On release, use a closed-form spring matching the release position and velocity.
6. Analyze the supplied song with numpy to estimate the beat grid, verify the downbeat, and align the sequence. If the tempo differs from 120 BPM, adapt the timing to the actual music.
7. Use licensed UI sounds and align their measured transient peaks with clicks, confirmations, and morph accents.
8. Render with Playwright at four subframes per output frame. Blend each group of four with ffmpeg into a 60fps video for motion blur.
9. Render one preview frame per beat before the full video. Fix anything cramped, unreadable, visually disconnected, or off the beat grid.
10. Package artwork and fonts inside the HTML so rendering does not depend on network requests.
</build><gotchas>
Never put will-change on anything the camera scales; text can become blurry.Give outgoing and incoming content separate timing so labels never overlap during a morph.

Use accurate Pokémon artwork, names, types, shiny colors, and stats. Do not invent variants or stretch character artwork when the container changes shape.

Keep the main container recognizable through every transition. Pokémon artwork is content inside the morphing interface, not a replacement for the persistent shape.

Match the loop boundary exactly: geometry, content, camera, cursor position, and cursor velocity. Export the interval [0, duration) without duplicating the endpoint frame. Make the audio loop cleanly too.
</gotchas>

<start>
Ask me for the inputs, then show me the proposed Pokémon state list on the 28-beat grid before writing any code.
</start>