預設解說影片
一個沉穩、高級感的產品示範，就像資金充足的新創公司放在首頁上的那種。它的全部訣竅在於克制：明亮的淺色畫布、一次只顯示一行簡短的文字，以及產品本身的使用者介面，被重新乾淨地建構，並在操作過程中以 特寫 方式拍攝。鏡頭負責說故事：它推近一行文字，跟著打字動作移動，拉遠以揭示結果，然後滑向下一項功能。
您將它撰寫成一個 HTML 頁面，能根據時間值渲染任何影格，然後將其渲染成具有動態模糊和配樂的 MP4。
步驟 1：獲取簡報（一則訊息，然後開始行動）
在 一則 訊息中詢問所有事項，然後自行處理。只有產品是必需的；對於任何留空的項目，請自行決定並說明您的選擇。
- 產品：名稱，並用幾句話說明其功能。有網站 URL 更好。
- 觀眾必須記住的一件事（例如「輸入一個想法，獲得一個即時應用程式」）。
- 品牌：顏色、字型、標誌檔案，或是「使用網站」。如果沒有，請使用下方的預設色板。
- 格式：16:9 (1920×1080) 或 9:16 (1080×1920)。預設為 16:9。
- 長度：此風格的預設值如下所示。
- 音樂：他們自己的曲目（檔案路徑），或讓您合成一段。預設為合成。
- 方向（可選）：他們想要的場景、標語、行動呼籲，或任何需要避免的內容。
如果他們提供了 URL，請在撰寫任何內容之前先讀取它（使用網路擷取）以取得產品實際的用詞、功能、顏色和字型名稱。使用他們真實的詞彙作為 UI 標籤和標語。
切勿捏造事實。 不得編造客戶數量、收入、評級、見證或引言。只有在使用者或網站明確陳述時才能使用數字；否則請使用相對的條形圖、進度條和佔位骨架線條。UI 內部的範例內容（如提示、檔名、專案名稱、收據上的價格）是可以的，並且應該是合理的；但關於產品本身的聲明（統計數據、用戶數、評級、如「免費」等優惠）則不行。行動呼籲僅能使用使用者或網站提供的 URL 或內容；如果沒有，則以名稱和標語作為結尾。
標誌。 僅在使用者提供檔案，或是該產品為他們自己的產品且他們要求時，才能使用標誌。否則，請以品牌字體將名稱撰寫為文字。第三方標誌（整合功能）僅在提供時使用；否則使用帶有名稱的中性圓角方塊。
同時詢問（可選）：要展示的 3-5 項功能或工作流程步驟，以及產品連接的任何內容（整合功能）。如果他們提供了 URL，請從網站取得這些資訊。
此風格的預設長度：60 秒。範圍 45-90。根據長度分配時間（先刪除可選章節）：
| 長度 | 功能 | 可選章節 |
|---|---|---|
| 45 秒 | 2-3 項，每項約 9 秒 | 證明或整合功能，二選一 |
| 60 秒 | 3-4 項，每項約 10 秒 | 證明或整合功能，選一項 |
| 90 秒 | 4-5 項，每項約 12 秒 | 兩者都包含 |
步驟 2：撰寫腳本，然後建構
結構
先撰寫腳本和節拍表：每一行螢幕文字、其後跟隨的 UI 片段及其時間；將這些時間加總，並對照上方給定的預算。螢幕文字是唯一的「旁白」，因此它必須獨力講述故事。
場景和鏡頭如何配合： 每個場景（一個標題行、一個 UI 片段）都是其自己的圖層，擁有 自己的鏡頭。在一個場景內，鏡頭會推近、跟隨和拉遠；在場景之間，淡出的圖層會帶有短暫模糊（0.3-0.4 秒）溶解到已經在移動的下一個圖層中。
- 開場 (0-5 秒)。 純色淺色畫布。一個小字在中央淡入：
Introducing。它溶解到品牌時刻：柔軟的品牌漸層掃入（絲綢般的對角線光帶緩慢飄移），同時標誌或名稱置中，字體偏小。 - 問題或訴求 (約 5 秒)。 觀眾能辨識的簡短一行（
Still building prospect lists by hand?），或直接跳到產品的輸入介面：一個大型圓角輸入框，空白並帶有 placeholder 文字，下方有建議標籤。 - 功能章節 (3-5 個，每個約 8-15 秒)。 每個章節包含：
- 標題行：一個簡短的句子，字體較小（在 1080p 下約 28 px），在純色畫布上置中。它會逐字打字或淡入。然後 鏡頭推近 這行文字，直到它佔據約 75% 的畫面寬度，並且 一個關鍵詞或短語會獲得高亮：一個柔和的品牌色矩形從左到右在其後方掃過（
Call the decision maker. Directly.）。 - UI 片段：產品真實的介面，重新建構成乾淨的向量 UI（非螢幕截圖），只裁切出重要的部分並放大顯示。鏡頭足夠近，以至於該元素填滿大部分畫面，並且它會跟著操作移動：文字輸入到輸入框中（鏡頭跟隨游標；使用
measureText來測量文字位置）、代理的步驟一個接一個地勾選（轉圈 → 勾選，Found 247 matches）、結果卡片堆疊起來（遠端的卡片帶有模糊，形成景深）、表格逐行填滿、游標點擊儲存格按鈕並顯示數值、新增一個欄位且每個儲存格在數值出現前會先「思考」（帶有微光效果）、彈出視窗開啟並顯示推理過程和來源。 - 拉遠：操作完成後，鏡頭從容地拉遠以顯示整個螢幕片刻，讓觀眾了解他們所在的位置，然後滑向下一項。
- 標題行：一個簡短的句子，字體較小（在 1080p 下約 28 px），在純色畫布上置中。它會逐字打字或淡入。然後 鏡頭推近 這行文字，直到它佔據約 75% 的畫面寬度，並且 一個關鍵詞或短語會獲得高亮：一個柔和的品牌色矩形從左到右在其後方掃過（
- 證明 (可選，僅限真實數字)。 一個包含數字（數字會計數往上加）的句子，數字高亮顯示（
Backed by a database of 300M+ profiles），背景是微妙的點狀地球或網格。 - 整合功能 (可選)。 中央顯示
Built for your existing workflow.，同時 8-12 個應用程式方塊（圓角方形，僅使用真實標誌；如果整合數量少則重複顯示）從邊緣以不同深度飄入：近的較大且略微模糊，遠的較小且清晰，所有方塊都帶有視差效果。在這裡，文字會自行放大而非鏡頭推近，以便方塊保持在畫面內。 - 結尾。 在品牌漸層上：一個句子，其中一個旋轉的高亮詞彙會循環展示使用案例（
Do all your [prospecting / research / outreach] in Product.），然後，僅當產品真的有時，提供另一種使用方式（例如，對於具有 Claude 連接器的產品，顯示Or just ask Claude），接著是標語，其關鍵短語被高亮。 - 結束卡 (3 秒)。 品牌漸層上的標誌或名稱，下方小字顯示 URL 或行動呼籲。
營造高級感的規則
- 一次只做一件事。 螢幕上永遠不會同時出現超過一行文字和一個 UI 元素。文字和 UI 幾乎不會共用畫面：文字場景，然後是 UI 場景。
- 鏡頭就是剪輯師。 沒有硬切。每個場景變換都是一個鏡頭運動（推近、拉遠、滑行），或是純色畫布上的柔和模糊溶解。鏡頭運動是平滑的緩動（
ease，持續 0.6-1.2 秒）或高度阻尼的彈簧（z≥ 0.95）；沒有任何彈跳。 - 真實 UI，乾淨呈現。 根據您對產品（或其網站）的了解來重建其介面：真實的佈局、標籤、顏色、字型和圓角半徑，簡化到場景所需的程度。內部的內容是符合產品的合理範例數據。使用柔和陰影、1px 邊框和充足的留白。
- 游標： 標準 macOS 風格的箭頭，以柔和曲線移動，在點擊前一個節拍到達，點擊時帶有輕微的按壓和波紋效果。懸停狀態會改變。
- 字體： 如果知道品牌字體則使用之；否則使用 Inter 或 Geist。標題行使用小字、常規字重（它們透過鏡頭而非字體大小變大）。大字使用緊密的字距。
- 預設色板： 畫布
#F7F7F8，文字#111114，次要#8A8A94，UI 表面白色帶#E7E7EC邊框，品牌強調色#2E6BFF，高亮框 = 強調色不透明度 15-20%。品牌漸層：白色 → 淺強調色 → 強調色，如同緩慢的對角絲綢帶（在 canvas 上繪製，不要使用 CSS 模糊）。品牌顏色會取代強調色。 - 節奏： 每個標題行落地後停留約 2 秒；UI 片段以真實速度運行（打字約每秒 25 個字元），每個結果後停頓 0.5 秒以便觀眾閱讀。
- 禁止事項： UI 背後使用雜亂背景，使用超過一種強調色，彈跳緩動曲線，表情符號，大陰影，到處都是玻璃擬態效果，發明指標或見證。
聲音
一個振奮人心、柔和的背景音樂，節奏 100-110 BPM（柔和的鋼琴或撥弦和弦，開場後輕柔的打擊樂進入，結尾處情緒提升），音量輕柔溫暖。音效尺寸要小：打字時的按鍵聲、柔和的點擊聲、每個步驟完成的輕微「滴答」聲、較大鏡頭運動時的柔和「咻」聲、結束卡處的柔和鈴聲。音樂應該像是高品質產品影片中的背景，而非主導力量。
頁面建構方式
一個自包含的 HTML 檔案（內嵌 CSS 和 JS；僅在使用者提供時才使用圖片）。使用 DOM + CSS transforms、SVG 或一個全螢幕 canvas 進行繪製，選擇最適合的方式。
頁面合約
window.VIDEO = {w, h, duration}和window.seek(t)，一個 純時間函數：它根據時間t（秒）設定每個元素。沒有 CSS 過渡或動畫，沒有setTimeout，沒有從前一影格繼承的狀態。任何影格都必須能獨立、以任意順序正確渲染。在seek內部測量佈局（例如offsetLeft，measureText）是可接受的；這是確定性的。- 隨機性（顆粒、粒子、音訊中的雜訊）來自於種子生成器，絕不使用
Math.random。 - 任何需要歷史記錄的內容（一個落後於移動物體的鏡頭、一個模擬）都 在載入時預先計算一次：以 1/240 秒的步長從 0 到
duration執行，儲存這些值，然後seek透過插值讀取它們。對於循環，從循環開始時的狀態開始模擬（參見此風格的接縫規則）。 - 循環：
seek(t)使用t % duration；跨越接縫的效果（如落地擠壓、聲音尾音）會在兩端同時繪製或混合。 - 帶有
?render的 URL：沒有控制項，沒有預覽縮放；舞台正好是w × h並位於左上角。沒有它：舞台會透過 CSS 縮放以適應視窗，並顯示預覽控制項。 - 字型：嵌入它們。 下載 woff2 檔案（來自 Google Fonts 或品牌字體）並將它們內嵌為 base64
@font-face，以便渲染永遠不會無聲地回退。對於字重變化，請使用帶有範圍的可變字型（[email protected]）。 - 圖層： 為場景圖層設定透明背景，並讓一個位於它們後方的舞台背景提供基礎顏色，這樣後面的圖層就不會意外遮住前面的圖層。絕對定位的文字應設定
white-space: nowrap。 - 速度： 大型 CSS
filter: blur()和大範圍模糊的漸層在螢幕截圖時非常慢。應在載入時在 canvas 上（或作為圖片）繪製漸層和光暈一次，然後移動它。
輔助工具：貼上這些並在其上建構所有內容
// damped spring step response 0 -> 1. w = speed (8 slow, 14 normal, 22 snappy), z = damping (1 = no overshoot)
function spring(t, w = 14, z = 0.82) {
if (t <= 0) return 0;
if (z >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);
const wd = w * Math.sqrt(1 - z * z);
return 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + (z * w / wd) * Math.sin(wd * t));
}
// a value that changes target many times, springing to each: track(start, [[time, value, w?, z?], ...]) -> f(t)
const track = (v0, keys) => t => { let v = v0, p = v0; for (const [tk, val, w, z] of keys) { v += (val - p) * spring(t - tk, w, z); p = val; } return v; };
// precise eased keyframes (best for camera moves): kf([[t0, v0], [t1, v1, easeFn?], ...]) -> f(t)
const kf = keys => t => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [a, va] = keys[i - 1], [b, vb, e = ease] = keys[i]; if (t <= b) return lerp(va, vb, e((t - a) / (b - a))); } return keys[keys.length - 1][1]; };
const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
const ease = x => (x = clamp(x), x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2); // easeInOutCubic
const lerp = (a, b, k) => a + (b - a) * k;
const seg = (t, a, b) => clamp((t - a) / (b - a)); // 0..1 progress of t through [a, b]
const rng = s => () => (s = (s + 0x6D2B79F5) | 0, s = Math.imul(s ^ (s >>> 15), 1 | s), s ^= s + Math.imul(s ^ (s >>> 7), 61 | s), ((s ^ (s >>> 14)) >>> 0) / 4294967296);
- 打字效果：可見字串是
full.slice(0, n(t))，並帶有從t開始閃爍的游標。計數效果：格式化lerp(a, b, ease(seg(t, …)))。 - 一個 鏡頭 是一個包裝元素，其
transform: translate() scale() rotate()由kf或track驅動。
聲音
window.buildAudio(ctx)安排在給定的任何AudioContext或OfflineAudioContext上，從時間 0 開始的整個配樂（音樂 + 音效），使用與視覺效果相同的時間軸數字。使用振盪器、濾波後的雜訊（來自種子緩衝區）和包絡進行合成。如果使用者提供了音樂檔案，則使用fetch+decodeAudioData載入它，設定其節奏網格（測量它），並僅在其之上添加音效。- 預覽播放： 在第一次播放時，將配樂一次渲染到緩衝區中，然後從任何拖曳的位置開始播放。時鐘驅動
seek：
let buf, ac, src, startAt = 0, offset = 0, playing = false;
async function play() {
ac ??= new AudioContext();
if (!buf) { const off = new OfflineAudioContext(2, Math.ceil(48000 * VIDEO.duration), 48000); await buildAudio(off); buf = await off.startRendering(); }
src = ac.createBufferSource(); src.buffer = buf; src.connect(ac.destination);
src.start(0, offset % VIDEO.duration); startAt = ac.currentTime; playing = true;
}
function pause() { if (!playing) return; offset += ac.currentTime - startAt; src.stop(); playing = false; }
function now() { return playing ? (offset + ac.currentTime - startAt) % VIDEO.duration : offset; }
(function loop() { seek(now()); requestAnimationFrame(loop); })(); // the scrubber sets offset (pause, set, play)
- 將節拍表作為註釋放在腳本頂部：每個時刻一行，包含其時間、發生的事情以及對應的聲音。
步驟 3：檢查、渲染、交付
在工作資料夾中進行一次設定
…
[為翻譯而截斷]