瀏覽器中的互動式 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