v2-6: AE-style finishing (lens CA, light leaks, streaks), PBR coin sprites in pizza scene, end-card label fix

bitcoin-saga/README.md

@@ -102,7 +102,7 @@
 | **Mistral Voxtral TTS** | ❌ 实在用不了 | 官方演示 mistralai/voxtral-tts-demo 强制要求浏览器里交互式 Hugging Face 登录（OAuth），且后端需要 MISTRAL_API_KEY，无法脚本化调用 |
 | **Mistral Voxtral（语音识别）** | ✅ 已接入 | tools/voxtral_align.py：13 段旁白逐段送 Voxtral 识别（文本相似度 0.62–0.97），用识别出的语音起点校准每一行字幕；由于画面节拍与音效都挂在字幕时间上，画面、音效、字幕三者与真实发音一起对齐（多数行修正 0.2–0.7 秒） |
 | **Remotion** | ✅ 已接入 | 网页播放器改为 Remotion 合成（@remotion/player，60 帧时钟）：画面逐帧由 Remotion 驱动，混音由 Remotion `<Audio>` 同步播放；章节跳转、横竖屏切换（播放不中断）、空格/方向键、全屏全部保留 |
-| **After Effects** | ❌ | Adobe 商业软件，仅支持 Windows / macOS 且需授权，无法在 Linux 沙盒里运行；其常用效果（辉光、光晕、色差、胶片颗粒）改用 Three.js / Canvas 后期实现 |
+| **After Effects** | ❌ 实在用不了（效果已用代码复刻） | Adobe 商业软件，仅支持 Windows / macOS 且需授权，无法在 Linux 沙盒里运行；AE 常用的成片效果改由渲染器逐帧实现：镜头色差（转场时加强）、转场漏光、横向光条、高光辉光、暗角、胶片颗粒 |
 
 步骤 & 推送：v2-1 计划（本节）→ v2-2 Blender 资产 → v2-3 Three.js 金币接入 → v2-4 ElevenLabs/Voxtral 声部 → v2-5 Remotion 播放器 → v2-6 逐帧打磨 + 最终推送。
 
@@ -116,3 +116,4 @@ cd bitcoin-saga/web && npm i && npm run build   # 输出到 ../dist
 - 推送 v2-3：Three.js 实时 PBR 金币接入（尾声主角金币：急转后停在 3/4 侧面缓慢呼吸，影棚光扫过镜面币心；2025 历史新高处 9 枚 3D 金币喷涌翻滚落下，小尺寸自动切换 Blender 减面 LOD）；封面换成 Blender Cycles 光追金币；Voxtral 语音识别校准全部字幕/画面节拍/音效时间；母带加软限幅（峰值 1.16 → 0.999，响度不变）。
 - 推送 v2-4：ElevenLabs / Voxtral TTS 实测不可用（见上表），旁白继续由 Qwen3-TTS 担任；Voxtral 语音识别已用于字幕对齐（并入 v2-3）。
 - 推送 v2-5：Remotion 播放器接入：画面与音轨共用一个帧时钟；横竖屏切换后接着播放，空格暂停/继续、播放结束可重播。
+- 推送 v2-6：AE 式成片后期（镜头色差、转场漏光与光条，字幕/HUD 不受影响保持清晰）；披萨场景 420 枚金币换成 Three.js 光照金币（32 个旋转角度预渲染，下落时旋转、落定后停住）；尾声区块链标签在片尾标题出现时自动隐去，不再与标题文字重叠；全片横竖屏逐秒排版检查 + 导出测试通过。

bitcoin-saga/dist/index.html

@@ -7,7 +7,7 @@
     <title>账本永不眠 · 比特币发展历程 2008 → 2026</title>
     <meta name="description" content="网页实时渲染的比特币 17 年动画纪录片：旁白、配乐、音效，浏览器本地导出 MP4。" />
     <style>html,body{margin:0;background:#07070a}</style>
-    <script type="module" crossorigin src="./assets/index-DbpHodyw.js"></script>
+    <script type="module" crossorigin src="./assets/index-biRZVsu1.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-2e2AWXEI.css">
   </head>
   <body>

bitcoin-saga/web/src/bitcoin/BitcoinApp.tsx

@@ -12,13 +12,13 @@ import { renderSoundtrack } from './engine/audio'
 import { exportMp4, exportSupported, type ExportOpts, type ExportProgress } from './engine/export'
 import { COVERS, COPY, drawCover, charLen, tagString, type CoverSpec } from './engine/covers'
 import { coin3d } from './engine/coin'
-import { coin3dGL, renderCoinGL } from './engine/coingl'
+import { coin3dGL, coinSprite, renderCoinGL } from './engine/coingl'
 import { SCENES, TOTAL, fmtTime, sceneIndexAt } from './timeline'
 
 type Orient = 'land' | 'port'
 
 // frame-inspection hook (used for automated QA screenshots)
-if (typeof window !== 'undefined') (window as unknown as Record<string, unknown>).__btc = { draw, drawCover, COVERS, SCENES, TOTAL, loadFonts, renderSoundtrack, exportMp4, coin3d, coin3dGL, renderCoinGL }
+if (typeof window !== 'undefined') (window as unknown as Record<string, unknown>).__btc = { draw, drawCover, COVERS, SCENES, TOTAL, loadFonts, renderSoundtrack, exportMp4, coin3d, coin3dGL, coinSprite, renderCoinGL }
 
 function useIsPhonePortrait() {
   const q = '(max-width: 820px) and (orientation: portrait)'

bitcoin-saga/web/src/bitcoin/engine/coingl.ts

@@ -224,3 +224,36 @@ export function coin3dGL(ctx: Ctx, x: number, y: number, R: number, yaw: number,
   }
   ctx.restore()
 }
+
+// ---------------------------------------------------------------- sprite sheet for coin swarms
+// Hundreds of small coins (e.g. the 10,000 BTC pizza) can't each get a live WebGL render, so the same lit PBR coin
+// is rendered once at 32 spin angles into a sheet; each small coin then picks the frame for its own spin.
+const SPR_N = 32, SPR_CELL = 96
+let sheet: HTMLCanvasElement | null = null
+function coinSheet() {
+  if (sheet || !gl) return sheet
+  const c = document.createElement('canvas')
+  c.width = SPR_CELL * 8; c.height = SPR_CELL * (SPR_N / 8)
+  const g = c.getContext('2d')!
+  g.imageSmoothingEnabled = true; g.imageSmoothingQuality = 'high'
+  for (let i = 0; i < SPR_N; i++) {
+    const src = renderCoinGL(300, (i / SPR_N) * Math.PI * 2, -0.28, 0.9, 1.25)
+    if (!src) return null
+    g.drawImage(src, 0, 0, gl.size, gl.size, (i % 8) * SPR_CELL, Math.floor(i / 8) * SPR_CELL, SPR_CELL, SPR_CELL)
+  }
+  sheet = c
+  return sheet
+}
+
+/** Small lit coin from the sprite sheet (face radius R). Returns false when WebGL is unavailable. */
+export function coinSprite(ctx: Ctx, x: number, y: number, R: number, yaw: number, alpha = 1) {
+  const sh = coinSheet()
+  if (!sh || alpha <= 0) return false
+  const f = ((Math.round((yaw / (Math.PI * 2)) * SPR_N) % SPR_N) + SPR_N) % SPR_N
+  const S = R * FIT * 2
+  const a = ctx.globalAlpha
+  ctx.globalAlpha = a * alpha
+  ctx.drawImage(sh, (f % 8) * SPR_CELL, Math.floor(f / 8) * SPR_CELL, SPR_CELL, SPR_CELL, x - S / 2, y - S / 2, S, S)
+  ctx.globalAlpha = a
+  return true
+}

bitcoin-saga/web/src/bitcoin/engine/render.ts

@@ -144,6 +144,79 @@ function transition(ctx: Ctx, T: number, W: number, H: number) {
   }
 }
 
+
+// ---------------------------------------------------------------- "After Effects" style finishing
+// Lens chromatic aberration (red channel scaled about the centre — fringes grow toward the edges, kick at cuts)
+// and drifting light leaks that bloom through each scene change. Applied under HUD/subtitles so text stays crisp.
+let caLayer: HTMLCanvasElement | null = null
+function lensCA(ctx: Ctx, T: number) {
+  let k = 0.0011
+  for (let i = 1; i < SCENES.length; i++) {
+    const d = Math.abs(T - SCENES[i].start)
+    if (d < 0.4) k += 0.0075 * Math.pow(1 - d / 0.4, 2)
+  }
+  const cv = ctx.canvas, w = cv.width, h = cv.height
+  if (!caLayer) caLayer = document.createElement('canvas')
+  if (caLayer.width !== w || caLayer.height !== h) { caLayer.width = w; caLayer.height = h }
+  const g = caLayer.getContext('2d')!
+  g.globalCompositeOperation = 'copy'
+  g.drawImage(cv, 0, 0)
+  g.globalCompositeOperation = 'multiply'
+  g.fillStyle = '#ff0000'
+  g.fillRect(0, 0, w, h)
+  ctx.save()
+  ctx.setTransform(1, 0, 0, 1, 0, 0)
+  ctx.globalAlpha = 1
+  ctx.globalCompositeOperation = 'multiply'
+  ctx.fillStyle = '#00ffff'
+  ctx.fillRect(0, 0, w, h)
+  ctx.globalCompositeOperation = 'lighter'
+  const sw = w * (1 + k), sh = h * (1 + k)
+  ctx.drawImage(caLayer, (w - sw) / 2, (h - sh) / 2, sw, sh)
+  ctx.restore()
+}
+
+function lightLeaks(ctx: Ctx, T: number, W: number, H: number) {
+  ctx.save()
+  ctx.globalCompositeOperation = 'screen'
+  for (let i = 1; i < SCENES.length; i++) {
+    const d = T - SCENES[i].start
+    if (d < -0.5 || d > 2.2) continue
+    const e = d < 0 ? easeOut(inv(-0.5, 0, d)) : 1 - easeInOut(inv(0.1, 2.2, d))
+    if (e <= 0.002) continue
+    const tint = MOOD[SCENES[i].mood]
+    const side = rnd(i, 71) < 0.5 ? -1 : 1
+    const blobs: [number, number, number, string, number][] = [
+      // x, y, radius, colour, strength
+      [W * (0.5 + side * 0.42) - side * d * W * 0.07, H * (0.18 + rnd(i, 3) * 0.3), Math.max(W, H) * 0.55, '#ff8a2a', 0.34],
+      [W * (0.5 - side * 0.38) + side * d * W * 0.05, H * (0.62 + rnd(i, 5) * 0.25), Math.max(W, H) * 0.42, tint, 0.2],
+      [W * (0.5 + side * 0.5), H * 0.5, Math.max(W, H) * 0.25, '#fff1d6', 0.16],
+    ]
+    for (const [x, y, r, col, a] of blobs) {
+      const g = ctx.createRadialGradient(x, y, 0, x, y, r)
+      g.addColorStop(0, rgba(col, a * e))
+      g.addColorStop(0.45, rgba(col, a * e * 0.35))
+      g.addColorStop(1, rgba(col, 0))
+      ctx.fillStyle = g
+      ctx.fillRect(0, 0, W, H)
+    }
+    // thin anamorphic streak across the flash
+    const f = Math.max(0, 1 - Math.abs(d) / 0.35)
+    if (f > 0) {
+      const y = H * (0.42 + rnd(i, 9) * 0.16)
+      const g = ctx.createLinearGradient(0, y - 3, 0, y + 3)
+      g.addColorStop(0, rgba('#ffd27a', 0)); g.addColorStop(0.5, rgba('#ffd27a', 0.55 * f)); g.addColorStop(1, rgba('#ffd27a', 0))
+      ctx.fillStyle = g
+      ctx.fillRect(0, y - 3, W, 6)
+      const g2 = ctx.createLinearGradient(0, y - 40, 0, y + 40)
+      g2.addColorStop(0, rgba('#ff9a3a', 0)); g2.addColorStop(0.5, rgba('#ff9a3a', 0.16 * f)); g2.addColorStop(1, rgba('#ff9a3a', 0))
+      ctx.fillStyle = g2
+      ctx.fillRect(0, y - 40, W, 80)
+    }
+  }
+  ctx.restore()
+}
+
 // ---------------------------------------------------------------- HUD
 function hud(ctx: Ctx, T: number, W: number, H: number, P: boolean, hudY: number) {
   const i = sceneIndexAt(T)
@@ -306,6 +379,8 @@ export function draw(ctx: Ctx, T: number, outW: number, outH: number) {
   }
 
   transition(ctx, T, W, H)
+  lightLeaks(ctx, T, W, H)
+  lensCA(ctx, T)
   const L = makeSC(ctx, SCENES[i], T, P).L
   hud(ctx, T, W, H, P, L.hudY)
   subtitles(ctx, T, W, P, L.subY)

bitcoin-saga/web/src/bitcoin/engine/scenes1.ts

@@ -3,6 +3,7 @@ import { C, FONT, clamp, easeInOut, easeOut, easeOutBack, easeOutExpo, fmtInt, h
 import { bigNumber, cube, fieldRows, glowDot, panel, priceChart, text, typeText, wrap, type Cam, type Box } from './gfx'
 import { day } from './price'
 import type { SC } from './sc'
+import { coinSprite } from './coingl'
 
 const GENESIS_HASH = '000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f'
 
@@ -250,6 +251,8 @@ export function s02(c: SC) {
     const r = lerp(11, 7, gi)
     const sp = Math.abs(Math.cos(t * 3 + i))
     ctx.globalAlpha = appear * (1 - inv(0.85, 1, gather) * 0.55)
+    // lit PBR coin sprite: spins while falling, slows to a stop as it lands in the pizza
+    if (coinSprite(ctx, x, y, lerp(12, 7, gi), (t * 3 + i) * (1 - gi) + rnd(i, 6) * 6.28 * gi)) continue
     ctx.fillStyle = sp > 0.5 ? '#ffd27a' : '#e09a1c'
     ctx.beginPath(); ctx.ellipse(x, y, r * (0.35 + 0.65 * sp), r, 0, 0, Math.PI * 2); ctx.fill()
     ctx.strokeStyle = 'rgba(120,60,0,0.6)'

bitcoin-saga/web/src/bitcoin/engine/scenes3.ts

@@ -310,11 +310,13 @@ export function s12(c: SC) {
   const fly = easeInOut(inv(0, B(2) + 0.5, v + 0.9))
   const cam: Cam = { x: 0, y: 1.2, z: lerp(-14, 9 * gap - 4, fly) + Math.max(0, t - (B(2) + 1.5)) * 0.6, yaw: Math.sin(t * 0.2) * 0.06, pitch: -0.06, f: P ? 900 : 1100, cx: W / 2, cy: H * (P ? 0.42 : 0.46) }
   const pts: V3[] = MILESTONES.map((_, i) => [Math.sin(i * 1.3) * 3.2, Math.cos(i * 0.9) * 1.4, i * gap])
+  // the chain recedes into the background once the closing title cards come in, so labels never fight the type
+  const recede = 1 - 0.85 * easeInOut(after(2, 1.6))
   for (let i = MILESTONES.length - 1; i >= 0; i--) {
     if (i < MILESTONES.length - 1) beam(ctx, cam, pts[i], pts[i + 1], C.gold, 0.7, 1.8)
     const dz = pts[i][2] - cam.z
     const a = clamp(inv(0.5, 4, dz)) * clamp(1 - inv(70, 100, dz))
-    cube(ctx, cam, pts[i], { size: 1.3, yaw: 0.6 + t * 0.3 + i, pitch: -0.3, label: MILESTONES[i][0], sub: MILESTONES[i][1], alpha: a, color: MILESTONES[i][0] === '?' ? C.white : C.gold })
+    cube(ctx, cam, pts[i], { size: 1.3, yaw: 0.6 + t * 0.3 + i, pitch: -0.3, label: MILESTONES[i][0], sub: MILESTONES[i][1], alpha: a * recede, color: MILESTONES[i][0] === '?' ? C.white : C.gold })
   }
   // ---- 3D coin: rises out of the chain as a hero, then settles above the title
   const ca = inv(B(1) - 0.6, B(1) + 0.9, v)