Интерактивная 3D-модель ракетного двигателя в браузере

Промпт

<inputs> 
Попроси меня предоставить: 
• мой продукт + URL 
• 8–12 состояний UI, которые рассказывают его историю 
• реальные данные, отображаемые в каждом состоянии 
• цвета бренда + шрифты + акцентный цвет 
• необходимые форматы (1:1, 16:9, 9:16) 
</inputs>

<rules> 
Один HTML-файл. Один canvas
Одна функция draw(t)

Никаких CSS-переходов
Никаких таймеров
Никакого состояния, сохраняющегося между кадрами

Одна фигура, никогда не разрезать

Каждое состояние — это один и тот же элемент, меняющий размер, радиус и цвет, пока содержимое заменяется

Настоящий UI. Реальные данные. Никаких заполнителей.

</rules>
<structure> 
Сетка на 120 BPM

Что-то происходит на каждом bea

логотип → кнопка → поле для хэндла → “is this you?” → загрузчик → PIN-код → глобус, заполняющийся пользователями → совпадения → вкладки → RSVP → поиск → логотип

</structure>

<motion> 
Замкнутые пружины повсюду, лишь с крошечным перелётом.

Если значение несколько раз меняет целевое значение, суммируй по одной пружине на каждое изменение

Контент появляется после того, как его контейнер начинает трансформироваться, и исчезает до следующей трансформации, чтобы текст никогда не перекрывался

Используй короткое размытие на переходах

Никогда не переходи напрямую от чёрного к акцентному цвету. Вместо этого перемещай акцентный элемент между состояниями

Растягивай индикаторы вкладок, помещая каждый край на отдельную пружину

Масштабируй камеру так, чтобы каждое состояние заполняло кадр

Сделай последний кадр идентичным первому, чтобы вся последовательность зацикливалась
</motion>

<export> 
Сначала отрендери по одному кадру на каждый бит в виде контактного листа

Исправь всё, что выглядит тесным или сломанным

Затем отрендери каждый кадр в headless Chrome при 60fps, усредняя 6 субкадров для размытия в движении

Передай в ffmpeg:
H.264 + yuv420p

Экспортируй все соотношения сторон параллельно
</export>

motion design is becoming a prompt

<inputs> 
Ask me for: 
• my product + URL 
• 8–12 UI states that tell its story 
• the real data shown in each state 
• brand colors + fonts + accent color 
• required formats (1:1, 16:9, 9:16) 
</inputs>

<rules> 
One HTML file. One canvas
One draw(t) function

No CSS transitions
No timers
No state carried between frames

One shape, never cut

Every state is the same element changing size, radius and color while the content swaps

A cursor drives the sequence with real clicks, typing and one drag

Real UI. Real data. No placeholders.

</rules>
<structure> 
120 BPM grid

Something happens on every bea

logo → button → handle field → “is this you?” → loader → pin → globe filling with users → matches → tabs → RSVP → search → logo

</structure>

<motion> 
Closed-form springs everywhere with only a tiny overshoot.

If a value changes target multiple times, sum one spring per change

Content enters after its container starts morphing and leaves before the next morph so text never overlaps

Use a short blur on transitions

Never fade black directly into the accent color. Move an accent element between states instead

Make tab indicators stretch by putting each edge on a different spring

Zoom the camera so every state fills the frame

Make the last frame equal the first so the whole thing loops
</motion>

<export> 
First render one frame per beat as a contact sheet

Fix anything cramped or broken

Then render every frame in headless Chrome at 60fps, averaging 6 subframes for motion blur

Pipe into ffmpeg:
H.264 + yuv420p

Export all aspect ratios in parallel
</export>

motion design is becoming a prompt