ai21.net
語言

Analyze http://sprites.ai and build a product promo from o…

示範影片

Analyze http://sprites.ai and build a product promo from o… — 1

提示詞

Analyze http://sprites.ai and build a product promo from our own UI, not generic components.

<direction>
Dribbble-level UI motion. One shape, never cut: every state is the same element morphing its size, radius and color while its content swaps with a short blur. A cursor drives every change with real clicks and drags. Warm-gray canvas, black and white components, one accent (#FD9543), Geist. Springs everywhere, a tiny overshoot at most. The camera zooms so each state fills the frame. Last frame = first frame, so it loops.
Banned: bouncy easing, particles, glows, gradients on UI chrome, mismatched icon strokes, dead time, anything that looks like a template.
</direction>

<structure>
120 BPM, 7 bars, something on every beat.
Connect ad account (Meta, Google, LinkedIn, TikTok, Reddit logos) → loader → check → prompt bar types "Launch ads that convert" → island "Researching 42 competitors" → Ads Library wall of real ads scrolls and lands on a top performer → approval card → Approve & launch → budget slider that stretches past max → Autopilot toggle → knob becomes a liquid tab indicator across channels → ROAS chart draws itself with hover tooltip → ⌘K → type "pause" → toast "Paused 3 losing ads" → back to the button.
</structure>

<build>
1. One HTML file, 1440x1440. Every style is computed inside seek(t): no CSS transitions, no timers, no state between frames.
2. Springs are closed-form step responses. A value that changes target many times is a sum of springs, so it stays a pure function of time.
3. Tab indicator and toggle knob: the two edges ride different springs, so the leading edge stretches ahead.
4. Drags are direct manipulation: while held, the value follows the cursor. On release it springs back from wherever it was.
5. No music. Synthesize UI sounds with numpy and place each one by its measured peak on the beat grid.
6. Render with Playwright: 4 subframes per frame, blended with ffmpeg tmix for motion blur at 60fps.
7. Render one frame per beat first. Fix anything off-grid, cramped or hard to read.
</build>

<gotchas>
No will-change on anything the camera scales. Swapped text needs its own enter/exit timing. Match the last frame to the first, cursor position and speed included, or the loop stutters.
</gotchas>

Show me the state list on the beat grid before writing any code.

中文翻譯

分析 http://sprites.ai,並用我們自己的 UI,而不是通用組件,來構建一支產品宣傳片。

<direction>
Dribbble 水準的 UI 動效。一個形狀,絕不剪切:每個狀態都是同一個元素在改變其尺寸、圓角和顏色,同時其內容以短暫的模糊切換。一個光標通過真實的點擊和拖拽驅動每一次變化。暖灰色畫布,黑白組件,一個強調色(#FD9543),Geist。處處彈簧,至多隻有極小的過沖。鏡頭縮放,讓每個狀態填滿畫面。最後一幀 = 第一幀,從而形成循環。
禁止:彈跳式緩動、粒子、輝光、UI 外框上的漸變、不匹配的圖標描邊、死時間、任何看起來像模板的東西。
</direction>

<structure>
120 BPM,7 小節,每一拍都有內容。
連接廣告賬戶(Meta、Google、LinkedIn、TikTok、Reddit 標誌)→ 加載器 → 對勾 → 提示欄輸入“Launch ads that convert” → 靈動島顯示“Researching 42 competitors” → 廣告庫中真實廣告的牆滾動並停在一條高表現廣告上 → 審批卡片 → Approve & launch → 預算滑塊拉伸超過最大值 → Autopilot 開關 → 旋鈕變成橫跨各渠道的液態標籤指示器 → ROAS 圖表自行繪製並帶懸停提示 → ⌘K → 輸入“pause” → 提示條“Paused 3 losing ads” → 回到按鈕。
</structure>

<build>
1. 一個 HTML 文件,1440x1440。所有樣式都在 seek(t) 內部計算:沒有 CSS 過渡,沒有計時器,幀與幀之間沒有狀態。
2. 彈簧是閉式階躍響應。一個多次改變目標值的量是多個彈簧之和,因此它仍然是時間的純函數。
3. 標籤指示器和開關旋鈕:兩條邊緣各自由不同的彈簧驅動,所以前緣會向前伸展。
4. 拖拽是直接操作:按住時,數值跟隨光標。鬆開後,它從當時所在的位置彈回。
5. 沒有音樂。用 numpy 合成 UI 音效,並按每個音效測得的峯值把它放到節拍網格上。
6. 用 Playwright 渲染:每幀 4 個子幀,用 ffmpeg tmix 混合,以實現 60fps 的運動模糊。
7. 先每個節拍渲染一幀。修正任何偏離網格、擁擠或難以辨認的地方。
</build>

<gotchas>
不要在鏡頭會縮放的東西上使用 will-change。被替換的文字需要有自己的進入/退出時序。讓最後一幀與第一幀一致,包括光標位置和速度,否則循環會卡頓。
</gotchas>

在寫任何代碼之前,先把狀態列表放到節拍網格上給我看。

溯源

原作者
AnnaCher___
發佈日期
2026-09-25(由推文 ID 反解)
原始出處
查看原帖 ↗
收錄來源
yihui-dev/awesome-opus5-5-videos · annacher-433425 · MIT