v2-7: true 3D blocks, tombs, doors, globe, logos, dominoes; pizza coins; 2K export & sharper playback

.gitattributes

@@ -79,3 +79,10 @@ bitcoin-saga/dist/assets/draco_decoder-Z1_iN-Ht.wasm filter=lfs diff=lfs merge=l
 bitcoin-saga/dist/assets/coin-D2GSon5Y.glb filter=lfs diff=lfs merge=lfs -text
 bitcoin-saga/dist/assets/draco_decoder-C32yEggz.wasm filter=lfs diff=lfs merge=lfs -text
 bitcoin-saga/dist/assets/studio-IzHMd0JK.hdr filter=lfs diff=lfs merge=lfs -text
+bitcoin-saga/web/src/bitcoin/assets/3d/earth.jpg filter=lfs diff=lfs merge=lfs -text
+bitcoin-saga/web/src/bitcoin/assets/3d/earth-lights.jpg filter=lfs diff=lfs merge=lfs -text
+bitcoin-saga/web/src/bitcoin/assets/3d/earth-normal.jpg filter=lfs diff=lfs merge=lfs -text
+bitcoin-saga/dist/assets/earth-lights-D2b9Grhk.jpg filter=lfs diff=lfs merge=lfs -text
+bitcoin-saga/dist/assets/earth-normal-D6bb61qB.jpg filter=lfs diff=lfs merge=lfs -text
+bitcoin-saga/dist/assets/coin-BvnbCOr2.glb filter=lfs diff=lfs merge=lfs -text
+bitcoin-saga/dist/assets/earth-D5ORXZE1.jpg filter=lfs diff=lfs merge=lfs -text

bitcoin-saga/README.md

@@ -117,3 +117,4 @@ cd bitcoin-saga/web && npm i && npm run build   # 输出到 ../dist
 - 推送 v2-4：ElevenLabs / Voxtral TTS 实测不可用（见上表），旁白继续由 Qwen3-TTS 担任；Voxtral 语音识别已用于字幕对齐（并入 v2-3）。
 - 推送 v2-5：Remotion 播放器接入：画面与音轨共用一个帧时钟；横竖屏切换后接着播放，空格暂停/继续、播放结束可重播。
 - 推送 v2-6：AE 式成片后期（镜头色差、转场漏光与光条，字幕/HUD 不受影响保持清晰）；披萨场景 420 枚金币换成 Three.js 光照金币（32 个旋转角度预渲染，下落时旋转、落定后停住）；尾声区块链标签在片尾标题出现时自动隐去，不再与标题文字重叠；全片横竖屏逐秒排版检查 + 导出测试通过。
+- 推送 v2-7：全片区块改为 Three.js 真 3D（带光照/反射的金属立方体，区块号刻在面上随区块一起转动，不再穿模）；披萨上的红点换成稍大的比特币金币；Mt.Gox 段落墓碑改为 3D 石碑；2021–2024 段落：金币登场 → 讲资产负债表时飞入 MicroStrategy / Tesla / Square 公司标牌 → 讲萨尔瓦多时 3D 地球转到中美洲并标注 → 讲 Taproot 时展示区块 #709,632 与默克尔脚本树 → 金币回归；2022 多米诺重做为 3D 骨牌，每一次碰撞都与旁白节拍和撞击音效对齐，随后接 3D 区块链「每 ~10 分钟一个新区块」；ETF 大门改为 3D 双开门向外打开（配开门音效）；战略储备印章中心换 3D 金币、环形文字清晰；片尾价格数据改为「不构成投资建议」；清晰度：高分屏播放超采样到 2560×1440，色差减半，新增 2K 导出，码率提升约 2 倍。

bitcoin-saga/dist/assets/coin-BvnbCOr2.glb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1f097788296b619678493879b604b01e7c4631286ce7e212dbe458ffdc04d2f6
+size 340400

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-biRZVsu1.js"></script>
+    <script type="module" crossorigin src="./assets/index-BFEJsoIQ.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-2e2AWXEI.css">
   </head>
   <body>

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

@@ -13,12 +13,14 @@ import { exportMp4, exportSupported, type ExportOpts, type ExportProgress } from
 import { COVERS, COPY, drawCover, charLen, tagString, type CoverSpec } from './engine/covers'
 import { coin3d } from './engine/coin'
 import { coin3dGL, coinSprite, renderCoinGL } from './engine/coingl'
+import * as stage3d from './engine/stage3d'
+import { stageCanvas } from './engine/stage3d'
 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, coinSprite, 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, stageCanvas, stage3d }
 
 function useIsPhonePortrait() {
   const q = '(max-width: 820px) and (orientation: portrait)'
@@ -57,13 +59,16 @@ function Film({ audio, ready }: FilmProps) {
   const frame = useCurrentFrame()
   const { width, height, fps } = useVideoConfig()
   const ref = useRef<HTMLCanvasElement>(null)
+  // supersample on HiDPI screens (up to 2560×1440) so the preview is as crisp as the 2K export
+  const k = typeof window !== 'undefined' && (window.devicePixelRatio || 1) > 1 ? 4 / 3 : 1
+  const cw = Math.round(width * k), ch = Math.round(height * k)
   useLayoutEffect(() => {
     const c = ref.current
     if (c) draw(c.getContext('2d')!, frame / fps, c.width, c.height)
-  }, [frame, fps, width, height, ready])
+  }, [frame, fps, width, height, ready, cw])
   return (
     <AbsoluteFill style={{ background: '#07070a' }}>
-      <canvas ref={ref} width={width} height={height} style={{ width: '100%', height: '100%', display: 'block' }} />
+      <canvas ref={ref} width={cw} height={ch} style={{ width: '100%', height: '100%', display: 'block' }} />
       {audio && <Audio src={audio} />}
     </AbsoluteFill>
   )
@@ -243,7 +248,7 @@ function Exporter({ defaultOrient }: { defaultOrient: Orient }) {
           </div>
         </label>
         <label>分辨率
-          <div className="seg">{([1080, 720] as const).map((r) => <button key={r} className={opts.res === r ? 'on' : ''} disabled={busy} onClick={() => setOpts({ ...opts, res: r })}>{r}p</button>)}</div>
+          <div className="seg">{([1440, 1080, 720] as const).map((r) => <button key={r} className={opts.res === r ? 'on' : ''} disabled={busy} onClick={() => setOpts({ ...opts, res: r })}>{r === 1440 ? '2K' : r + 'p'}</button>)}</div>
         </label>
         <label>背景音乐
           <div className="seg">

bitcoin-saga/web/src/bitcoin/assets/3d/coin.glb

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2f9adc102b5295684f649395e2f67b166fe601b9d87af7950316f2ca66d64067
-size 578380
+oid sha256:1f097788296b619678493879b604b01e7c4631286ce7e212dbe458ffdc04d2f6
+size 340400

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

@@ -1,5 +1,6 @@
 // Procedural soundtrack: music (D minor, ~84 BPM) + SFX synced to scene events + narration.
 // Rendered once with an OfflineAudioContext → one AudioBuffer used by both player and exporter.
+import { BLOCK_N, blockLand, doorCues, dominoPlan } from './cues'
 import { SCENES, TOTAL, sceneIndexAt, type Scene } from '../timeline'
 import { rnd } from './util'
 
@@ -293,6 +294,23 @@ function clackNoise(g: G, t: number, vol: number) {
   const e = g.ac.createGain(); perc(e, t, vol, 0.06)
   n.connect(f); f.connect(e); send(g, e, g.sfx, 0.3)
 }
+/** heavy door hinge: a slow, gritty low tone gliding down + filtered noise */
+function creak(g: G, t: number, dur: number) {
+  { const lt = t - g.o; if (lt < 0 || lt >= g.len) return; t = lt }
+  const o = g.ac.createOscillator(); o.type = 'sawtooth'
+  o.frequency.setValueAtTime(92, t); o.frequency.linearRampToValueAtTime(64, t + dur)
+  const f = g.ac.createBiquadFilter(); f.type = 'bandpass'; f.frequency.value = 420; f.Q.value = 3
+  const e = g.ac.createGain(); env(e, t, 0.07, 0.25, dur - 0.6, 0.35)
+  const lfo = g.ac.createOscillator(); lfo.frequency.value = 23
+  const lg = g.ac.createGain(); lg.gain.value = 0.035
+  lfo.connect(lg); lg.connect(e.gain)
+  o.connect(f); f.connect(e); send(g, e, g.sfx, 0.45)
+  o.start(t); o.stop(t + dur + 0.1); lfo.start(t); lfo.stop(t + dur + 0.1)
+  const n = noiseSrc(g, t, dur)
+  const nf = g.ac.createBiquadFilter(); nf.type = 'lowpass'; nf.frequency.value = 300
+  const ne = g.ac.createGain(); env(ne, t, 0.09, 0.4, dur - 0.8, 0.4)
+  n.connect(nf); nf.connect(ne); send(g, ne, g.sfx, 0.5)
+}
 function blip(g: G, t: number, freq = 1320, vol = 0.07) {
   { const lt = t - g.o; if (lt < 0 || lt >= g.len) return; t = lt }
   const o = g.ac.createOscillator(); o.type = 'sine'; o.frequency.value = freq
@@ -355,14 +373,23 @@ function sfx(g: G) {
   { const s = S[6]; wind(g, s.start, s.end + 0.5, 0.1) }
   // s07 global
   { const s = S[7]; whoosh(g, s.start + 0.3, 1.8, 0.15); for (let i = 0; i < 3; i++) blip(g, B(s, i + 1), 1100, 0.06) }
-  // s08 dominoes + steady blocks
+  // s08 dominoes + steady blocks — same choreography as the picture (cues.ts)
   { const s = S[8]
-    for (let i = 0; i < 4; i++) {
-      const at = B(s, 0) + 1.1 + i * 0.9 + (i === 3 ? (s.subs[1]?.t ?? 0) - (s.subs[0]?.t ?? 0) - 1.6 : 0)
-      clack(g, at + 0.62, i === 3 ? 0.55 : 0.38)
-      if (i === 3) boom(g, at + 0.65, 0.45)
-    }
-    for (let i = 0; i < 10; i++) blip(g, B(s, 3) + i * 0.35, 880, 0.05) }
+    const ds = dominoPlan(B(s, 0), B(s, 1))
+    click(g, ds[0].T, 0.08)
+    ds.forEach((d, i) => {
+      const big = d.n ? 1 : 0
+      if (i < ds.length - 1) clack(g, d.hit, 0.16 + 0.1 * (d.h / 1.2) + big * 0.08)
+      else { thud(g, d.hit, 0.75); boom(g, d.hit + 0.02, 0.6); clackNoise(g, d.hit, 0.4) }
+    })
+    for (let i = 0; i < BLOCK_N; i++) { thud(g, blockLand(B(s, 3), i), 0.22); bell(g, blockLand(B(s, 3), i) + 0.01, mtof(i % 2 ? 86 : 81), 0.05, 0.9) }
+  }
+  // s09 doors: crack of light on "ETF", heavy swing on "大门就此打开"
+  { const s = S[9]
+    const q = doorCues(B(s, 1), B(s, 2))
+    whoosh(g, q.crack, 0.9, 0.06)
+    creak(g, q.swing, q.stop - q.swing)
+    thud(g, q.stop - 0.1, 0.4); riser(g, q.swing, q.stop, 0.1) }
   // s09 ETF + halving
   { const s = S[9]
     riser(g, s.start - 0.2, s.start + 0.9, 0.08)

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

@@ -43,6 +43,8 @@ const FIT = 1.16 // coin radius 1 → half the view height incl. margin for the
 function materials(name: string) {
   const base = { color: new THREE.Color(1.0, 0.72, 0.3), metalness: 1, envMapIntensity: 1.15 }
   if (name === 'Field') return new THREE.MeshPhysicalMaterial({ ...base, roughness: 0.075, clearcoat: 0.6, clearcoatRoughness: 0.04 })
+  // recessed legend band: dark satin antique gold, so the polished raised letters read crisply at any angle
+  if (name === 'Band') return new THREE.MeshPhysicalMaterial({ ...base, color: new THREE.Color(0.28, 0.15, 0.045), roughness: 0.6, envMapIntensity: 0.6 })
   if (name === 'Edge') return new THREE.MeshPhysicalMaterial({ ...base, color: new THREE.Color(0.96, 0.66, 0.26), roughness: 0.2, anisotropy: 0.6 })
   // frosted relief (₿, legend, beads, emblem): satin finish, reads brighter and softer than the mirror field
   return new THREE.MeshPhysicalMaterial({ ...base, color: new THREE.Color(1.0, 0.76, 0.36), roughness: 0.34, sheen: 0.3, sheenColor: new THREE.Color(1, 0.85, 0.55) })

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

@@ -0,0 +1,84 @@
+// Shared choreography timings: the picture (scenes) and the sound effects (audio) both read these,
+// so every clack, door creak and block "ding" lands on the exact frame where it happens on screen.
+// All functions take the narration clause start times in whatever clock the caller uses (relative or absolute).
+
+/** One domino in the 2022 cascade (small → big chain, each knocked over by its predecessor). */
+export type Domino = {
+  /** label on the big faces ('' = small unlabeled domino) */
+  n: string
+  date: string
+  /** height / thickness / width (world units) */
+  h: number
+  th: number
+  w: number
+  /** x of the front-bottom pivot edge */
+  px: number
+  /** time it starts to tip (= contact from the previous one) */
+  T: number
+  /** time its top edge hits the next domino (or the floor for the last one) */
+  hit: number
+}
+
+/** sin(contact angle) = gap / height; the gap scales with the domino */
+export const DOMINO_GAP = 0.5
+export const DOMINO_THC = Math.asin(DOMINO_GAP)
+
+/**
+ * b0 = "多米诺骨牌接连倒下", b1 = "LUNA 归零，FTX 一夜崩塌".
+ * 8 small dominoes run during "接连倒下", LUNA tips exactly on "LUNA", FTX (the giant) is hit on "FTX" and lands on "崩塌".
+ */
+export function dominoPlan(b0: number, b1: number): Domino[] {
+  const big: [string, string, number][] = [['LUNA', '2022-05', 1.35], ['3AC', '2022-06', 1.8], ['CELSIUS', '2022-07', 2.4], ['FTX', '2022-11', 3.3]]
+  const smallN = 8
+  const s0 = b0 + 1.45
+  const sDt = (b1 - 0.05 - s0) / smallN
+  const times: number[] = []
+  for (let i = 0; i < smallN; i++) times.push(s0 + i * sDt)
+  times.push(b1 - 0.05, b1 + 0.47, b1 + 1.0, b1 + 1.6)
+  const out: Domino[] = []
+  let x = 0
+  for (let i = 0; i < times.length; i++) {
+    const isBig = i >= smallN
+    const h = isBig ? big[i - smallN][2] : 0.62 + (i / smallN) * 0.5
+    const th = h * 0.17, w = h * 0.72
+    if (i > 0) x += out[i - 1].h * DOMINO_GAP + th // previous pivot → this pivot: gap + this thickness
+    out.push({ n: isBig ? big[i - smallN][0] : '', date: isBig ? big[i - smallN][1] : '', h, th, w, px: x, T: times[i], hit: 0 })
+  }
+  for (let i = 0; i < out.length; i++) out[i].hit = i + 1 < out.length ? out[i + 1].T : out[i].T + 1.05
+  return out
+}
+
+/** tilt angle (rad) of domino i at time v */
+export function dominoAngle(ds: Domino[], i: number, v: number): number {
+  const d = ds[i]
+  if (v <= d.T) return 0
+  const last = i === ds.length - 1
+  if (last) {
+    // free fall to the floor, tiny settle bounce
+    const u = (v - d.T) / (d.hit - d.T)
+    if (u < 1) return (Math.PI / 2) * u * u
+    const k = v - d.hit
+    return Math.PI / 2 - 0.05 * Math.abs(Math.sin(k * 18)) * Math.exp(-k * 9)
+  }
+  if (v < d.hit) {
+    const u = (v - d.T) / (d.hit - d.T)
+    return DOMINO_THC * u * u
+  }
+  // leaning on the next one as it goes down
+  const nxt = dominoAngle(ds, i + 1, v)
+  return Math.min(DOMINO_THC + nxt * 0.72, Math.PI / 2 - 0.2)
+}
+
+/** "每 ~10 分钟 · 一个新区块": a new block lands every BLOCK_DT seconds after b3 */
+export const BLOCK_DT = 0.5
+export const BLOCK_N = 8
+export const blockLand = (b3: number, i: number) => b3 + 0.35 + i * BLOCK_DT
+
+/** Wall Street doors: a crack of light on "ETF", swing fully open on "大门就此打开" */
+export function doorOpen(b1: number, b2: number, v: number) {
+  const crack = 0.07 * smooth((v - (b1 + 0.6)) / 0.8)
+  const full = smooth((v - (b2 - 0.35)) / 2.0)
+  return crack + (1 - crack) * full
+}
+export const doorCues = (b1: number, b2: number) => ({ crack: b1 + 0.6, swing: b2 - 0.35, stop: b2 + 1.65 })
+function smooth(x: number) { x = Math.max(0, Math.min(1, x)); return x * x * (3 - 2 * x) }

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

@@ -4,7 +4,7 @@ import { draw, loadFonts } from './render'
 import { renderSoundtrack, SR } from './audio'
 import { TOTAL } from '../timeline'
 
-export type ExportOpts = { fps: 24 | 30 | 60; orient: 'land' | 'port'; res: 1080 | 720; /** include background music (narration + SFX are always kept) */ music?: boolean; /** QA only: limit duration */ limit?: number }
+export type ExportOpts = { fps: 24 | 30 | 60; orient: 'land' | 'port'; res: 1440 | 1080 | 720; /** include background music (narration + SFX are always kept) */ music?: boolean; /** QA only: limit duration */ limit?: number }
 export type ExportProgress = { phase: string; p: number; eta?: number }
 
 export function exportSupported() {
@@ -12,7 +12,7 @@ export function exportSupported() {
 }
 
 async function pickVideoCodec(w: number, h: number, fps: number, bitrate: number) {
-  for (const codec of ['avc1.640033', 'avc1.4d0033', 'avc1.42003e', 'avc1.640028']) {
+  for (const codec of ['avc1.640034', 'avc1.640033', 'avc1.4d0033', 'avc1.42003e', 'avc1.640028']) {
     const cfg: VideoEncoderConfig = { codec, width: w, height: h, bitrate, framerate: fps, avc: { format: 'avc' } }
     try {
       const r = await VideoEncoder.isConfigSupported(cfg)
@@ -37,10 +37,10 @@ async function pickAudio(): Promise<{ cfg: AudioEncoderConfig; mux: 'aac' | 'opu
 }
 
 export async function exportMp4(o: ExportOpts, onProgress: (p: ExportProgress) => void, signal: { cancelled: boolean }): Promise<Blob> {
-  const long = o.res, short = o.res === 1080 ? 1920 : 1280
+  const long = o.res, short = o.res === 1440 ? 2560 : o.res === 1080 ? 1920 : 1280
   const W = o.orient === 'land' ? short : long
   const H = o.orient === 'land' ? long : short
-  const mbps = (o.fps === 60 ? 9 : o.fps === 30 ? 8 : 6) * (o.res === 720 ? 0.55 : 1)
+  const mbps = (o.fps === 60 ? 20 : o.fps === 30 ? 16 : 13) * (o.res === 1440 ? 1.6 : o.res === 720 ? 0.5 : 1)
   onProgress({ phase: '准备音轨', p: 0 })
   await loadFonts() // fonts + 3D coin assets (GLB / HDRI) must be resident before the first frame
   const audio = await renderSoundtrack({ music: o.music !== false })

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

@@ -145,6 +145,9 @@ export type CubeOpts = {
   scale?: [number, number, number]
 }
 
+/** optional real-3D renderer for cubes (installed by stage3d) */
+export const cubeHook: { fn: ((cam: Cam, c: V3, o: CubeOpts) => boolean) | null } = { fn: null }
+
 /** draws a glowing block; returns projected screen center + approx radius */
 export function cube(ctx: Ctx, cam: Cam, c: V3, o: CubeOpts) {
   const color = o.color ?? C.gold
@@ -158,6 +161,12 @@ export function cube(ctx: Ctx, cam: Cam, c: V3, o: CubeOpts) {
   const cp = wp.map((p) => toCam(p, cam))
   if (cp.every((p) => p[2] < 0.1)) return null
   const sp = cp.map((p) => proj(p, cam))
+  const hooked = !!cubeHook.fn
+  if (cubeHook.fn && cubeHook.fn(cam, c, o)) {
+    const hx = sp.reduce((s, p) => s + p[0], 0) / 8
+    const hy = sp.reduce((s, p) => s + p[1], 0) / 8
+    return { x: hx, y: hy, r: Math.max(...sp.map((p) => Math.hypot(p[0] - hx, p[1] - hy))) }
+  }
   const solid = o.solid ?? 1
   ctx.save()
   ctx.globalAlpha *= a
@@ -211,7 +220,7 @@ export function cube(ctx: Ctx, cam: Cam, c: V3, o: CubeOpts) {
   const cx = sp.reduce((s, p) => s + p[0], 0) / 8
   const cy = sp.reduce((s, p) => s + p[1], 0) / 8
   const r = Math.max(...sp.map((p) => Math.hypot(p[0] - cx, p[1] - cy)))
-  if (o.label && solid > 0.3) {
+  if (o.label && solid > 0.3 && !hooked) {
     const zc = cp.reduce((s, p) => s + p[2], 0) / 8
     const fs = (o.size * cam.f) / zc * 0.42
     if (fs > 6) {

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

@@ -0,0 +1,6 @@
+// Company marks from Simple Icons (CC0, simpleicons.org) — 24×24 SVG paths. Trademarks belong to their owners.
+export const LOGOS: Record<string, { name: string; hex: string; path: string }> = {
+  microstrategy: { name: 'MicroStrategy', hex: '#D9232E', path: 'M9.095 2.572h5.827v18.856H9.096zM0 2.572h5.825v18.856H.001zm18.174 0v18.854H24V8.33z' },
+  tesla: { name: 'Tesla', hex: '#CC0000', path: 'M12 5.362l2.475-3.026s4.245.09 8.471 2.054c-1.082 1.636-3.231 2.438-3.231 2.438-.146-1.439-1.154-1.79-4.354-1.79L12 24 8.619 5.034c-3.18 0-4.188.354-4.335 1.792 0 0-2.146-.795-3.229-2.43C5.28 2.431 9.525 2.34 9.525 2.34L12 5.362l-.004.002H12v-.002zm0-3.899c3.415-.03 7.326.528 11.328 2.28.535-.968.672-1.395.672-1.395C19.625.612 15.528.015 12 0 8.472.015 4.375.61 0 2.349c0 0 .195.525.672 1.396C4.674 1.989 8.585 1.435 12 1.46v.003z' },
+  square: { name: 'Square', hex: '#3E4348', path: 'M4.01 0A4.01 4.01 0 000 4.01v15.98c0 2.21 1.8 4 4.01 4.01h15.98C22.2 24 24 22.2 24 19.99V4A4.01 4.01 0 0019.99 0H4zm1.62 4.36h12.74c.7 0 1.26.57 1.26 1.27v12.74c0 .7-.56 1.27-1.26 1.27H5.63c-.7 0-1.26-.57-1.26-1.27V5.63a1.27 1.27 0 011.26-1.27zm3.83 4.35a.73.73 0 00-.73.73v5.09c0 .4.32.72.72.72h5.1a.73.73 0 00.73-.72V9.44a.73.73 0 00-.73-.73h-5.1Z' },
+}

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

@@ -8,6 +8,7 @@ import { s00, s01, s02, s03, s04 } from './scenes1'
 import { s05, s06, s07, s08 } from './scenes2'
 import { s09, s10, s11, s12 } from './scenes3'
 import { loadCoinGL } from './coingl'
+import { loadStage, bindStage, endStage } from './stage3d'
 
 const SCENE_FNS: ((c: SC) => void)[] = [s00, s01, s02, s03, s04, s05, s06, s07, s08, s09, s10, s11, s12]
 
@@ -150,7 +151,7 @@ function transition(ctx: Ctx, T: number, W: number, H: number) {
 // 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
+  let k = 0.0005
   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)
@@ -360,7 +361,9 @@ export function draw(ctx: Ctx, T: number, outW: number, outH: number) {
     if (a <= 0.001) continue
     if (a >= 0.999) {
       ctx.save()
+      bindStage(ctx)
       try { SCENE_FNS[k](makeSC(ctx, s, T, P)) } catch (e) { console.error('scene', k, e) }
+      endStage(ctx)
       ctx.restore()
     } else {
       const lc = layerFor(outW, outH)
@@ -369,7 +372,9 @@ export function draw(ctx: Ctx, T: number, outW: number, outH: number) {
       l.clearRect(0, 0, outW, outH)
       l.setTransform(outW / W, 0, 0, outH / H, 0, 0)
       l.globalAlpha = 1
+      bindStage(l)
       try { SCENE_FNS[k](makeSC(l, s, Math.min(T, s.end + 0.45), P)) } catch (e) { console.error('scene', k, e) }
+      endStage(l)
       ctx.save()
       ctx.setTransform(1, 0, 0, 1, 0, 0)
       ctx.globalAlpha = a
@@ -400,7 +405,7 @@ export function loadFonts() {
   return fontsP
 }
 async function doLoadFonts() {
-  const coinP = loadCoinGL() // Blender-modelled GLB + studio HDRI → real-time PBR coin
+  const coinP = Promise.all([loadCoinGL(), loadStage()]) // Blender-modelled GLB coin + Three.js 3D stage (blocks, Earth, portal…)
   const faces: [string, string, string][] = [
     ['Film Serif SC', serif700, '700'], ['Film Serif SC', serif900, '900'],
     ['Film Sans SC', sans400, '400'], ['Film Sans SC', sans700, '700'], ['Film Sans SC', sans900, '900'],

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 { flush3D, tomb, portal, globe, logoTile, block } from './stage3d'
 import { coinSprite } from './coingl'
 
 const GENESIS_HASH = '000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f'
@@ -121,6 +122,7 @@ export function s01(c: SC) {
     size: P ? 2.6 : 2.4, yaw: 0.6 + t * 0.22, pitch: -0.42 + Math.sin(t * 0.4) * 0.05,
     build, solid, label: mined ? '#0' : '', sub: mined ? 'GENESIS' : '', glow: 1 + pulse * 2,
   })
+  flush3D(ctx)
   // orbiting satoshi particles
   ctx.save()
   ctx.globalCompositeOperation = 'lighter'
@@ -273,19 +275,17 @@ export function s02(c: SC) {
         const jr = (rnd(i, k + 5) - 0.5) * 0.05, ja = (rnd(i, k + 9) - 0.5) * 0.12
         const rr = (rf + (rf ? jr : 0)) * R, aa = an + k * 0.35 + ja
         const px = x + Math.cos(aa) * rr, py = y + Math.sin(aa) * rr
-        const pr = R * 0.105 * Math.max(0, easeOutBack(inv(i * 0.035, i * 0.035 + 0.4, a)))
+        const pr = R * 0.13 * Math.max(0, easeOutBack(inv(i * 0.035, i * 0.035 + 0.4, a)))
         if (pr <= 0.5) return
-        ctx.fillStyle = 'rgba(40,6,4,0.45)'
-        ctx.beginPath(); ctx.arc(px + pr * 0.12, py + pr * 0.16, pr, 0, Math.PI * 2); ctx.fill()
+        // a little gold bitcoin coin instead of a pepperoni slice (face-on so the ₿ reads)
+        ctx.fillStyle = 'rgba(40,10,2,0.5)'
+        ctx.beginPath(); ctx.ellipse(px + pr * 0.14, py + pr * 0.2, pr * 1.02, pr * 0.98, 0, 0, Math.PI * 2); ctx.fill()
+        if (coinSprite(ctx, px, py, pr, Math.sin(t * 1.3 + i * 0.7 + k) * 0.18)) return
         const pg = ctx.createRadialGradient(px - pr * 0.35, py - pr * 0.4, pr * 0.1, px, py, pr)
-        pg.addColorStop(0, '#f0644a'); pg.addColorStop(0.6, '#c42a1e'); pg.addColorStop(1, '#7e140e')
+        pg.addColorStop(0, '#ffe7a3'); pg.addColorStop(0.6, '#e2a52c'); pg.addColorStop(1, '#8a5a10')
         ctx.fillStyle = pg
         ctx.beginPath(); ctx.arc(px, py, pr, 0, Math.PI * 2); ctx.fill()
-        ctx.fillStyle = 'rgba(90,12,8,0.55)'
-        for (let d = 0; d < 3; d++) {
-          const da = rnd(i * 3 + d, k + 21) * Math.PI * 2, dr = rnd(i * 3 + d, k + 23) * pr * 0.55
-          ctx.beginPath(); ctx.arc(px + Math.cos(da) * dr, py + Math.sin(da) * dr, pr * 0.12, 0, Math.PI * 2); ctx.fill()
-        }
+        text(ctx, '₿', px, py, pr * 1.2, { font: FONT.sans, weight: 800, align: 'center', color: '#6b3e05' })
       })
       ctx.restore()
     })
@@ -350,10 +350,11 @@ export function s03(c: SC) {
         const e = easeOut(br)
         const dir = [gx + (rnd(i) - 0.5), gy + (rnd(i, 1) - 0.5) + 0.3, gz + (rnd(i, 2) - 0.5)]
         cube(ctx, cam, [gx * 1.07 + dir[0] * e * 4, gy * 1.07 + dir[1] * e * 4 - br * br * 5, gz * 1.07 + dir[2] * e * 3], {
-          size: 0.5, yaw: 0.6 + rnd(i, 4) * e * 6, pitch: -0.4 + rnd(i, 5) * e * 5, color: C.red, alpha: 1 - inv(0.6, 1, br), solid: 0.8,
+          size: 0.5, yaw: 0.6 + rnd(i, 4) * e * 6, pitch: -0.4 + rnd(i, 5) * e * 5, color: C.red, alpha: 1 - inv(0.6, 1, br),
         })
       }
     }
+    flush3D(ctx)
     const lx = gb.x, ly = gb.y + (P ? 170 : 230)
     text(ctx, 'MT.GOX · 2014-02', lx, ly, 24, { font: FONT.mono, align: 'center', color: C.red, alpha: after(2, 0.5), spacing: 4 })
     bigNumber(ctx, 850000 * easeOutExpo(after(3, 1.2)), lx, ly + (P ? 80 : 90), P ? 70 : 78, { prefix: '−', suffix: ' BTC', align: 'center', color: '#ff6a5a', alpha: after(3, 0.4) })

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

@@ -1,8 +1,12 @@
 // Scenes 05–08
-import { C, FONT, clamp, easeInOut, easeOut, easeOutBack, easeOutExpo, fmtInt, inv, lerp, rgba, rnd } from './util'
+import { C, FONT, clamp, easeInOut, easeOut, easeOutBack, easeOutExpo, fmtInt, inv, lerp, rgba, rnd, win } from './util'
+import { coin3dGL } from './coingl'
 import { bigNumber, beam, cube, glowDot, panel, priceChart, project, text, type Cam, type V3 } from './gfx'
 import { day } from './price'
 import type { SC } from './sc'
+import { BLOCK_DT, BLOCK_N, blockLand, dominoAngle, dominoPlan } from './cues'
+import { flush3D, tomb, portal, globe, logoTile, block } from './stage3d'
+import { rays } from './scenes3'
 
 // ------------------------------------------------------------------ s05 分歧 2017
 export function s05(c: SC) {
@@ -37,9 +41,11 @@ export function s05(c: SC) {
   const br = blocks.filter((b) => b.label === 'SegWit' || b.label === 'BCH')
   br.forEach((b) => beam(ctx, cam, f0.p, b.p, b.col, b.a, 1.6))
   for (const b of sorted) cube(ctx, cam, b.p, { size: 0.8, yaw: 0.5, pitch: -0.25, color: b.col ?? C.gold, alpha: b.a, label: b.label })
+  flush3D(ctx)
   // branch tags
   const tag = (p: V3, s1: string, s2: string, col: string, a: number, dy: number) => {
-    const [x, y] = project(p, cam)
+    const [x0, y] = project(p, cam)
+    const x = Math.min(x0, W - 190)
     text(ctx, s1, x, y + dy, P ? 30 : 30, { font: FONT.mono, weight: 700, align: 'center', color: col, alpha: a, glow: 12 })
     text(ctx, s2, x, y + dy + 32, 20, { font: FONT.mono, align: 'center', color: C.dim, alpha: a })
   }
@@ -108,26 +114,36 @@ export function s06(c: SC) {
   // obituaries
   const ob = after(4, 0.1)
   if (ob > 0) {
+    // three real 3D granite headstones slam down into the snow, one after another
     const ys = ['2018', '2019', '2020']
+    const U = P ? 150 : 104
+    const yy = P ? ib.y + 290 : ib.y + 420
+    const cam: Cam = { x: 0, y: 2.1, z: -10, yaw: 0, pitch: Math.atan2(1.3, 10), f: U * 10, cx: P ? W / 2 : ib.x + ib.w / 2, cy: yy }
+    // snow mound (2D, behind)
+    const mound = project([0, -0.12, 0], cam)
+    ctx.save(); ctx.translate(mound[0], mound[1]); ctx.scale(1, 0.16)
+    const mg = ctx.createRadialGradient(0, 0, 0, 0, 0, U * 3.4)
+    mg.addColorStop(0, rgba('#e8f4ff', 0.5 * ob)); mg.addColorStop(0.7, rgba('#9fc8e8', 0.18 * ob)); mg.addColorStop(1, 'rgba(160,200,232,0)')
+    ctx.fillStyle = mg; ctx.beginPath(); ctx.arc(0, 0, U * 3.4, 0, Math.PI * 2); ctx.fill(); ctx.restore()
     ys.forEach((y, i) => {
-      const p = after(4, 0.5, i * 0.45)
+      const p = after(4, 0.45, i * 0.45)
       if (p <= 0) return
-      const x = P ? 230 + i * 310 : ib.x + 100 + i * 200
-      const yy = P ? ib.y + 300 : ib.y + 420
-      ctx.save()
-      ctx.translate(x, yy - (1 - easeOutBack(p)) * 300)
-      ctx.rotate((rnd(i, 7) - 0.5) * 0.2)
-      ctx.globalAlpha *= p
-      ctx.fillStyle = 'rgba(30,36,44,0.92)'
-      ctx.strokeStyle = rgba(C.ice, 0.7)
-      ctx.lineWidth = 2
-      ctx.beginPath()
-      ctx.moveTo(-70, 70); ctx.lineTo(-70, -30); ctx.arc(0, -30, 70, Math.PI, 0); ctx.lineTo(70, 70); ctx.closePath()
-      ctx.fill(); ctx.stroke()
-      text(ctx, 'R.I.P.', 0, -30, 32, { font: FONT.serif, weight: 900, align: 'center', color: C.white })
-      text(ctx, 'BITCOIN', 0, 6, 18, { font: FONT.mono, weight: 700, align: 'center', color: C.ice })
-      text(ctx, y, 0, 44, 24, { font: FONT.mono, weight: 700, align: 'center', color: C.dim })
-      ctx.restore()
+      const drop = 1 - p * p // gravity
+      const land = Math.max(0, v - (B(4) + i * 0.45 + 0.45))
+      const wob = Math.sin(land * 16) * 0.05 * Math.exp(-land * 6)
+      tomb(cam, [(i - 1) * 1.9, drop * 3.2, (i === 1 ? -0.3 : 0.15)], { year: y, yaw: (rnd(i, 7) - 0.5) * 0.5, roll: (rnd(i, 8) - 0.5) * 0.12 + wob, pitch: -0.05, alpha: Math.min(1, p * 3), scale: 0.95 })
+    })
+    flush3D(ctx, { bloom: 0.5 })
+    // powder puff where each one lands
+    ys.forEach((_, i) => {
+      const land = v - (B(4) + i * 0.45 + 0.45)
+      if (land < 0 || land > 1.2) return
+      const q = project([(i - 1) * 1.9, 0, 0], cam)
+      for (let k = 0; k < 14; k++) {
+        const an = Math.PI + rnd(k, i + 30) * Math.PI
+        const r = U * (0.4 + land * 1.4 * (0.5 + rnd(k, i + 40)))
+        glowDot(ctx, q[0] + Math.cos(an) * r, q[1] + Math.sin(an) * r * 0.35, 6 + rnd(k, i + 50) * 8, '#e8f4ff', 0.55 * (1 - land / 1.2))
+      }
     })
     text(ctx, '讣告', P ? W / 2 : ib.x + 300, P ? ib.y + 420 : ib.y + 560, 30, { font: FONT.cnSerif, align: 'center', color: C.ice, alpha: after(4, 0.5, 1.4), spacing: 12 })
   }
@@ -136,54 +152,113 @@ export function s06(c: SC) {
 // ------------------------------------------------------------------ s07 机构与国家
 const SV = { lat: 13.7, lon: -89.2 }
 export function s07(c: SC) {
-  const { ctx, t, v, P, L, B, after, W } = c
-  const gb = P ? { cx: W / 2, cy: 640, r: 300 } : { cx: L.main.x + L.main.w / 2 - 40, cy: L.main.y + L.main.h / 2 + 10, r: 330 }
-  const rise = easeOutBack(inv(0.3, 2.2, t))
-  const ga = inv(0, 1.2, t)
-  // target: bring El Salvador to face at clause 2
-  const focus = easeInOut(after(2, 2))
-  const lon0 = lerp(t * 18, 89.2, focus) * (Math.PI / 180)
-  const tilt = lerp(0.35, -13.7 * (Math.PI / 180) + 0.1, focus)
-  ctx.save()
-  ctx.globalAlpha *= ga
-  ctx.translate(0, (1 - rise) * 200)
-  glowDot(ctx, gb.cx, gb.cy, gb.r * 1.6, C.gold, 0.25)
-  ctx.fillStyle = 'rgba(12,9,4,0.9)'
-  ctx.beginPath(); ctx.arc(gb.cx, gb.cy, gb.r, 0, Math.PI * 2); ctx.fill()
-  ctx.strokeStyle = rgba(C.gold, 0.6); ctx.lineWidth = 2; ctx.stroke()
-  // dot lattice
-  const N = 900
-  for (let i = 0; i < N; i++) {
-    const y = 1 - (i / (N - 1)) * 2
-    const rr = Math.sqrt(1 - y * y)
-    const th = i * 2.399963 + lon0
-    let x = Math.cos(th) * rr, z = Math.sin(th) * rr
-    let yy = y
-    ;[yy, z] = [yy * Math.cos(tilt) - z * Math.sin(tilt), yy * Math.sin(tilt) + z * Math.cos(tilt)]
-    if (z < 0) continue
-    const land = rnd(Math.floor(i / 7), 11) > 0.45
-    ctx.fillStyle = rgba(land ? C.gold2 : C.gold, (land ? 0.25 : 0.08) + z * (land ? 0.6 : 0.15))
-    const s = 1.2 + z * 2.2
-    ctx.fillRect(gb.cx + x * gb.r - s / 2, gb.cy - yy * gb.r - s / 2, s, s)
-    void x
+  const { ctx, t, v, P, L, B, after, W, H } = c
+  const m = P ? { x: 60, y: 280, w: 960, h: 680 } : L.main
+  const mcx = m.x + m.w / 2, mcy = m.y + m.h / 2
+  const cam: Cam = { x: 0, y: 0, z: -9, yaw: 0, pitch: 0, f: P ? 880 : 1000, cx: mcx, cy: mcy }
+  // phases: coin rises → company balance sheets → El Salvador on the globe → Taproot → coin returns at the new high
+  const aCoin1 = win(v, -1, B(2) - 0.1, 0.8, 0.5)
+  const aLogos = win(v, B(1) - 0.2, B(2) - 0.1, 0.5, 0.5)
+  const aGlobe = win(v, B(2) - 0.3, B(3) + 0.1, 0.7, 0.6)
+  const aTap = win(v, B(3) - 0.2, 99, 0.6, 0.1) * (1 - 0.8 * easeInOut(after(4, 0.8)))
+  const aCoin2 = easeInOut(after(4, 0.9, 0.1))
+
+  // ---- 1) the coin stands back up (then holds above the balance-sheet tiles)
+  if (aCoin1 > 0) {
+    const rise = easeOutBack(inv(-0.6, 1.6, v))
+    const up = easeInOut(after(1, 1.0, -0.2))
+    const R = lerp(P ? 250 : 230, P ? 130 : 110, up) * (0.4 + 0.6 * rise)
+    const cy = lerp(mcy + (1 - rise) * 240, m.y + (P ? 120 : 110), up)
+    const spin = (1 - easeOut(inv(-0.6, 3.2, v))) * Math.PI * 5
+    rays(ctx, mcx, cy, R * 3, aCoin1 * 0.7, t)
+    coin3dGL(ctx, mcx, cy, R, spin + 0.3 + 0.2 * Math.sin(t * 0.6), { tilt: -0.08, light: 0.35 + 0.5 * Math.sin(t * 0.4), alpha: aCoin1, glow: 0.9, shadow: 1 - up })
+  }
+  // ---- 2) "资产负债表": real company marks on gold-framed plaques fly in
+  if (aLogos > 0) {
+    const slugs = ['microstrategy', 'tesla', 'square']
+    const notes = ['2020-08 · 首家上市公司', '2021-02 · $1.5B', '2020-10 · $50M']
+    slugs.forEach((slug, i) => {
+      const p = easeOutBack(after(1, 0.9, 0.15 + i * 0.35))
+      if (p <= 0) return
+      const x = (i - 1) * (P ? 3.0 : 3.1)
+      logoTile(cam, [x, P ? -0.55 : -0.35, (1 - p) * -4], { slug, yaw: (1 - p) * Math.PI * 1.5 + Math.sin(t * 0.8 + i) * 0.12 + (i - 1) * -0.18, pitch: 0.05, scale: P ? 0.95 : 1, alpha: aLogos * Math.min(1, p * 2) })
+    })
+    flush3D(ctx, { bloom: 0.5 })
+    slugs.forEach((_, i) => {
+      const q = project([(i - 1) * (P ? 3.0 : 3.1), (P ? -0.55 : -0.35) - 1.25, 0], cam)
+      text(ctx, notes[i], q[0], q[1] + 10, P ? 20 : 19, { font: FONT.mono, align: 'center', color: C.gold2, alpha: aLogos * after(1, 0.5, 0.6 + i * 0.35) })
+    })
   }
-  // El Salvador marker
-  const la = (SV.lat * Math.PI) / 180, lo = (SV.lon * Math.PI) / 180 + lon0
-  let mx = Math.cos(la) * Math.sin(lo), my = Math.sin(la), mz = Math.cos(la) * Math.cos(lo)
-  ;[my, mz] = [my * Math.cos(tilt) - mz * Math.sin(tilt), my * Math.sin(tilt) + mz * Math.cos(tilt)]
-  const sa = after(2, 0.6)
-  if (mz > 0 && sa > 0) {
-    const px = gb.cx + mx * gb.r, py = gb.cy - my * gb.r
-    for (let k = 0; k < 3; k++) {
-      const ph = ((t * 0.8 + k / 3) % 1)
-      ctx.strokeStyle = rgba(C.gold2, (1 - ph) * sa)
-      ctx.lineWidth = 2
-      ctx.beginPath(); ctx.arc(px, py, 10 + ph * 90, 0, Math.PI * 2); ctx.stroke()
+  // ---- 3) "萨尔瓦多": the Earth turns to Central America, pin + ripples
+  if (aGlobe > 0) {
+    const g = globe(cam, [0, 0, 0], { radius: (P ? 2.9 : 2.75) * (0.8 + 0.2 * easeOut(after(2, 0.9, -0.3))), spin: t * 0.25, focus: easeInOut(after(2, 2.2, -0.3)), lat: SV.lat, lon: SV.lon, pin: easeOutBack(after(2, 0.6, 1.0)), alpha: aGlobe }, W, H)
+    glowDot(ctx, mcx, mcy, (P ? 2.9 : 2.75) * cam.f / 9 * 1.5, '#6fb4ff', 0.18 * aGlobe)
+    flush3D(ctx, { bloom: 0.7 })
+    const sa = after(2, 0.6, 1.1) * aGlobe
+    if (g && g.pinVisible && sa > 0) {
+      const [px, py] = g.pin
+      ctx.save(); ctx.globalCompositeOperation = 'lighter'
+      for (let k = 0; k < 3; k++) {
+        const ph = (t * 0.8 + k / 3) % 1
+        ctx.strokeStyle = rgba(C.gold2, (1 - ph) * sa); ctx.lineWidth = 2
+        ctx.beginPath(); ctx.ellipse(px, py + 12, 8 + ph * 70, (8 + ph * 70) * 0.55, 0, 0, Math.PI * 2); ctx.stroke()
+      }
+      ctx.restore()
+      const lx = px + 70, ly = py - 70
+      ctx.save(); ctx.fillStyle = rgba('#05070d', 0.6 * sa); ctx.beginPath(); ctx.roundRect(lx - 14, ly - 40, 290, 100, 12); ctx.fill(); ctx.restore()
+      ctx.strokeStyle = rgba(C.white, 0.8 * sa); ctx.lineWidth = 1.5
+      ctx.beginPath(); ctx.moveTo(px + 6, py - 6); ctx.lineTo(lx - 8, ly + 8); ctx.lineTo(lx + 250, ly + 8); ctx.stroke()
+      text(ctx, 'EL SALVADOR', lx, ly - 4, P ? 28 : 28, { font: FONT.mono, weight: 700, color: C.white, alpha: sa, glow: 10 })
+      text(ctx, '2021-09-07 · 法定货币', lx, ly + 36, P ? 22 : 22, { font: FONT.sans, weight: 700, color: C.gold2, alpha: sa })
     }
-    glowDot(ctx, px, py, 60, C.gold2, sa)
-    text(ctx, 'EL SALVADOR', px + 24, py - 20, 26, { font: FONT.mono, weight: 700, color: C.white, alpha: sa, glow: 10 })
   }
-  ctx.restore()
+  // ---- 4) "Taproot": block #709,632 with its Merkle (MAST) tree of spending paths
+  if (aTap > 0) {
+    const ta = after(3, 0.8, -0.2)
+    const bcy = P ? -0.2 : 0.05
+    const tcam: Cam = { ...cam, cy: m.y + m.h * (P ? 0.3 : 0.27) }
+    // tree in 2D (behind the block)
+    const root = { x: mcx, y: tcam.cy + 120 }
+    const lvl1 = [-1, 1].map((sx) => ({ x: mcx + sx * (P ? 220 : 240), y: root.y + 140 }))
+    const leaves = [-3, -1, 1, 3].map((sx) => ({ x: mcx + sx * (P ? 115 : 125), y: root.y + 300 }))
+    const names = ['SCHNORR', 'KEY PATH', 'MAST', 'TAPSCRIPT']
+    const grow = (k: number) => after(3, 0.4, 0.15 + k * 0.25)
+    ctx.save(); ctx.globalAlpha *= aTap
+    ctx.globalCompositeOperation = 'lighter'
+    const edge = (a: { x: number; y: number }, b: { x: number; y: number }, p: number) => {
+      if (p <= 0) return
+      const mx = a.x + (b.x - a.x) * p, my = a.y + (b.y - a.y) * p
+      for (const [w, col] of [[6, rgba(C.gold, 0.25)], [1.8, '#ffe6b0']] as [number, string][]) {
+        ctx.strokeStyle = col; ctx.lineWidth = w
+        ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.bezierCurveTo(a.x, (a.y + my) / 2, mx, (a.y + my) / 2, mx, my); ctx.stroke()
+      }
+    }
+    lvl1.forEach((n) => edge(root, n, grow(0)))
+    leaves.forEach((n, k) => edge(lvl1[k < 2 ? 0 : 1], n, grow(1)))
+    ctx.restore()
+    ;[root, ...lvl1].forEach((n, k) => glowDot(ctx, n.x, n.y, 26, C.gold2, aTap * (k ? grow(0) : ta)))
+    leaves.forEach((n, k) => {
+      const p = grow(2 + k * 0.5) * aTap
+      if (p <= 0) return
+      glowDot(ctx, n.x, n.y, 30, C.gold2, p)
+      ctx.save(); ctx.globalAlpha *= p
+      ctx.fillStyle = 'rgba(20,14,6,0.9)'; ctx.strokeStyle = rgba(C.gold, 0.9); ctx.lineWidth = 1.5
+      const bw = P ? 112 : 118
+      ctx.beginPath(); ctx.roundRect(n.x - bw / 2, n.y + 22, bw, 38, 8); ctx.fill(); ctx.stroke()
+      ctx.restore()
+      text(ctx, names[k], n.x, n.y + 48, P ? 17 : 17, { font: FONT.mono, weight: 700, align: 'center', color: C.white, alpha: p })
+    })
+    text(ctx, 'MERKLE ROOT', root.x + 30, root.y + 6, 16, { font: FONT.mono, color: C.dim, alpha: aTap * grow(0) })
+    block(tcam, [0, bcy, 0], { size: 1.05, yaw: 0.55 + t * 0.35, pitch: 0.32, label: '#709,632', sub: 'TAPROOT', alpha: aTap * Math.min(1, ta * 1.5), glow: 1.2 })
+    flush3D(ctx, { bloom: 1 })
+  }
+  // ---- 5) the coin returns at the new high
+  if (aCoin2 > 0) {
+    const R = (P ? 210 : 190) * (0.5 + 0.5 * easeOutBack(aCoin2))
+    const cy = mcy - (P ? 20 : 10)
+    rays(ctx, mcx, cy, R * 3.2, aCoin2 * (0.6 + 0.2 * Math.sin(t * 1.6)), t)
+    coin3dGL(ctx, mcx, cy, R, (1 - easeOut(after(4, 2.5))) * Math.PI * 4 + 0.3 + 0.2 * Math.sin(t * 0.6), { tilt: -0.08, light: 0.4 + 0.5 * Math.sin(t * 0.5), alpha: aCoin2, glow: 1, shadow: 0.6 })
+  }
   // cards
   const ib = L.info
   const cards = [
@@ -218,59 +293,117 @@ export function s07(c: SC) {
 // ------------------------------------------------------------------ s08 多米诺
 export function s08(c: SC) {
   const { ctx, t, v, P, L, B, after, W } = c
-  const m = P ? { x: 0, y: 260, w: W, h: 700 } : L.main
-  const cam: Cam = { x: P ? 3.9 : 2.5, y: 2.6, z: -13, yaw: -0.32, pitch: -0.2, f: P ? 560 : 900, cx: m.x + m.w / 2, cy: m.y + m.h * (P ? 0.42 : 0.15) }
-  const names = ['LUNA', '3AC', 'CELSIUS', 'FTX']
-  const dates = ['2022-05', '2022-06', '2022-07', '2022-11']
-  const H2 = 1.6
-  // each domino tips over around its base front edge (rotation about z axis)
-  const order = names.map((n, i) => ({ n, i, x: i * 2.2 }))
-  for (const d of order.slice().reverse()) {
-    const at = B(0) + 1.1 + d.i * (P ? 0.9 : 0.9) + (d.i === 3 ? (B(1) - B(0) - 1.6) : 0)
-    const fall = easeIn2(inv(at, at + 0.7, v))
-    const ang = -fall * 1.25
-    // pivot at (x + 0.35, -H2)
-    const px = d.x + 0.35, py = -H2
-    const cx = px + (-0.35) * Math.cos(ang) - H2 * Math.sin(ang)
-    const cy = py + (-0.35) * Math.sin(ang) + H2 * Math.cos(ang)
-    cube(ctx, cam, [cx, cy, 0], { size: 1, scale: [0.35, H2, 0.9], roll: ang, color: fall > 0.5 ? C.red : C.gold, label: d.n, alpha: inv(0.2 + d.i * 0.15, 0.8 + d.i * 0.15, t) })
-    const [sx, sy] = project([d.x, -H2 - 0.6, 0.9], cam)
-    text(ctx, dates[d.i], sx, sy + 24, 18, { font: FONT.mono, align: 'center', color: fall > 0.5 ? C.red : C.dim, alpha: inv(0.4, 1, t) })
+  const m = P ? { x: 0, y: 260, w: W, h: 760 } : L.main
+  // ---- the cascade: small dominoes run on "接连倒下", LUNA tips on "LUNA", the giant FTX lands on "崩塌"
+  const ds = dominoPlan(B(0), B(1))
+  const ftx = ds[ds.length - 1]
+  const blocksOn = after(3, 0.7)
+  const fly = easeInOut(inv(B(0) + 0.6, ftx.hit + 0.6, v))
+  const cam: Cam = {
+    x: lerp(0.6, P ? 6.2 : 5.4, fly), y: lerp(1.7, 3.4, fly), z: lerp(-5.6, P ? -14 : -11.5, fly),
+    yaw: lerp(0.42, 0.22, fly), pitch: lerp(0.2, 0.26, fly),
+    f: P ? 900 : 1000, cx: m.x + m.w / 2, cy: m.y + m.h * (P ? 0.74 : 0.56),
   }
-  // floor line
-  const a0 = project([-2, -H2, 0], cam), a1 = project([10, -H2, 0], cam)
-  ctx.strokeStyle = rgba(C.white, 0.15); ctx.lineWidth = 1.5
-  ctx.beginPath(); ctx.moveTo(a0[0], a0[1]); ctx.lineTo(a1[0], a1[1]); ctx.stroke()
+  const shake = Math.exp(-Math.max(0, v - ftx.hit) * 6) * (v > ftx.hit ? 14 : 0)
+  ctx.save()
+  ctx.translate((rnd(Math.floor(t * 50)) - 0.5) * shake, (rnd(Math.floor(t * 50), 2) - 0.5) * shake)
+  ctx.globalAlpha *= 1 - blocksOn * 0.72
+  // polished floor (2D, behind) with a soft red light pool where the giant lands
+  const fl = [project([-3, 0, -3], cam), project([16, 0, -3], cam), project([16, 0, 6], cam), project([-3, 0, 6], cam)]
+  const fg = ctx.createLinearGradient(0, fl[2][1], 0, fl[0][1])
+  fg.addColorStop(0, 'rgba(255,255,255,0)'); fg.addColorStop(1, 'rgba(255,240,220,0.05)')
+  ctx.fillStyle = fg
+  ctx.beginPath(); fl.forEach((q, k) => (k ? ctx.lineTo(q[0], q[1]) : ctx.moveTo(q[0], q[1]))); ctx.closePath(); ctx.fill()
+  const land = project([ftx.px + ftx.h * 0.5, 0, 0], cam)
+  glowDot(ctx, land[0], land[1], 420, C.red, 0.35 * inv(ftx.T, ftx.hit + 0.3, v))
+  // contact shadows
+  ds.forEach((d, i) => {
+    const a = dominoAngle(ds, i, v)
+    const sx = d.px - d.th / 2 + Math.sin(a) * d.h * 0.5
+    const q = project([sx, 0, 0], cam)
+    const r = (cam.f * (d.h * 0.45 + Math.sin(a) * d.h * 0.4)) / Math.max(1, toCamZ([sx, 0, 0], cam))
+    ctx.save(); ctx.translate(q[0], q[1]); ctx.scale(1, 0.32)
+    const g = ctx.createRadialGradient(0, 0, 0, 0, 0, r)
+    g.addColorStop(0, 'rgba(0,0,0,0.55)'); g.addColorStop(1, 'rgba(0,0,0,0)')
+    ctx.fillStyle = g; ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2); ctx.fill(); ctx.restore()
+  })
+  // dominoes (real 3D: obsidian bodies, gold plates; the label sits on the big faces and turns with the domino)
+  const appear = inv(0, 0.8, t)
+  ds.forEach((d, i) => {
+    const a = dominoAngle(ds, i, v)
+    const c0: V3 = [d.px - (d.th / 2) * Math.cos(a) + (d.h / 2) * Math.sin(a), (d.th / 2) * Math.sin(a) + (d.h / 2) * Math.cos(a), 0]
+    const down = v > d.hit
+    block(cam, c0, { size: 1, scale: [d.th / 2, d.h / 2, d.w / 2], roll: -a, domino: true, color: down && d.n ? C.red : C.gold, label: d.n, sub: d.date, alpha: appear, glow: d.n ? 1 : 0.6 })
+  })
+  flush3D(ctx, { bloom: 0.8 })
+  // date tags float above the four named dominoes until they go down
+  ds.forEach((d) => {
+    if (!d.n) return
+    const q = project([d.px - d.th / 2, d.h + 0.45, 0], cam)
+    const edge = Math.min(q[0] - 60, W - 60 - q[0])
+    const ta = inv(0.4, 1.2, t) * (1 - inv(d.T, d.T + 0.3, v)) * clamp(edge / 80, 0, 1)
+    if (ta <= 0) return
+    text(ctx, d.n, q[0], q[1] - 8, 24, { font: FONT.mono, weight: 700, align: 'center', color: C.white, alpha: ta })
+    text(ctx, d.date, q[0], q[1] + 18, 16, { font: FONT.mono, align: 'center', color: C.dim, alpha: ta })
+  })
+  ctx.restore()
 
+  // ---- price chart in the info column
   const ib = L.info
-  const cp = after(2, 0.5)
+  const cp = after(2, 0.5) * (1 - (P ? blocksOn : blocksOn * 0.85))
   if (cp > 0) {
-    const cb = P ? { x: 90, y: 1040, w: 900, h: 230 } : { x: ib.x, y: ib.y + 160, w: ib.w, h: 300 }
+    const cb = P ? { x: 90, y: 1170, w: 900, h: 260 } : { x: ib.x, y: ib.y + 160, w: ib.w, h: 300 }
     const d0 = day('2022-01-01'), d1 = day('2022-12-31')
     priceChart(ctx, cb, d0, d1, lerp(d0, d1, easeInOut(after(2, 2))), { color: C.red, yMin: 14000, yMax: 48000, markers: [{ d: day('2022-11-22'), label: '$15,794', color: C.red, below: true }] }, cp)
     const val = 47000 - (47000 - 15794) * easeOutExpo(after(2, 2))
-    bigNumber(ctx, val, P ? W / 2 : ib.x, P ? 1000 : ib.y + 110, P ? 76 : 96, { color: '#ff7a6a', align: P ? 'center' : 'left', alpha: cp * (1 - after(3, 0.5) * 0.7) })
+    bigNumber(ctx, val, P ? W / 2 : ib.x, P ? 1120 : ib.y + 110, P ? 76 : 96, { color: '#ff7a6a', align: P ? 'center' : 'left', alpha: cp })
   }
-  // but the blocks keep coming
-  const k = after(3, 0.6)
-  if (k > 0) {
-    const y = P ? 1480 : ib.y + 590
-    const x0 = P ? 110 : ib.x
-    const span = P ? 860 : ib.w
-    const n = 10
-    const lt = v - B(3)
+
+  // ---- "but the blocks keep coming": a real 3D chain, one new block lands every beat (~10 minutes each)
+  if (blocksOn > 0) {
+    const n = BLOCK_N
+    const landT = (i: number) => blockLand(B(3), i)
+    let landed = 0
+    for (let i = 0; i < n; i++) landed += easeInOut(inv(landT(i) - 0.15, landT(i) + 0.35, v))
+    const SP = 2.5
+    const bc: Cam = { x: (landed - 1) * SP - (P ? 0 : 1.2), y: 1.6, z: -10.5, yaw: -0.12, pitch: 0.1, f: P ? 900 : 980, cx: m.x + m.w / 2, cy: m.y + m.h * 0.5 }
+    ctx.save()
+    ctx.globalAlpha *= blocksOn
+    // chain links
+    for (let i = 1; i < n; i++) {
+      const la = inv(landT(i), landT(i) + 0.2, v)
+      if (la > 0) beam(ctx, bc, [(i - 1) * SP, 0, 0], [i * SP, 0, 0], C.gold, la * 0.9, 2)
+    }
     for (let i = 0; i < n; i++) {
-      const p = inv(i * 0.35, i * 0.35 + 0.25, lt)
-      if (p <= 0) continue
-      const s = 40
-      const x = x0 + (i / (n - 1)) * (span - s)
-      ctx.fillStyle = rgba(C.gold, 0.2 + 0.6 * p)
-      ctx.fillRect(x, y - s * easeOutBack(p), s, s * easeOutBack(p))
-      ctx.strokeStyle = C.gold2; ctx.lineWidth = 1.5
-      ctx.strokeRect(x, y - s * easeOutBack(p), s, s * easeOutBack(p))
+      const u = inv(landT(i) - 0.32, landT(i), v)
+      if (u <= 0) continue
+      const y = (1 - u * u) * 4.2 + (v > landT(i) ? Math.sin((v - landT(i)) * 22) * 0.12 * Math.exp(-(v - landT(i)) * 8) : 0)
+      const flash = v > landT(i) ? Math.exp(-(v - landT(i)) * 5) : 0
+      block(bc, [i * SP, y, 0], { size: 0.85, yaw: 0.55 + (v - landT(i)) * 0.18, pitch: -0.32, color: C.gold, label: fmtInt(764993 + i).replace(/^/, '#'), sub: '~10 MIN', alpha: Math.min(1, u * 2), glow: 1 + flash * 1.5 })
+    }
+    flush3D(ctx, { bloom: 1.1 })
+    // 10-minute clock: the hand sweeps once per block
+    const ccx = P ? W / 2 : m.x + m.w - 120, ccy = P ? m.y + 90 : m.y + 110, cr = 56
+    const cyc = clamp((v - landT(0) + BLOCK_DT) / BLOCK_DT, 0, n)
+    ctx.strokeStyle = rgba(C.gold, 0.5); ctx.lineWidth = 2
+    ctx.beginPath(); ctx.arc(ccx, ccy, cr, 0, Math.PI * 2); ctx.stroke()
+    for (let k = 0; k < 12; k++) {
+      const a = (k / 12) * Math.PI * 2
+      ctx.beginPath(); ctx.moveTo(ccx + Math.cos(a) * cr * 0.82, ccy + Math.sin(a) * cr * 0.82); ctx.lineTo(ccx + Math.cos(a) * cr * 0.94, ccy + Math.sin(a) * cr * 0.94); ctx.stroke()
     }
-    text(ctx, '每 ~10 分钟 · 一个新区块', P ? W / 2 : x0, y + 52, P ? 32 : 30, { font: FONT.cnSerif, weight: 700, align: P ? 'center' : 'left', color: C.gold2, alpha: k })
+    const ha = (cyc % 1) * Math.PI * 2 - Math.PI / 2
+    ctx.strokeStyle = C.gold2; ctx.lineWidth = 4; ctx.lineCap = 'round'
+    ctx.beginPath(); ctx.moveTo(ccx, ccy); ctx.lineTo(ccx + Math.cos(ha) * cr * 0.78, ccy + Math.sin(ha) * cr * 0.78); ctx.stroke()
+    ctx.beginPath(); ctx.arc(ccx, ccy, cr + 8, -Math.PI / 2, -Math.PI / 2 + (cyc % 1) * Math.PI * 2); ctx.strokeStyle = rgba(C.gold2, 0.8); ctx.lineWidth = 3; ctx.stroke()
+    text(ctx, '10:00', ccx, ccy + cr + 34, 20, { font: FONT.mono, weight: 700, align: 'center', color: C.gold2 })
+    ctx.restore()
+    const ty = P ? m.y + m.h + 40 : m.y + m.h - 30
+    text(ctx, '每 ~10 分钟 · 一个新区块', m.x + m.w / 2, ty, P ? 44 : 46, { font: FONT.cnSerif, weight: 900, align: 'center', color: C.white, alpha: blocksOn, glow: 18, glowColor: C.gold, spacing: 4 })
+    text(ctx, 'TICK · TOCK · NEXT BLOCK', m.x + m.w / 2, ty + (P ? 50 : 50), 18, { font: FONT.mono, align: 'center', color: C.gold, alpha: blocksOn, spacing: 6 })
   }
-  void fmtInt; void clamp
+  void easeOutBack
+}
+const toCamZ = (p: V3, cam: Cam) => {
+  const dx = p[0] - cam.x, dz = p[2] - cam.z
+  return dx * Math.sin(cam.yaw) + dz * Math.cos(cam.yaw)
 }
-const easeIn2 = (x: number) => x * x

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

@@ -1,12 +1,14 @@
 // Scenes 09–12
 import { C, FONT, clamp, easeInOut, easeOut, easeOutBack, easeOutExpo, fmtInt, inv, lerp, rgba, rnd } from './util'
-import { beam, bigNumber, cube, glowDot, panel, priceChart, text, typeText, type Cam, type V3 } from './gfx'
+import { beam, bigNumber, cube, glowDot, panel, priceChart, project, text, typeText, type Cam, type V3 } from './gfx'
 import { ATH, LAST, day } from './price'
 import { supplyAt } from './scenes1'
 import type { SC } from './sc'
+import { flush3D, tomb, portal, globe, logoTile, block } from './stage3d'
 import { coin3dGL } from './coingl'
+import { doorOpen } from './cues'
 
-function rays(ctx: CanvasRenderingContext2D, x: number, y: number, r: number, a: number, t: number, col = C.gold) {
+export function rays(ctx: CanvasRenderingContext2D, x: number, y: number, r: number, a: number, t: number, col = C.gold) {
   if (a <= 0) return
   ctx.save()
   ctx.globalCompositeOperation = 'lighter'
@@ -29,42 +31,36 @@ export function s09(c: SC) {
   const m = P ? { x: 90, y: 300, w: 900, h: 760 } : L.main
   const cx = m.x + m.w / 2, cy = m.y + m.h / 2
   const doorA = inv(0.1, 0.9, t) * (1 - after(3, 0.6))
-  const open = easeInOut(after(1, 2.2))
+  const open = doorOpen(B(1), B(2), v)
   if (doorA > 0) {
     ctx.save()
     ctx.globalAlpha *= doorA
-    // light behind
-    glowDot(ctx, cx, cy, m.h * 0.9 * (0.3 + open), C.gold2, 0.9 * open)
-    rays(ctx, cx, cy, m.h * 0.9, open, t)
-    text(ctx, 'SPOT BITCOIN ETF', cx, cy - 10, P ? 64 : 78, { font: FONT.serif, weight: 900, align: 'center', color: '#fff6dd', glow: 40, glowColor: C.gold, alpha: open })
-    text(ctx, '2024-01-11 · 11 只现货 ETF 同日上市', cx, cy + 56, P ? 28 : 30, { font: FONT.sans, weight: 700, align: 'center', color: C.ink, alpha: open * 0.0 })
-    text(ctx, '2024-01-11 · 11 只现货 ETF 同日上市', cx, cy + 60, P ? 28 : 30, { font: FONT.sans, weight: 700, align: 'center', color: C.white, alpha: open })
-    // doors
-    const dw = m.w / 2
-    for (const side of [-1, 1]) {
-      const x0 = side < 0 ? m.x - open * dw * 0.98 : cx + open * dw * 0.98
-      const g = ctx.createLinearGradient(x0, 0, x0 + dw, 0)
-      g.addColorStop(0, '#16110a'); g.addColorStop(0.5, '#241a0c'); g.addColorStop(1, '#120d07')
-      ctx.fillStyle = g
-      ctx.fillRect(x0, m.y + 70, dw, m.h - 70)
-      ctx.strokeStyle = rgba(C.gold, 0.55)
-      ctx.lineWidth = 2
-      ctx.strokeRect(x0 + 18, m.y + 90, dw - 36, m.h - 110)
-      for (let k = 1; k < 6; k++) {
-        const xx = x0 + 18 + ((dw - 36) * k) / 6
-        ctx.strokeStyle = rgba(C.gold, 0.18)
-        ctx.beginPath(); ctx.moveTo(xx, m.y + 110); ctx.lineTo(xx, m.y + m.h - 40); ctx.stroke()
-      }
-      // handle
-      ctx.fillStyle = C.gold
-      ctx.fillRect(side < 0 ? x0 + dw - 40 : x0 + 28, cy - 50, 12, 100)
-    }
-    // lintel
-    ctx.fillStyle = '#1a140b'
-    ctx.fillRect(m.x - 10, m.y, m.w + 20, 70)
-    ctx.strokeStyle = C.gold; ctx.lineWidth = 2
-    ctx.strokeRect(m.x - 10, m.y, m.w + 20, 70)
-    text(ctx, 'W A L L   S T R E E T', cx, m.y + 48, 30, { font: FONT.serif, weight: 700, align: 'center', color: C.gold2 })
+    // slow push-in towards the doorway, slight low angle for grandeur
+    const push = easeInOut(inv(0, B(3), v))
+    const camX = lerp(1.6, 0.7, push), camZ = lerp(-13.5, -10.6, push)
+    const cam: Cam = { x: camX, y: lerp(1.9, 2.1, push), z: camZ, yaw: Math.atan2(-camX, -camZ) * 0.85, pitch: lerp(-0.07, -0.03, push), f: P ? 950 : 1000, cx, cy: cy + (P ? 60 : 30) }
+    const dc = project([0, 1.95, 0.3], cam)
+    // light pouring out of the doorway (2D, behind the stone portal → visible only through the opening and around it)
+    const lit = Math.min(1, open * 1.4)
+    glowDot(ctx, dc[0], dc[1], m.h * (0.35 + 0.8 * lit), C.gold2, 0.25 + 0.75 * lit)
+    rays(ctx, dc[0], dc[1], m.h * 1.1, lit, t)
+    const hall = ctx.createRadialGradient(dc[0], dc[1], 0, dc[0], dc[1], m.h * 0.45)
+    hall.addColorStop(0, rgba('#fff6dd', 0.95 * lit)); hall.addColorStop(1, rgba(C.gold, 0))
+    ctx.fillStyle = hall; ctx.fillRect(dc[0] - m.h * 0.45, dc[1] - m.h * 0.45, m.h * 0.9, m.h * 0.9)
+    portal(cam, [0, 0, 0], { open })
+    flush3D(ctx, { bloom: 1.2 })
+    // light spill on the steps
+    const st = project([0, -0.1, -1.2], cam)
+    ctx.save(); ctx.translate(st[0], st[1]); ctx.scale(1, 0.18)
+    ctx.globalCompositeOperation = 'lighter'
+    const sg = ctx.createRadialGradient(0, 0, 0, 0, 0, 420)
+    sg.addColorStop(0, rgba(C.gold2, 0.45 * lit)); sg.addColorStop(1, rgba(C.gold, 0))
+    ctx.fillStyle = sg; ctx.beginPath(); ctx.arc(0, 0, 420, 0, Math.PI * 2); ctx.fill(); ctx.restore()
+    // the title steps out of the light once the leaves are wide open
+    const ta = inv(0.55, 0.95, open)
+    const ty = P ? m.y + m.h + 30 : m.y + m.h - 40
+    text(ctx, 'SPOT BITCOIN ETF', cx, ty - 46, P ? 60 : 64, { font: FONT.serif, weight: 900, align: 'center', color: '#fff6dd', glow: 40, glowColor: C.gold, alpha: ta, spacing: 4 })
+    text(ctx, '2024-01-11 · 11 只现货 ETF 同日上市', cx, ty + 4, P ? 28 : 28, { font: FONT.sans, weight: 700, align: 'center', color: C.white, alpha: ta })
     ctx.restore()
   }
   // halving block 840,000
@@ -75,6 +71,7 @@ export function s09(c: SC) {
     const flash = Math.exp(-Math.max(0, v - B(3) - 0.9) * 4) * (v > B(3) + 0.9 ? 1 : 0)
     glowDot(ctx, cam.cx, cam.cy, 380 + flash * 300, C.gold, (0.3 + flash) * hb)
     cube(ctx, cam, [0, (1 - drop) * 6, 0], { size: 2.2, yaw: 0.7 + t * 0.25, pitch: -0.4, label: '#840,000', sub: 'HALVING IV', alpha: hb, glow: 1 + flash * 2 })
+    flush3D(ctx, { bloom: 1 + flash })
     text(ctx, '6.25 → 3.125 BTC', cam.cx, cam.cy + (P ? 330 : 330), 46, { font: FONT.mono, weight: 700, align: 'center', color: C.gold2, alpha: hb, glow: 16 })
     text(ctx, '2024-04-20 · 第四次减半', cam.cx, cam.cy + (P ? 384 : 384), 28, { font: FONT.sans, align: 'center', color: C.white, alpha: hb })
   }
@@ -111,41 +108,58 @@ export function s09(c: SC) {
 }
 
 // ------------------------------------------------------------------ s10 国家储备 + 新高
+/** text along a circle, upright and legible: top arc reads left→right over the top, bottom arc reads left→right under */
+function arcText(ctx: CanvasRenderingContext2D, s: string, r: number, size: number, top: boolean, spacing = 0.12) {
+  ctx.font = `700 ${size}px ${FONT.mono}`
+  const ws = [...s].map((ch) => ctx.measureText(ch).width + size * spacing)
+  const total = ws.reduce((a, b) => a + b, 0)
+  const span = total / r
+  let a = (top ? -Math.PI / 2 : Math.PI / 2) + (top ? -span / 2 : span / 2)
+  ctx.textAlign = 'center'; ctx.textBaseline = 'middle'
+  ;[...s].forEach((ch, k) => {
+    const half = ws[k] / 2 / r
+    a += top ? half : -half
+    ctx.save()
+    ctx.translate(Math.cos(a) * r, Math.sin(a) * r)
+    ctx.rotate(top ? a + Math.PI / 2 : a - Math.PI / 2)
+    ctx.fillText(ch, 0, 0)
+    ctx.restore()
+    a += top ? half : -half
+  })
+}
+
+/** the reserve seal: an engraved gold medallion ring with clean arc lettering around the real 3D coin */
 function seal(ctx: CanvasRenderingContext2D, x: number, y: number, r: number, t: number, a: number) {
   if (a <= 0) return
   ctx.save()
   ctx.globalAlpha *= a
   ctx.translate(x, y)
-  glowDot(ctx, 0, 0, r * 1.7, C.gold, 0.35)
-  ctx.fillStyle = 'rgba(20,14,5,0.92)'
-  ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2); ctx.fill()
-  ctx.strokeStyle = C.gold2; ctx.lineWidth = 4
-  ctx.stroke()
-  ctx.lineWidth = 1.5
-  ctx.beginPath(); ctx.arc(0, 0, r * 0.93, 0, Math.PI * 2); ctx.stroke()
-  ctx.beginPath(); ctx.arc(0, 0, r * 0.62, 0, Math.PI * 2); ctx.stroke()
-  // rotating legend
-  const s = '★ STRATEGIC BITCOIN RESERVE ★ EXECUTIVE ORDER · 2025-03-06 '
-  ctx.save()
-  ctx.rotate(t * 0.12)
-  ctx.font = `700 ${r * 0.1}px ${FONT.mono}`
-  ctx.fillStyle = C.gold2
-  ctx.textAlign = 'center'
-  for (let i = 0; i < s.length; i++) {
+  glowDot(ctx, 0, 0, r * 1.8, C.gold, 0.32)
+  // ring band
+  const band = ctx.createRadialGradient(0, 0, r * 0.66, 0, 0, r)
+  band.addColorStop(0, '#120c05'); band.addColorStop(0.5, '#1d1408'); band.addColorStop(1, '#0d0904')
+  ctx.fillStyle = band
+  ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2); ctx.arc(0, 0, r * 0.66, 0, Math.PI * 2, true); ctx.fill('evenodd')
+  const rim = ctx.createLinearGradient(-r, -r, r, r)
+  rim.addColorStop(0, '#ffe3a1'); rim.addColorStop(0.45, '#c98a1c'); rim.addColorStop(0.55, '#f7c35a'); rim.addColorStop(1, '#7a4d0c')
+  ctx.strokeStyle = rim
+  ctx.lineWidth = r * 0.03; ctx.beginPath(); ctx.arc(0, 0, r * 0.985, 0, Math.PI * 2); ctx.stroke()
+  ctx.lineWidth = r * 0.012; ctx.beginPath(); ctx.arc(0, 0, r * 0.93, 0, Math.PI * 2); ctx.stroke()
+  ctx.beginPath(); ctx.arc(0, 0, r * 0.67, 0, Math.PI * 2); ctx.stroke()
+  // lettering (gold, with a soft engraved shadow)
+  const tr = r * 0.8, fs = r * 0.095
+  for (const pass of [0, 1]) {
     ctx.save()
-    ctx.rotate((i / s.length) * Math.PI * 2)
-    ctx.fillText(s[i], 0, -r * 0.74)
+    if (pass === 0) { ctx.translate(0, fs * 0.06); ctx.fillStyle = 'rgba(0,0,0,0.8)' } else { ctx.fillStyle = '#ffd98a'; ctx.shadowColor = rgba(C.gold, 0.8); ctx.shadowBlur = fs * 0.5 }
+    arcText(ctx, 'STRATEGIC BITCOIN RESERVE', tr, fs, true)
+    arcText(ctx, 'EXECUTIVE ORDER · 2025-03-06', tr, fs * 0.82, false)
     ctx.restore()
   }
+  // stars at 9 and 3 o'clock separating the arcs
+  for (const sx of [-1, 1]) text(ctx, '★', sx * tr, fs * 0.36, fs * 1.05, { font: FONT.mono, align: 'center', color: '#ffd98a' })
   ctx.restore()
-  // stars ring
-  for (let i = 0; i < 13; i++) {
-    const an = (i / 13) * Math.PI * 2 - t * 0.05
-    ctx.fillStyle = C.gold
-    ctx.beginPath(); ctx.arc(Math.cos(an) * r * 0.52, Math.sin(an) * r * 0.52, r * 0.018, 0, Math.PI * 2); ctx.fill()
-  }
-  text(ctx, '₿', 0, r * 0.17, r * 0.5, { font: FONT.serif, weight: 900, align: 'center', color: C.gold2, glow: 30 })
-  ctx.restore()
+  // the real coin in the middle, slowly turning so the light runs over it
+  coin3dGL(ctx, x, y, r * 0.6, 0.35 * Math.sin(t * 0.6) + 0.2, { tilt: -0.06, light: 0.4 + 0.5 * Math.sin(t * 0.45), alpha: a, glow: 0.5, shadow: 0 })
 }
 
 export function s10(c: SC) {
@@ -312,12 +326,13 @@ export function s12(c: SC) {
   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 = 0; i < MILESTONES.length - 1; i++) beam(ctx, cam, pts[i], pts[i + 1], C.gold, 0.7 * recede, 1.8)
   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 * recede, color: MILESTONES[i][0] === '?' ? C.white : C.gold })
   }
+  flush3D(ctx)
   // ---- 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)
   const settle = easeInOut(inv(B(2) - 0.5, B(2) + 0.9, v))
@@ -368,7 +383,7 @@ export function s12(c: SC) {
   const end = inv(D - 5.5, D - 4, t)
   if (end > 0) {
     text(ctx, '比特币发展历程 · 2008 → 2026', W / 2, P ? H * 0.68 : 860, P ? 30 : 28, { font: FONT.sans, weight: 700, align: 'center', color: C.white, alpha: end, spacing: 6 })
-    text(ctx, '价格数据 Surf Data API · 旁白 Qwen3-TTS · 配乐与音效 程序化合成', W / 2, P ? H * 0.71 : 905, P ? 20 : 20, { font: FONT.mono, align: 'center', color: C.dim, alpha: end })
+    text(ctx, '本片仅作历史科普 · 不构成任何投资建议', W / 2, P ? H * 0.71 : 908, P ? 26 : 24, { font: FONT.cnSerif, weight: 700, align: 'center', color: C.dim, alpha: end, spacing: 4 })
   }
   void easeOut; void easeOutBack; void easeOutExpo; void glowDot; void bigNumber; void panel; void priceChart; void rnd; void fmtInt
 }

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

@@ -0,0 +1,639 @@
+// Real-time 3D stage (Three.js / WebGL) for everything in the film that is an object rather than a graphic:
+// blocks, dominoes, tombstones, the Wall Street portal, the Earth, logo tiles.
+//  • the scenes keep their own lightweight camera (gfx.Cam: position, yaw, pitch, focal length in px, principal point);
+//    it is converted into an exact Three.js camera (custom projection matrix) so 3D objects line up pixel-perfectly
+//    with the 2D graphics drawn around them.
+//  • objects are queued during a scene's draw and rendered in one pass by flush3D(ctx) — the transparent WebGL frame
+//    is composited into the 2D film frame at that point (2D drawn before = behind, after = in front) plus a soft bloom.
+//  • lighting: the Blender studio HDRI (image-based lighting, PMREM) + a key light; Khronos PBR-Neutral tone mapping.
+//  • labels are painted onto the faces (canvas textures, emissive), so block numbers turn with their block.
+// Pure function of the arguments → deterministic frames for the MP4 export.
+import * as THREE from 'three'
+import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js'
+import { HDRLoader } from 'three/examples/jsm/loaders/HDRLoader.js'
+import hdrUrl from '../assets/3d/studio.hdr?url'
+import earthUrl from '../assets/3d/earth.jpg?url'
+import earthSpecUrl from '../assets/3d/earth-spec.jpg?url'
+import earthNormUrl from '../assets/3d/earth-normal.jpg?url'
+import earthLightsUrl from '../assets/3d/earth-lights.jpg?url'
+import { cubeHook, type Cam, type CubeOpts, type V3 } from './gfx'
+import { FONT } from './util'
+import { LOGOS } from './logos'
+
+type Ctx = CanvasRenderingContext2D
+
+type St = {
+  renderer: THREE.WebGLRenderer
+  scene: THREE.Scene
+  camera: THREE.PerspectiveCamera
+  key: THREE.DirectionalLight
+  earth: { map: THREE.Texture; rough: THREE.Texture; normal: THREE.Texture; lights: THREE.Texture } | null
+  w: number
+  h: number
+}
+let st: St | null = null
+let loadP: Promise<boolean> | null = null
+
+function loadTex(url: string, srgb: boolean) {
+  return new THREE.TextureLoader().loadAsync(url).then((t) => {
+    t.colorSpace = srgb ? THREE.SRGBColorSpace : THREE.NoColorSpace
+    t.anisotropy = 8
+    return t
+  })
+}
+
+async function init(): Promise<boolean> {
+  try {
+    const canvas = document.createElement('canvas')
+    const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true, preserveDrawingBuffer: true, premultipliedAlpha: true, powerPreference: 'high-performance' })
+    renderer.setPixelRatio(1)
+    renderer.setClearColor(0x000000, 0)
+    renderer.toneMapping = THREE.NeutralToneMapping
+    renderer.toneMappingExposure = 1.0
+    renderer.outputColorSpace = THREE.SRGBColorSpace
+    const [hdr, map, spec, normal, lights] = await Promise.all([
+      new HDRLoader().loadAsync(hdrUrl), loadTex(earthUrl, true), loadTex(earthSpecUrl, false), loadTex(earthNormUrl, false), loadTex(earthLightsUrl, true),
+    ])
+    hdr.mapping = THREE.EquirectangularReflectionMapping
+    const pm = new THREE.PMREMGenerator(renderer)
+    const env = pm.fromEquirectangular(hdr).texture
+    hdr.dispose(); pm.dispose()
+    // ocean = glossy, land = matte: invert the specular mask into a roughness map
+    const sc = document.createElement('canvas'); sc.width = spec.image.width; sc.height = spec.image.height
+    const sg = sc.getContext('2d')!
+    sg.filter = 'invert(1) brightness(0.75)'; sg.drawImage(spec.image as CanvasImageSource, 0, 0)
+    sg.filter = 'none'; sg.globalCompositeOperation = 'lighter'; sg.fillStyle = 'rgb(40,40,40)'; sg.fillRect(0, 0, sc.width, sc.height)
+    const rough = new THREE.CanvasTexture(sc); rough.colorSpace = THREE.NoColorSpace
+    const scene = new THREE.Scene()
+    scene.environment = env
+    scene.add(new THREE.HemisphereLight(0xfff2dd, 0x1a1208, 0.35))
+    const key = new THREE.DirectionalLight(0xfff0d8, 2.2); key.position.set(-4, 6, 8); scene.add(key)
+    const rim = new THREE.DirectionalLight(0xffc070, 1.6); rim.position.set(6, 2, -6); scene.add(rim)
+    const camera = new THREE.PerspectiveCamera(40, 16 / 9, 0.1, 400)
+    st = { renderer, scene, camera, key, earth: { map, rough, normal, lights }, w: 0, h: 0 }
+    // real 3D block; while a block is still assembling (solid < 1) the 2D glowing wireframe is drawn as well
+    cubeHook.fn = (cam, c, o) => { block(cam, c, o); return (o.solid ?? 1) >= 0.999 }
+    return true
+  } catch (e) {
+    console.warn('[stage3d] WebGL stage unavailable, using 2D fallbacks:', e)
+    st = null
+    return false
+  }
+}
+export function loadStage() {
+  if (!loadP) loadP = init()
+  return loadP
+}
+export const stageReady = () => !!st
+
+// ---------------------------------------------------------------- coordinate conversion
+// gfx space: x right, y up, camera looks along +z. Three: camera looks along -z → mirror z.
+const toThree = (p: V3) => new THREE.Vector3(p[0], p[1], -p[2])
+/** gfx rot(yaw,pitch,roll) = Rz·Rx·Ry; conjugated by the z-mirror the x/y angles flip sign */
+const euler = (yaw = 0, pitch = 0, roll = 0) => new THREE.Euler(-pitch, -yaw, roll, 'ZXY')
+
+function setCamera(cam: Cam, W: number, H: number) {
+  const c = st!.camera
+  c.position.copy(toThree([cam.x, cam.y, cam.z]))
+  c.rotation.set(-cam.pitch, -cam.yaw, 0, 'YXZ')
+  c.updateMatrixWorld(true)
+  const n = 0.1, f = 400
+  c.projectionMatrix.set(
+    (2 * cam.f) / W, 0, 1 - (2 * cam.cx) / W, 0,
+    0, (2 * cam.f) / H, (2 * cam.cy) / H - 1, 0,
+    0, 0, -(f + n) / (f - n), (-2 * f * n) / (f - n),
+    0, 0, -1, 0,
+  )
+  c.projectionMatrixInverse.copy(c.projectionMatrix).invert()
+}
+
+/** screen position (design px) of a Three world point under the current camera */
+function screenOf(v: THREE.Vector3, W: number, H: number): [number, number, number] {
+  const p = v.clone().project(st!.camera)
+  return [(p.x + 1) * 0.5 * W, (1 - p.y) * 0.5 * H, p.z]
+}
+
+// ---------------------------------------------------------------- textures
+const texCache = new Map<string, THREE.CanvasTexture>()
+function canvasTex(key: string, w: number, h: number, paint: (g: CanvasRenderingContext2D, w: number, h: number) => void, srgb = true) {
+  let t = texCache.get(key)
+  if (t) return t
+  const c = document.createElement('canvas'); c.width = w; c.height = h
+  const g = c.getContext('2d')!
+  paint(g, w, h)
+  t = new THREE.CanvasTexture(c)
+  t.colorSpace = srgb ? THREE.SRGBColorSpace : THREE.NoColorSpace
+  t.anisotropy = 8
+  t.generateMipmaps = true
+  t.minFilter = THREE.LinearMipmapLinearFilter
+  texCache.set(key, t)
+  return t
+}
+
+type Tint = 'gold' | 'red' | 'white' | 'ice' | 'green'
+const INK: Record<Tint, { line: string; text: string; sub: string; body: [number, number, number] }> = {
+  gold: { line: '#f7a823', text: '#fff1cf', sub: '#ffc75a', body: [0.2, 0.12, 0.04] },
+  red: { line: '#ff4a3a', text: '#ffe2dc', sub: '#ff8a7a', body: [0.22, 0.035, 0.025] },
+  white: { line: '#dfe7f0', text: '#ffffff', sub: '#b8c4d0', body: [0.09, 0.095, 0.11] },
+  ice: { line: '#7fd3ff', text: '#eaf8ff', sub: '#a8e2ff', body: [0.05, 0.1, 0.14] },
+  green: { line: '#7ee0b0', text: '#eafff4', sub: '#a8f0cc', body: [0.04, 0.14, 0.09] },
+}
+const tintOf = (color?: string): Tint => {
+  const c = (color ?? '').toLowerCase()
+  if (c.includes('ff3b3b') || c.includes('red') || c === '#ff5a4a') return 'red'
+  if (c.includes('ffffff') || c.includes('f4f1ea') || c === '#fff' || c.includes('white')) return 'white'
+  if (c.includes('7fd3ff')) return 'ice'
+  if (c.includes('7ee0b0')) return 'green'
+  return 'gold'
+}
+
+function fitFont(g: CanvasRenderingContext2D, s: string, weight: number, family: string, maxW: number, maxH: number) {
+  let size = maxH
+  g.font = `${weight} ${size}px ${family}`
+  const w = g.measureText(s).width
+  if (w > maxW) size *= maxW / w
+  g.font = `${weight} ${size}px ${family}`
+  return size
+}
+
+/** block face: framed plate with the block number (and a sub line), painted for colour (map) or glow (emissive) */
+function faceTex(label: string, sub: string, tint: Tint, aspect: number, emissive: boolean) {
+  const vertical = aspect > 1.7 // tall domino faces: text runs up the face
+  const W = 512, H = Math.round(Math.min(1024, Math.max(128, 512 * aspect)))
+  return canvasTex(`face|${label}|${sub}|${tint}|${aspect.toFixed(2)}|${emissive ? 1 : 0}`, W, H, (g) => {
+    const ink = INK[tint]
+    if (!emissive) {
+      const bg = g.createLinearGradient(0, 0, W, H)
+      bg.addColorStop(0, '#2a1d0c'); bg.addColorStop(0.5, '#120c05'); bg.addColorStop(1, '#1d1408')
+      g.fillStyle = bg; g.fillRect(0, 0, W, H)
+      // fine brushed lines
+      g.globalAlpha = 0.07
+      for (let i = 0; i < 90; i++) { g.fillStyle = i % 2 ? '#ffffff' : '#000000'; g.fillRect(0, (i * 37) % H, W, 1) }
+      g.globalAlpha = 1
+    } else { g.fillStyle = '#000'; g.fillRect(0, 0, W, H) }
+    const m = Math.min(W, H) * 0.07
+    g.strokeStyle = ink.line; g.lineWidth = Math.max(3, Math.min(W, H) * 0.018)
+    g.globalAlpha = emissive ? 0.85 : 1
+    g.strokeRect(m, m, W - 2 * m, H - 2 * m)
+    g.lineWidth *= 0.45; g.globalAlpha = emissive ? 0.35 : 0.6
+    g.strokeRect(m * 1.7, m * 1.7, W - 3.4 * m, H - 3.4 * m)
+    g.globalAlpha = 1
+    // corner ticks
+    g.lineWidth = Math.max(4, Math.min(W, H) * 0.03)
+    const k = Math.min(W, H) * 0.16
+    for (const [x, y, sx, sy] of [[m, m, 1, 1], [W - m, m, -1, 1], [m, H - m, 1, -1], [W - m, H - m, -1, -1]]) {
+      g.beginPath(); g.moveTo(x, y + sy * k); g.lineTo(x, y); g.lineTo(x + sx * k, y); g.stroke()
+    }
+    if (!label) {
+      // top / bottom faces: a small engraved ₿
+      g.fillStyle = ink.line; g.globalAlpha = emissive ? 0.5 : 0.8
+      g.textAlign = 'center'; g.textBaseline = 'middle'
+      g.font = `900 ${Math.min(W, H) * 0.32}px ${FONT.serif}`
+      g.fillText('₿', W / 2, H / 2)
+      g.globalAlpha = 1
+      return
+    }
+    g.save()
+    g.translate(W / 2, H / 2)
+    let fw = W, fh = H
+    if (vertical) { g.rotate(-Math.PI / 2); fw = H; fh = W }
+    g.textAlign = 'center'; g.textBaseline = 'middle'
+    const lineH = sub ? fh * 0.3 : fh * 0.38
+    const s1 = fitFont(g, label, 700, FONT.mono, fw * 0.8, lineH)
+    g.fillStyle = emissive ? ink.text : ink.text
+    if (!emissive) { g.shadowColor = 'rgba(0,0,0,0.8)'; g.shadowBlur = s1 * 0.12; g.shadowOffsetY = s1 * 0.04 }
+    g.fillText(label, 0, sub ? -fh * 0.1 : 0)
+    if (sub) {
+      fitFont(g, sub, 700, FONT.mono, fw * 0.72, fh * 0.13)
+      g.fillStyle = ink.sub
+      g.fillText(sub, 0, fh * 0.2)
+    }
+    g.restore()
+  })
+}
+
+// ---------------------------------------------------------------- pooled objects
+const pools = new Map<string, THREE.Object3D[]>()
+const used = new Map<string, number>()
+const live: THREE.Object3D[] = []
+function take<T extends THREE.Object3D>(kind: string, make: () => T): T {
+  let list = pools.get(kind)
+  if (!list) { list = []; pools.set(kind, list) }
+  const i = used.get(kind) ?? 0
+  used.set(kind, i + 1)
+  if (!list[i]) { list[i] = make(); st!.scene.add(list[i]) }
+  const o = list[i] as T
+  o.visible = true
+  live.push(o)
+  return o
+}
+
+const geoCache = new Map<string, THREE.BufferGeometry>()
+function roundedBox(w: number, h: number, d: number) {
+  const k = `${w.toFixed(3)}|${h.toFixed(3)}|${d.toFixed(3)}`
+  let g = geoCache.get(k)
+  if (!g) { g = new RoundedBoxGeometry(w, h, d, 4, Math.min(w, h, d) * 0.08); geoCache.set(k, g) }
+  return g
+}
+const planeGeo = new THREE.PlaneGeometry(1, 1)
+
+type BlockObj = THREE.Group & { body: THREE.Mesh; faces: THREE.Mesh[] }
+function makeBlock(): BlockObj {
+  const g = new THREE.Group() as BlockObj
+  g.body = new THREE.Mesh(planeGeo, new THREE.MeshPhysicalMaterial({ metalness: 1, roughness: 0.24, clearcoat: 1, clearcoatRoughness: 0.08, transparent: true }))
+  g.add(g.body)
+  g.faces = []
+  for (let i = 0; i < 6; i++) {
+    const m = new THREE.Mesh(planeGeo, new THREE.MeshPhysicalMaterial({
+      metalness: 0.55, roughness: 0.32, clearcoat: 1, clearcoatRoughness: 0.06, transparent: true,
+      emissive: new THREE.Color(1, 1, 1), emissiveIntensity: 1.3, polygonOffset: true, polygonOffsetFactor: -2,
+    }))
+    g.faces.push(m); g.add(m)
+  }
+  return g
+}
+
+export type BlockOpts = CubeOpts & { domino?: boolean }
+/** a real block: rounded polished-metal body; number plates on the side faces, ₿ plates on top & bottom */
+export function block(cam: Cam, c: V3, o: BlockOpts) {
+  if (!st) return
+  const a = (o.alpha ?? 1) * Math.min(1, o.solid ?? 1)
+  if (a <= 0.003) return
+  queue(cam)
+  const sc = o.scale ?? [1, 1, 1]
+  const grow = 1
+  const w = 2 * o.size * sc[0] * grow, h = 2 * o.size * sc[1] * grow, d = 2 * o.size * sc[2] * grow
+  const tint = tintOf(o.color)
+  const b = take('block', makeBlock)
+  b.position.copy(toThree(c))
+  b.rotation.copy(euler(o.yaw, o.pitch, o.roll))
+  b.body.geometry = roundedBox(w, h, d)
+  const bm = b.body.material as THREE.MeshPhysicalMaterial
+  const body = o.domino ? [0.025, 0.022, 0.02] : INK[tint].body
+  bm.color.setRGB(body[0], body[1], body[2]); bm.roughness = o.domino ? 0.12 : 0.24; bm.metalness = o.domino ? 0.35 : 1
+  bm.opacity = a; bm.depthWrite = a > 0.98
+  const label = o.label ?? '', sub = o.sub ?? ''
+  const inset = Math.min(w, h, d) * 0.1
+  const glow = o.glow ?? 1
+  // +z, -z, +x, -x, +y, -y
+  const F: [number, number, number, number, number, number, number, boolean][] = [
+    [0, 0, d / 2, 0, 0, w, h, true], [0, 0, -d / 2, 0, Math.PI, w, h, true],
+    [w / 2, 0, 0, 0, Math.PI / 2, d, h, true], [-w / 2, 0, 0, 0, -Math.PI / 2, d, h, true],
+    [0, h / 2, 0, -Math.PI / 2, 0, w, d, false], [0, -h / 2, 0, Math.PI / 2, 0, w, d, false],
+  ]
+  F.forEach(([x, y, z, rx, ry, fw, fh, side], i) => {
+    const m = b.faces[i]
+    const pw = Math.max(0.01, fw - inset * 2), ph = Math.max(0.01, fh - inset * 2)
+    const eps = 0.004 * Math.max(w, h, d)
+    m.position.set(x + Math.sign(x) * eps, y + Math.sign(y) * eps, z + Math.sign(z) * eps)
+    m.rotation.set(rx, ry, 0, 'YXZ')
+    m.scale.set(pw, ph, 1)
+    const asp = ph / pw
+    const mat = m.material as THREE.MeshPhysicalMaterial
+    const L = side ? label : '', S = side ? sub : ''
+    mat.map = faceTex(L, S, tint, asp, false)
+    mat.emissiveMap = faceTex(L, S, tint, asp, true)
+    mat.emissiveIntensity = 1.25 * glow
+    mat.opacity = a; mat.depthWrite = a > 0.98
+    mat.needsUpdate = mat.userData.k !== mat.map.uuid
+    mat.userData.k = mat.map.uuid
+  })
+}
+
+// ---------------------------------------------------------------- tombstone
+type TombObj = THREE.Group & { stone: THREE.Mesh; plate: THREE.Mesh; base: THREE.Mesh; snow: THREE.Mesh }
+const graniteTex = () => canvasTex('granite', 512, 512, (g, w, h) => {
+  g.fillStyle = '#5d636b'; g.fillRect(0, 0, w, h)
+  for (let i = 0; i < 26000; i++) {
+    const x = (Math.sin(i * 12.9898) * 43758.5453) % 1, y = (Math.sin(i * 78.233) * 12543.1234) % 1
+    const v = (Math.sin(i * 3.17) * 9999) % 1
+    const c = 60 + Math.abs(v) * 120
+    g.fillStyle = `rgba(${c},${c + 4},${c + 10},0.55)`
+    g.fillRect(Math.abs(x) * w, Math.abs(y) * h, 1 + Math.abs(v) * 2.2, 1 + Math.abs(v) * 2.2)
+  }
+})
+function tombShape() {
+  const s = new THREE.Shape()
+  const w = 0.62, hh = 1.0, r = 0.62
+  s.moveTo(-w, 0); s.lineTo(-w, hh); s.absarc(0, hh, r, Math.PI, 0, true); s.lineTo(w, 0); s.lineTo(-w, 0)
+  return s
+}
+let tombGeo: THREE.ExtrudeGeometry | null = null
+function makeTomb(): TombObj {
+  if (!tombGeo) {
+    tombGeo = new THREE.ExtrudeGeometry(tombShape(), { depth: 0.26, bevelEnabled: true, bevelThickness: 0.05, bevelSize: 0.045, bevelSegments: 4, curveSegments: 48 })
+    tombGeo.translate(0, 0, -0.13)
+    // planar UVs scaled to the stone
+    const uv = tombGeo.attributes.uv as THREE.BufferAttribute
+    for (let i = 0; i < uv.count; i++) uv.setXY(i, uv.getX(i) * 0.6, uv.getY(i) * 0.6)
+  }
+  const g = new THREE.Group() as TombObj
+  const stoneMat = new THREE.MeshPhysicalMaterial({ map: graniteTex(), color: 0xb9c2cc, roughness: 0.42, metalness: 0, clearcoat: 0.5, clearcoatRoughness: 0.2, transparent: true })
+  g.stone = new THREE.Mesh(tombGeo, stoneMat); g.add(g.stone)
+  g.plate = new THREE.Mesh(planeGeo, new THREE.MeshStandardMaterial({ transparent: true, roughness: 0.6, metalness: 0, polygonOffset: true, polygonOffsetFactor: -2 }))
+  g.plate.position.set(0, 0.93, 0.13 + 0.051); g.plate.scale.set(1.08, 1.5, 1); g.add(g.plate)
+  g.base = new THREE.Mesh(new RoundedBoxGeometry(1.7, 0.22, 0.7, 3, 0.04), stoneMat); g.base.position.set(0, -0.11, 0.05); g.add(g.base)
+  const snow = new THREE.SphereGeometry(1, 48, 16, 0, Math.PI * 2, 0, Math.PI / 2)
+  g.snow = new THREE.Mesh(snow, new THREE.MeshPhysicalMaterial({ color: 0xf4f8ff, roughness: 0.75, sheen: 1, sheenColor: new THREE.Color(0.8, 0.9, 1), transparent: true }))
+  g.snow.scale.set(0.5, 0.11, 0.2); g.snow.position.set(0, 1.6, 0); g.add(g.snow)
+  return g
+}
+const tombText = (year: string) => canvasTex(`tomb|${year}`, 512, 712, (g, w, h) => {
+  g.clearRect(0, 0, w, h)
+  g.textAlign = 'center'; g.textBaseline = 'middle'
+  const engrave = (s: string, y: number, size: number, font: string, weight = 900) => {
+    g.font = `${weight} ${size}px ${font}`
+    g.fillStyle = 'rgba(255,255,255,0.35)'; g.fillText(s, w / 2 + size * 0.03, y + size * 0.04) // lit lower edge
+    g.fillStyle = 'rgba(10,12,16,0.92)'; g.fillText(s, w / 2, y)                               // carved shadow
+    g.fillStyle = 'rgba(200,220,240,0.55)'; g.fillText(s, w / 2 - size * 0.015, y - size * 0.02)
+  }
+  engrave('R.I.P.', h * 0.26, 128, FONT.serif)
+  g.fillStyle = 'rgba(10,12,16,0.7)'; g.fillRect(w * 0.2, h * 0.39, w * 0.6, 4)
+  engrave('BITCOIN', h * 0.5, 84, FONT.mono, 700)
+  engrave(year, h * 0.7, 96, FONT.serif)
+})
+export function tomb(cam: Cam, p: V3, o: { yaw?: number; pitch?: number; roll?: number; scale?: number; year: string; alpha?: number }) {
+  if (!st) return
+  const a = o.alpha ?? 1
+  if (a <= 0.003) return
+  queue(cam)
+  const t = take('tomb', makeTomb)
+  t.position.copy(toThree(p))
+  t.rotation.copy(euler(o.yaw, o.pitch, o.roll))
+  t.scale.setScalar(o.scale ?? 1)
+  const pm = t.plate.material as THREE.MeshStandardMaterial
+  const tex = tombText(o.year)
+  if (pm.map !== tex) { pm.map = tex; pm.needsUpdate = true }
+  for (const m of [t.stone.material, pm, t.snow.material] as THREE.Material[]) { m.opacity = a; m.depthWrite = a > 0.98 }
+}
+
+// ---------------------------------------------------------------- Wall Street portal (doors swing out towards the viewer)
+type PortalObj = THREE.Group & { left: THREE.Group; right: THREE.Group; mats: THREE.Material[] }
+const doorTex = (emissive: boolean) => canvasTex(`door|${emissive ? 1 : 0}`, 512, 1280, (g, w, h) => {
+  if (emissive) { g.fillStyle = '#000'; g.fillRect(0, 0, w, h) } else {
+    const bg = g.createLinearGradient(0, 0, w, 0)
+    bg.addColorStop(0, '#2b1f0e'); bg.addColorStop(0.5, '#3b2a12'); bg.addColorStop(1, '#22180a')
+    g.fillStyle = bg; g.fillRect(0, 0, w, h)
+  }
+  g.strokeStyle = '#f7a823'
+  // six raised panels
+  for (let r = 0; r < 3; r++) for (let c = 0; c < 2; c++) {
+    const x = 50 + c * 216, y = 60 + r * 400, pw = 196, ph = 360
+    if (!emissive) {
+      const pg = g.createLinearGradient(x, y, x + pw, y + ph)
+      pg.addColorStop(0, '#4a3517'); pg.addColorStop(1, '#1b1308')
+      g.fillStyle = pg; g.fillRect(x, y, pw, ph)
+    }
+    g.lineWidth = 6; g.globalAlpha = emissive ? 0.55 : 1
+    g.strokeRect(x, y, pw, ph)
+    g.lineWidth = 2; g.globalAlpha = emissive ? 0.3 : 0.7
+    g.strokeRect(x + 16, y + 16, pw - 32, ph - 32)
+    g.globalAlpha = 1
+  }
+  // studs
+  g.fillStyle = '#ffd27a'
+  for (let r = 0; r < 3; r++) for (const xx of [24, w - 24]) { g.beginPath(); g.arc(xx, 240 + r * 400, 7, 0, Math.PI * 2); g.fill() }
+})
+const lintelTex = (emissive: boolean) => canvasTex(`lintel|${emissive ? 1 : 0}`, 1600, 200, (g, w, h) => {
+  if (emissive) { g.fillStyle = '#000'; g.fillRect(0, 0, w, h) } else {
+    const bg = g.createLinearGradient(0, 0, 0, h); bg.addColorStop(0, '#3a2a12'); bg.addColorStop(1, '#17100a')
+    g.fillStyle = bg; g.fillRect(0, 0, w, h)
+  }
+  g.strokeStyle = '#f7a823'; g.lineWidth = 5; g.strokeRect(14, 14, w - 28, h - 28)
+  g.fillStyle = emissive ? '#ffd27a' : '#ffe2a6'
+  g.textAlign = 'center'; g.textBaseline = 'middle'
+  g.font = `700 110px ${FONT.serif}`
+  ;(g as CanvasRenderingContext2D & { letterSpacing: string }).letterSpacing = '28px'
+  g.fillText('WALL STREET', w / 2 + 14, h / 2 + 6)
+})
+function makePortal(): PortalObj {
+  const g = new THREE.Group() as PortalObj
+  const marble = new THREE.MeshPhysicalMaterial({ color: 0x2a2116, roughness: 0.22, metalness: 0.2, clearcoat: 1, clearcoatRoughness: 0.05, transparent: true })
+  const gold = new THREE.MeshPhysicalMaterial({ color: 0xf0a43a, roughness: 0.22, metalness: 1, transparent: true })
+  const doorMat = new THREE.MeshPhysicalMaterial({ map: doorTex(false), emissiveMap: doorTex(true), emissive: 0xffffff, emissiveIntensity: 0.9, roughness: 0.3, metalness: 0.75, clearcoat: 0.8, transparent: true })
+  const lintelMat = new THREE.MeshPhysicalMaterial({ map: lintelTex(false), emissiveMap: lintelTex(true), emissive: 0xffffff, emissiveIntensity: 1.1, roughness: 0.3, metalness: 0.6, transparent: true })
+  g.mats = [marble, gold, doorMat, lintelMat]
+  // two fluted columns each side
+  const col = new THREE.CylinderGeometry(0.2, 0.22, 4.2, 48, 1)
+  const pos = col.attributes.position as THREE.BufferAttribute
+  for (let i = 0; i < pos.count; i++) { // flutes
+    const x = pos.getX(i), z = pos.getZ(i), a = Math.atan2(z, x), r = Math.hypot(x, z)
+    if (r < 0.05) continue
+    const k = 1 - 0.06 * Math.max(0, Math.cos(a * 16))
+    pos.setXYZ(i, x * k, pos.getY(i), z * k)
+  }
+  col.computeVertexNormals()
+  const cap = new RoundedBoxGeometry(0.62, 0.16, 0.62, 2, 0.03)
+  for (const x of [-2.75, -2.15, 2.15, 2.75]) {
+    const c = new THREE.Mesh(col, marble); c.position.set(x, 2.1, 0); g.add(c)
+    const t1 = new THREE.Mesh(cap, gold); t1.position.set(x, 4.25, 0); g.add(t1)
+    const t2 = new THREE.Mesh(cap, marble); t2.position.set(x, 0.08, 0); g.add(t2)
+  }
+  // entablature + pediment
+  const lintel = new THREE.Mesh(new THREE.BoxGeometry(6.3, 0.62, 0.7), [marble, marble, marble, marble, lintelMat, marble])
+  lintel.position.set(0, 4.64, 0); g.add(lintel)
+  const ped = new THREE.Shape(); ped.moveTo(-3.3, 0); ped.lineTo(3.3, 0); ped.lineTo(0, 0.9); ped.lineTo(-3.3, 0)
+  const pg = new THREE.ExtrudeGeometry(ped, { depth: 0.6, bevelEnabled: true, bevelSize: 0.04, bevelThickness: 0.04, bevelSegments: 2 })
+  pg.translate(0, 0, -0.3)
+  const pm = new THREE.Mesh(pg, marble); pm.position.set(0, 4.98, 0); g.add(pm)
+  const trim = new THREE.Mesh(new THREE.BoxGeometry(6.5, 0.07, 0.74), gold); trim.position.set(0, 4.97, 0); g.add(trim)
+  const trim2 = new THREE.Mesh(new THREE.BoxGeometry(6.5, 0.07, 0.74), gold); trim2.position.set(0, 4.32, 0); g.add(trim2)
+  // steps
+  for (let i = 0; i < 3; i++) {
+    const s = new THREE.Mesh(new RoundedBoxGeometry(6.6 + i * 0.5, 0.16, 1 + i * 0.45, 2, 0.03), marble)
+    s.position.set(0, -0.08 - i * 0.16, 0.1 + i * 0.22); g.add(s)
+  }
+  // door leaves hinged at the outer jambs (each leaf: 0.95 wide × 3.9 high)
+  const leafGeo = new RoundedBoxGeometry(0.95, 3.9, 0.12, 2, 0.02)
+  const mk = (side: number) => {
+    const hinge = new THREE.Group(); hinge.position.set(side * 1.9, 1.95, 0)
+    const leaf = new THREE.Mesh(leafGeo, doorMat); leaf.position.set(-side * 0.475, 0, 0); hinge.add(leaf)
+    const ring = new THREE.Mesh(new THREE.TorusGeometry(0.09, 0.022, 16, 40), gold)
+    ring.position.set(-side * 0.82, -0.1, 0.09); hinge.add(ring)
+    g.add(hinge)
+    return hinge
+  }
+  g.left = mk(-1); g.right = mk(1)
+  return g
+}
+/** open: 0 closed … 1 fully open (each leaf swings ~105° outwards, towards the camera) */
+export function portal(cam: Cam, p: V3, o: { open: number; yaw?: number; scale?: number; alpha?: number }) {
+  if (!st) return
+  const a = o.alpha ?? 1
+  if (a <= 0.003) return
+  queue(cam)
+  const g = take('portal', makePortal)
+  g.position.copy(toThree(p)); g.rotation.copy(euler(o.yaw ?? 0)); g.scale.setScalar(o.scale ?? 1)
+  const ang = o.open * 1.84
+  g.left.rotation.y = -ang   // left leaf hinge at -x: negative turn swings it towards +Z (the viewer)
+  g.right.rotation.y = ang
+  for (const m of g.mats) { m.opacity = a; m.depthWrite = a > 0.98 }
+}
+
+// ---------------------------------------------------------------- Earth
+type GlobeObj = THREE.Group & { earth: THREE.Mesh; atmo: THREE.Mesh; pin: THREE.Group; mats: THREE.Material[] }
+function makeGlobe(): GlobeObj {
+  const g = new THREE.Group() as GlobeObj
+  const E = st!.earth!
+  const mat = new THREE.MeshPhysicalMaterial({
+    map: E.map, roughnessMap: E.rough, roughness: 1, metalness: 0, normalMap: E.normal, normalScale: new THREE.Vector2(0.9, 0.9),
+    emissiveMap: E.lights, emissive: new THREE.Color(1.0, 0.72, 0.35), emissiveIntensity: 0.55, clearcoat: 0.25, clearcoatRoughness: 0.3, transparent: true,
+    envMapIntensity: 0.6,
+  })
+  g.earth = new THREE.Mesh(new THREE.SphereGeometry(1, 128, 64), mat); g.add(g.earth)
+  // atmosphere: fresnel rim, additive
+  const atmoMat = new THREE.ShaderMaterial({
+    transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.BackSide,
+    uniforms: { op: { value: 1 } },
+    vertexShader: 'varying vec3 vN; varying vec3 vV; void main(){ vec4 mv = modelViewMatrix*vec4(position,1.); vN = normalize(normalMatrix*normal); vV = normalize(-mv.xyz); gl_Position = projectionMatrix*mv; }',
+    fragmentShader: 'uniform float op; varying vec3 vN; varying vec3 vV; void main(){ float f = pow(clamp(1.0 - abs(dot(vN, vV)), 0., 1.), 2.2); float k = smoothstep(0.0, 0.9, f); gl_FragColor = vec4(vec3(0.45,0.7,1.0)*k*1.4 + vec3(1.0,0.7,0.3)*k*k*0.5, k)*op; }',
+  })
+  g.atmo = new THREE.Mesh(new THREE.SphereGeometry(1.09, 96, 48), atmoMat); g.add(g.atmo)
+  // pin
+  const pinMat = new THREE.MeshPhysicalMaterial({ color: 0xffc040, emissive: 0xffa020, emissiveIntensity: 2.2, metalness: 0.6, roughness: 0.2, transparent: true })
+  g.pin = new THREE.Group()
+  const head = new THREE.Mesh(new THREE.SphereGeometry(0.035, 24, 16), pinMat); head.position.y = 0.11; g.pin.add(head)
+  const stem = new THREE.Mesh(new THREE.CylinderGeometry(0.006, 0.006, 0.11, 12), pinMat); stem.position.y = 0.055; g.pin.add(stem)
+  g.earth.add(g.pin)
+  g.mats = [mat, pinMat]
+  return g
+}
+/** Equirect lat/lon → point on the Three unit sphere (matches SphereGeometry's UV layout) */
+function latLon(lat: number, lon: number) {
+  const phi = ((lon + 180) / 360) * Math.PI * 2, la = (lat * Math.PI) / 180
+  return new THREE.Vector3(-Math.cos(phi) * Math.cos(la), Math.sin(la), Math.sin(phi) * Math.cos(la))
+}
+export type GlobeOut = { pin: [number, number]; pinVisible: boolean; cx: number; cy: number; r: number }
+/** spin: free rotation (rad); focus 0..1 turns the marked place (lat, lon) to face the camera */
+export function globe(cam: Cam, p: V3, o: { radius: number; spin: number; focus: number; lat: number; lon: number; pin: number; alpha?: number }, W: number, H: number): GlobeOut | null {
+  if (!st || !st.earth) return null
+  const a = o.alpha ?? 1
+  if (a <= 0.003) return null
+  queue(cam)
+  const g = take('globe', makeGlobe)
+  g.position.copy(toThree(p)); g.scale.setScalar(o.radius)
+  const q = latLon(o.lat, o.lon)
+  const yawT = -Math.atan2(q.x, q.z)
+  // shortest path from the free spin to the target
+  let dy = yawT - o.spin; dy = Math.atan2(Math.sin(dy), Math.cos(dy))
+  g.earth.rotation.set(0.38 + ((o.lat * Math.PI) / 180 - 0.38 + 0.12) * o.focus, o.spin + dy * o.focus, 0, 'XYZ')
+  g.pin.position.copy(q)
+  g.pin.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), q.clone().normalize())
+  g.pin.scale.setScalar(Math.max(0.001, o.pin))
+  g.pin.visible = o.pin > 0.01
+  for (const m of g.mats) { m.opacity = a; m.depthWrite = a > 0.98 }
+  ;(g.atmo.material as THREE.ShaderMaterial).uniforms.op.value = a
+  // where the pin head lands on screen
+  setCamera(cam, W, H)
+  g.updateMatrixWorld(true)
+  const head = q.clone().multiplyScalar(1.11).applyMatrix4(g.earth.matrixWorld)
+  const centre = g.getWorldPosition(new THREE.Vector3())
+  const [px, py] = screenOf(head, W, H)
+  const [cx, cy] = screenOf(centre, W, H)
+  const edge = centre.clone().add(new THREE.Vector3(o.radius, 0, 0).applyQuaternion(st.camera.quaternion))
+  const [ex, ey] = screenOf(edge, W, H)
+  const facing = head.clone().sub(centre).normalize().dot(st.camera.position.clone().sub(centre).normalize())
+  return { pin: [px, py], pinVisible: facing > 0.15, cx, cy, r: Math.hypot(ex - cx, ey - cy) }
+}
+
+// ---------------------------------------------------------------- logo tiles (company marks on glossy plaques)
+const logoTex = (slug: string, emissive: boolean) => canvasTex(`logo|${slug}|${emissive ? 1 : 0}`, 512, 640, (g, w, h) => {
+  const L = LOGOS[slug]
+  if (!emissive) {
+    const bg = g.createLinearGradient(0, 0, w, h); bg.addColorStop(0, '#f5efe4'); bg.addColorStop(1, '#d8cfc0')
+    g.fillStyle = bg; g.fillRect(0, 0, w, h)
+  } else { g.fillStyle = '#000'; g.fillRect(0, 0, w, h) }
+  g.strokeStyle = '#f7a823'; g.lineWidth = 10; g.globalAlpha = emissive ? 0.7 : 1
+  g.strokeRect(18, 18, w - 36, h - 36); g.globalAlpha = 1
+  if (!emissive) {
+    g.save(); g.translate(w / 2 - 150, 90); g.scale(300 / 24, 300 / 24)
+    g.fillStyle = L.hex === '#3E4348' ? '#111418' : L.hex
+    g.fill(new Path2D(L.path)); g.restore()
+    g.fillStyle = '#16120c'; g.textAlign = 'center'; g.textBaseline = 'middle'
+    fitFont(g, L.name.toUpperCase(), 700, FONT.mono, w * 0.8, 60)
+    g.fillText(L.name.toUpperCase(), w / 2, h - 120)
+  }
+})
+type TileObj = THREE.Group & { body: THREE.Mesh; face: THREE.Mesh; back: THREE.Mesh }
+function makeTile(): TileObj {
+  const g = new THREE.Group() as TileObj
+  g.body = new THREE.Mesh(new RoundedBoxGeometry(1.6, 2.0, 0.16, 3, 0.05), new THREE.MeshPhysicalMaterial({ color: 0xf0a43a, metalness: 1, roughness: 0.2, transparent: true }))
+  g.add(g.body)
+  const fm = () => new THREE.MeshPhysicalMaterial({ roughness: 0.18, metalness: 0, clearcoat: 1, clearcoatRoughness: 0.03, emissive: 0xffffff, emissiveIntensity: 1, transparent: true, polygonOffset: true, polygonOffsetFactor: -2 })
+  g.face = new THREE.Mesh(planeGeo, fm()); g.face.scale.set(1.44, 1.8, 1); g.face.position.z = 0.081; g.add(g.face)
+  g.back = new THREE.Mesh(planeGeo, fm()); g.back.scale.set(1.44, 1.8, 1); g.back.position.z = -0.081; g.back.rotation.y = Math.PI; g.add(g.back)
+  return g
+}
+export function logoTile(cam: Cam, p: V3, o: { slug: string; yaw?: number; pitch?: number; roll?: number; scale?: number; alpha?: number }) {
+  if (!st) return
+  const a = o.alpha ?? 1
+  if (a <= 0.003) return
+  queue(cam)
+  const g = take('tile', makeTile)
+  g.position.copy(toThree(p)); g.rotation.copy(euler(o.yaw, o.pitch, o.roll)); g.scale.setScalar(o.scale ?? 1)
+  for (const f of [g.face, g.back]) {
+    const m = f.material as THREE.MeshPhysicalMaterial
+    const t = logoTex(o.slug, false)
+    if (m.map !== t) { m.map = t; m.emissiveMap = logoTex(o.slug, true); m.needsUpdate = true }
+    m.opacity = a; m.depthWrite = a > 0.98
+  }
+  const bm = g.body.material as THREE.Material; bm.opacity = a; bm.depthWrite = a > 0.98
+}
+
+// ---------------------------------------------------------------- frame queue + compositing
+let pendingCam: Cam | null = null
+function queue(cam: Cam) {
+  if (pendingCam && pendingCam !== cam && pendingCtx) flush3D(pendingCtx)
+  pendingCam = cam
+}
+let pendingCtx: Ctx | null = null
+/** the renderer calls this before each scene so queued objects know which 2D canvas to land on */
+export function bindStage(ctx: Ctx) { pendingCtx = ctx }
+
+let bloomC: HTMLCanvasElement | null = null
+/** render everything queued since the last flush and composite it into ctx (with a soft highlight bloom) */
+export function flush3D(ctx: Ctx, o: { bloom?: number; exposure?: number } = {}) {
+  if (!st || !pendingCam) { resetQueue(); return }
+  const cam = pendingCam
+  const cw = ctx.canvas.width, ch = ctx.canvas.height
+  const P = ch > cw
+  const W = P ? 1080 : 1920, H = P ? 1920 : 1080
+  if (st.w !== cw || st.h !== ch) { st.renderer.setSize(cw, ch, false); st.w = cw; st.h = ch }
+  setCamera(cam, W, H)
+  st.renderer.toneMappingExposure = o.exposure ?? 1.0
+  st.renderer.render(st.scene, st.camera)
+  const src = st.renderer.domElement
+  ctx.save()
+  ctx.setTransform(1, 0, 0, 1, 0, 0)
+  ctx.globalCompositeOperation = 'source-over'
+  ctx.drawImage(src, 0, 0)
+  const bloom = o.bloom ?? 1
+  if (bloom > 0 && 'filter' in ctx) {
+    // quarter-res bright-pass + blur, added back on top
+    if (!bloomC) bloomC = document.createElement('canvas')
+    const bw = Math.max(1, Math.round(cw / 4)), bh = Math.max(1, Math.round(ch / 4))
+    if (bloomC.width !== bw || bloomC.height !== bh) { bloomC.width = bw; bloomC.height = bh }
+    const b = bloomC.getContext('2d')!
+    b.clearRect(0, 0, bw, bh)
+    b.filter = 'brightness(0.85) contrast(3) saturate(1.3) blur(3px)'
+    b.drawImage(src, 0, 0, bw, bh)
+    b.filter = 'none'
+    ctx.globalCompositeOperation = 'lighter'
+    ctx.globalAlpha *= 0.55 * bloom
+    ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high'
+    ctx.drawImage(bloomC, 0, 0, cw, ch)
+  }
+  ctx.restore()
+  resetQueue()
+}
+function resetQueue() {
+  for (const o of live) o.visible = false
+  live.length = 0
+  used.clear()
+  pendingCam = null
+}
+/** drop anything queued but not flushed (safety net at scene boundaries) */
+export function endStage(ctx: Ctx) { if (pendingCam) flush3D(ctx) }
+
+/** debug/QA: the WebGL canvas of the last flush */
+export const stageCanvas = () => st?.renderer.domElement ?? null

bitcoin-saga/web/src/bitcoin/tools/blender/coin.py

@@ -26,6 +26,7 @@ GOLD = (1.0, 0.71, 0.29)
 M_FIELD = mat('Field', GOLD, 1.0, 0.06)
 M_RELIEF = mat('Relief', (1.0, 0.74, 0.34), 1.0, 0.36)
 M_EDGE = mat('Edge', (0.95, 0.66, 0.26), 1.0, 0.24)
+M_BAND = mat('Band', (0.5, 0.32, 0.1), 1.0, 0.6)   # recessed satin legend band → raised polished letters read clearly
 
 H = 0.08          # half thickness at rim top
 FZ = 0.052        # field height
@@ -37,6 +38,7 @@ def profile():
     top = [(0.0, FZ - 0.004, 'f'), (0.30, FZ - 0.002, 'f'), (0.60, FZ, 'f'),
            # raised lip ring around the inner field
            (0.638, FZ, 'f'), (0.648, FZ + 0.009, 'r'), (0.662, FZ + 0.009, 'r'), (0.672, FZ, 'f'),
+           (0.678, FZ - 0.005, 'b'), (0.775, FZ - 0.005, 'b'), (0.872, FZ - 0.005, 'b'),
            (0.88, FZ, 'f'), (0.895, FZ + 0.004, 'f'), (0.902, H - 0.002, 'f'), (0.915, H, 'f'),
            (0.975, H, 'f'), (0.992, H - 0.006, 'f'), (1.0, H - 0.016, 'e')]
     edge = [(1.0, H - 0.016 - i * (2 * (H - 0.016)) / 6, 'e') for i in range(1, 6)]
@@ -66,11 +68,11 @@ def build_body():
             elif prof[i + 1][0] == 0: vs = [A[i], A[i + 1], B[i]]
             f = bm.faces.new(vs)
             ta, tb = tags[i], tags[i + 1]
-            f.material_index = 2 if (ta == 'e' and tb == 'e') else 1 if 'r' in (ta, tb) else 0
+            f.material_index = 2 if (ta == 'e' and tb == 'e') else 3 if (ta == 'b' and tb == 'b') else 1 if 'r' in (ta, tb) else 0
     bmesh.ops.remove_doubles(bm, verts=bm.verts, dist=1e-6)
     bmesh.ops.recalc_face_normals(bm, faces=bm.faces)
     me = bpy.data.meshes.new('Body'); bm.to_mesh(me); bm.free()
-    for m in (M_FIELD, M_RELIEF, M_EDGE): me.materials.append(m)
+    for m in (M_FIELD, M_RELIEF, M_EDGE, M_BAND): me.materials.append(m)
     ob = bpy.data.objects.new('Body', me); scene.collection.objects.link(ob)
     return ob
 
@@ -98,8 +100,10 @@ def to_mesh(ob, material, flip=False):
     bpy.ops.object.convert(target='MESH')
     ob.data.materials.clear(); ob.data.materials.append(material)
     if flip:
-        ob.rotation_euler.y = math.pi  # turn over about the vertical axis, so the reverse reads upright when the coin spins
-        bpy.ops.object.transform_apply(location=False, rotation=True, scale=False)
+        # turn over about the vertical axis (x,y,z → -x,y,-z), so the reverse reads upright when the coin spins
+        ob.rotation_euler.y = math.pi
+        ob.location = (-ob.location.x, ob.location.y, -ob.location.z)
+        bpy.ops.object.transform_apply(location=True, rotation=True, scale=False)
     return ob
 
 # ------------------------------------------------------------------ ₿ glyph (y-down design space → flip y)
@@ -126,7 +130,7 @@ def ring_text(name, body, radius, cap, z, flip=False, lead=7):
         sp.points[i].co = (radius * math.cos(a), radius * math.sin(a), 0, 1)
     path = bpy.data.objects.new(name + 'Path', cu); scene.collection.objects.link(path)
     td = bpy.data.curves.new(name, 'FONT'); td.body = body
-    td.font = bpy.data.fonts.load(FONT); td.size = cap * 1.42; td.extrude = 0.006; td.bevel_depth = 0.0015; td.bevel_resolution = 1
+    td.font = bpy.data.fonts.load(FONT); td.size = cap * 1.38; td.extrude = 0.009; td.bevel_depth = 0.002; td.bevel_resolution = 1
     td.resolution_u = 3; td.space_character = 1.0
     ob = bpy.data.objects.new(name, td); scene.collection.objects.link(ob)
     # fit the text length to the circumference
@@ -156,6 +160,7 @@ def beads(name, r, br, n, z, flip=False):
     me.materials.append(M_RELIEF)
     ob = bpy.data.objects.new(name, me); scene.collection.objects.link(ob)
     ob.location.z = -z if flip else z
+    if flip: ob.rotation_euler.y = math.pi
     return ob
 
 # ------------------------------------------------------------------ isometric block emblem (reverse side)
@@ -175,14 +180,16 @@ def block_emblem(z):
 
 # ------------------------------------------------------------------ build
 body = build_body()
-gl = curve_obj('Glyph', glyph_loops(), 0.011, bevel=0.006, z=FZ + 0.011, rot=math.radians(-14), scale=0.75)
-gl.location.x = 0.01
-to_mesh(gl, M_RELIEF)
-ring_text('LegendF', 'BITCOIN \u00b7 PEER-TO-PEER ELECTRONIC CASH \u00b7 MMIX \u00b7', 0.705, 0.072, FZ + 0.006)
-ring_text('LegendR', 'GENESIS BLOCK \u00b7 03 JAN 2009 \u00b7 21 000 000 \u00b7 DON\u2019T TRUST, VERIFY \u00b7', 0.705, 0.064, FZ + 0.006, flip=True, lead=13)
-beads('BeadsF', 0.857, 0.0115, 132, FZ)
-beads('BeadsR', 0.857, 0.0115, 132, FZ, flip=True)
-block_emblem(FZ)
+def front_side(flip):
+    g = curve_obj('Glyph', glyph_loops(), 0.011, bevel=0.006, z=FZ + 0.011, rot=math.radians(-14), scale=0.75)
+    g.location.x = 0.01
+    to_mesh(g, M_RELIEF, flip)
+    # z = band floor (FZ-0.005) + half extrude, so letters stand ~0.013 proud of the band
+    ring_text('Legend', 'BITCOIN \u00b7 SATOSHI NAKAMOTO \u00b7 2009 \u00b7', 0.712, 0.104, FZ + 0.004, flip=flip, lead=7)
+    beads('Beads', 0.857, 0.0115, 132, FZ, flip=flip)
+# both faces carry the same design (the reverse is the obverse turned about the vertical axis → reads upright when spun)
+front_side(False)
+front_side(True)
 
 # smooth shading by angle on everything
 for ob in list(scene.objects):