預設解說員 Default Explainer 是做什麼的？

一款沈穩、高質感的產品展示影片，正是資金充裕的新創公司會放在首頁的那種。它的全部祕訣在於克制：明亮的淺色畫布、一次只顯示一行簡短文字，並將產品本身的介面以乾淨的方式重建，近距離拍攝其使用過程。攝影機負責說故事：推近至一行文字，跟隨打字動作滑行，拉遠以顯示結果，然後平滑移動到下一項功能。

你將以一個 HTML 頁面來撰寫，該頁面能根據時間值渲染任何影格，然後將其渲染為具有動態模糊和配樂的 MP4。

步驟 1：獲取簡報（一次訊息，然後開始）

一次性詢問所有問題，然後自行工作。只有產品是必需的；任何留空的項目，請自行決定並說明你的選擇。

產品：名稱，以及用幾句話簡述其功能。有網址更佳。
觀眾必須記住的一件事（例如「輸入一個想法，獲得一個即時應用」）。
品牌：顏色、字型、Logo 檔案，或「使用網站」。若無，則使用下方的預設調色盤。
格式：16:9 (1920×1080) 或 9:16 (1080×1920)。預設為 16:9。
長度：此風格的預設長度如下所述。
音樂：他們自己的音軌（檔案路徑），或讓你合成一條。預設：合成。
方向（可選）：他們想要的場景、標語、行動呼籲，或任何需要避免的事項。

如果他們提供了 URL，請在撰寫任何內容之前先讀取它（網路抓取），以獲取產品實際的用詞、功能、顏色和字型名稱。在 UI 標籤和標語中使用他們真實的用詞。

切勿虛構事實。不得有虛構的客戶數量、營收、評級、推薦或引言。數字僅在使用者或網站明確陳述時才能出現；否則請使用相對條塊、進度和佔位骨架線條。UI 內部的範例內容（提示詞、檔名、專案名稱、收據上的價格）是允許的，且應合理可信；關於產品本身的宣稱（統計數據、用戶數、評級、優惠如「免費」）則不允許。行動呼籲僅能使用使用者或網站提供的 URL 或優惠；若無，則以名稱和標語作為結尾。

Logo。 僅在使用者提供檔案，或是該產品屬於使用者且他們要求時，才使用 Logo。否則請以品牌字型將名稱顯示為文字。第三方 Logo（整合）僅在提供時使用；否則使用帶有名稱的中性圓角圖塊。

同時詢問（可選）：要展示的 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。它淡入品牌時刻：柔和的品牌漸層掃入（如絲綢般的斜向光帶），中心為 Logo 或名稱，字體較小。
問題或訴求（約 5 秒）。 觀眾能識別的簡短一行（還在手動建立潛在客戶清單？），或直接進入產品的輸入區域：一個大型圓角輸入框，空白，帶有佔位文字，下方有建議標籤。
功能章節（3–5 個，每個約 8–15 秒）。 每個章節包含：
- 標題行：一個簡短句子，字體較小（1080p 下約 28 px），置中於純畫布上。它逐字輸入或淡入。然後攝影機推近，直到該行約佔畫面寬度的 75%，並且其中一個關鍵字或短語獲得高亮：柔和的品牌色框從左到右掃過其後方（直接打電話給決策者。）。
- UI 時刻：產品真實的介面，以乾淨的向量 UI 重建（非螢幕截圖），僅裁剪出相關部分並放大顯示。攝影機足夠接近，使該元素充滿大部分畫面，並跟隨動作滑行：文字輸入到輸入框（攝影機跟隨游標；使用 measureText 測量文字位置）、代理的步驟逐一完成（旋轉器 → 勾號，找到 247 個匹配）、結果卡片堆疊，較遠的卡片模糊（景深）、表格逐行填充、游標點擊儲存格按鈕並顯示數值、新增欄位且每個儲存格「思考」後出現值、彈出視窗開啟並顯示推理和來源。
- 拉遠：動作完成後，攝影機輕鬆拉出以顯示整個畫面，讓觀眾了解所在位置，然後滑行繼續。
證明（可選，僅限真實數字）。 一個帶有計數數字的句子，數字被高亮（由 3 億+ 個人資料的資料庫支援），背景為微妙的虛線地球或網格。
整合（可選）。 專為您現有工作流程打造。 置中，同時 8–12 個應用圖塊（圓角方形，僅在使用者提供時使用真實 Logo；如果整合項目較少則重複）從邊緣以不同深度浮入：近的較大且略微模糊，遠的較小且清晰，所有圖塊都帶有視差移動。此處文字自行放大而非透過攝影機推近，以使圖塊保持在畫面內。
結尾。 在品牌漸層上：一個句子，其中包含一個旋轉高亮單詞，循環顯示使用案例（在 Product 中完成您的所有[潛在客戶開發 / 研究 / 外展]）。然後，僅在產品確實有另一種使用方式時顯示（例如，對於帶有 Claude 連接器的產品顯示或直接詢問 Claude），接著是帶有關鍵短語高亮的標語。
結束卡片（3 秒）。 Logo 或名稱在品牌漸層上，下方為 URL 或行動呼籲，字體較小。

賦予高級感的規則

一次只做一件事。 畫面上永遠不超過一行文字和一個 UI 元素。文字和 UI 幾乎不會共用畫面：先文字場景，再 UI 場景。
攝影機就是剪輯師。 沒有硬切。每次場景轉換都是一個攝影機動作（推近、拉遠、滑行）或在純畫布上的柔和模糊淡出。攝影機動作是平滑的緩動（ease，持續 0.6–1.2 秒）或高阻尼彈簧（z ≥ 0.95）；沒有彈跳效果。
真實的 UI，乾淨地呈現。 根據你對產品（或其網站）的了解重建其介面：實際的佈局、標籤、顏色、字型和圓角半徑，根據場景需求進行簡化。內部的內容是符合產品、可信的範例資料。使用柔和陰影、1 像素邊框、充足的留白。
游標： 標準 macOS 風格的箭頭，沿著柔和曲線移動，在點擊前一個節拍到達，帶有輕微的按壓下沉和點擊的控制項上的柔和漣漪。懸停狀態會改變。
字型： 如果已知則使用品牌字型；否則使用 Inter 或 Geist。標題行使用小號、常規字重（它們透過攝影機變大，而非字型大小）。大號文字使用較緊的字距。
預設調色盤： 畫布 #F7F7F8，文字 #111114，次要 #8A8A94，UI 表面白色帶 #E7E7EC 邊框，品牌強調色 #2E6BFF，高亮框 = 強調色 15–20% 透明度。品牌漸層：白色 → 淡強調色 → 強調色，呈現為緩慢的斜向絲綢帶狀（在畫布上繪製，非 CSS 模糊）。品牌顏色取代強調色。
節奏： 每個標題行落地後停留約 2 秒；UI 時刻以真實速度進行（打字約每秒 25 個字元），每個結果後暫停 0.5 秒以便觀眾閱讀。
禁止事項： UI 後方雜亂的背景、超過一個強調色、彈跳緩動、表情符號、大陰影、處處玻璃態、虛構的指標或推薦。

聲音

一首振奮人心、溫和的背景音樂，節奏 100–110 BPM（柔和的鋼琴或撥弦和弦，開場後加入輕柔打擊樂，結尾處提升），安靜而溫暖。音效細小：打字時的按鍵聲、輕柔的點擊聲、每個完成步驟的輕柔「滴答」聲、較大攝影機動作時的柔和「呼」聲、結束卡片上的柔和鈴聲。音樂應像製作精良的產品影片中的背景一樣，而非主導。

頁面建構方式

一個自包含的 HTML 檔案（內聯 CSS 和 JS；圖像僅在使用者提供時使用）。使用 DOM + CSS 變換、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；跨越接縫的效果（落地擠壓、聲音尾跡）在兩端繪製或混合。
當 URL 中包含 ?render 時：不顯示控制項，無預覽縮放；舞台精確位於左上角，尺寸為 w × h。不包含時：舞台透過 CSS 縮放以適應視窗，並顯示預覽控制項。
字型：內嵌。 下載 woff2 檔案（Google Fonts 或品牌字型）並以 base64 @font-face 內聯，以免渲染時無聲地使用回退字型。對於權重變形，使用範圍變數字型（[email protected]）。
圖層： 為場景圖層提供透明背景，並讓一個舞台背景在它們後面提供基礎顏色，這樣後面的圖層就不會意外地遮住前面的圖層。使用絕對定位的文字應設定 white-space: nowrap。
速度： 大型 CSS filter: blur() 和大面積模糊漸層截圖時非常慢。在載入時一次性地在畫布上（或作為圖像）繪製漸層和光暈，然後移動它們。

輔助工具：貼上這些並在其上構建一切

// 阻尼彈簧步響應 0 -> 1。w = 速度（8 慢，14 正常，22 快），z = 阻尼（1 = 無超調）
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));
}
// 一個多次改變目標的值，彈性跟隨每個目標：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; };
// 精確緩動關鍵幀（最適合攝影機移動）：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));      // 時間 t 在 [a, b] 區間內的進度 0..1
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) 排程整個配樂（音樂 + 效果），從時間 0 開始，在任何給定的 AudioContext 或 OfflineAudioContext 上執行，使用與視覺元素相同的時間軸數字。使用振盪器、濾波噪聲（來自種子緩衝區）和包絡合成。如果使用者提供了音樂檔案，使用 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); })();   // 擦洗器設定 offset（暫停，設定，播放）

將節拍表作為註釋放在腳本頂部：每個時刻一行，包含其時間、發生的事件以及哪個音效。

步驟 3：檢查、渲染、交付

在工作資料夾中設定一次

…

[為翻譯而截斷]

預設解說員 Default Explainer