Liqiuyue9597/data-video-skill

數據解說影片（Tatakye 風格）

建立一部以中文字幕驅動的解說短影片，產出一個完全自包含的 HTML 檔案，使用者可在瀏覽器中播放並進行螢幕錄影。

適用場景

• 將文章、論文或研究發現轉化為 3-6 分鐘的影片
• 極簡黑金「思想片段」美學（3Blue1Brown / Veritasium / Tatakye 風格）
• 使用者希望將成品發布至小紅書、微信影片號、Bilibili、YouTube
• 零外部資產 — 無需購買字型、無需庫存影片、無版權問題、無需伺服器

撰寫程式碼前的必要提問

不可妥協的前置問題 — 請使用 AskUserQuestion 提問，而非事後才問。若方向錯誤，將導致整個重寫。

1. 一句話主題：不是「文章在說什麼」，而是影片要捍衛的主張。若無法用一句話說清楚，你還沒有影片，你只有一份閱讀清單。
2. 脊椎：哪一個螢幕上的物件將貫穿整部影片？（請參閱下方「脊椎」章節 — 這是最重要的設計決策，也是多數解說影片因完全省略而失敗的原因。）
3. 長度：3-4 分鐘（精華版）vs 5-6 分鐘（標準 Tatakye 長度）vs 8-10 分鐘（深度版）。長度決定了有多少章節得以保留。對於一篇目標為 5 分鐘的 10 章節文章，你需要刪除 60-70% 的章節。
4. 旁白模式：僅字幕（文字驅動節奏）vs AI 語音 vs 自行錄製。「僅字幕」是預設模式 — 字幕本身即成為節拍。
5. 出處標示：如何標註原作者。預設為右上角的「原文 · [Name]」。若有脊椎，則出處標示應放在脊椎下方，而非取代它。
6. 收穫（非修辭提問）：觀眾離開時帶走了什麼具體的東西？一個被重新定義的問題並不是收穫。「你，是他們嗎？」聽起來很有力量，但觀眾帶不走任何東西。真正的收穫是一份簡短的命名列表（2-4 項），他們第二天還能複述。請參閱下方「收穫，而非修辭」。

切勿跳過這些。 第一次嘗試通常會在第 1 點（主題）和第 5 點（收尾）上失敗。一旦這些方向確定，你可以自由重寫。

脊椎 — 最重要的單一設計決策

一部偉大的解說影片都有一條脊椎：一個持續顯示的螢幕物件，在影片大部分時間內保持可見，每個節拍都會點亮它的不同部分。

Tatakye 的「股市回報」影片是經典範例。其脊椎是公式 p = E[mx]，固定在右上角從 1:00 到 3:30。每個章節高亮一個符號 — x、m、π_s — 解釋該符號的意義。最後，公式「解鎖」為三個具體收穫（x → 哪種期貨，m → 哪個世界，π_s → 等多久）。

為何這有效，以及為何沒有脊椎的影片感覺很弱：

• 脊椎是一個視覺錨點。如果觀眾目光移開再回來，他們能立刻知道「我們正在分解什麼」。
• 它將抽象的框架轉化為螢幕上的實體物件。概念有了座標。
• 章節標籤只能告訴觀眾他們在結構中的位置。脊椎則告訴觀眾正在解釋概念的哪個部分 — 這是一個更強的訊號。
• 最後的收穫可以就是「脊椎，被解決了」。你以一個問題開場，逐步建立脊椎的各個部分，最後將脊椎作為答案交還給觀眾。

什麼構成好的脊椎

一個脊椎候選者必須：

1. 能寫在一行內（以便它一直待在角落）
2. 有 3-5 個命名元件，每個對應影片的一個節拍
3. 視覺上穩定 — 不是動畫，而是靜態參考框架
4. 承載論點 — 如果你理解了脊椎的每個部分，你就理解了整個作品

常見形式（按衝擊力排序）：

• 一個方程式：工作 = 肌肉 × 心智、p = E[mx]、價值 = 稀缺性 × 關注度
• 帶有命名箭頭的圖表：生產者 → 產品 → 用戶，可一次高亮一個節點
• 標籤化的比率或比較：過去 : 現在 : 未來
• 一個簡短序列：觀察 → 假設 → 實驗 → 結論

避免作為脊椎：

• 一個單一的數字（沒有元件可以高亮）
• 一個長句子（放在角落太囉嗦，失去意義）
• 一張圖表（圖表是關鍵視覺，他們位於中央，而非作為脊椎）

脊椎必須在第一幕結束前出現，並持續存在

不要在開場就把脊椎丟給觀眾然後再也不管。也不要等到第二幕才介紹它。結構是：

1. 0:00–0:30 鉤子：尚無脊椎；設定問題
2. ~0:30 脊椎揭示：方程式/圖表淡入右上角
3. 第一幕–第三幕：脊椎持續存在，每一幕高亮一個元件
4. 收穫：脊椎溶解並轉變為三項要點的列表

脊椎術語高亮（視覺配方）

每個脊椎術語應有三種狀態：

• 暗淡（預設）：color: var(--dim) — 灰色，存在但柔和
• 點亮（正在解釋）：color: var(--gold) + text-shadow 光暈 — 毫無疑問「我們現在在這裡」
• 已完成（已解釋）：color: var(--fg) — 白色，已教導、已定案

當新章節開始時，將之前的 .lit 降級為 .done，將新術語提升為 .lit。一次只點亮一個術語。視覺效果是：脊椎從左到右逐步點亮，最後所有東西都是白色（完整教導），準備溶解進入收穫。

敘事結構 — 一個主張，少數節拍

唯一的鐵律：作品捍衛一個主張，每個節拍都服務於它。如果一個章節沒有推動主張前進或為後續節拍鋪路，就刪掉它。

除此之外，結構是工具，而非模板。選擇適合主張的形狀：

• 三幕（鉤子 → 模式 → 轉折 → 代價） — 主張有驚人反轉時適用（例如「我們以前做過，但這次有代價」）
• 問題 → 機制 → 含義 — 解釋某事物為何如此運作時適用
• 時間線/累積 — 當重點是累積時適用（「看看這發展到多遠了」）
• 比較 — 適用於「A vs B，以及為何重要」
• 問題 → 嘗試 → 解決 — 適用於研究發現或調查類作品
• 單一見解展開 — 一個令人驚訝的事實，緩慢建立並最終落地（Tatakye 的「股市回報」影片即是此類）

如何選擇：大聲說出那句話的主張。進行這個論證的自然節奏是什麼？那就是你的結構。

章節數量隨長度調整，而非結構：

• 3-4 分鐘 → 3-4 個關鍵節拍
• 5-6 分鐘 → 5-7 個節拍
• 8-10 分鐘 → 8-12 個節拍

每個節拍需要：

• 一個關鍵視覺（一條曲線、一個比較、一個圖表、一個粒子事件）
• 一個關鍵數字或一個關鍵短語
• 一個轉向下一拍的過渡（不只是「現在第二節」）

紅旗：如果你的大綱讀起來像是「第一節、第二節、第三節...」的扁平列表，你正在引導用戶瀏覽一份閱讀清單。壓縮或重新排序，讓節拍連鎖 — 每個都讓下一個感覺不可避免。

場景經濟 — 更少場景，更長演化

一個常見失敗模式：讓每個章節都是一個新場景。結果：連續七個不相關的視覺，每個持續 30 秒，觀眾看暈了，什麼也記不住。

Tatakye 原則：一個視覺物件，在 2-3 分鐘內演化。在「股市回報」影片中，「機率空間網格」從 ~0:40 到 ~2:30 在螢幕上 — 將近兩分鐘。在此期間它：

1. 僅以線條出現（「所有可能的世界」）
2. 長出金色條（x，每個世界的回報）
3. 條被著色（m，每個世界的權重）
4. 公式出現在上方（期望值）
5. 疊加具體數字（具體範例：0.86、+16.9%）
6. 疊加文字標籤（「蕭條/繁榮」）

六次疊代，一個視覺物件。 觀眾的眼睛從未重置。

經驗法則

• 目標： 一部 5 分鐘的影片總共 3-5 個場景。超過這個數 = 很可能切換太頻繁。
• 最小場景持續時間：實質性場景最少 60-90 秒。少於一分鐘 = 很可能應該作為另一個場景內的一層，而非獨立場景。
• 偏好場景成長進入下一個場景，而非切換。 範例：雙曲線圖長出兩條曲線間的陰影區域，該區域長出從中升起的條 — 三個「章節」的內容，零場景切換。
• 場景變化發生在幕的邊界，而非幕內。 在幕內，使用疊加、高亮、數字計數、標籤 — 而非場景變化。

何時場景變化是合理的

• 鉤子 → 第一個內容場景
• 第 N 幕 → 第 N+1 幕，如果視覺隱喻根本無法承載下一個想法
• 內容 → 收穫（結尾值得視覺重置）

就這些。一部 5 分鐘的影片最多三次場景變化。

收穫，而非修辭

偉大的解說影片以 2-4 件觀眾可以帶走的具體、命名的事物列表 結尾。不是一個問題。不是一種感覺。一個列表。

Tatakye 的「股市回報」影片結尾交給了你三件事（x、m、π_s），並附有具體解釋：「該買哪種期貨、你在哪個世界、等多久。」觀眾當天晚餐時就能複述。

常見的反模式：

• 「你，是他們嗎？」 — 重新定義的問題。感覺很有力量。什麼也沒教。觀眾關掉影片，記住了氛圍，忘記了內容。
• 「你覺得呢？」 — 修辭性推託。影片沒有對任何東西做出承諾。
• 「只有時間會證明。」 — 新聞式迴避。同樣的問題。
• 單句安慰。「我們以前經歷過。」 — 平淡，無實際用處。

好的收穫感覺如何：就像解鎖脊椎。脊椎是 A = B × C。收穫是「所以重要的是：(1) B、(2) C、(3) 它們之間的交互作用。」影片字面上解析為它的答案。

三項答案螢幕（配方）

     01            02            03
      X             Y             Z
    label         label         label
   caption       caption       caption

• 三垂直欄位，等距
• 項目逐一出現，間隔約 1 秒（每項伴隨提示音）
• 每項：索引號碼 (01/02/03)、單字形徽章（一個中文字或數學符號）、短標籤 (2-4 字)、一句話說明文字
• 全部出現後停留 3-4 秒，然後淡出
• 然後一句結束語，可以是經過重新表述為已解決的鉤子：「你，在哪一側？」在命名了各側之後就有效。

章節標籤作為內容路標

弱的章節標籤：ACT I、ACT II、ACT III — 告訴觀眾他們在結構中的位置。他們不在乎。

強的章節標籤：肌肉 · 第一次外包、心智 · 第二次外包、× · 相乘、= · 代價、答案 · 三件事 — 每個標籤都是來自脊椎的術語或內容的直接片段。閱讀標籤，觀眾立刻知道現在正在被分解的是什麼想法。

規則：章節標籤應該是脊椎會高亮的一個詞。如果你的章節標籤是「ACT II」但你的脊椎說是「心智」，請將章節標籤改為「心智」。不要將結構性支架複製到章節標籤中 — 結構是隱含的，內容才是觀眾需要的。

視覺系統（Tatakye 風格）

色彩

--bg:    #0a0a0f   /* 非 #000000 — 純黑在螢幕上看起來死白 */
--fg:    #eceae4   /* 暖白，2% 藍色偏移；絕不使用純白 */
--dim:   #8a8a90   /* 用於軸標籤和說明文字 */
--gold:  #d4a85a   /* 唯一用於強調的色彩 */
--red:   #c15b4e   /* 僅用於「負面」統計（工資落後） */

絕對不要使用超過這五種。抵制加入藍色/綠色以增加變化的衝動。

字體排印 — 這是影片失敗的常見原因

• 中文或英文，每個元素選擇一種。 絕對不要「ACT II · THE PARALLEL · 第二幕 · 現在輪到心智」 — 這是重複、難以閱讀，並且明顯是「AI 生成的雙語投影片」。每個標籤選擇一種語言。
• 盡量減少斜體。 CJK 文字上的斜體幾乎在所有瀏覽器中看起來都很糟（偽傾斜字形）。使用色彩 (var(--gold)) 進行強調，而非斜體。
• 行動裝置觀看的最小尺寸：
  • 軸刻度：17px 基線（由 fontPx() 縮放）
  • 軸標籤：17-19px
  • 曲線末端標籤：19px
  • 章節標籤（左上）：1.1rem
  • 字幕（底部中央）：1.15rem
  • 標題數字（中央）：4.5rem+
  • 開場/結束大字：1.9rem+
• 襯線字體用於顯示數字（EB Garamond 備援 → Noto Serif SC）。無襯線用於其他所有內容（Inter → PingFang / Noto Sans）。

四層資訊架構（Tatakye 標誌性風格）

每個場景在固定位置最多有四個文字層：

1. 左上：章節標籤（小字、字母間距、暗淡）
2. 右上：作者出處（小字、暗淡）
3. 中央：大數字 / 標題（大字、襯線）
4. 底部中央：字幕旁白（中字、無襯線）
5. 左下斜體（可選）：學術引用（恩格斯停滯 · Robert Allen）

核心母題（在整個作品中重複使用 3-5 個）

不要為每個章節發明一個新的視覺 — 選擇一小組並變換它們：

• 帶有透視的粒子場：120×36 網格，遠處行靠近地平線，輕微正弦波
• 時間軸上的上升曲線：大部分 X 軸平坦，指數上升；將時間錨點標註為敘事詞語（「現在」、「未來」），而非具體年份（2000年已是過去）
• 帶有面積填充的下降曲線：價格崩潰 / 價值流失
• 水平時間條：比例長度比較（40 年 vs 5 年，1/8 比例）
• 程式碼雨：簡短的領域特定程式碼行落下，用於「機器接管認知工作」
• 點/粒子碎裂：用於「某些東西斷裂」的時刻

相機呼吸

為任何靜態場景添加微小的視差：camBreath = sin(t*0.14)*6, camSway = sin(t*0.09)*4，並應用深度加權乘數，使近處元素移動多於遠處。防止「死板畫面」的感覺。

場景轉場

場景之間始終使用黑閃轉場 — 絕不硬切。sceneBlink(cb, {dark:0.45, hold:0.08, light:0.5})：0.45 秒淡出至黑 → 執行場景變換 → 0.5 秒淡回。每個轉場總共約 1 秒。感覺像電影剪輯，而非幻燈片切換。

數字計數動畫

每個大數字在揭示時都會從 0 動畫到目標值，使用 easeOutCubic 曲線，持續約 1.1 秒。使用 <span class="count" data-to="... 的方式實現。

音訊 — 稀疏、有目的

目標：不是無聲，而是甘願安靜。Tatakye 風格的影片在大部分時間內音量非常低，僅在重要時刻有聲音提示。觀眾應該感覺影片是自給自足的，而非依賴背景音樂來維持能量。

音軌

• 38 BPM 環境拍子：非常微弱的低頻打擊樂，大約每 1.6 秒一下，-22dB 以下。僅用於字幕變換的間隔。聽起來像心跳，而不是節奏。
• 內容音效：
  • 脊椎揭示：一個上升的共鳴聲（pluck，頻率 140→280 Hz，持續 0.6 秒）
  • 脊椎高亮變換：短清脆聲（click，1.8 kHz，0.05 秒，-12dB）
  • 數字計數完成：上升和弦中的一個音符（chime，頻率 440 Hz，0.5 秒，-9dB）
  • 收穫揭示：三個上升音符（chord，C→E→G，不重疊）
  • 轉場：微弱的低頻掃頻（sweep，60→30 Hz，0.3 秒，-20dB）
• 完全不需要：循環音樂、連續無人機音、人聲提示、環境聲。

實作

使用 createAudioContext()，僅在第一次使用者互動時建立（瀏覽器自動播放政策）。所有聲音都是合成的（OscillatorNode + GainNode），無音訊檔案。音訊生成應封裝在函數中：playPluck(freq, duration)、playClick(freq, duration)、playChime(freq, duration)。一個全域 masterGain 控制總音量（預設 0.4）。

作品結構（HTML 生成）

檔案

單一 HTML 檔案，<!DOCTYPE html> 開頭。所有內容在 index.html 內部 — 無外部檔案、無 CDN、無 @import。字型使用 CSS @font-face 嵌入為 base64 Data URI（僅限 EB Garamond 和 Noto Sans SC 的子集，僅使用所需字形）。

畫布

• width: 1080, height: 1920（9:18 直式，適合短影片）
• canvas {display:block; background:var(--bg)} — 無邊框
• 透過視窗的 devicePixelRatio 進行 HiDPI 縮放：canvas.width = 1080 * dpr; canvas.height = 1920 * dpr; ctx.scale(dpr, dpr)
• requestAnimationFrame 循環：60fps，但在 <0.2 fps 動畫時使用 setTimeout(1000) 降頻，以節省電池

場景管理

const scenes = {
  hook: { draw, enter, exit },
  spineReveal: { draw, enter, exit },
  // ...
}
let currentScene = 'hook'

每個 draw 函數接收 t（場景年齡，以秒為單位）和全域 elapsed（影片年齡，以秒為單位）。enter/exit 被呼叫時帶有回呼，用於場景的生命週期鉤子（啟動粒子、開始計數動畫）。

核心動畫實用工具

easeInOutCubic(t), easeOutCubic(t), easeInCubic(t)
lerp(a, b, t)
lerpColor(c1, c2, t) // 支援 #rgb 和 #rrggbb

粒子系統

class ParticleField，配置參數：rows, cols, spacing, waveAmp, waveFreq, waveSpeed。每幀更新：y += waveAmp * sin(x * waveFreq + elapsed * waveSpeed)。繪製為「圓點狀」粒子（ctx.arc，半徑 2px，fill = var(--dim)，alpha = 0.3）。「點亮」粒子設定 fill = var(--gold)。

文字包裝與渲染

wrapText(ctx, text, maxWidth, lineHeight) — 以標點為基礎（在句號、逗號、空格處換行）。drawSubtitle(text, t) — 以打字機效果逐字顯示，使用 Math.floor(t * charsPerSecond) 來控制每個字的揭示時機。

螢幕錄影器註解

在 HTML 結尾附近加入註解：

<!--
  螢幕錄影提示：
  1. 使用 OBS Studio / QuickTime Player 錄製此頁面
  2. 設定輸出解析度為 1080×1920
  3. 按空白鍵開始影片，按 Esc 暫停
  4. 錄製後使用剪輯軟體裁剪開頭/結尾的空白
-->

實作順序

始終以這個順序建構：

1. 脊椎（首先鎖定 — 每個其他決定都源自它）
2. 一句話主張（脊椎捍衛什麼）
3. 三個收穫（如果脊椎是 A = B × C，那麼是什麼）
4. 章節結構（製作大綱，並為每個章節推導出章節標籤）
5. 關鍵視覺（每種 3-5 個，由核心母題變化而來）
6. 關鍵數字（每個節拍一個大數字）
7. 節拍指令（每個節拍 < 10 個字）
8. 腳本（每個節拍 10-30 秒旁白）
9. 音效提示（8-12 個提示，標有時間戳記）
10. 生成 HTML（最後一步 — 容易出錯且耗時，但在前面所有步驟鎖定之前不要開始）

交付格式

最終輸出是一個完整的 HTML 檔案，可供使用者雙擊並在瀏覽器中執行。測試：

• 在 Chrome 和 Safari 中開啟
• 確保所有動畫在沒有控制台錯誤的情況下運行
• 確保背景音訊播放
• 確保影片無縫循環（可選 — 對於螢幕錄影來說不是嚴格必要，但對於現場演示很好）

關於技能的序曲

你非常擅長將文字轉化為視覺。 你做得越少，效果越好。Tatakye 風格就是剝離所有不直接服務於主張的事物。如果一個元素在初始『脊椎→主張→收穫』三角之外，它就在爭奪注意力。爭奪注意力 = 弱化主張。

根據定義，你不需要任何在『脊椎→主張→收穫』三元組中找不到的東西。 扔掉它。

如果你完成了，但感覺它還不夠『影片化』 — 給它一個關鍵視覺和一個關鍵數字。不要加一個新場景。如果感覺平淡，幾乎總是意味著脊椎的『點亮』指示還不夠清晰 — 數字的動畫太慢，或者字幕落後於視覺。調整那些參數。不要添加新的章節。