solana-clock: 动画引擎 + 15 个场景 + 播放器

.gitattributes

@@ -6,3 +6,6 @@ ethereum/covers/cover-portrait.png filter=lfs diff=lfs merge=lfs -text
 ethereum/fonts/deyi.woff2 filter=lfs diff=lfs merge=lfs -text
 guozu/covers/cover-landscape.png filter=lfs diff=lfs merge=lfs -text
 guozu/covers/cover-portrait.png filter=lfs diff=lfs merge=lfs -text
+solana-clock/fonts/sol-sc-900.woff2 filter=lfs diff=lfs merge=lfs -text
+solana-clock/fonts/sol-sc-700.woff2 filter=lfs diff=lfs merge=lfs -text
+solana-clock/fonts/sol-sc-400.woff2 filter=lfs diff=lfs merge=lfs -text

README.md

@@ -21,8 +21,8 @@ pinned: false
 |---|------|------|
 | 1 | 写计划 / 大纲 / 步骤（本节） | ✅ 完成 |
 | 2 | 旁白文案定稿（15 场景 / 72 句）+ TTS 配音（纯语音 370 秒）+ 时长清单 + SOL 真实价格数据（2372 个日线点） | ✅ 完成 |
-| 3 | 动画引擎 + 全部场景（横屏 16:9 / 竖屏 9:16 双布局 + 烧录字幕 + 安全区） | ⏳ 进行中 |
-| 4 | 程序化音乐 + 合成音效 + 旁白闪避混音 | ⬜ 待做 |
+| 3 | 动画引擎 + 全部场景（横屏 16:9 / 竖屏 9:16 双布局 + 烧录字幕 + 安全区）+ 播放器页面 + 字体子集；无头浏览器 90 帧截图 + 逐 0.5 秒排版检查通过 | ✅ 完成 |
+| 4 | 程序化音乐 + 合成音效 + 旁白闪避混音 | ⏳ 进行中 |
 | 5 | 播放器 UI + 浏览器本地 MP4 导出（24 / 30 / 60 fps，横屏 / 竖屏） | ⬜ 待做 |
 | 6 | 抖音 / B站 发布标题、简介、标签（一键复制） | ⬜ 待做 |
 | 7 | 横屏 1920×1080 / 竖屏 1080×1920 封面图 | ⬜ 待做 |

solana-clock/css/app.css

@@ -0,0 +1,134 @@
+@font-face { font-family: "SolSC"; src: url(../fonts/sol-sc-400.woff2) format("woff2"); font-weight: 100 500; font-display: swap; }
+@font-face { font-family: "SolSC"; src: url(../fonts/sol-sc-700.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }
+@font-face { font-family: "SolSC"; src: url(../fonts/sol-sc-900.woff2) format("woff2"); font-weight: 850 1000; font-display: swap; }
+@font-face { font-family: "SolGrotesk"; src: url(../fonts/sol-grotesk.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
+@font-face { font-family: "SolMono"; src: url(../fonts/sol-mono.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
+
+:root {
+  --bg: #07050d; --panel: #110d1c; --panel2: #171226; --line: rgba(255,255,255,.08);
+  --fg: #f4f2ff; --muted: #9a93b8; --purple: #9945FF; --green: #14F195; --pink: #DC1FFF;
+  --grad: linear-gradient(90deg, #9945FF, #14F195);
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: "SolSC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
+body { min-height: 100vh; background: radial-gradient(1200px 600px at 10% -10%, rgba(153,69,255,.18), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(20,241,149,.10), transparent 60%), var(--bg); }
+button { font: inherit; color: inherit; cursor: pointer; }
+.app { max-width: 1600px; margin: 0 auto; padding: 18px 22px 30px; }
+
+.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
+.brand { display: flex; gap: 14px; align-items: center; }
+.brand h1 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: .5px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.brand p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
+.logo { width: 34px; height: 30px; display: grid; gap: 4px; transform: skewX(-18deg); }
+.logo i { display: block; border-radius: 2px; background: var(--grad); }
+.back { color: var(--muted); text-decoration: none; font-size: 13px; white-space: nowrap; border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; }
+.back:hover { color: var(--fg); border-color: rgba(255,255,255,.25); }
+
+.layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
+@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; } }
+
+.stage-wrap { display: flex; justify-content: center; align-items: center; background: #000; border-radius: 16px; border: 1px solid var(--line); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(153,69,255,.45); }
+.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; }
+.stage-wrap.portrait { background: repeating-linear-gradient(45deg, #0a0812 0 12px, #0d0a17 12px 24px); }
+.stage-wrap.portrait .stage { width: auto; height: min(78vh, 980px); aspect-ratio: 9 / 16; }
+.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+.stage-wrap:fullscreen { border-radius: 0; border: 0; height: 100vh; }
+.stage-wrap:fullscreen .stage { width: min(100vw, 100vh * 16 / 9); height: auto; }
+.stage-wrap.portrait:fullscreen .stage { height: 100vh; width: auto; }
+
+.big-play { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; display: flex; align-items: center; gap: 12px; padding: 16px 26px 16px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(10,6,20,.6); backdrop-filter: blur(10px); font-size: 18px; font-weight: 700; transition: transform .2s, opacity .3s; }
+.big-play svg { width: 40px; height: 40px; fill: #fff; background: var(--grad); border-radius: 50%; padding: 8px; }
+.big-play:hover { transform: scale(1.05); }
+.big-play.hide { opacity: 0; pointer-events: none; }
+.loading { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); background: rgba(0,0,0,.5); padding: 8px 14px; border-radius: 999px; }
+.loading.hide { display: none; }
+.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--green); animation: sp 1s linear infinite; }
+@keyframes sp { to { transform: rotate(360deg); } }
+
+.controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; }
+.ctl { width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; display: grid; place-items: center; flex: none; }
+.ctl:hover { background: rgba(255,255,255,.07); }
+.ctl svg { width: 24px; height: 24px; fill: currentColor; }
+.time { font-family: "SolMono", ui-monospace, monospace; font-size: 13px; color: var(--muted); white-space: nowrap; min-width: 92px; }
+.time .sep { margin: 0 4px; opacity: .5; }
+.scrub { position: relative; flex: 1; height: 34px; cursor: pointer; touch-action: none; }
+.scrub .track { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
+.scrub .fill { height: 100%; width: 0; background: var(--grad); }
+.scrub:hover .track { height: 6px; top: 14px; }
+.scrub .marks i { position: absolute; top: 12px; width: 2px; height: 10px; background: rgba(255,255,255,.35); border-radius: 1px; }
+.scrub .knob { position: absolute; top: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(20,241,149,.25); left: 0; }
+.scrub .tip { position: absolute; bottom: 34px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; background: #000; border: 1px solid var(--line); padding: 4px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; }
+.scrub:hover .tip { opacity: 1; }
+
+.toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 12px; }
+.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; }
+.seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; color: var(--muted); font-size: 14px; line-height: 1.25; }
+.seg button.on { background: linear-gradient(135deg, rgba(153,69,255,.35), rgba(20,241,149,.22)); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
+.seg.small { display: flex; width: 100%; }
+.seg.small button { flex: 1; font-size: 13px; padding: 8px 6px; }
+.seg em { font-style: normal; font-size: 11px; opacity: .7; }
+.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); cursor: pointer; user-select: none; }
+.chk input { accent-color: var(--green); width: 16px; height: 16px; }
+.hint { font-size: 12px; color: #5f5878; margin-left: auto; }
+@media (max-width: 700px) { .hint { display: none; } }
+
+.side { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; position: sticky; top: 14px; max-height: calc(100vh - 28px); display: flex; flex-direction: column; }
+.tabs { display: flex; border-bottom: 1px solid var(--line); flex: none; }
+.tabs button { flex: 1; border: 0; background: transparent; padding: 13px 4px; color: var(--muted); font-size: 14px; font-weight: 700; border-bottom: 2px solid transparent; }
+.tabs button.on { color: var(--fg); border-bottom-color: var(--green); }
+.panel { display: none; padding: 16px; overflow: auto; }
+.panel.on { display: block; }
+.panel h3 { margin: 0 0 6px; font-size: 16px; }
+.muted { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0 0 12px; }
+.muted.small { font-size: 12px; margin-top: 10px; }
+
+.chapters { list-style: none; margin: 0; padding: 0; counter-reset: c; }
+.chapters li { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .15s; }
+.chapters li:hover { background: rgba(255,255,255,.05); }
+.chapters li.on { background: linear-gradient(90deg, rgba(153,69,255,.25), rgba(20,241,149,.08)); }
+.chapters .n { font-family: "SolMono", monospace; font-size: 11px; color: var(--muted); width: 22px; }
+.chapters .ttl { flex: 1; font-size: 14px; font-weight: 700; }
+.chapters .yr { font-size: 11px; color: var(--green); font-family: "SolMono", monospace; margin-left: 6px; font-weight: 400; }
+.chapters .ts { font-family: "SolMono", monospace; font-size: 12px; color: var(--muted); }
+.chapters .pbar { height: 2px; background: var(--grad); width: 0; border-radius: 2px; margin-top: 4px; }
+
+.field { margin-bottom: 12px; }
+.field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
+.exp-actions { display: flex; gap: 10px; margin-top: 14px; }
+.primary { flex: 1; border: 0; border-radius: 12px; padding: 12px; font-weight: 900; font-size: 15px; color: #08050f; background: var(--grad); box-shadow: 0 10px 30px -10px rgba(20,241,149,.6); }
+.primary:disabled { opacity: .5; cursor: wait; }
+.ghost { border: 1px solid rgba(255,255,255,.18); background: transparent; border-radius: 10px; padding: 10px 14px; color: var(--fg); }
+.ghost:hover { background: rgba(255,255,255,.06); }
+.ghost.small { padding: 4px 10px; font-size: 12px; margin-left: 8px; border-radius: 8px; }
+.progress { margin-top: 14px; }
+.progress .bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; }
+.progress .bar div { height: 100%; width: 0; background: var(--grad); transition: width .2s; }
+.ptext { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; font-family: "SolMono", monospace; }
+.exp-preview { width: 100%; margin-top: 10px; border-radius: 8px; border: 1px solid var(--line); background: #000; }
+.result { margin-top: 14px; padding: 12px; border-radius: 12px; background: rgba(20,241,149,.08); border: 1px solid rgba(20,241,149,.3); font-size: 13px; line-height: 1.6; }
+.result a { color: var(--green); font-weight: 700; }
+.result.err { background: rgba(255,59,92,.08); border-color: rgba(255,59,92,.35); }
+
+.pub-block { margin-top: 14px; }
+.pub-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
+.pub-head b { color: var(--fg); font-size: 13px; }
+.pub-text { white-space: pre-wrap; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.65; max-height: 260px; overflow: auto; }
+.pub-alt { display: flex; flex-direction: column; gap: 6px; }
+.pub-alt .row { display: flex; gap: 8px; align-items: flex-start; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.5; }
+.pub-alt .row span { flex: 1; }
+.tags { display: flex; flex-wrap: wrap; gap: 6px; }
+.tags span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(153,69,255,.18); border: 1px solid rgba(153,69,255,.35); }
+.copy { flex: none; border: 1px solid rgba(255,255,255,.18); background: transparent; border-radius: 8px; padding: 3px 10px; font-size: 12px; color: var(--fg); }
+.copy:hover { background: rgba(20,241,149,.12); border-color: rgba(20,241,149,.5); }
+.count { font-family: "SolMono", monospace; font-size: 11px; color: var(--muted); }
+.count.over { color: #ff6b81; }
+
+.covers { display: grid; gap: 14px; }
+.covers figure { margin: 0; }
+.covers canvas { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; background: #000; }
+.covers .cover-p { width: 56%; margin: 0 auto; }
+.covers figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; justify-content: center; }
+
+.foot { margin-top: 22px; font-size: 12px; color: #5f5878; text-align: center; line-height: 1.6; }
+.toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px); background: #111; border: 1px solid rgba(20,241,149,.4); color: var(--fg); padding: 10px 18px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 50; }
+.toast.on { opacity: 1; transform: translateX(-50%); }

solana-clock/fonts/sol-sc-400.woff2

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

solana-clock/fonts/sol-sc-700.woff2

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

solana-clock/fonts/sol-sc-900.woff2

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

solana-clock/index.html

@@ -0,0 +1,144 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+<title>SOLANA：给区块链装上时钟的人 · 动画史</title>
+<meta name="description" content="Solana 从 2017 年一个深夜的灵感，到宕机、FTX 暴雷、Meme 狂欢与 ETF 的完整动画史。网页实时播放，可本地导出 B 站横屏 / 抖音竖屏 MP4。">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%2309060f' stroke='%2314F195' stroke-width='4'/%3E%3Cpath d='M32 12v20l12 8' stroke='%239945FF' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E">
+<link rel="stylesheet" href="css/app.css">
+</head>
+<body>
+<div class="app">
+  <header class="top">
+    <div class="brand">
+      <span class="logo" aria-hidden="true"><i></i><i></i><i></i></span>
+      <div>
+        <h1>SOLANA：给区块链装上时钟的人</h1>
+        <p>一部约 6 分半钟的动画史 · 旁白 / 配乐 / 音效 · 全部在你的浏览器里实时生成</p>
+      </div>
+    </div>
+    <a class="back" href="../index.html">← 返回动画工作室</a>
+  </header>
+
+  <main class="layout">
+    <section class="stage-col">
+      <div class="stage-wrap" id="stageWrap">
+        <div class="stage" id="stage">
+          <canvas id="view"></canvas>
+          <button class="big-play" id="bigPlay" aria-label="播放">
+            <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+            <span id="bigPlayText">点击播放（含声音）</span>
+          </button>
+          <div class="loading" id="loading"><div class="spin"></div><span id="loadingText">正在准备字体与画面…</span></div>
+        </div>
+      </div>
+
+      <div class="controls">
+        <button class="ctl" id="btnPlay" title="播放 / 暂停（空格）"><svg viewBox="0 0 24 24" id="icoPlay"><path d="M8 5v14l11-7z"/></svg></button>
+        <div class="time"><span id="tCur">0:00</span><span class="sep">/</span><span id="tTot">0:00</span></div>
+        <div class="scrub" id="scrub">
+          <div class="track"><div class="fill" id="scrubFill"></div></div>
+          <div class="marks" id="scrubMarks"></div>
+          <div class="knob" id="scrubKnob"></div>
+          <div class="tip" id="scrubTip"></div>
+        </div>
+        <button class="ctl" id="btnMute" title="静音（M）"><svg viewBox="0 0 24 24" id="icoVol"><path d="M4 9v6h4l5 5V4L8 9H4zm12.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z"/></svg></button>
+        <button class="ctl" id="btnFull" title="全屏（F）"><svg viewBox="0 0 24 24"><path d="M5 5h5v2H7v3H5V5zm9 0h5v5h-2V7h-3V5zM5 14h2v3h3v2H5v-5zm12 3v-3h2v5h-5v-2h3z"/></svg></button>
+      </div>
+
+      <div class="toggles">
+        <div class="seg" id="segOrient" role="tablist" aria-label="画面方向">
+          <button data-v="landscape" class="on">▭ 横屏 16:9 · B站</button>
+          <button data-v="portrait">▯ 竖屏 9:16 · 抖音</button>
+        </div>
+        <label class="chk"><input type="checkbox" id="chkSubs" checked> 字幕</label>
+        <label class="chk" id="safeWrap"><input type="checkbox" id="chkSafe"> 显示抖音安全区</label>
+        <span class="hint">快捷键：空格 播放 · ←/→ 跳 5 秒 · [ / ] 切章节</span>
+      </div>
+    </section>
+
+    <aside class="side">
+      <nav class="tabs" id="tabs">
+        <button data-tab="chapters" class="on">章节</button>
+        <button data-tab="export">导出 MP4</button>
+        <button data-tab="publish">发布文案</button>
+        <button data-tab="cover">封面</button>
+      </nav>
+
+      <div class="panel on" data-panel="chapters">
+        <ol class="chapters" id="chapters"></ol>
+      </div>
+
+      <div class="panel" data-panel="export">
+        <h3>在浏览器里直接导出视频</h3>
+        <p class="muted">画面逐帧离线渲染，声音一次性合成，全程不上传任何数据。导出时长取决于电脑性能，通常是视频时长的 0.5–3 倍。</p>
+        <div class="field">
+          <span>画面</span>
+          <div class="seg small" id="segExpOrient">
+            <button data-v="landscape" class="on">横屏 1920×1080<br><em>B 站</em></button>
+            <button data-v="portrait">竖屏 1080×1920<br><em>抖音（已留安全区）</em></button>
+          </div>
+        </div>
+        <div class="field">
+          <span>帧率</span>
+          <div class="seg small" id="segFps">
+            <button data-v="24">24 fps<br><em>电影感</em></button>
+            <button data-v="30" class="on">30 fps<br><em>推荐</em></button>
+            <button data-v="60">60 fps<br><em>最丝滑</em></button>
+          </div>
+        </div>
+        <div class="field">
+          <span>清晰度</span>
+          <div class="seg small" id="segQ">
+            <button data-v="std">标准<br><em>体积小</em></button>
+            <button data-v="high" class="on">高<br><em>推荐</em></button>
+            <button data-v="max">极高<br><em>体积大</em></button>
+          </div>
+        </div>
+        <label class="chk"><input type="checkbox" id="expSubs" checked> 烧录字幕</label>
+        <div class="exp-actions">
+          <button class="primary" id="btnExport">开始导出 MP4</button>
+          <button class="ghost" id="btnCancel" hidden>取消</button>
+        </div>
+        <div class="progress" id="expProg" hidden>
+          <div class="bar"><div id="expBar"></div></div>
+          <div class="ptext"><span id="expStage">准备中…</span><span id="expPct">0%</span></div>
+          <canvas id="expPreview" class="exp-preview"></canvas>
+        </div>
+        <div class="result" id="expResult" hidden></div>
+        <p class="muted small" id="expSupport"></p>
+      </div>
+
+      <div class="panel" data-panel="publish">
+        <div class="seg small" id="segPlat">
+          <button data-v="douyin" class="on">抖音</button>
+          <button data-v="bilibili">B 站</button>
+        </div>
+        <div id="publishBox"></div>
+      </div>
+
+      <div class="panel" data-panel="cover">
+        <p class="muted">封面由同一套画面引擎实时绘制，可直接下载 PNG。</p>
+        <div class="covers">
+          <figure>
+            <canvas id="coverL" class="cover-l"></canvas>
+            <figcaption>横屏封面 1920×1080（B 站）<button class="ghost small" data-dl="landscape">下载 PNG</button></figcaption>
+          </figure>
+          <figure>
+            <canvas id="coverP" class="cover-p"></canvas>
+            <figcaption>竖屏封面 1080×1920（抖音）<button class="ghost small" data-dl="portrait">下载 PNG</button></figcaption>
+          </figure>
+        </div>
+      </div>
+    </aside>
+  </main>
+
+  <footer class="foot">
+    价格数据来自公开行情的每日收盘价快照；画面中标注“示意”的内容为演示性可视化，不代表真实链上数据。本片不构成任何投资建议。
+  </footer>
+</div>
+<div class="toast" id="toast"></div>
+<script type="module" src="js/main.js"></script>
+</body>
+</html>

solana-clock/js/chart.js

@@ -0,0 +1,95 @@
+// Real SOL price chart renderer (data snapshot from Surf API)
+import { SOL_PRICES, SOL_T0 } from './data-sol.js';
+import { clamp, lerp, glow, text, hexA, fmtUSD, F_MONO, GREEN, PURPLE, RED, WHITE } from './draw.js';
+
+export const idx = (date) => clamp(Math.round((Date.parse(date + 'T00:00:00Z') / 1000 - SOL_T0) / 86400), 0, SOL_PRICES.length - 1);
+export const price = (i) => SOL_PRICES[clamp(Math.round(i), 0, SOL_PRICES.length - 1)];
+export const dateOf = (i) => new Date((SOL_T0 + Math.round(i) * 86400) * 1000).toISOString().slice(0, 10);
+export const LAST = SOL_PRICES.length - 1;
+
+/** interpolated price at fractional index */
+export function priceF(f) {
+  const i = Math.floor(f), k = f - i;
+  return lerp(price(i), price(i + 1), k);
+}
+
+/**
+ * Draw a chart. rect {x,y,w,h}. from/to: day indices. prog: 0..1 drawn fraction.
+ * Returns head {x,y,v,i,slope}.
+ */
+export function drawChart(ctx, rect, o) {
+  const { from, to, prog = 1, log = false, color = GREEN, color2 = PURPLE, alpha = 1, grid = true, yMin, yMax, lw = 5, fill = true, head = true, headLabel = true, dates = true, gridVals } = o;
+  const n = to - from;
+  let lo = Infinity, hi = -Infinity;
+  for (let i = from; i <= to; i++) { const v = price(i); if (v < lo) lo = v; if (v > hi) hi = v; }
+  lo = yMin ?? lo * (log ? .8 : .9); hi = yMax ?? hi * 1.08;
+  if (!log) lo = yMin ?? Math.max(0, lo - (hi - lo) * .05);
+  const Y = v => log ? rect.y + rect.h - (Math.log(v) - Math.log(lo)) / (Math.log(hi) - Math.log(lo)) * rect.h : rect.y + rect.h - (v - lo) / (hi - lo) * rect.h;
+  const X = i => rect.x + (i - from) / n * rect.w;
+  ctx.save(); ctx.globalAlpha *= alpha;
+  if (grid) {
+    const vals = gridVals || (log ? [1, 10, 100] : niceTicks(lo, hi));
+    ctx.lineWidth = 1;
+    for (const v of vals) {
+      if (v < lo || v > hi) continue;
+      const y = Y(v);
+      ctx.strokeStyle = 'rgba(255,255,255,.09)'; ctx.setLineDash([6, 8]); ctx.beginPath(); ctx.moveTo(rect.x, y); ctx.lineTo(rect.x + rect.w, y); ctx.stroke(); ctx.setLineDash([]);
+      text(ctx, fmtUSD(v), rect.x - 12, y, { size: 20, fam: F_MONO, weight: 500, color: 'rgba(255,255,255,.45)', align: 'right' });
+    }
+    if (dates) {
+      const y0 = new Date((SOL_T0 + from * 86400) * 1000).getUTCFullYear(), y1 = new Date((SOL_T0 + to * 86400) * 1000).getUTCFullYear();
+      for (let yr = y0; yr <= y1 + 1; yr++) {
+        const i = idx(yr + '-01-01'); if (i <= from || i >= to) continue;
+        const x = X(i);
+        ctx.strokeStyle = 'rgba(255,255,255,.08)'; ctx.beginPath(); ctx.moveTo(x, rect.y); ctx.lineTo(x, rect.y + rect.h); ctx.stroke();
+        text(ctx, String(yr), x, rect.y + rect.h + 22, { size: 20, fam: F_MONO, weight: 600, color: 'rgba(255,255,255,.5)', align: 'center' });
+      }
+    }
+  }
+  const endF = from + n * clamp(prog);
+  if (endF > from) {
+    const step = Math.max(1, Math.floor(n / 900));
+    ctx.beginPath();
+    let first = true, lx = 0, ly = 0;
+    for (let i = from; i <= Math.floor(endF); i += step) { const x = X(i), y = Y(price(i)); if (first) { ctx.moveTo(x, y); first = false; } else ctx.lineTo(x, y); lx = x; ly = y; }
+    const hv = priceF(endF), hx = X(endF), hy = Y(hv); ctx.lineTo(hx, hy);
+    const g = ctx.createLinearGradient(rect.x, 0, rect.x + rect.w, 0); g.addColorStop(0, color2); g.addColorStop(1, color);
+    // fill
+    if (fill) {
+      ctx.save(); ctx.lineTo(hx, rect.y + rect.h); ctx.lineTo(X(from), rect.y + rect.h); ctx.closePath();
+      const fg = ctx.createLinearGradient(0, rect.y, 0, rect.y + rect.h); fg.addColorStop(0, hexA(color, .28)); fg.addColorStop(1, hexA(color, 0));
+      ctx.fillStyle = fg; ctx.fill(); ctx.restore();
+      // re-trace stroke path
+      ctx.beginPath(); first = true;
+      for (let i = from; i <= Math.floor(endF); i += step) { const x = X(i), y = Y(price(i)); if (first) { ctx.moveTo(x, y); first = false; } else ctx.lineTo(x, y); }
+      ctx.lineTo(hx, hy);
+    }
+    ctx.lineJoin = 'round'; ctx.lineCap = 'round';
+    ctx.strokeStyle = hexA(color, .25); ctx.lineWidth = lw * 3.2; ctx.stroke();
+    ctx.strokeStyle = g; ctx.lineWidth = lw; ctx.stroke();
+    void lx; void ly;
+    const sl = (Y(priceF(Math.min(endF + 3, to))) - Y(priceF(Math.max(endF - 3, from)))) / (X(Math.min(endF + 3, to)) - X(Math.max(endF - 3, from)) || 1);
+    if (head && prog > 0) {
+      glow(ctx, hx, hy, 60, color, .9);
+      ctx.fillStyle = WHITE; ctx.beginPath(); ctx.arc(hx, hy, 8, 0, 7); ctx.fill();
+      if (headLabel) {
+        const right = hx < rect.x + rect.w * .75;
+        text(ctx, fmtUSD(hv), hx + (right ? 22 : -22), hy - 34, { size: 34, fam: F_MONO, weight: 800, color: WHITE, align: right ? 'left' : 'right', stroke: 6, strokeColor: 'rgba(0,0,0,.7)' });
+        text(ctx, dateOf(endF), hx + (right ? 22 : -22), hy - 2, { size: 20, fam: F_MONO, weight: 500, color: 'rgba(255,255,255,.6)', align: right ? 'left' : 'right' });
+      }
+    }
+    ctx.restore();
+    return { x: hx, y: hy, v: hv, i: endF, slope: sl, X, Y };
+  }
+  ctx.restore();
+  return { x: X(from), y: Y(price(from)), v: price(from), i: from, slope: 0, X, Y };
+}
+
+function niceTicks(lo, hi) {
+  const span = hi - lo, raw = span / 4, mag = Math.pow(10, Math.floor(Math.log10(raw)));
+  const step = [1, 2, 2.5, 5, 10].map(k => k * mag).find(s => span / s <= 5);
+  const out = []; for (let v = Math.ceil(lo / step) * step; v <= hi; v += step) out.push(+v.toFixed(4));
+  return out;
+}
+
+export const RED_C = RED;

solana-clock/js/draw.js

@@ -0,0 +1,223 @@
+// Drawing toolkit — everything here is stateless so any frame can be rendered at any time.
+export const PURPLE = '#9945FF', GREEN = '#14F195', TEAL = '#00D1FF', PINK = '#DC1FFF', RED = '#FF3B5C', GOLD = '#FFC94A', WHITE = '#F4F2FF';
+export const F_SC = '"SolSC","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif';
+export const F_GR = '"SolGrotesk","SolSC","Helvetica Neue",Arial,sans-serif';
+export const F_MONO = '"SolMono","SFMono-Regular",Menlo,Consolas,monospace';
+
+export const clamp = (v, a = 0, b = 1) => Math.max(a, Math.min(b, v));
+export const lerp = (a, b, t) => a + (b - a) * t;
+export const inv = (a, b, v) => clamp((v - a) / (b - a));
+export const eOut = t => 1 - Math.pow(1 - clamp(t), 3);
+export const eIn = t => Math.pow(clamp(t), 3);
+export const eIO = t => { t = clamp(t); return t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; };
+export const eBack = t => { t = clamp(t); const c1 = 1.70158, c3 = c1 + 1; return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); };
+export const eElastic = t => { t = clamp(t); if (t === 0 || t === 1) return t; return Math.pow(2, -10 * t) * Math.sin((t * 10 - .75) * (2 * Math.PI / 3)) + 1; };
+/** eased progress of time t through window [a, a+d] */
+export const win = (t, a, d = .6, ease = eOut) => ease(inv(a, a + d, t));
+/** fade in at a, fade out at b */
+export const life = (t, a, b, fi = .4, fo = .4) => Math.min(eOut(inv(a, a + fi, t)), 1 - eIn(inv(b - fo, b, t)));
+
+export function rng(seed) {
+  let a = seed >>> 0;
+  return () => { a |= 0; a = a + 0x6D2B79F5 | 0; let t = Math.imul(a ^ a >>> 15, 1 | a); t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t; return ((t ^ t >>> 14) >>> 0) / 4294967296; };
+}
+export const hash1 = (n) => { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); };
+export function hexStr(seed, len = 8) { const r = rng(seed * 7919 + 13); let s = ''; for (let i = 0; i < len; i++) s += '0123456789abcdef'[Math.floor(r() * 16)]; return s; }
+
+export function hexA(hex, a) {
+  const n = parseInt(hex.slice(1), 16);
+  return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${a})`;
+}
+export function mix(h1, h2, t) {
+  const a = parseInt(h1.slice(1), 16), b = parseInt(h2.slice(1), 16);
+  const r = Math.round(lerp(a >> 16 & 255, b >> 16 & 255, t)), g = Math.round(lerp(a >> 8 & 255, b >> 8 & 255, t)), bl = Math.round(lerp(a & 255, b & 255, t));
+  return '#' + ((1 << 24) | (r << 16) | (g << 8) | bl).toString(16).slice(1);
+}
+
+// ---------- glow sprites (cached per color) ----------
+const glowCache = new Map();
+function glowSprite(color) {
+  let c = glowCache.get(color);
+  if (c) return c;
+  c = typeof OffscreenCanvas !== 'undefined' ? new OffscreenCanvas(128, 128) : Object.assign(document.createElement('canvas'), { width: 128, height: 128 });
+  const g = c.getContext('2d');
+  const gr = g.createRadialGradient(64, 64, 0, 64, 64, 64);
+  gr.addColorStop(0, hexA(color, 1)); gr.addColorStop(.18, hexA(color, .55)); gr.addColorStop(.45, hexA(color, .16)); gr.addColorStop(1, hexA(color, 0));
+  g.fillStyle = gr; g.fillRect(0, 0, 128, 128);
+  glowCache.set(color, c);
+  return c;
+}
+export function glow(ctx, x, y, r, color, a = 1) {
+  if (a <= 0 || r <= 0) return;
+  ctx.save(); ctx.globalCompositeOperation = 'lighter'; ctx.globalAlpha = Math.min(1, a);
+  ctx.drawImage(glowSprite(color), x - r, y - r, r * 2, r * 2);
+  ctx.restore();
+}
+
+// ---------- text ----------
+export function font(size, weight = 700, fam = F_SC) { return `${weight} ${Math.round(size)}px ${fam}`; }
+export function text(ctx, str, x, y, o = {}) {
+  const { size = 48, weight = 700, fam = F_SC, color = WHITE, align = 'left', base = 'middle', alpha = 1, shadow = 0, shadowColor = 'rgba(0,0,0,.6)', ls = 0, stroke = 0, strokeColor = 'rgba(0,0,0,.6)', maxW } = o;
+  if (alpha <= 0 || !str) return 0;
+  ctx.save();
+  ctx.globalAlpha *= alpha; ctx.font = font(size, weight, fam); ctx.textAlign = align; ctx.textBaseline = base;
+  if ('letterSpacing' in ctx) ctx.letterSpacing = ls + 'px';
+  if (maxW) { const w = ctx.measureText(str).width; if (w > maxW) { const k = maxW / w; ctx.translate(x, y); ctx.scale(k, k); x = 0; y = 0; } }
+  if (stroke) { ctx.lineJoin = 'round'; ctx.lineWidth = stroke; ctx.strokeStyle = strokeColor; ctx.strokeText(str, x, y); }
+  if (shadow) { ctx.shadowBlur = shadow; ctx.shadowColor = shadowColor; }
+  ctx.fillStyle = color; ctx.fillText(str, x, y);
+  const w = ctx.measureText(str).width;
+  ctx.restore();
+  return w;
+}
+export function measure(ctx, str, size, weight = 700, fam = F_SC, ls = 0) {
+  ctx.save(); ctx.font = font(size, weight, fam); if ('letterSpacing' in ctx) ctx.letterSpacing = ls + 'px';
+  const w = ctx.measureText(str).width; ctx.restore(); return w;
+}
+/** Solana gradient text */
+export function gradText(ctx, str, x, y, o = {}) {
+  const { size = 80, align = 'left', c1 = PURPLE, c2 = GREEN } = o;
+  const w = measure(ctx, str, size, o.weight ?? 900, o.fam ?? F_SC, o.ls ?? 0);
+  const x0 = align === 'center' ? x - w / 2 : align === 'right' ? x - w : x;
+  const g = ctx.createLinearGradient(x0, y - size / 2, x0 + w, y + size / 2);
+  g.addColorStop(0, c1); g.addColorStop(1, c2);
+  return text(ctx, str, x, y, { weight: 900, ...o, color: g });
+}
+/** Glowing text: soft colored halo + crisp core */
+export function glowText(ctx, str, x, y, o = {}) {
+  const c = o.glowColor || PURPLE;
+  text(ctx, str, x, y, { ...o, shadow: o.blur ?? 30, shadowColor: c });
+  return text(ctx, str, x, y, o);
+}
+
+// ---------- shapes ----------
+export function rr(ctx, x, y, w, h, r) {
+  r = Math.min(r, w / 2, h / 2);
+  ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath();
+}
+export function glass(ctx, x, y, w, h, o = {}) {
+  const { r = 22, alpha = 1, border = PURPLE, fill = 'rgba(20,16,44,.62)', bw = 2 } = o;
+  if (alpha <= 0) return;
+  ctx.save(); ctx.globalAlpha *= alpha;
+  rr(ctx, x, y, w, h, r); ctx.fillStyle = fill; ctx.fill();
+  const g = ctx.createLinearGradient(x, y, x + w, y + h); g.addColorStop(0, hexA(border, .9)); g.addColorStop(1, hexA(GREEN, .5));
+  ctx.lineWidth = bw; ctx.strokeStyle = g; ctx.stroke();
+  // top sheen
+  const s = ctx.createLinearGradient(0, y, 0, y + h * .5); s.addColorStop(0, 'rgba(255,255,255,.09)'); s.addColorStop(1, 'rgba(255,255,255,0)');
+  rr(ctx, x + 2, y + 2, w - 4, h * .5, r); ctx.fillStyle = s; ctx.fill();
+  ctx.restore();
+}
+export function pill(ctx, str, x, y, o = {}) {
+  const { size = 30, color = GREEN, alpha = 1, align = 'center', fg = '#0b0820', fam = F_SC } = o;
+  const w = measure(ctx, str, size, 800, fam) + size * 1.1, h = size * 1.7;
+  const x0 = align === 'center' ? x - w / 2 : align === 'right' ? x - w : x;
+  ctx.save(); ctx.globalAlpha *= alpha; rr(ctx, x0, y - h / 2, w, h, h / 2); ctx.fillStyle = color; ctx.fill(); ctx.restore();
+  text(ctx, str, x0 + w / 2, y + size * .04, { size, weight: 800, color: fg, align: 'center', alpha, fam });
+  return w;
+}
+
+/** The Solana mark: three slanted bars. p = assemble progress 0..1 */
+export function solLogo(ctx, cx, cy, size, p = 1, alpha = 1) {
+  if (alpha <= 0) return;
+  const w = size, h = size * .16, gap = size * .085, k = h * .9;
+  const ys = [-h * 1.5 - gap, -h / 2, h / 2 + gap];
+  ctx.save(); ctx.globalAlpha *= alpha; ctx.translate(cx, cy);
+  const g = ctx.createLinearGradient(-w / 2, size * .35, w / 2, -size * .35); g.addColorStop(0, PINK); g.addColorStop(.5, PURPLE); g.addColorStop(1, GREEN);
+  for (let i = 0; i < 3; i++) {
+    const pi = eBack(inv(i * .18, .5 + i * .18, p));
+    const dir = i === 1 ? 1 : -1;
+    const off = (1 - pi) * size * 1.6 * dir;
+    ctx.save(); ctx.globalAlpha *= clamp(pi * 1.4); ctx.translate(off, 0);
+    const y = ys[i], x0 = -w / 2;
+    ctx.beginPath();
+    if (i === 1) { ctx.moveTo(x0, y); ctx.lineTo(x0 + w - k, y); ctx.lineTo(x0 + w, y + h); ctx.lineTo(x0 + k, y + h); }
+    else { ctx.moveTo(x0 + k, y); ctx.lineTo(x0 + w, y); ctx.lineTo(x0 + w - k, y + h); ctx.lineTo(x0, y + h); }
+    ctx.closePath(); ctx.fillStyle = g; ctx.fill();
+    ctx.restore();
+  }
+  ctx.restore();
+}
+
+/** clock dial; hand angle in turns */
+export function dial(ctx, cx, cy, r, o = {}) {
+  const { alpha = 1, hand = 0, ticks = 60, color = WHITE, accent = GREEN, lw = 3, minute = null } = o;
+  if (alpha <= 0) return;
+  ctx.save(); ctx.globalAlpha *= alpha; ctx.translate(cx, cy);
+  ctx.strokeStyle = hexA(color, .35); ctx.lineWidth = lw; ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2); ctx.stroke();
+  for (let i = 0; i < ticks; i++) {
+    const a = i / ticks * Math.PI * 2, big = i % 5 === 0;
+    ctx.strokeStyle = hexA(color, big ? .8 : .3); ctx.lineWidth = big ? lw * 1.4 : lw * .6;
+    ctx.beginPath(); ctx.moveTo(Math.sin(a) * r * (big ? .86 : .92), -Math.cos(a) * r * (big ? .86 : .92)); ctx.lineTo(Math.sin(a) * r * .97, -Math.cos(a) * r * .97); ctx.stroke();
+  }
+  if (minute !== null) {
+    const a = minute * Math.PI * 2; ctx.strokeStyle = hexA(color, .85); ctx.lineWidth = lw * 2.4; ctx.lineCap = 'round';
+    ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(Math.sin(a) * r * .55, -Math.cos(a) * r * .55); ctx.stroke();
+  }
+  const a = hand * Math.PI * 2;
+  ctx.strokeStyle = accent; ctx.lineWidth = lw * 1.3; ctx.lineCap = 'round';
+  ctx.beginPath(); ctx.moveTo(-Math.sin(a) * r * .12, Math.cos(a) * r * .12); ctx.lineTo(Math.sin(a) * r * .85, -Math.cos(a) * r * .85); ctx.stroke();
+  ctx.fillStyle = accent; ctx.beginPath(); ctx.arc(0, 0, lw * 2.4, 0, Math.PI * 2); ctx.fill();
+  ctx.restore();
+}
+
+/** burst of rays/particles at time since trigger dt */
+export function burst(ctx, x, y, dt, o = {}) {
+  const { n = 26, r = 260, color = GREEN, seed = 1, dur = 1.1, size = 6 } = o;
+  if (dt < 0 || dt > dur) return;
+  const p = dt / dur, R = rng(seed);
+  ctx.save(); ctx.globalCompositeOperation = 'lighter';
+  for (let i = 0; i < n; i++) {
+    const a = R() * Math.PI * 2, sp = .5 + R() * .7, d = eOut(p) * r * sp;
+    const px = x + Math.cos(a) * d, py = y + Math.sin(a) * d + p * p * 60;
+    ctx.globalAlpha = (1 - p) * .95; ctx.fillStyle = i % 3 === 0 ? WHITE : (i % 2 ? color : PURPLE);
+    ctx.beginPath(); ctx.arc(px, py, size * (1 - p * .6) * (.6 + R() * .8), 0, Math.PI * 2); ctx.fill();
+  }
+  ctx.restore();
+  glow(ctx, x, y, r * .8 * (1 - p), color, (1 - p) * .7);
+}
+
+/** ring shockwave */
+export function ring(ctx, x, y, dt, o = {}) {
+  const { r = 300, color = GREEN, dur = .9, lw = 6 } = o;
+  if (dt < 0 || dt > dur) return;
+  const p = dt / dur;
+  ctx.save(); ctx.globalAlpha = (1 - p); ctx.strokeStyle = color; ctx.lineWidth = lw * (1 - p) + 1;
+  ctx.beginPath(); ctx.arc(x, y, eOut(p) * r, 0, Math.PI * 2); ctx.stroke(); ctx.restore();
+}
+
+/** split string by fraction for typewriter */
+export const typed = (str, p) => { const a = Array.from(str); return a.slice(0, Math.floor(a.length * clamp(p) + 1e-6)).join(''); };
+
+/** fit words into lines by measuring */
+export function wrap(ctx, str, maxW, size, weight = 700, fam = F_SC) {
+  ctx.save(); ctx.font = font(size, weight, fam);
+  const out = []; let cur = '';
+  for (const ch of Array.from(str)) {
+    const t = cur + ch;
+    if (ctx.measureText(t).width > maxW && cur) {
+      // avoid starting a line with punctuation
+      if (/[，。；：、？！」』）,.!?)]/.test(ch)) { out.push(t); cur = ''; continue; }
+      out.push(cur); cur = ch;
+    } else cur = t;
+  }
+  if (cur) out.push(cur);
+  ctx.restore(); return out;
+}
+
+/** cubic camera shake offset */
+export function shake(t, amp, seed = 3) { return [Math.sin(t * 61 + seed) * amp * hash1(Math.floor(t * 30) + seed), Math.cos(t * 53 + seed * 2) * amp * hash1(Math.floor(t * 30) + seed + 7)]; }
+
+export function arrow(ctx, x1, y1, x2, y2, color, lw = 4, head = 16, alpha = 1) {
+  if (alpha <= 0) return;
+  const a = Math.atan2(y2 - y1, x2 - x1);
+  ctx.save(); ctx.globalAlpha *= alpha; ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = lw; ctx.lineCap = 'round';
+  ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2 - Math.cos(a) * head * .6, y2 - Math.sin(a) * head * .6); ctx.stroke();
+  ctx.beginPath(); ctx.moveTo(x2, y2); ctx.lineTo(x2 - Math.cos(a - .45) * head, y2 - Math.sin(a - .45) * head); ctx.lineTo(x2 - Math.cos(a + .45) * head, y2 - Math.sin(a + .45) * head); ctx.closePath(); ctx.fill();
+  ctx.restore();
+}
+
+export function fmtUSD(v) {
+  if (v < 10) return '$' + v.toFixed(2);
+  if (v < 1000) return '$' + v.toFixed(v < 100 ? 1 : 0);
+  return '$' + Math.round(v).toLocaleString('en-US');
+}

solana-clock/js/engine.js

@@ -0,0 +1,227 @@
+// Frame compositor: background, scene, chapter header, subtitles, transitions.
+import { buildTimeline, layout, subChunks } from './timeline.js';
+import { SCENES } from './scenes.js';
+import { clamp, lerp, inv, eOut, eIn, rng, glow, text, gradText, hexA, mix, measure, rr, F_SC, F_GR, F_MONO, PURPLE, GREEN, WHITE, GOLD, wrap } from './draw.js';
+
+export const TL = buildTimeline();
+
+const MOODS = {
+  hook: { top: '#120a2e', bot: '#030209', accent: PURPLE, grid: .0, stars: .9 },
+  night: { top: '#0b1030', bot: '#04040c', accent: '#5a6cff', grid: 0, stars: .6 },
+  poh: { top: '#0c1a2e', bot: '#02060a', accent: GREEN, grid: .55, stars: .5 },
+  name: { top: '#3a1440', bot: '#0a0612', accent: '#ff8a5c', grid: 0, stars: .2 },
+  build: { top: '#101a3a', bot: '#03040c', accent: '#00D1FF', grid: .5, stars: .6 },
+  mainnet: { top: '#2a0810', bot: '#050205', accent: '#ff3b5c', grid: .3, stars: .3 },
+  rise: { top: '#1c0b3a', bot: '#03020a', accent: GREEN, grid: .7, stars: .7 },
+  outage: { top: '#2a0a0a', bot: '#060203', accent: '#ff3b5c', grid: .45, stars: .2 },
+  ftx: { top: '#0b1220', bot: '#020306', accent: '#7aa0c8', grid: .15, stars: .25 },
+  rebuild: { top: '#2a1406', bot: '#070302', accent: '#ffa63d', grid: .35, stars: .5 },
+  meme: { top: '#2a0b3a', bot: '#05020a', accent: '#ff5ad1', grid: .6, stars: .7 },
+  ath: { top: '#06281f', bot: '#020806', accent: GREEN, grid: .7, stars: .9 },
+  wall: { top: '#0d1626', bot: '#030508', accent: GOLD, grid: .35, stars: .3 },
+  now: { top: '#140c30', bot: '#030209', accent: PURPLE, grid: .5, stars: .7 },
+  outro: { top: '#10082a', bot: '#020106', accent: GREEN, grid: .25, stars: 1 },
+};
+
+const STARS = (() => { const r = rng(42); return Array.from({ length: 260 }, () => ({ x: r(), y: r(), s: r() * 1.8 + .4, tw: r() * 6.28, sp: r() * .6 + .1 })); })();
+const subCache = {};
+function chunksFor(orient) {
+  if (subCache[orient]) return subCache[orient];
+  return (subCache[orient] = TL.lines.flatMap(l => subChunks(l, orient === 'portrait' ? 15 : 25).map(c => ({ ...c, news: l.v === 'news' }))));
+}
+
+export function sceneAt(T) {
+  const sc = TL.scenes;
+  for (let i = sc.length - 1; i >= 0; i--) if (T >= sc[i].start) return sc[i];
+  return sc[0];
+}
+
+function moodAt(T) {
+  const s = sceneAt(T), nx = TL.scenes[s.si + 1];
+  const a = MOODS[s.id];
+  if (!nx) return a;
+  const k = eOut(inv(nx.start - 1.2, nx.start + .3, T));
+  if (k <= 0) return a;
+  const b = MOODS[nx.id];
+  return { top: mix(a.top, b.top, k), bot: mix(a.bot, b.bot, k), accent: mix(a.accent, b.accent, k), grid: lerp(a.grid, b.grid, k), stars: lerp(a.stars, b.stars, k) };
+}
+
+function background(ctx, L, T, m) {
+  const { W, H } = L;
+  const g = ctx.createLinearGradient(0, 0, 0, H); g.addColorStop(0, m.top); g.addColorStop(1, m.bot);
+  ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+  // nebulae
+  glow(ctx, W * (.25 + .05 * Math.sin(T * .07)), H * .28, Math.max(W, H) * .45, m.accent, .22);
+  glow(ctx, W * (.8 + .04 * Math.cos(T * .05)), H * .62, Math.max(W, H) * .4, PURPLE, .16);
+  // stars
+  if (m.stars > 0) {
+    // batched into 5 brightness buckets (one fill per bucket instead of one per star)
+    const B = 5, paths = Array.from({ length: B }, () => new Path2D());
+    for (const s of STARS) {
+      const x = ((s.x * W - T * s.sp * 6) % W + W) % W, y = s.y * H;
+      const tw = .5 + .5 * Math.sin(T * 1.3 + s.tw);
+      paths[Math.min(B - 1, Math.floor(tw * B))].rect(x, y, s.s, s.s);
+    }
+    ctx.save(); ctx.fillStyle = '#fff';
+    for (let k = 0; k < B; k++) { ctx.globalAlpha = m.stars * (.35 + .65 * (k + .5) / B) * .8; ctx.fill(paths[k]); }
+    ctx.restore();
+  }
+  // perspective time-grid floor
+  if (m.grid > .01) {
+    const hy = H * (L.portrait ? .7 : .66), cx = W / 2;
+    ctx.save(); ctx.globalAlpha = m.grid * .55;
+    const fg = ctx.createLinearGradient(0, hy, 0, H); fg.addColorStop(0, hexA(m.accent, 0)); fg.addColorStop(1, hexA(m.accent, .9));
+    ctx.strokeStyle = fg; ctx.lineWidth = 1.5;
+    for (let i = -14; i <= 14; i++) { ctx.beginPath(); ctx.moveTo(cx + i * 30, hy); ctx.lineTo(cx + i * W * .22, H); ctx.stroke(); }
+    const ph = (T * .45) % 1;
+    for (let j = 0; j < 14; j++) {
+      const z = (j + 1 - ph) / 14, y = hy + (H - hy) * Math.pow(z, 2.4);
+      ctx.globalAlpha = m.grid * .55 * z; ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
+    }
+    ctx.restore();
+    glow(ctx, cx, hy, W * .5, m.accent, m.grid * .18);
+  }
+}
+
+function header(ctx, L, sc, t) {
+  if (!sc.year && !sc.chapter) return;
+  if (sc.id === 'hook' || sc.id === 'outro') return;
+  const a = eOut(inv(.15, .8, t)) * (1 - eIn(inv(sc.dur - .5, sc.dur - .05, t)));
+  if (a <= 0) return;
+  const { x, y } = L.head;
+  const slide = (1 - eOut(inv(.15, .9, t))) * -40;
+  ctx.save(); ctx.globalAlpha = a; ctx.translate(slide, 0);
+  const ys = L.portrait ? 64 : 58;
+  const w = gradText(ctx, sc.year, x, y, { size: ys, fam: F_GR, weight: 700, ls: 2 });
+  ctx.fillStyle = hexA(GREEN, .8); ctx.fillRect(x + w + 18, y - 22, 4, 44);
+  text(ctx, sc.chapter, x + w + 38, y + 2, { size: L.portrait ? 40 : 36, weight: 800, color: WHITE });
+  // chapter index
+  text(ctx, `CH.${String(sc.si).padStart(2, '0')} / ${TL.scenes.length - 2}`, x + 2, y + (L.portrait ? 54 : 48), { size: 20, fam: F_MONO, weight: 500, color: hexA(WHITE, .5), ls: 3 });
+  ctx.restore();
+}
+
+function slotCounter(ctx, L, T, sc) {
+  if (sc.id === 'hook' && T < 3) return;
+  const slot = Math.floor(T / .4);
+  const a = .55;
+  const s = 'SLOT ' + String(slot).padStart(6, '0');
+  if (L.portrait) text(ctx, s, L.safe.r, L.safe.t + 52, { size: 22, fam: F_MONO, weight: 600, color: hexA(GREEN, a), align: 'right', ls: 2 });
+  else text(ctx, s, L.W - 96, 92, { size: 22, fam: F_MONO, weight: 600, color: hexA(GREEN, a), align: 'right', ls: 2 });
+  // tick dot pulses every slot
+  const ph = (T % .4) / .4;
+  const x = L.portrait ? L.safe.r - measure(ctx, s, 22, 600, F_MONO, 2) - 20 : L.W - 96 - measure(ctx, s, 22, 600, F_MONO, 2) - 20;
+  const y = L.portrait ? L.safe.t + 52 : 92;
+  ctx.save(); ctx.globalAlpha = (1 - ph) * .9; ctx.fillStyle = GREEN; ctx.beginPath(); ctx.arc(x, y, 6, 0, 7); ctx.fill(); ctx.restore();
+}
+
+function subtitles(ctx, L, T) {
+  const cs = chunksFor(L.orient);
+  const c = cs.find(c => T >= c.start - .05 && T < c.end + .12);
+  if (!c) return;
+  const a = Math.min(eOut(inv(c.start - .05, c.start + .12, T)), 1 - eIn(inv(c.end, c.end + .12, T)));
+  const { cx, y, maxW, size } = L.sub;
+  const lines = wrap(ctx, c.text, maxW - 40, size, 800);
+  const lh = size * 1.3;
+  const y0 = y - (lines.length - 1) * lh;
+  ctx.save(); ctx.globalAlpha = a;
+  let wmax = 0; for (const l of lines) wmax = Math.max(wmax, measure(ctx, l, size, 800));
+  rr(ctx, cx - wmax / 2 - 26, y0 - lh / 2 - 6, wmax + 52, lh * lines.length + 12, 16);
+  ctx.fillStyle = 'rgba(6,4,16,.55)'; ctx.fill();
+  lines.forEach((l, i) => text(ctx, l, cx, y0 + i * lh + 2, { size, weight: 800, align: 'center', color: c.news ? GOLD : '#fff', stroke: 7, strokeColor: 'rgba(0,0,0,.85)' }));
+  ctx.restore();
+}
+
+function transition(ctx, L, T) {
+  for (const sc of TL.scenes) {
+    if (sc.si === 0) continue;
+    const d = T - sc.start;
+    if (d < -.45 || d > .55) continue;
+    const p = inv(-.45, .55, d);
+    // diagonal light sweep
+    const { W, H } = L, x = lerp(-W * .6, W * 1.6, eIO(p));
+    ctx.save(); ctx.globalCompositeOperation = 'lighter';
+    const g = ctx.createLinearGradient(x - 420, 0, x + 420, H * .3);
+    g.addColorStop(0, 'rgba(153,69,255,0)'); g.addColorStop(.45, 'rgba(153,69,255,.35)'); g.addColorStop(.5, 'rgba(255,255,255,.55)'); g.addColorStop(.55, 'rgba(20,241,149,.35)'); g.addColorStop(1, 'rgba(20,241,149,0)');
+    ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+    ctx.restore();
+    const f = Math.max(0, 1 - Math.abs(d) / .22) * .32;
+    if (f > 0) { ctx.save(); ctx.fillStyle = `rgba(255,255,255,${f})`; ctx.fillRect(0, 0, L.W, L.H); ctx.restore(); }
+  }
+}
+function eIO(t) { t = clamp(t); return t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; }
+
+const vigCache = {};
+function vignette(ctx, L) {
+  const { W, H } = L;
+  let c = vigCache[L.orient];
+  if (!c) {
+    const w = W / 4, h = H / 4;
+    c = vigCache[L.orient] = typeof OffscreenCanvas !== 'undefined' ? new OffscreenCanvas(w, h) : Object.assign(document.createElement('canvas'), { width: w, height: h });
+    const x = c.getContext('2d');
+    const g = x.createRadialGradient(w / 2, h / 2, Math.min(w, h) * .35, w / 2, h / 2, Math.max(w, h) * .75);
+    g.addColorStop(0, 'rgba(0,0,0,0)'); g.addColorStop(1, 'rgba(0,0,0,.55)');
+    x.fillStyle = g; x.fillRect(0, 0, w, h);
+  }
+  ctx.drawImage(c, 0, 0, W, H);
+}
+
+export function sceneState(sc, T) {
+  const t = T - sc.start;
+  const cue = i => sc.lines[Math.min(i, sc.lines.length - 1)].local;
+  const end = i => { const l = sc.lines[Math.min(i, sc.lines.length - 1)]; return l.local + l.dur; };
+  const at = (i, sub) => { const l = sc.lines[i]; const k = Math.max(0, l.t.indexOf(sub)); return l.local + l.dur * k / Array.from(l.t).length; };
+  let li = -1; sc.lines.forEach((l, i) => { if (t >= l.local - .05) li = i; });
+  return { t, T, d: sc.dur, cue, end, at, li, sc };
+}
+
+/** Render one frame. ctx must already be scaled so that 1 unit = 1 design pixel. */
+export function renderFrame(ctx, orient, T, opts = {}) {
+  const L = layout(orient);
+  T = clamp(T, 0, TL.total - 1e-4);
+  const sc = sceneAt(T);
+  const m = moodAt(T);
+  ctx.save();
+  background(ctx, L, T, m);
+  const S = SCENES[sc.id];
+  const st = sceneState(sc, T);
+  // render previous scene's tail briefly under the transition for continuity
+  ctx.save(); S.draw(ctx, L, st); ctx.restore();
+  vignette(ctx, L);
+  if (S.post) S.post(ctx, L, st, opts);
+  header(ctx, L, sc, st.t);
+  slotCounter(ctx, L, T, sc);
+  transition(ctx, L, T);
+  if (opts.subs !== false) subtitles(ctx, L, T);
+  // global fade in/out
+  const fi = 1 - inv(0, .6, T), fo = inv(TL.total - 1.6, TL.total - .1, T);
+  const k = Math.max(fi, fo);
+  if (k > 0) { ctx.fillStyle = `rgba(0,0,0,${k})`; ctx.fillRect(0, 0, L.W, L.H); }
+  if (opts.safe && L.portrait) safeGuides(ctx, L);
+  ctx.restore();
+}
+
+export function safeGuides(ctx, L) {
+  const { W, H, safe } = L;
+  ctx.save();
+  ctx.fillStyle = 'rgba(255,40,80,.18)';
+  ctx.fillRect(0, 0, W, safe.t); ctx.fillRect(0, safe.b, W, H - safe.b); ctx.fillRect(safe.r, safe.t, W - safe.r, safe.b - safe.t);
+  ctx.setLineDash([14, 10]); ctx.strokeStyle = '#ff4d6d'; ctx.lineWidth = 3; ctx.strokeRect(safe.l, safe.t, safe.r - safe.l, safe.b - safe.t);
+  text(ctx, '刘海 / 状态栏 / 顶部标签', W / 2, safe.t / 2, { size: 30, align: 'center', color: '#ffb3c1' });
+  text(ctx, '抖音标题文案 / 音乐条 / 底部导航', W / 2, safe.b + (H - safe.b) / 2, { size: 30, align: 'center', color: '#ffb3c1' });
+  ctx.translate(safe.r + (W - safe.r) / 2, (safe.t + safe.b) / 2); ctx.rotate(Math.PI / 2);
+  text(ctx, '点赞 / 评论 / 收藏 / 分享', 0, 0, { size: 28, align: 'center', color: '#ffb3c1' });
+  ctx.restore();
+}
+
+/** all SFX events (absolute time) collected from scenes */
+export function allSfx() {
+  const ev = [];
+  for (const sc of TL.scenes) {
+    const S = SCENES[sc.id];
+    const st = sceneState(sc, sc.start);
+    const list = S.sfx ? S.sfx(st) : [];
+    for (const e of list) ev.push({ ...e, t: sc.start + e.t });
+    if (sc.si > 0) ev.push({ t: sc.start - .35, k: 'whoosh', v: .55 });
+  }
+  return ev.sort((a, b) => a.t - b.t);
+}

solana-clock/js/main.js

@@ -0,0 +1,207 @@
+// Player controller: canvas preview, transport, chapters, orientation, tabs; lazy-loads audio / export / publish / cover.
+import { TL, renderFrame, sceneAt } from './engine.js';
+import { SIZES } from './timeline.js';
+
+const $ = (s) => document.querySelector(s);
+const view = $('#view'), stage = $('#stage'), stageWrap = $('#stageWrap');
+const ctx = view.getContext('2d');
+const fmt = (s) => { s = Math.max(0, s); return `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`; };
+
+export const state = { T: 0, playing: false, orient: 'landscape', subs: true, safe: false, muted: false, dirty: true };
+const qs = new URLSearchParams(location.search);
+if (qs.get('o') === 'portrait') state.orient = 'portrait';
+if (qs.has('t')) state.T = parseFloat(qs.get('t')) || 0;
+if (qs.get('safe') === '1') state.safe = true;
+
+export function toast(msg) { const t = $('#toast'); t.textContent = msg; t.classList.add('on'); clearTimeout(toast._h); toast._h = setTimeout(() => t.classList.remove('on'), 1800); }
+
+// ---------- canvas sizing ----------
+function resize() {
+  const r = stage.getBoundingClientRect();
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  const w = Math.max(2, Math.round(r.width * dpr)), h = Math.max(2, Math.round(r.height * dpr));
+  if (view.width !== w || view.height !== h) { view.width = w; view.height = h; }
+  state.dirty = true;
+}
+new ResizeObserver(resize).observe(stage);
+
+function draw() {
+  const [W] = SIZES[state.orient];
+  ctx.setTransform(view.width / W, 0, 0, view.width / W, 0, 0);
+  renderFrame(ctx, state.orient, state.T, { subs: state.subs, safe: state.safe });
+}
+
+// ---------- audio (lazy) ----------
+let audioMod = null, mixBuf = null, actx = null, srcNode = null, gainNode = null, clock0 = 0, mixPromise = null;
+async function ensureMix() {
+  if (mixBuf) return mixBuf;
+  if (!mixPromise) {
+    mixPromise = (async () => {
+      audioMod = await import('./audio.js');
+      setLoading('正在合成配乐、音效与旁白…');
+      mixBuf = await audioMod.buildMix(p => setLoading(`正在合成声音… ${Math.round(p * 100)}%`));
+      setLoading(null);
+      return mixBuf;
+    })().catch(e => { console.error(e); setLoading(null); toast('声音加载失败，将静音播放'); mixPromise = null; return null; });
+  }
+  return mixPromise;
+}
+export const getMix = ensureMix;
+
+function stopSrc() { if (srcNode) { try { srcNode.onended = null; srcNode.stop(); } catch { } srcNode.disconnect(); srcNode = null; } }
+function startSrc() {
+  stopSrc();
+  if (!mixBuf || !actx) return;
+  srcNode = actx.createBufferSource(); srcNode.buffer = mixBuf;
+  srcNode.connect(gainNode);
+  srcNode.start(0, Math.min(state.T, mixBuf.duration - .01));
+  clock0 = actx.currentTime - state.T;
+}
+
+let wall0 = 0;
+async function play() {
+  if (state.T >= TL.total - .05) state.T = 0;
+  $('#bigPlay').classList.add('hide');
+  if (!actx) {
+    const AC = window.AudioContext || window.webkitAudioContext;
+    actx = new AC({ sampleRate: 48000, latencyHint: 'playback' });
+    gainNode = actx.createGain(); gainNode.gain.value = state.muted ? 0 : 1; gainNode.connect(actx.destination);
+  }
+  await actx.resume().catch(() => { });
+  state.playing = true; setPlayIcon();
+  wall0 = performance.now() / 1000 - state.T;
+  if (!mixBuf) {
+    // run silently until the mix is ready, then attach audio at the current position
+    ensureMix().then(b => { if (b && state.playing) startSrc(); });
+  } else startSrc();
+}
+function pause() { state.playing = false; stopSrc(); setPlayIcon(); }
+export function seek(T) {
+  state.T = Math.max(0, Math.min(TL.total - .01, T)); state.dirty = true;
+  wall0 = performance.now() / 1000 - state.T;
+  if (state.playing && mixBuf) startSrc();
+}
+function toggle() { state.playing ? pause() : play(); }
+export const pausePlayer = pause;
+
+function now() {
+  if (srcNode && actx) return actx.currentTime - clock0;
+  return performance.now() / 1000 - wall0;
+}
+
+function setPlayIcon() {
+  $('#icoPlay').innerHTML = state.playing ? '<path d="M7 5h4v14H7zm6 0h4v14h-4z"/>' : '<path d="M8 5v14l11-7z"/>';
+}
+
+// ---------- loop ----------
+let lastUI = -1;
+function loop() {
+  if (state.playing) {
+    state.T = now();
+    if (state.T >= TL.total) { state.T = TL.total - .01; pause(); $('#bigPlay').classList.remove('hide'); $('#bigPlayText').textContent = '再看一遍'; }
+    state.dirty = true;
+  }
+  if (state.dirty) { draw(); state.dirty = false; updateUI(); }
+  requestAnimationFrame(loop);
+}
+
+// ---------- scrubber + chapters ----------
+const scrub = $('#scrub');
+$('#tTot').textContent = fmt(TL.total);
+$('#scrubMarks').innerHTML = TL.scenes.slice(1).map(s => `<i style="left:${s.start / TL.total * 100}%"></i>`).join('');
+const chapEl = $('#chapters');
+chapEl.innerHTML = TL.scenes.map((s, i) => `<li data-i="${i}"><span class="n">${String(i + 1).padStart(2, '0')}</span><div style="flex:1"><div class="ttl">${s.chapter}${s.year ? `<span class="yr">${s.year}</span>` : ''}</div><div class="pbar"></div></div><span class="ts">${fmt(s.start)}</span></li>`).join('');
+chapEl.addEventListener('click', e => { const li = e.target.closest('li'); if (!li) return; seek(TL.scenes[+li.dataset.i].start + .01); if (!state.playing) play(); });
+
+function updateUI() {
+  const p = state.T / TL.total;
+  if (Math.abs(p - lastUI) < 1e-5) return; lastUI = p;
+  $('#scrubFill').style.width = `${p * 100}%`;
+  $('#scrubKnob').style.left = `${p * 100}%`;
+  $('#tCur').textContent = fmt(state.T);
+  const cur = sceneAt(state.T);
+  chapEl.querySelectorAll('li').forEach((li, i) => {
+    const s = TL.scenes[i];
+    li.classList.toggle('on', i === cur.si);
+    li.querySelector('.pbar').style.width = i === cur.si ? `${(state.T - s.start) / s.dur * 100}%` : '0';
+  });
+}
+
+function scrubAt(e) { const r = scrub.getBoundingClientRect(); return Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)) * TL.total; }
+let dragging = false;
+scrub.addEventListener('pointerdown', e => { dragging = true; scrub.setPointerCapture(e.pointerId); seek(scrubAt(e)); });
+scrub.addEventListener('pointermove', e => {
+  const T = scrubAt(e), r = scrub.getBoundingClientRect();
+  const tip = $('#scrubTip'); tip.style.left = `${e.clientX - r.left}px`; tip.textContent = `${fmt(T)} · ${sceneAt(T).chapter}`;
+  if (dragging) seek(T);
+});
+scrub.addEventListener('pointerup', () => { dragging = false; });
+
+// ---------- buttons ----------
+$('#btnPlay').onclick = toggle;
+$('#bigPlay').onclick = play;
+view.addEventListener('click', toggle);
+$('#btnMute').onclick = () => {
+  state.muted = !state.muted; if (gainNode) gainNode.gain.value = state.muted ? 0 : 1;
+  $('#icoVol').innerHTML = state.muted ? '<path d="M4 9v6h4l5 5V4L8 9H4zm12.6 3 2.7-2.7-1.4-1.4-2.7 2.7-2.7-2.7-1.4 1.4 2.7 2.7-2.7 2.7 1.4 1.4 2.7-2.7 2.7 2.7 1.4-1.4z"/>' : '<path d="M4 9v6h4l5 5V4L8 9H4zm12.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z"/>';
+};
+$('#btnFull').onclick = () => { document.fullscreenElement ? document.exitFullscreen() : stageWrap.requestFullscreen?.(); };
+
+function setOrient(o) {
+  state.orient = o;
+  stageWrap.classList.toggle('portrait', o === 'portrait');
+  document.querySelectorAll('#segOrient button').forEach(b => b.classList.toggle('on', b.dataset.v === o));
+  $('#safeWrap').style.opacity = o === 'portrait' ? 1 : .4;
+  resize();
+}
+$('#segOrient').addEventListener('click', e => { const b = e.target.closest('button'); if (b) setOrient(b.dataset.v); });
+$('#chkSubs').onchange = e => { state.subs = e.target.checked; state.dirty = true; };
+$('#chkSafe').checked = state.safe;
+$('#chkSafe').onchange = e => { state.safe = e.target.checked; if (state.safe && state.orient !== 'portrait') setOrient('portrait'); state.dirty = true; };
+
+window.addEventListener('keydown', e => {
+  if (e.target.closest('input,textarea')) return;
+  if (e.code === 'Space') { e.preventDefault(); toggle(); }
+  else if (e.code === 'ArrowRight') seek(state.T + 5);
+  else if (e.code === 'ArrowLeft') seek(state.T - 5);
+  else if (e.key === ']') { const s = TL.scenes[Math.min(TL.scenes.length - 1, sceneAt(state.T).si + 1)]; seek(s.start + .01); }
+  else if (e.key === '[') { const c = sceneAt(state.T); const s = state.T - c.start > 2 ? c : TL.scenes[Math.max(0, c.si - 1)]; seek(s.start + .01); }
+  else if (e.key === 'm' || e.key === 'M') $('#btnMute').click();
+  else if (e.key === 'f' || e.key === 'F') $('#btnFull').click();
+});
+
+// ---------- tabs + lazy panels ----------
+const loaded = {};
+async function openTab(name) {
+  document.querySelectorAll('#tabs button').forEach(b => b.classList.toggle('on', b.dataset.tab === name));
+  document.querySelectorAll('.panel').forEach(p => p.classList.toggle('on', p.dataset.panel === name));
+  if (loaded[name]) return; loaded[name] = true;
+  try {
+    if (name === 'export') (await import('./exporter.js')).initExportPanel({ state, getMix: ensureMix, pausePlayer: pause, toast });
+    if (name === 'publish') (await import('./publish.js')).initPublishPanel({ toast });
+    if (name === 'cover') (await import('./cover.js')).initCoverPanel({ toast });
+  } catch (e) { console.error(e); loaded[name] = false; }
+}
+$('#tabs').addEventListener('click', e => { const b = e.target.closest('button'); if (b) openTab(b.dataset.tab); });
+if (qs.get('tab')) openTab(qs.get('tab'));
+
+// ---------- loading ----------
+function setLoading(msg) { const l = $('#loading'); if (!msg) { l.classList.add('hide'); return; } l.classList.remove('hide'); $('#loadingText').textContent = msg; }
+
+async function boot() {
+  setOrient(state.orient);
+  try {
+    await Promise.all(['900 40px SolSC', '700 40px SolSC', '400 40px SolSC', '700 40px SolGrotesk', '500 40px SolMono'].map(f => document.fonts.load(f, 'SOL时钟')));
+  } catch { }
+  await document.fonts.ready;
+  setLoading(null);
+  state.dirty = true;
+  window.__ready = true;
+  // warm the audio mix in the background so playback starts with sound
+  if (!qs.has('nomix')) setTimeout(() => ensureMix(), 400);
+}
+boot();
+requestAnimationFrame(loop);
+
+// test hook: render a specific time synchronously
+window.__render = (T, o) => { if (o) setOrient(o); state.T = T; draw(); return true; };

solana-clock/js/props.js

@@ -0,0 +1,213 @@
+// Reusable illustrated props (stateless)
+import { clamp, lerp, inv, eOut, eBack, rng, glow, text, gradText, hexA, rr, glass, F_SC, F_GR, F_MONO, PURPLE, GREEN, WHITE, RED, GOLD, measure } from './draw.js';
+
+export function monitor(ctx, x, y, w, o = {}) {
+  const { color = GREEN, alpha = 1, on = 1, label } = o;
+  if (alpha <= 0) return;
+  const h = w * .66;
+  ctx.save(); ctx.globalAlpha *= alpha; ctx.translate(x, y);
+  rr(ctx, -w / 2, -h / 2, w, h, w * .08); ctx.fillStyle = '#0d0b1c'; ctx.fill();
+  ctx.lineWidth = Math.max(2, w * .04); ctx.strokeStyle = hexA(color, .5 + .5 * on); ctx.stroke();
+  rr(ctx, -w / 2 + w * .08, -h / 2 + w * .08, w - w * .16, h - w * .16, w * .04);
+  ctx.fillStyle = hexA(color, .12 + .28 * on); ctx.fill();
+  ctx.fillStyle = hexA(color, .6); ctx.fillRect(-w * .12, h / 2, w * .24, w * .1); ctx.fillRect(-w * .25, h / 2 + w * .1, w * .5, w * .04);
+  if (label) text(ctx, label, 0, h / 2 + w * .32, { size: w * .2, fam: F_MONO, weight: 600, color: hexA(WHITE, .7), align: 'center' });
+  ctx.restore();
+  if (on > .5) glow(ctx, x, y, w * .9, color, .25 * on * alpha);
+}
+
+export function coin(ctx, x, y, r, o = {}) {
+  const { label = '◎', c1 = PURPLE, c2 = GREEN, alpha = 1, spin = 0, fs } = o;
+  if (alpha <= 0) return;
+  const sx = Math.max(.08, Math.abs(Math.cos(spin)));
+  ctx.save(); ctx.globalAlpha *= alpha; ctx.translate(x, y); ctx.scale(sx, 1);
+  const g = ctx.createLinearGradient(-r, -r, r, r); g.addColorStop(0, c1); g.addColorStop(1, c2);
+  ctx.fillStyle = hexA('#000000', .35); ctx.beginPath(); ctx.arc(r * .08, r * .1, r, 0, 7); ctx.fill();
+  ctx.fillStyle = g; ctx.beginPath(); ctx.arc(0, 0, r, 0, 7); ctx.fill();
+  ctx.strokeStyle = 'rgba(255,255,255,.55)'; ctx.lineWidth = r * .08; ctx.beginPath(); ctx.arc(0, 0, r * .8, 0, 7); ctx.stroke();
+  if (sx > .3) text(ctx, label, 0, r * .04, { size: fs || r * (label.length > 2 ? .5 : .9), weight: 900, fam: F_GR, color: '#fff', align: 'center' });
+  ctx.restore();
+}
+
+export function stamp(ctx, str, x, y, t, t0, o = {}) {
+  const { size = 120, color = RED, rot = -.12, fam = F_SC, glowC } = o;
+  const dt = t - t0;
+  if (dt < 0) return;
+  const p = eOut(inv(0, .28, dt));
+  const s = lerp(2.4, 1, p), a = clamp(dt / .12);
+  ctx.save(); ctx.translate(x, y); ctx.rotate(rot); ctx.scale(s, s); ctx.globalAlpha *= a;
+  const w = measure(ctx, str, size, 900, fam) + size * .5;
+  ctx.lineWidth = size * .07; ctx.strokeStyle = color; rr(ctx, -w / 2, -size * .7, w, size * 1.4, size * .18); ctx.stroke();
+  text(ctx, str, 0, size * .04, { size, weight: 900, fam, color, align: 'center' });
+  ctx.restore();
+  if (dt < .5) glow(ctx, x, y, size * 2.5, glowC || color, (1 - dt / .5) * .6);
+}
+
+export function bubble(ctx, str, x, y, o = {}) {
+  const { size = 34, alpha = 1, color = 'rgba(255,255,255,.92)', fg = '#1a1030', tail = 'left' } = o;
+  if (alpha <= 0) return;
+  const w = measure(ctx, str, size, 800) + size * 1.2, h = size * 1.8;
+  ctx.save(); ctx.globalAlpha *= alpha;
+  rr(ctx, x - w / 2, y - h / 2, w, h, h * .4); ctx.fillStyle = color; ctx.fill();
+  ctx.beginPath(); const tx = tail === 'left' ? x - w / 2 + h * .5 : x + w / 2 - h * .5;
+  ctx.moveTo(tx - 12, y + h / 2 - 2); ctx.lineTo(tx + (tail === 'left' ? -18 : 18), y + h / 2 + 20); ctx.lineTo(tx + 14, y + h / 2 - 2); ctx.fill();
+  ctx.restore();
+  text(ctx, str, x, y + 2, { size, weight: 800, color: fg, align: 'center', alpha });
+}
+
+export function nodesIn(seed, n, rect, minD = 80) {
+  const r = rng(seed), out = [];
+  let guard = 0;
+  while (out.length < n && guard++ < 4000) {
+    const p = { x: rect.x + r() * rect.w, y: rect.y + r() * rect.h, s: r(), ph: r() * 6.28 };
+    if (out.every(q => Math.hypot(q.x - p.x, q.y - p.y) > minD)) out.push(p);
+  }
+  return out;
+}
+export function linksFor(nodes, k = 3) {
+  const L = [];
+  nodes.forEach((a, i) => {
+    const near = nodes.map((b, j) => ({ j, d: Math.hypot(a.x - b.x, a.y - b.y) })).filter(o => o.j !== i).sort((p, q) => p.d - q.d).slice(0, k);
+    for (const o of near) if (i < o.j || !L.some(l => l[0] === o.j && l[1] === i)) L.push([i, o.j]);
+  });
+  return L;
+}
+
+export function rocket(ctx, x, y, s, o = {}) {
+  const { flame = 0, t = 0, alpha = 1 } = o;
+  ctx.save(); ctx.globalAlpha *= alpha; ctx.translate(x, y); ctx.scale(s, s);
+  if (flame > 0) {
+    for (let i = 0; i < 3; i++) {
+      const fl = (60 + 40 * Math.sin(t * 40 + i * 2)) * flame;
+      const g = ctx.createLinearGradient(0, 70, 0, 70 + fl * (1.2 - i * .25));
+      g.addColorStop(0, i === 2 ? '#fff' : i === 1 ? GOLD : '#ff6a3d'); g.addColorStop(1, 'rgba(255,80,40,0)');
+      ctx.fillStyle = g; ctx.beginPath(); ctx.moveTo(-22 + i * 7, 68); ctx.quadraticCurveTo(0, 70 + fl * (1.4 - i * .3), 22 - i * 7, 68); ctx.fill();
+    }
+    glow(ctx, 0, 90, 120 * flame, '#ff8a3d', .8);
+  }
+  const g = ctx.createLinearGradient(-30, 0, 30, 0); g.addColorStop(0, '#d8d4ee'); g.addColorStop(.5, '#ffffff'); g.addColorStop(1, '#9d97c4');
+  ctx.fillStyle = g;
+  ctx.beginPath(); ctx.moveTo(0, -110); ctx.bezierCurveTo(38, -70, 34, 20, 26, 70); ctx.lineTo(-26, 70); ctx.bezierCurveTo(-34, 20, -38, -70, 0, -110); ctx.fill();
+  ctx.fillStyle = PURPLE; ctx.beginPath(); ctx.moveTo(-26, 30); ctx.lineTo(-52, 80); ctx.lineTo(-24, 66); ctx.fill(); ctx.beginPath(); ctx.moveTo(26, 30); ctx.lineTo(52, 80); ctx.lineTo(24, 66); ctx.fill();
+  ctx.fillStyle = GREEN; ctx.beginPath(); ctx.arc(0, -30, 13, 0, 7); ctx.fill();
+  ctx.strokeStyle = '#2a2050'; ctx.lineWidth = 4; ctx.stroke();
+  ctx.restore();
+}
+
+export function skyline(ctx, x0, base, w, h, seed, o = {}) {
+  const { alpha = 1, lit = .5, color = '#0a0b1e', t = 0, win = GOLD } = o;
+  const r = rng(seed);
+  ctx.save(); ctx.globalAlpha *= alpha;
+  let x = x0;
+  while (x < x0 + w) {
+    const bw = 40 + r() * 90, bh = h * (.3 + r() * .7);
+    ctx.fillStyle = color; ctx.fillRect(x, base - bh, bw - 4, bh);
+    for (let wy = base - bh + 12; wy < base - 10; wy += 22) for (let wx = x + 8; wx < x + bw - 14; wx += 16) {
+      const v = r(); if (v < lit * (.7 + .3 * Math.sin(t * .3 + v * 20))) { ctx.fillStyle = hexA(win, .35 + .5 * v); ctx.fillRect(wx, wy, 7, 10); }
+    }
+    x += bw;
+  }
+  ctx.restore();
+}
+
+/** text that resolves from random glyphs */
+export function scramble(target, p, seed = 1) {
+  const g = '!<>-_/[]{}=+*^?#ABCDEFGHJKLMNOPQRSTUVWXYZ0123456789';
+  const arr = Array.from(target);
+  return arr.map((ch, i) => {
+    const k = clamp(p * (arr.length + 3) - i);
+    if (k >= 1) return ch;
+    if (k <= 0) return '';
+    return g[Math.floor((Math.sin(seed * 99 + i * 13 + p * 400) * .5 + .5) * g.length) % g.length];
+  }).join('');
+}
+
+export function avatar(ctx, x, y, r, initials, c1, c2, alpha = 1) {
+  if (alpha <= 0) return;
+  ctx.save(); ctx.globalAlpha *= alpha;
+  const g = ctx.createLinearGradient(x - r, y - r, x + r, y + r); g.addColorStop(0, c1); g.addColorStop(1, c2);
+  ctx.fillStyle = g; ctx.beginPath(); ctx.arc(x, y, r, 0, 7); ctx.fill();
+  // silhouette
+  ctx.save(); ctx.beginPath(); ctx.arc(x, y, r, 0, 7); ctx.clip();
+  ctx.fillStyle = 'rgba(10,6,30,.45)'; ctx.beginPath(); ctx.arc(x, y - r * .18, r * .36, 0, 7); ctx.fill();
+  ctx.beginPath(); ctx.ellipse(x, y + r * .78, r * .7, r * .55, 0, 0, 7); ctx.fill();
+  ctx.restore();
+  ctx.restore();
+  text(ctx, initials, x, y + r * .02, { size: r * .55, weight: 900, fam: F_GR, color: '#fff', align: 'center', alpha, stroke: 4, strokeColor: 'rgba(0,0,0,.35)' });
+}
+
+export function personCard(ctx, x, y, w, o) {
+  const { name, role, sub, ini, c1 = PURPLE, c2 = GREEN, a = 1 } = o;
+  if (a <= 0) return;
+  const h = w * 1.18;
+  ctx.save(); ctx.globalAlpha *= a; ctx.translate(x, y + (1 - a) * 60);
+  glass(ctx, -w / 2, -h / 2, w, h, { r: 26 });
+  avatar(ctx, 0, -h * .16, w * .26, ini, c1, c2);
+  text(ctx, name, 0, h * .2, { size: w * .1, weight: 800, fam: F_GR, color: WHITE, align: 'center', maxW: w * .9 });
+  text(ctx, role, 0, h * .31, { size: w * .085, weight: 700, color: GREEN, align: 'center', maxW: w * .9 });
+  if (sub) text(ctx, sub, 0, h * .41, { size: w * .07, weight: 500, color: 'rgba(255,255,255,.6)', align: 'center', maxW: w * .9 });
+  ctx.restore();
+}
+
+export function tower(ctx, x, base, w, h, label, o = {}) {
+  const { color = '#1b2440', edge = '#6f8cc0', alpha = 1, lit = .6, seed = 3 } = o;
+  if (alpha <= 0) return;
+  ctx.save(); ctx.globalAlpha *= alpha;
+  const g = ctx.createLinearGradient(x - w / 2, 0, x + w / 2, 0); g.addColorStop(0, color); g.addColorStop(1, '#0a0e1c');
+  ctx.fillStyle = g; ctx.fillRect(x - w / 2, base - h, w, h);
+  ctx.strokeStyle = hexA(edge, .7); ctx.lineWidth = 3; ctx.strokeRect(x - w / 2, base - h, w, h);
+  const r = rng(seed);
+  for (let yy = base - h + 70; yy < base - 14; yy += 26) for (let xx = x - w / 2 + 14; xx < x + w / 2 - 18; xx += 22) if (r() < lit) { ctx.fillStyle = hexA('#bfe3ff', .25 + r() * .5); ctx.fillRect(xx, yy, 10, 12); }
+  ctx.fillStyle = '#0c1020'; ctx.fillRect(x - w / 2 + 10, base - h + 10, w - 20, 50);
+  text(ctx, label, x, base - h + 36, { size: Math.min(44, w * .3), weight: 900, fam: F_GR, color: '#e9f1ff', align: 'center', maxW: w - 30 });
+  ctx.restore();
+}
+
+/** stateless falling debris: pieces of rect fall after t0 */
+export function crumble(ctx, x, base, w, h, label, dt, o = {}) {
+  const { seed = 9, cols = 4, rows = 8 } = o;
+  const r = rng(seed);
+  const pw = w / cols, ph = h / rows;
+  ctx.save();
+  for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) {
+    const delay = (rows - j) * .05 + r() * .25, vx = (r() - .5) * 260, spin = (r() - .5) * 6;
+    const tt = Math.max(0, dt - delay);
+    const px = x - w / 2 + i * pw + vx * tt, py = base - h + j * ph + 900 * tt * tt;
+    if (py > base + 400) continue;
+    ctx.save(); ctx.translate(px + pw / 2, py + ph / 2); ctx.rotate(spin * tt);
+    ctx.globalAlpha = clamp(1 - tt * .8);
+    ctx.fillStyle = (i + j) % 2 ? '#1b2440' : '#141b31'; ctx.fillRect(-pw / 2, -ph / 2, pw - 2, ph - 2);
+    ctx.strokeStyle = 'rgba(111,140,192,.6)'; ctx.lineWidth = 2; ctx.strokeRect(-pw / 2, -ph / 2, pw - 2, ph - 2);
+    ctx.restore();
+  }
+  ctx.restore();
+  void label;
+}
+
+export function snow(ctx, L, T, n = 120, a = .7) {
+  const r = rng(77);
+  ctx.save(); ctx.fillStyle = '#e8f2ff';
+  for (let i = 0; i < n; i++) {
+    const sx = r(), sp = 40 + r() * 80, sz = 1.5 + r() * 3.5, ph = r() * 100;
+    const y = ((ph * 37 + T * sp) % (L.H + 40)) - 20, x = (sx * L.W + Math.sin(T * .8 + ph) * 30 + L.W) % L.W;
+    ctx.globalAlpha = a * (.4 + .6 * r()); ctx.beginPath(); ctx.arc(x, y, sz, 0, 7); ctx.fill();
+  }
+  ctx.restore();
+}
+
+export function rain(ctx, L, T, n = 160, a = .4, color = '#9fb4ff') {
+  const r = rng(51);
+  ctx.save(); ctx.strokeStyle = color; ctx.lineWidth = 1.6;
+  for (let i = 0; i < n; i++) {
+    const sx = r(), sp = 900 + r() * 700, ph = r() * 10, len = 20 + r() * 30;
+    const y = ((ph * 300 + T * sp) % (L.H + 100)) - 50, x = (sx * (L.W + 300) - y * .25);
+    ctx.globalAlpha = a * (.3 + .7 * r()); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x - len * .25, y + len); ctx.stroke();
+  }
+  ctx.restore();
+}
+
+export function bigNum(ctx, str, x, y, size, o = {}) {
+  return gradText(ctx, str, x, y, { size, fam: F_GR, weight: 700, align: 'center', ...o });
+}
+
+export { GOLD, RED, GREEN, PURPLE, WHITE, F_SC, F_GR, F_MONO };

solana-clock/js/scenes-a.js

@@ -0,0 +1,746 @@
+// Scenes 1–7: hook, night, poh, name, build, mainnet, rise
+import { clamp, lerp, inv, eOut, eIn, eIO, eBack, eElastic, win, life, rng, hash1, hexStr, glow, text, gradText, glowText, glass, pill, rr, solLogo, dial, burst, ring, typed, arrow, shake, measure, hexA, fmtUSD, F_SC, F_GR, F_MONO, PURPLE, GREEN, TEAL, PINK, RED, GOLD, WHITE } from './draw.js';
+import { monitor, coin, stamp, bubble, nodesIn, linksFor, rocket, skyline, scramble, personCard, rain, bigNum } from './props.js';
+import { drawChart, idx, LAST } from './chart.js';
+
+const BTC_2020_03 = [['03-05', 9083], ['03-06', 9152], ['03-07', 9098], ['03-08', 8756], ['03-09', 7908], ['03-10', 8031], ['03-11', 7832], ['03-12', 6537], ['03-13', 5696], ['03-14', 5409], ['03-15', 5424], ['03-16', 4665]]; // Surf market-price BTC daily
+
+function chip(ctx, x, y, w, h, big, small, a, color = GREEN) {
+  if (a <= 0) return;
+  ctx.save(); ctx.globalAlpha *= a; ctx.translate(x, y); const s = lerp(.6, 1, eBack(a)); ctx.scale(s, s);
+  glass(ctx, -w / 2, -h / 2, w, h, { r: 24 });
+  gradText(ctx, big, 0, -h * .14, { size: h * .38, fam: F_GR, weight: 700, align: 'center', c2: color });
+  text(ctx, small, 0, h * .27, { size: h * .17, weight: 700, color: 'rgba(255,255,255,.75)', align: 'center' });
+  ctx.restore();
+}
+
+function speedLines(ctx, L, t, a, n = 46, color = WHITE) {
+  if (a <= 0) return;
+  const r = rng(5);
+  ctx.save(); ctx.globalCompositeOperation = 'lighter';
+  for (let i = 0; i < n; i++) {
+    const y = r() * L.H, sp = 1800 + r() * 2600, len = 120 + r() * 380, ph = r();
+    const x = ((ph * (L.W + 800) + t * sp) % (L.W + 800)) - 400;
+    const g = ctx.createLinearGradient(x - len, 0, x, 0); g.addColorStop(0, hexA(color, 0)); g.addColorStop(1, hexA(i % 3 ? GREEN : PURPLE, .7 * a));
+    ctx.strokeStyle = g; ctx.lineWidth = 1 + r() * 3; ctx.beginPath(); ctx.moveTo(x - len, y); ctx.lineTo(x, y); ctx.stroke();
+  }
+  ctx.restore();
+}
+
+// ---------------------------------------------------------------- 1. HOOK
+const hook = {
+  draw(ctx, L, s) {
+    const { t } = s, st = L.stage, P = L.portrait;
+    const c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3);
+    const m = Math.min(st.w, st.h);
+    const toC = eIO(inv(c1 - .2, c1 + .6, t));
+    const dx = P ? st.cx : lerp(st.cx - 430, st.cx, toC);
+    const dy = P ? lerp(st.cy - 170, st.cy - 40, toC) : st.cy;
+    const R = m * (P ? .33 : .38) * (1 + .1 * toC);
+    const aDial = win(t, .2, 1.2) * (1 - .7 * win(t, c2 - .2, .6)) * (1 - win(t, c3 - .2, .5));
+    const steps = Math.floor(Math.min(t, c1) / .4);
+    const hand = steps / 60 + (t > c1 ? Math.pow(t - c1, 2) * .55 : 0);
+    const ph = (t % .4) / .4;
+    glow(ctx, dx, dy, R * 1.5, PURPLE, (.25 + .3 * (1 - ph) * (t < c1 ? 1 : .3)) * aDial);
+    dial(ctx, dx, dy, R, { alpha: aDial, hand, minute: .1 + hand / 60, lw: 4 });
+    if (t < c1 && aDial > 0) ring(ctx, dx, dy, t - steps * .4, { r: R * 1.35, color: GREEN, dur: .4, lw: 3 });
+    // centre readout: 400ms
+    if (t < c1 + .4) {
+      const a = win(t, .6, .8) * (1 - win(t, c1, .4));
+      text(ctx, '400', dx, dy - 8, { size: R * .38, fam: F_GR, weight: 700, color: WHITE, align: 'center', alpha: a });
+      text(ctx, 'ms / slot', dx, dy + R * .26, { size: R * .1, fam: F_MONO, weight: 600, color: GREEN, align: 'center', alpha: a, ls: 3 });
+    }
+    // stat chips
+    const chips = [['数千笔', '每秒处理交易', s.at(0, '每秒')], ['400ms', '出一个区块', s.at(0, '四百')], ['<$0.01', '单笔手续费', s.at(0, '手续费')]];
+    chips.forEach(([b, sm, at], i) => {
+      const a = win(t, at, .45, eOut) * (1 - win(t, c1 - .15, .35));
+      const fly = win(t, c1 - .15, .5, eIn) * (i === 1 ? 0 : 1);
+      let x, y, w, h;
+      if (P) { w = 270; h = 150; x = st.cx + (i - 1) * 290; y = st.cy + 300; }
+      else { w = 470; h = 160; x = st.cx + 380; y = st.cy + (i - 1) * 200; }
+      chip(ctx, x + fly * 900, y, w, h, b, sm, a);
+    });
+    // c1: why so fast?
+    speedLines(ctx, L, t, win(t, c1 - .1, .3) * (1 - win(t, c2 - .2, .5)));
+    const aQ1 = win(t, c1, .35, eBack) * (1 - win(t, c2 - .1, .3));
+    if (aQ1 > 0) {
+      ctx.save(); ctx.translate(dx, dy); const sc = lerp(1.6, 1, eOut(inv(c1, c1 + .35, t))); ctx.scale(sc, sc);
+      glowText(ctx, '凭什么这么快？', 0, 0, { size: P ? 96 : 120, weight: 900, align: 'center', alpha: clamp(aQ1), glowColor: GREEN, blur: 40 });
+      ctx.restore();
+    }
+    // c2: the crash & the comeback, drawn with the real price history
+    const aC = win(t, c2 - .1, .4) * (1 - win(t, c3 - .3, .4));
+    if (aC > 0) {
+      const rect = P ? { x: st.x + 40, y: st.y + 260, w: st.w - 80, h: 460 } : { x: st.x + 80, y: st.y + 170, w: st.w - 160, h: 470 };
+      const prog = eIO(inv(c2, s.end(2) + .2, t));
+      drawChart(ctx, rect, { from: 0, to: LAST, prog, log: true, alpha: aC, grid: false, dates: false, headLabel: false, lw: 4, color: GREEN, color2: PINK, yMin: .4, yMax: 400 });
+      const a1 = win(t, s.at(2, '摔'), .3) * aC, a2 = win(t, s.at(2, '还能'), .3) * aC;
+      const ty = P ? st.y + 120 : st.y + 70;
+      if (P) {
+        glowText(ctx, '摔得那么惨？', st.cx, ty, { size: 74, weight: 900, color: RED, align: 'center', alpha: a1, glowColor: RED });
+        glowText(ctx, '还能爬回来？', st.cx, rect.y + rect.h + 110, { size: 74, weight: 900, color: GREEN, align: 'center', alpha: a2, glowColor: GREEN });
+      } else {
+        glowText(ctx, '摔得那么惨？', st.cx - 330, ty, { size: 78, weight: 900, color: RED, align: 'center', alpha: a1, glowColor: RED });
+        glowText(ctx, '还能爬回来？', st.cx + 330, ty, { size: 78, weight: 900, color: GREEN, align: 'center', alpha: a2, glowColor: GREEN });
+      }
+    }
+    // c3: logo + title
+    if (t > c3 - .2) {
+      const p = inv(c3, c3 + 1.1, t);
+      const ly = st.cy - (P ? 120 : 90), ls = P ? 300 : 260;
+      glow(ctx, st.cx, ly, ls * 1.6, PURPLE, .5 * p);
+      solLogo(ctx, st.cx, ly, ls, p);
+      burst(ctx, st.cx, ly, t - (c3 + .75), { r: 520, n: 60, seed: 3 });
+      ring(ctx, st.cx, ly, t - (c3 + .75), { r: 700, dur: 1.1 });
+      const a = win(t, c3 + .8, .6);
+      const word = scramble('SOLANA', inv(c3 + .8, c3 + 1.6, t), 4);
+      gradText(ctx, word, st.cx, ly + ls * .72 + 20, { size: P ? 120 : 132, fam: F_GR, weight: 700, align: 'center', ls: P ? 16 : 26, alpha: a });
+      text(ctx, '给 区 块 链 装 上 时 钟 的 人', st.cx, ly + ls * .72 + (P ? 130 : 135), { size: P ? 40 : 42, weight: 700, color: 'rgba(255,255,255,.85)', align: 'center', alpha: win(t, c3 + 1.5, .6), ls: 4 });
+    }
+  },
+  sfx(s) {
+    const ev = [], c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3);
+    for (let k = 1; k * .4 < c1; k++) ev.push({ t: k * .4, k: 'tick', v: k % 5 === 0 ? 1 : .55 });
+    ev.push({ t: s.at(0, '每秒'), k: 'pop' }, { t: s.at(0, '四百'), k: 'pop' }, { t: s.at(0, '手续费'), k: 'pop' });
+    ev.push({ t: c1 - .3, k: 'whoosh', v: 1 }, { t: c1, k: 'hit', v: .8 });
+    ev.push({ t: s.at(2, '摔') , k: 'drop' }, { t: s.at(2, '还能'), k: 'rise' });
+    ev.push({ t: c3 - 1.2, k: 'riser', v: 1 }, { t: c3 + .75, k: 'impact', v: 1 }, { t: c3 + .8, k: 'shimmer' });
+    return ev;
+  },
+};
+
+// ---------------------------------------------------------------- 2. NIGHT 2017
+function person(ctx, x, deskY, s, rim = PURPLE) {
+  ctx.save(); ctx.translate(x, deskY); ctx.scale(s, s);
+  ctx.fillStyle = '#05040c';
+  ctx.beginPath(); ctx.moveTo(-150, 0); ctx.bezierCurveTo(-150, -120, -110, -175, -60, -185); ctx.lineTo(60, -185); ctx.bezierCurveTo(110, -175, 150, -120, 150, 0); ctx.fill();
+  ctx.fillRect(-28, -215, 56, 40);
+  ctx.beginPath(); ctx.ellipse(0, -265, 62, 72, 0, 0, 7); ctx.fill();
+  // rim light
+  ctx.strokeStyle = hexA(rim, .75); ctx.lineWidth = 4;
+  ctx.beginPath(); ctx.ellipse(0, -265, 62, 72, 0, -1.2, .6); ctx.stroke();
+  ctx.beginPath(); ctx.moveTo(60, -185); ctx.bezierCurveTo(110, -175, 150, -120, 150, 0); ctx.stroke();
+  ctx.restore();
+}
+function cup(ctx, x, y, kind, a) {
+  if (a <= 0) return;
+  ctx.save(); ctx.translate(x, y); const s = eBack(a); ctx.scale(s, s); ctx.globalAlpha *= clamp(a * 2);
+  if (kind === 'beer') {
+    const g = ctx.createLinearGradient(0, -110, 0, 0); g.addColorStop(0, '#fff6d8'); g.addColorStop(.18, GOLD); g.addColorStop(1, '#d88a12');
+    ctx.fillStyle = g; ctx.beginPath(); ctx.moveTo(-30, -110); ctx.lineTo(30, -110); ctx.lineTo(26, 0); ctx.lineTo(-26, 0); ctx.fill();
+    ctx.fillStyle = '#fffdf2'; ctx.beginPath(); ctx.ellipse(0, -112, 33, 12, 0, 0, 7); ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,.7)'; ctx.lineWidth = 3; ctx.strokeRect(-30, -110, 60, 110);
+    glow(ctx, 0, -55, 80, GOLD, .35);
+  } else {
+    ctx.fillStyle = '#efe9ff'; rr(ctx, -30, -64, 60, 64, 10); ctx.fill();
+    ctx.strokeStyle = '#efe9ff'; ctx.lineWidth = 8; ctx.beginPath(); ctx.arc(34, -34, 15, -1.3, 1.3); ctx.stroke();
+    ctx.fillStyle = '#6b3b1d'; ctx.beginPath(); ctx.ellipse(0, -62, 26, 7, 0, 0, 7); ctx.fill();
+    ctx.restore(); ctx.save(); ctx.translate(x, y); ctx.globalAlpha *= a * .5; ctx.strokeStyle = '#fff'; ctx.lineWidth = 3;
+    for (let i = 0; i < 2; i++) { ctx.beginPath(); ctx.moveTo(-8 + i * 16, -78); ctx.bezierCurveTo(-20 + i * 16, -100, 4 + i * 16, -110, -8 + i * 16, -135); ctx.stroke(); }
+  }
+  ctx.restore();
+}
+const night = {
+  draw(ctx, L, s) {
+    const { t, T } = s, st = L.stage, P = L.portrait;
+    const a0 = win(t, 0, 1);
+    const c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3), c4 = s.cue(4);
+    // window
+    const wx = P ? st.x + 20 : st.cx - 480, wy = P ? st.y - 10 : st.y - 10, ww = P ? st.w - 40 : 960, wh = P ? 400 : 420;
+    ctx.save(); ctx.globalAlpha = a0;
+    rr(ctx, wx, wy, ww, wh, 18); ctx.save(); ctx.clip();
+    const sg = ctx.createLinearGradient(0, wy, 0, wy + wh); sg.addColorStop(0, '#0a1440'); sg.addColorStop(1, '#2a1a5e'); ctx.fillStyle = sg; ctx.fillRect(wx, wy, ww, wh);
+    glow(ctx, wx + ww * .78, wy + 90, 120, '#cfd8ff', .6); ctx.fillStyle = '#eef0ff'; ctx.beginPath(); ctx.arc(wx + ww * .78, wy + 90, 34, 0, 7); ctx.fill();
+    skyline(ctx, wx - 10, wy + wh, ww + 20, wh * .62, 21, { lit: .35, t: T, color: '#090a1d' });
+    ctx.restore();
+    ctx.strokeStyle = '#1d1838'; ctx.lineWidth = 16; rr(ctx, wx, wy, ww, wh, 18); ctx.stroke();
+    ctx.fillStyle = '#1d1838'; ctx.fillRect(wx + ww / 2 - 6, wy, 12, wh); ctx.fillRect(wx, wy + wh * .45, ww, 10);
+    ctx.restore();
+    // desk
+    const deskY = P ? st.y + st.h - 150 : st.y + st.h - 90;
+    ctx.save(); ctx.globalAlpha = a0;
+    const dg = ctx.createLinearGradient(0, deskY, 0, deskY + 200); dg.addColorStop(0, '#2b1e3e'); dg.addColorStop(1, '#0a0612');
+    ctx.fillStyle = dg; ctx.fillRect(0, deskY, L.W, 260);
+    ctx.fillStyle = 'rgba(153,69,255,.35)'; ctx.fillRect(0, deskY, L.W, 3);
+    ctx.restore();
+    // lamp
+    const lx = P ? st.x + st.w - 60 : st.cx + 640;
+    ctx.save(); ctx.globalAlpha = a0;
+    ctx.strokeStyle = '#3a2f5e'; ctx.lineWidth = 10; ctx.beginPath(); ctx.moveTo(lx, deskY); ctx.lineTo(lx + 20, deskY - 200); ctx.lineTo(lx - 70, deskY - 300); ctx.stroke();
+    ctx.fillStyle = '#4a3c78'; ctx.beginPath(); ctx.moveTo(lx - 120, deskY - 270); ctx.lineTo(lx - 30, deskY - 330); ctx.lineTo(lx - 10, deskY - 290); ctx.closePath(); ctx.fill();
+    const cg = ctx.createLinearGradient(lx - 70, deskY - 290, lx - 180, deskY); cg.addColorStop(0, 'rgba(255,214,140,.35)'); cg.addColorStop(1, 'rgba(255,214,140,0)');
+    ctx.fillStyle = cg; ctx.beginPath(); ctx.moveTo(lx - 110, deskY - 280); ctx.lineTo(lx - 30, deskY - 320); ctx.lineTo(lx + 60, deskY); ctx.lineTo(lx - 330, deskY); ctx.fill();
+    ctx.restore();
+    glow(ctx, lx - 90, deskY - 280, 120, GOLD, .5 * a0);
+    // laptop (screen faces the person and us)
+    const px = P ? st.cx - 140 : st.cx - 170, lpx = P ? st.cx + 110 : st.cx + 140;
+    const sw = P ? 250 : 300, sh = sw * .64;
+    ctx.save(); ctx.globalAlpha = a0;
+    rr(ctx, lpx - sw / 2, deskY - sh - 18, sw, sh, 12); ctx.fillStyle = '#121022'; ctx.fill(); ctx.strokeStyle = '#3a2f6e'; ctx.lineWidth = 4; ctx.stroke();
+    ctx.save(); rr(ctx, lpx - sw / 2 + 10, deskY - sh - 8, sw - 20, sh - 20, 6); ctx.clip();
+    ctx.fillStyle = '#0b1424'; ctx.fillRect(lpx - sw / 2, deskY - sh - 18, sw, sh);
+    const r = rng(8);
+    for (let i = 0; i < 14; i++) {
+      const yy = deskY - sh - 2 + i * 14 - ((t * 22) % 14);
+      const len = (.2 + r() * .7) * (sw - 50);
+      ctx.fillStyle = [GREEN, PURPLE, TEAL, '#ffffff'][i % 4]; ctx.globalAlpha = .65 * a0;
+      ctx.fillRect(lpx - sw / 2 + 22 + (i % 3) * 12, yy, len, 5);
+    }
+    ctx.restore();
+    ctx.fillStyle = '#2a2448'; ctx.fillRect(lpx - sw / 2 - 20, deskY - 18, sw + 40, 18);
+    ctx.restore();
+    glow(ctx, lpx, deskY - sh / 2, sw, TEAL, .35 * a0);
+    person(ctx, px, deskY + 20, P ? 1.05 : 1.15);
+    // wall clock
+    const ckx = P ? st.x + 80 : st.cx - 650, cky = P ? st.y + 470 : st.y + 120;
+    dial(ctx, ckx, cky, 62, { alpha: a0 * .9, hand: Math.floor(T) / 60, minute: .62, ticks: 12, lw: 3, accent: RED });
+    text(ctx, '2017.11  深夜', ckx, cky + 96, { size: 24, fam: F_SC, weight: 700, color: 'rgba(255,255,255,.65)', align: 'center', alpha: a0 });
+    // c1: name card
+    const ac = win(t, c1, .5) * (1 - win(t, c4 - .3, .4));
+    if (ac > 0) {
+      const cw = P ? 520 : 560, ch = 200, cx = P ? st.cx : st.x + 300, cy = P ? st.y + 180 : st.cy + 40;
+      ctx.save(); ctx.globalAlpha = ac; ctx.translate((1 - ac) * -60, 0);
+      glass(ctx, cx - cw / 2, cy - ch / 2, cw, ch, {});
+      text(ctx, 'Anatoly Yakovenko', cx, cy - 50, { size: 46, fam: F_GR, weight: 700, color: WHITE, align: 'center', maxW: cw - 40 });
+      text(ctx, '阿纳托利 · 亚科文科', cx, cy + 8, { size: 32, weight: 700, color: GREEN, align: 'center' });
+      text(ctx, 'Solana 创始人 · 前高通工程师', cx, cy + 58, { size: 26, weight: 500, color: 'rgba(255,255,255,.7)', align: 'center' });
+      ctx.restore();
+    }
+    // c2: skill tags rising from the laptop
+    const tags = [['压缩算法', -1], ['分布式系统', 0], ['高通 · 十几年', 1]];
+    tags.forEach(([tg, k], i) => {
+      const a = win(t, c2 + i * .45, .5) * (1 - win(t, c3, .5));
+      if (a <= 0) return;
+      const x = lpx + k * (P ? 150 : 200), y = deskY - sh - 80 - i * 70 - eOut(a) * 40;
+      pill(ctx, tg, x, y, { size: P ? 26 : 28, color: [GREEN, TEAL, PURPLE][i], fg: i === 2 ? '#fff' : '#0b0820', alpha: a });
+    });
+    // c3: two coffees + one beer
+    const cupsX = P ? [lpx + 150, lpx + 210, lpx + 280] : [lpx + 230, lpx + 310, lpx + 400];
+    const tc = [s.at(3, '两杯'), s.at(3, '两杯') + .35, s.at(3, '啤酒')];
+    ['coffee', 'coffee', 'beer'].forEach((k, i) => cup(ctx, cupsX[i], deskY + 2, k, win(t, tc[i], .45, x => x)));
+    // c4: the idea — a clock for the blockchain
+    const ai = win(t, c4 - .1, .5);
+    if (ai > 0) {
+      ctx.save(); ctx.fillStyle = `rgba(4,2,12,${.55 * ai})`; ctx.fillRect(0, 0, L.W, L.H); ctx.restore();
+      const ix = st.cx, iy = P ? st.cy - 120 : st.cy - 60, ir = P ? 190 : 170;
+      glow(ctx, ix, iy, ir * 2.4, GREEN, .5 * ai);
+      dial(ctx, ix, iy, ir * eBack(ai), { alpha: ai, hand: t * .8, minute: t * .05, lw: 6, accent: GREEN });
+      burst(ctx, ix, iy, t - c4, { r: 480, n: 50, seed: 9, color: GOLD });
+      ring(ctx, ix, iy, t - c4 - .1, { r: 600, color: GOLD });
+      gradText(ctx, '给区块链装上时钟？', ix, iy + ir + (P ? 110 : 90), { size: P ? 78 : 88, align: 'center', alpha: win(t, c4 + .3, .5), c1: GOLD, c2: GREEN });
+    }
+  },
+  sfx(s) {
+    return [
+      { t: s.cue(1), k: 'pop', v: .7 },
+      { t: s.cue(2), k: 'pop', v: .5 }, { t: s.cue(2) + .45, k: 'pop', v: .5 }, { t: s.cue(2) + .9, k: 'pop', v: .5 },
+      { t: s.at(3, '两杯'), k: 'clink' }, { t: s.at(3, '两杯') + .35, k: 'clink' }, { t: s.at(3, '啤酒'), k: 'clink', v: 1.1 },
+      { t: s.cue(4) - .1, k: 'idea', v: 1 }, { t: s.cue(4), k: 'shimmer' },
+    ];
+  },
+};
+
+// ---------------------------------------------------------------- 3. PROOF OF HISTORY
+const pohCache = {};
+const poh = {
+  draw(ctx, L, s) {
+    const { t } = s, st = L.stage, P = L.portrait;
+    const c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3), c4 = s.cue(4), c5 = s.cue(5), c6 = s.cue(6);
+    const N = 8, rx = P ? st.w * .4 : st.w * .4, ry = P ? st.h * .4 : st.h * .4;
+    const nodes = Array.from({ length: N }, (_, i) => { const a = i / N * Math.PI * 2 - Math.PI / 2; return { x: st.cx + Math.cos(a) * rx, y: st.cy + Math.sin(a) * ry, sp: .3 + hash1(i) * 1.6, off: hash1(i + 9) }; });
+    const dim = 1 - .75 * win(t, c3 - .2, .6) * (1 - win(t, c6, .6));
+    const sync = win(t, c6, 1.2, eIO);
+    // c2: chaotic messaging between every pair
+    const aMsg = win(t, c2, .5) * (1 - win(t, c3 - .2, .5));
+    if (aMsg > 0) {
+      ctx.save();
+      for (let i = 0; i < N; i++) for (let j = i + 1; j < N; j++) {
+        const A = nodes[i], B = nodes[j];
+        ctx.strokeStyle = `rgba(255,90,120,${.18 * aMsg})`; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(A.x, A.y); ctx.lineTo(B.x, B.y); ctx.stroke();
+        for (let k = 0; k < 2; k++) {
+          const p = ((t - c2) * (.5 + hash1(i * 9 + j + k * 50)) + hash1(i + j * 3 + k)) % 1;
+          const fw = (i + j + k) % 2 ? p : 1 - p;
+          const x = lerp(A.x, B.x, fw), y = lerp(A.y, B.y, fw);
+          ctx.fillStyle = `rgba(255,120,150,${aMsg})`; ctx.beginPath(); ctx.arc(x, y, 5, 0, 7); ctx.fill();
+        }
+      }
+      ctx.restore();
+      const n = Math.floor(Math.pow(Math.max(0, t - c2), 2) * 180);
+      text(ctx, '确认中…', st.cx, st.cy - 30, { size: P ? 60 : 64, weight: 900, color: '#ff9fb2', align: 'center', alpha: aMsg });
+      text(ctx, `消息往返 × ${n.toLocaleString()}`, st.cx, st.cy + 40, { size: 30, fam: F_MONO, weight: 600, color: 'rgba(255,255,255,.75)', align: 'center', alpha: aMsg });
+    }
+    // c6: synced links from the PoH core to every node
+    const core = { x: st.cx, y: P ? st.cy - 150 : st.cy - 110 };
+    if (sync > 0) {
+      ctx.save();
+      for (const n of nodes) {
+        ctx.strokeStyle = hexA(GREEN, .35 * sync); ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(core.x, core.y); ctx.lineTo(n.x, n.y); ctx.stroke();
+        const p = ((t - c6) * 1.4) % 1; ctx.fillStyle = hexA(GREEN, sync); ctx.beginPath(); ctx.arc(lerp(core.x, n.x, p), lerp(core.y, n.y, p), 6, 0, 7); ctx.fill();
+      }
+      ctx.restore();
+    }
+    // nodes with their own clocks
+    nodes.forEach((n, i) => {
+      const a = win(t, .2 + i * .12, .5) * dim;
+      if (a <= 0) return;
+      const own = n.off + t * n.sp * .3, shared = t * .25;
+      const hand = lerp(own, shared, sync);
+      monitor(ctx, n.x, n.y + 30, P ? 92 : 100, { color: sync > .5 ? GREEN : (aMsg > .3 ? RED : TEAL), alpha: a, on: .7 });
+      dial(ctx, n.x, n.y - 46, 30, { alpha: a, hand, ticks: 12, lw: 2, accent: sync > .5 ? GREEN : GOLD });
+      const aq = win(t, c1 + i * .08, .3, eBack) * (1 - win(t, c3 - .2, .4));
+      if (aq > 0) text(ctx, '?', n.x + 42, n.y - 72, { size: 56, weight: 900, fam: F_GR, color: GOLD, align: 'center', alpha: clamp(aq) });
+    });
+    // c3+: SHA-256 core and the chain of hashes
+    const aCore = win(t, c3, .7) ;
+    if (aCore > 0) {
+      const R = P ? 120 : 110;
+      glow(ctx, core.x, core.y, R * 3, GREEN, .45 * aCore);
+      ctx.save(); ctx.translate(core.x, core.y); ctx.rotate(t * .6); ctx.globalAlpha = aCore;
+      for (let k = 0; k < 2; k++) {
+        ctx.beginPath(); for (let i = 0; i < 6; i++) { const a = i / 6 * Math.PI * 2; ctx[i ? 'lineTo' : 'moveTo'](Math.cos(a) * R * (1 - k * .22), Math.sin(a) * R * (1 - k * .22)); } ctx.closePath();
+        ctx.strokeStyle = k ? PURPLE : GREEN; ctx.lineWidth = k ? 3 : 6; ctx.stroke();
+      }
+      ctx.restore();
+      ctx.save(); ctx.globalAlpha = aCore; ctx.fillStyle = 'rgba(6,20,16,.85)'; ctx.beginPath(); ctx.arc(core.x, core.y, R * .66, 0, 7); ctx.fill(); ctx.restore();
+      text(ctx, 'SHA-256', core.x, core.y, { size: P ? 36 : 34, fam: F_MONO, weight: 800, color: GREEN, align: 'center', alpha: aCore });
+      text(ctx, '历史证明 · Proof of History', core.x, core.y - R - 46, { size: P ? 34 : 34, weight: 800, color: WHITE, align: 'center', alpha: win(t, c3 + .4, .5) * (1 - win(t, c6, .5)) });
+    }
+    // chain
+    const aCh = win(t, c4 - .3, .6);
+    if (aCh > 0) {
+      const per = .55, gap = P ? 196 : 214, bw = P ? 170 : 186, bh = 70;
+      const cyR = P ? st.cy + 140 : st.cy + 150;
+      const born = Math.floor((t - (c4 - .3)) / per);
+      const speed = gap / per;
+      ctx.save(); ctx.globalAlpha = aCh;
+      // feeding line from core
+      ctx.strokeStyle = hexA(GREEN, .5); ctx.lineWidth = 3; ctx.setLineDash([8, 8]); ctx.beginPath(); ctx.moveTo(core.x, core.y + 110); ctx.lineTo(core.x, cyR - bh / 2); ctx.stroke(); ctx.setLineDash([]);
+      for (let b = Math.max(0, born - 12); b <= born; b++) {
+        const tb = (c4 - .3) + b * per;
+        const x = core.x - (t - tb) * speed;
+        if (x < -bw) continue;
+        const pop = eBack(inv(tb, tb + .25, t));
+        const isTx = t > c5 && txAt(b, c5, c4 - .3, per);
+        ctx.save(); ctx.translate(x, cyR); ctx.scale(pop, pop);
+        rr(ctx, -bw / 2, -bh / 2, bw, bh, 14); ctx.fillStyle = isTx ? 'rgba(60,44,8,.9)' : 'rgba(8,30,24,.9)'; ctx.fill();
+        ctx.strokeStyle = isTx ? GOLD : GREEN; ctx.lineWidth = 3; ctx.stroke();
+        text(ctx, hexStr(b + 17, 8), 0, -6, { size: 25, fam: F_MONO, weight: 700, color: isTx ? GOLD : GREEN, align: 'center' });
+        text(ctx, '#' + (1048576 + b).toLocaleString(), 0, 22, { size: 16, fam: F_MONO, weight: 500, color: 'rgba(255,255,255,.55)', align: 'center' });
+        if (isTx) { pill(ctx, 'TX ⏱', 0, -bh / 2 - 22, { size: 18, color: GOLD, fam: F_MONO }); }
+        ctx.restore();
+        if (b > 0) arrow(ctx, x - bw / 2 - 2, cyR, x - gap + bw / 2 + 4, cyR, hexA(GREEN, .7), 3, 12, clamp(pop));
+      }
+      ctx.restore();
+      const af = win(t, c4, .5) * (1 - win(t, c6 - .2, .4));
+      text(ctx, 'hash(n) = SHA256( hash(n−1) )', st.cx, cyR + (P ? 110 : 100), { size: P ? 30 : 34, fam: F_MONO, weight: 700, color: 'rgba(255,255,255,.85)', align: 'center', alpha: af });
+      // c5: falling transactions
+      if (t > c5 - .8) {
+        for (let k = 0; k < 10; k++) {
+          const ts = c5 + k * .9; if (t < ts - .7 || t > ts + .1) continue;
+          const p = eIn(inv(ts - .7, ts, t));
+          const x = core.x, y = lerp(st.y - 40, cyR - bh / 2 - 30, p);
+          ctx.save(); ctx.globalAlpha = 1 - inv(ts, ts + .1, t);
+          rr(ctx, x - 40, y - 26, 80, 52, 6); ctx.fillStyle = '#fff3d0'; ctx.fill();
+          ctx.strokeStyle = '#b57f12'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(x - 40, y - 26); ctx.lineTo(x, y + 4); ctx.lineTo(x + 40, y - 26); ctx.stroke();
+          ctx.restore();
+        }
+      }
+    }
+    const ast = win(t, s.at(5, '时间戳'), .5) * (1 - win(t, c6 - .2, .4));
+    if (ast > 0) gradText(ctx, '自带时间戳', st.cx, P ? st.y + st.h - 10 : st.y + st.h + 20, { size: 56, align: 'center', alpha: ast, c1: GOLD, c2: GREEN });
+    // c6: verdict
+    const av = win(t, c6 + .2, .5);
+    if (av > 0) {
+      speedLines(ctx, L, t, av * .7, 30);
+      gradText(ctx, '不用对表 · 各干各的', st.cx, P ? st.y + st.h - 10 : st.y + st.h + 20, { size: P ? 64 : 70, align: 'center', alpha: av });
+    }
+    void pohCache;
+  },
+  sfx(s) {
+    const ev = [];
+    for (let i = 0; i < 8; i++) ev.push({ t: .2 + i * .12, k: 'blip', v: .35, p: i });
+    ev.push({ t: s.cue(1), k: 'question' });
+    ev.push({ t: s.cue(2), k: 'chatter', d: s.cue(3) - s.cue(2) });
+    ev.push({ t: s.cue(3), k: 'power', v: 1 });
+    for (let b = 0; b * .55 < s.cue(6) + 2 - s.cue(4); b++) ev.push({ t: s.cue(4) - .3 + b * .55, k: 'hashtick', v: .45, p: b });
+    for (let k = 0; k < 6; k++) ev.push({ t: s.cue(5) + k * .9, k: 'stamp', v: .5 });
+    ev.push({ t: s.cue(6), k: 'whoosh' }, { t: s.cue(6) + .2, k: 'shimmer' });
+    return ev;
+  },
+};
+function txAt(b, c5, start, per) {
+  // bead b is "born" at start + b*per; a TX lands on it if a drop time coincides
+  const tb = start + b * per;
+  for (let k = 0; k < 10; k++) { const ts = c5 + k * .9; if (ts >= tb && ts < tb + per) return true; }
+  return false;
+}
+
+// ---------------------------------------------------------------- 4. NAME 2018
+const nameScene = {
+  draw(ctx, L, s) {
+    const { t, T } = s, st = L.stage, P = L.portrait, { W, H } = L;
+    const c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3);
+    const a0 = win(t, 0, 1.2);
+    const hy = H * (P ? .6 : .64);
+    // retro sunset
+    ctx.save(); ctx.globalAlpha = a0;
+    const sky = ctx.createLinearGradient(0, 0, 0, hy); sky.addColorStop(0, '#120a35'); sky.addColorStop(.55, '#6b1f6e'); sky.addColorStop(1, '#ff7a59');
+    ctx.fillStyle = sky; ctx.fillRect(0, 0, W, hy);
+    const sr = P ? 260 : 250, sx = W / 2 - (P ? 46 : 0), sy = hy - sr * .25 + Math.sin(T * .2) * 4;
+    glow(ctx, sx, sy, sr * 2.6, '#ff8a5c', .55);
+    ctx.save(); ctx.beginPath(); ctx.arc(sx, sy, sr, 0, 7); ctx.clip();
+    const sg = ctx.createLinearGradient(0, sy - sr, 0, sy + sr); sg.addColorStop(0, '#ffe36b'); sg.addColorStop(.6, '#ff5e8a'); sg.addColorStop(1, '#b02cff');
+    ctx.fillStyle = sg; ctx.fillRect(sx - sr, sy - sr, sr * 2, sr * 2);
+    ctx.fillStyle = '#6b1f6e';
+    for (let i = 0; i < 7; i++) { const yy = sy + i * sr * .14 - ((T * 12) % (sr * .14)); const hh = 3 + i * 2.2; ctx.fillRect(sx - sr, yy, sr * 2, hh); }
+    ctx.restore();
+    const sea = ctx.createLinearGradient(0, hy, 0, H); sea.addColorStop(0, '#3a1050'); sea.addColorStop(1, '#07030f');
+    ctx.fillStyle = sea; ctx.fillRect(0, hy, W, H - hy);
+    for (let i = 0; i < 22; i++) {
+      const yy = hy + Math.pow(i / 22, 1.6) * (H - hy), w2 = (40 + i * 26) * (.6 + .4 * Math.sin(T * 1.5 + i));
+      ctx.fillStyle = `rgba(255,170,120,${.5 - i * .02})`; ctx.fillRect(sx - w2 / 2 + Math.sin(T + i) * 12, yy, w2, 3 + i * .3);
+    }
+    // waves
+    ctx.strokeStyle = 'rgba(255,255,255,.12)'; ctx.lineWidth = 2;
+    for (let k = 0; k < 5; k++) { ctx.beginPath(); for (let x = 0; x <= W; x += 20) { const y = hy + 40 + k * 70 + Math.sin(x * .01 + T * (1 + k * .2) + k) * (6 + k * 3); x ? ctx.lineTo(x, y) : ctx.moveTo(x, y); } ctx.stroke(); }
+    ctx.restore();
+    // palms
+    palm(ctx, P ? 40 : 140, hy + 40, P ? .9 : 1.1, T, a0);
+    palm(ctx, P ? W - 210 : W - 160, hy + 60, P ? .75 : 1, T + 2, a0, true);
+    // c0: LOOM → name clash
+    const ty = P ? st.y + 120 : st.y + 110;
+    const aL = win(t, .3, .5) * (1 - win(t, c1 + .1, .4));
+    if (aL > 0) {
+      const sh = t > s.at(0, '撞') && t < s.at(0, '撞') + .4 ? shake(t, 10) : [0, 0];
+      text(ctx, 'LOOM', st.cx + sh[0], ty + sh[1], { size: P ? 150 : 170, fam: F_GR, weight: 700, color: WHITE, align: 'center', alpha: aL, ls: 20, shadow: 30, shadowColor: PURPLE });
+      const ag = win(t, s.at(0, '撞'), .4) * aL;
+      text(ctx, 'LOOM NETWORK', st.cx + (1 - ag) * 400 + 30, ty + 18, { size: P ? 64 : 80, fam: F_GR, weight: 700, color: 'rgba(255,90,120,.55)', align: 'center', alpha: ag, ls: 6 });
+      stamp(ctx, '撞名！', st.cx + (P ? 170 : 330), ty - 70, t, s.at(0, '撞') + .2, { size: P ? 64 : 70, color: RED });
+    }
+    // c1: becomes SOLANA
+    const aS = win(t, c1 + .1, .3);
+    if (aS > 0) {
+      const word = scramble('SOLANA', inv(c1 + .1, c1 + 1.1, t), 7);
+      glow(ctx, st.cx, ty, 400, PURPLE, .4 * aS);
+      gradText(ctx, word, st.cx, ty, { size: P ? 140 : 170, fam: F_GR, weight: 700, align: 'center', ls: P ? 14 : 22, alpha: aS, c1: '#ffe36b', c2: GREEN });
+      pill(ctx, '2018 · 正式更名', st.cx, ty + (P ? 110 : 120), { size: 28, alpha: win(t, c1 + 1, .4) * (1 - win(t, c2, .4)), color: GOLD });
+    }
+    // c2: map card
+    const am = win(t, c2, .5) * (1 - win(t, c3 + 1.5, .5));
+    if (am > 0) {
+      const cw = P ? 560 : 520, ch = P ? 420 : 380, cx = P ? st.cx : st.x + 330, cy = P ? st.cy + 210 : st.cy + 110;
+      ctx.save(); ctx.globalAlpha = am; ctx.translate(0, (1 - am) * 60);
+      glass(ctx, cx - cw / 2, cy - ch / 2, cw, ch, { fill: 'rgba(12,10,30,.82)' });
+      ctx.save(); rr(ctx, cx - cw / 2 + 14, cy - ch / 2 + 14, cw - 28, ch - 90, 14); ctx.clip();
+      ctx.fillStyle = '#123b66'; ctx.fillRect(cx - cw / 2, cy - ch / 2, cw, ch);
+      ctx.fillStyle = '#2c2440'; ctx.beginPath(); ctx.moveTo(cx + cw / 2, cy - ch / 2);
+      for (let i = 0; i <= 20; i++) { const yy = cy - ch / 2 + i / 20 * (ch - 76); ctx.lineTo(cx - 40 + Math.sin(i * .7) * 26 + i * 6, yy); }
+      ctx.lineTo(cx + cw / 2, cy + ch / 2); ctx.fill();
+      ctx.restore();
+      const pinT = s.at(2, 'Solana Beach');
+      const pins = [['Solana Beach', -.28, pinT, GREEN], ['San Diego 圣地亚哥', .22, c2 + .3, '#ffffff']];
+      pins.forEach(([nm, fy, pt, col], i) => {
+        const pa = win(t, pt, .5, eBack); if (pa <= 0) return;
+        const x = cx - 10 + (i ? 60 : 0) + Math.sin(fy * 8) * 10, y = cy + fy * (ch - 90) - 40 - (1 - pa) * 80;
+        ctx.fillStyle = col; ctx.beginPath(); ctx.arc(x, y - 30, 16, Math.PI, 0); ctx.lineTo(x, y); ctx.closePath(); ctx.fill();
+        if (i === 0) glow(ctx, x, y - 30, 70, GREEN, .7 * pa);
+        text(ctx, nm, x + 28, y - 30, { size: i ? 24 : 32, fam: F_GR, weight: 700, color: col, alpha: pa, stroke: 5, strokeColor: 'rgba(0,0,0,.6)' });
+      });
+      text(ctx, '加州 · 圣地亚哥以北的海滨小镇', cx, cy + ch / 2 - 38, { size: 28, weight: 700, color: 'rgba(255,255,255,.85)', align: 'center' });
+      ctx.restore();
+    }
+    // c3: surfer + code
+    const aSf = win(t, c3, .5);
+    if (aSf > 0) {
+      const p = inv(c3, s.d, t);
+      const x = lerp(P ? -100 : st.x + 500, P ? W * .75 : W - 200, p), y = hy + (P ? 120 : 90) + Math.sin(T * 2.4) * 10;
+      ctx.save(); ctx.globalAlpha = aSf;
+      ctx.fillStyle = 'rgba(255,255,255,.75)'; ctx.beginPath(); ctx.moveTo(x - 160, y + 30); ctx.quadraticCurveTo(x - 30, y - 70, x + 70, y + 30); ctx.fill();
+      surfer(ctx, x, y + 6);
+      ctx.restore();
+      const codes = ['</>', '{ }', 'fn()', '0x'];
+      codes.forEach((c, i) => {
+        const a = win(t, c3 + .4 + i * .3, .5) * aSf; const fy = ((t - c3) * 30 + i * 40) % 120;
+        text(ctx, c, x - 80 + i * 70, y - 140 - fy, { size: 34, fam: F_MONO, weight: 700, color: [GREEN, TEAL, GOLD, PURPLE][i], align: 'center', alpha: a * (1 - fy / 120) });
+      });
+    }
+  },
+  sfx(s) {
+    return [
+      { t: .3, k: 'waves', d: s.d - .3 }, { t: .35, k: 'hit', v: .6 },
+      { t: s.at(0, '撞') + .2, k: 'stamp', v: 1 },
+      { t: s.cue(1) + .1, k: 'scramble', d: 1 }, { t: s.cue(1) + 1.1, k: 'shimmer' },
+      { t: s.at(2, 'Solana Beach'), k: 'pop' }, { t: s.cue(2) + .3, k: 'pop', v: .5 },
+      { t: s.cue(3), k: 'whoosh', v: .6 },
+    ];
+  },
+};
+function palm(ctx, x, y, s, T, a, flip) {
+  ctx.save(); ctx.globalAlpha = a; ctx.translate(x, y); ctx.scale(flip ? -s : s, s); ctx.fillStyle = '#12051c'; ctx.strokeStyle = '#12051c';
+  ctx.lineWidth = 16; ctx.beginPath(); ctx.moveTo(0, 0); ctx.quadraticCurveTo(30, -180, 90, -330); ctx.stroke();
+  for (let i = 0; i < 6; i++) {
+    const a0 = -Math.PI / 2 + (i - 2.5) * .55 + Math.sin(T * 1.2 + i) * .04;
+    ctx.save(); ctx.translate(90, -330); ctx.rotate(a0 + Math.PI / 2);
+    ctx.beginPath(); ctx.moveTo(0, 0); ctx.quadraticCurveTo(60, -30, 150, 30); ctx.quadraticCurveTo(70, 0, 0, 10); ctx.fill();
+    ctx.restore();
+  }
+  ctx.restore();
+}
+function surfer(ctx, x, y) {
+  ctx.save(); ctx.translate(x, y); ctx.fillStyle = '#1a0a24';
+  ctx.beginPath(); ctx.ellipse(0, 0, 70, 9, -.08, 0, 7); ctx.fill();
+  ctx.lineWidth = 9; ctx.strokeStyle = '#1a0a24'; ctx.lineCap = 'round';
+  ctx.beginPath(); ctx.moveTo(-22, -4); ctx.lineTo(-8, -40); ctx.lineTo(16, -4); ctx.stroke();
+  ctx.beginPath(); ctx.moveTo(-8, -40); ctx.lineTo(0, -80); ctx.stroke();
+  ctx.beginPath(); ctx.moveTo(-34, -70); ctx.lineTo(0, -70); ctx.lineTo(36, -62); ctx.stroke();
+  ctx.beginPath(); ctx.arc(2, -96, 13, 0, 7); ctx.fill();
+  ctx.restore();
+}
+
+// ---------------------------------------------------------------- 5. BUILD 2018-19
+const TEAM = [
+  { ini: 'AY', name: 'Anatoly Yakovenko', role: 'CEO · 创始人', sub: '前高通', c1: PURPLE, c2: GREEN, k: [0, null] },
+  { ini: 'GF', name: 'Greg Fitzgerald', role: '联合创始人 · CTO', sub: '前高通', c1: '#00D1FF', c2: PURPLE, k: [0, 'Greg'] },
+  { ini: 'SA', name: 'Stephen Akridge', role: '联合创始人', sub: '前高通', c1: GOLD, c2: PINK, k: [0, 'Stephen'] },
+  { ini: 'RG', name: 'Raj Gokal', role: '联合创始人 · COO', sub: '产品与增长', c1: GREEN, c2: '#00D1FF', k: [1, 'Raj'] },
+];
+const build = {
+  draw(ctx, L, s) {
+    const { t } = s, st = L.stage, P = L.portrait;
+    const c2 = s.cue(2), c3 = s.cue(3), c4 = s.cue(4);
+    const out = win(t, c2 - .2, .6, eIn);
+    TEAM.forEach((m, i) => {
+      const at = m.k[1] ? s.at(m.k[0], m.k[1]) : .3;
+      const a = win(t, at, .55) * (1 - out);
+      let x, y, w;
+      if (P) { w = 360; x = st.cx + (i % 2 ? 195 : -195); y = st.cy + (i < 2 ? -225 : 225); }
+      else { w = 360; x = st.cx + (i - 1.5) * 400; y = st.cy - 10; }
+      personCard(ctx, x, y - out * 200, w, { ...m, a });
+    });
+    // testnet network
+    const rect = P ? { x: st.x + 30, y: st.y + 160, w: st.w - 60, h: st.h - 260 } : { x: st.x + 40, y: st.y + 60, w: st.w - 80, h: st.h - 120 };
+    const key = L.orient;
+    build._n = build._n || {};
+    const nodes = build._n[key] || (build._n[key] = nodesIn(11, P ? 34 : 46, rect, P ? 95 : 120));
+    build._l = build._l || {};
+    const links = build._l[key] || (build._l[key] = linksFor(nodes, 3));
+    const aN = win(t, c2 - .1, .5) * (1 - .6 * win(t, c3, .5)) * (1 - win(t, c4, .5));
+    if (aN > 0) {
+      ctx.save();
+      links.forEach(([i, j], k) => {
+        const ti = Math.max(onT(i, c2), onT(j, c2)); const a = win(t, ti, .3) * aN; if (a <= 0) return;
+        const A = nodes[i], B = nodes[j];
+        ctx.strokeStyle = hexA(TEAL, .35 * a); ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(A.x, A.y); ctx.lineTo(B.x, B.y); ctx.stroke();
+        const p = ((t * .8) + hash1(k)) % 1; ctx.fillStyle = hexA(GREEN, a); ctx.beginPath(); ctx.arc(lerp(A.x, B.x, p), lerp(A.y, B.y, p), 3.5, 0, 7); ctx.fill();
+      });
+      nodes.forEach((n, i) => {
+        const a = win(t, onT(i, c2), .3, eBack) * aN; if (a <= 0) return;
+        glow(ctx, n.x, n.y, 40, GREEN, .5 * clamp(a));
+        ctx.fillStyle = WHITE; ctx.globalAlpha = clamp(a); ctx.beginPath(); ctx.arc(n.x, n.y, 6 + n.s * 4, 0, 7); ctx.fill(); ctx.globalAlpha = 1;
+      });
+      ctx.restore();
+      const lit = nodes.filter((_, i) => t > onT(i, c2)).length;
+      pill(ctx, `TESTNET · 2018 · 节点 ${lit}`, st.cx, P ? st.y + 60 : st.y + 10, { size: 30, alpha: aN, color: TEAL, fam: F_GR });
+    }
+    // Series A
+    const aF = win(t, s.at(3, '两千万') - .3, .5) * (1 - win(t, c4, .5));
+    if (aF > 0) {
+      // coin rain
+      for (let k = 0; k < 26; k++) {
+        const t0 = c3 + k * .14, dt = t - t0; if (dt < 0) continue;
+        const x = st.x + hash1(k * 3) * st.w, y = st.y - 80 + dt * dt * 900 + dt * 200;
+        if (y > L.H + 80) continue;
+        coin(ctx, x, y, 34, { label: '$', c1: GOLD, c2: '#ff9f2e', spin: dt * 6 + k, alpha: aF });
+      }
+      const p = eOut(inv(s.at(3, '两千万'), s.at(3, '两千万') + 1.3, t));
+      const v = Math.round(20000000 * p / 10000) * 10000;
+      ctx.save(); ctx.globalAlpha = aF; glow(ctx, st.cx, st.cy, 500, GOLD, .35);
+      bigNum(ctx, '$' + v.toLocaleString('en-US'), st.cx, st.cy - 30, P ? 108 : 150, { c1: GOLD, c2: GREEN });
+      text(ctx, '2019 · A 轮融资', st.cx, st.cy + (P ? 60 : 80), { size: P ? 40 : 44, weight: 800, color: WHITE, align: 'center' });
+      text(ctx, 'Multicoin Capital 领投', st.cx, st.cy + (P ? 120 : 140), { size: P ? 34 : 36, weight: 700, fam: F_GR, color: GOLD, align: 'center' });
+      ctx.restore();
+    }
+    // waiting rocket
+    const aR = win(t, c4 - .1, .6);
+    if (aR > 0) {
+      const ry = st.y + st.h - (P ? 150 : 110);
+      ctx.save(); ctx.globalAlpha = aR; ctx.fillStyle = '#231a40'; ctx.fillRect(st.cx - 160, ry + 70, 320, 18); ctx.fillRect(st.cx + 70, ry - 160, 16, 240); ctx.restore();
+      rocket(ctx, st.cx, ry - 10, P ? 1.6 : 1.5, { alpha: aR, flame: .15 + .1 * Math.sin(t * 9), t });
+      const blink = Math.sin(t * 6) > 0 ? 1 : .35;
+      gradText(ctx, 'MAINNET ?', st.cx, P ? st.y + 120 : st.y + 90, { size: P ? 96 : 110, fam: F_GR, weight: 700, align: 'center', alpha: aR * blink, ls: 8 });
+    }
+  },
+  sfx(s) {
+    const ev = TEAM.map(m => ({ t: m.k[1] ? s.at(m.k[0], m.k[1]) : .3, k: 'card' }));
+    for (let i = 0; i < 12; i++) ev.push({ t: s.cue(2) + i * .12, k: 'blip', v: .3, p: i });
+    ev.push({ t: s.at(3, '两千万') - .2, k: 'coins', d: 1.6 }, { t: s.at(3, '两千万') + 1.3, k: 'cash' });
+    ev.push({ t: s.cue(4), k: 'rumble', d: s.d - s.cue(4) });
+    return ev;
+  },
+};
+const onT = (i, c2) => c2 + hash1(i * 7 + 1) * 1.8;
+
+// ---------------------------------------------------------------- 6. MAINNET 2020
+const mainnet = {
+  draw(ctx, L, s) {
+    const { t, T } = s, st = L.stage, P = L.portrait, { W, H } = L;
+    const c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3);
+    const launch = s.at(2, 'Solana');
+    const storm = 1 - win(t, launch + .5, 1.5);
+    // storm + lightning
+    rain(ctx, L, T, 180, .45 * storm, '#ff9fb0');
+    const flashes = [c1 + .4, s.at(1, '暴跌') + .1, s.at(1, '腰斩'), c2 - .4];
+    for (const f of flashes) { const d = t - f; if (d > 0 && d < .35) { ctx.fillStyle = `rgba(255,220,230,${(1 - d / .35) * .35 * storm})`; ctx.fillRect(0, 0, W, H); } }
+    // rocket on pad until launch, then lift-off
+    const lp = Math.max(0, t - launch);
+    const ry = st.y + st.h - (P ? 150 : 110) - lp * lp * 160;
+    const shk = t > launch - .8 && t < launch + 1.2 ? shake(t, 6) : [0, 0];
+    if (ry > -300) {
+      const pad = 1 - win(t, launch + 1, .5);
+      ctx.save(); ctx.globalAlpha = pad; ctx.fillStyle = '#231a40'; ctx.fillRect(st.cx - 160, st.y + st.h - (P ? 150 : 110) + 60, 320, 18); ctx.restore();
+      // smoke
+      if (t > launch - .8) {
+        for (let k = 0; k < 40; k++) {
+          const t0 = launch - .8 + k * .06, d = t - t0; if (d < 0 || d > 3) continue;
+          const dir = hash1(k) > .5 ? 1 : -1;
+          const x = st.cx + dir * d * (120 + hash1(k + 5) * 260), y = st.y + st.h - (P ? 90 : 50) - d * 30;
+          ctx.save(); ctx.globalAlpha = (1 - d / 3) * .5; ctx.fillStyle = '#d9cfe8'; ctx.beginPath(); ctx.arc(x, y, 30 + d * 50, 0, 7); ctx.fill(); ctx.restore();
+        }
+      }
+      rocket(ctx, st.cx + shk[0], ry + shk[1], P ? 1.6 : 1.5, { flame: t > launch - .8 ? 1 : .1, t });
+    }
+    // c1: 312 crash chart (BTC, Surf daily data)
+    const aC = win(t, c1, .5) * (1 - win(t, c2 + .2, .5));
+    if (aC > 0) {
+      const rect = P ? { x: st.x + 60, y: st.y + 140, w: st.w - 100, h: 360 } : { x: st.x + 120, y: st.y + 40, w: 900, h: 420 };
+      const p = inv(c1 + .2, s.at(1, '腰斩') + .6, t);
+      ctx.save(); ctx.globalAlpha = aC;
+      glass(ctx, rect.x - 40, rect.y - 70, rect.w + 80, rect.h + 130, { border: RED, fill: 'rgba(30,6,12,.75)' });
+      text(ctx, 'BTC · 2020 年 3 月（日线）', rect.x, rect.y - 30, { size: 26, weight: 700, color: 'rgba(255,255,255,.8)' });
+      const hi = 9300, lo = 4400, n = BTC_2020_03.length - 1;
+      const X = i => rect.x + i / n * rect.w, Y = v => rect.y + (hi - v) / (hi - lo) * rect.h;
+      ctx.beginPath(); const upto = p * n;
+      for (let i = 0; i <= Math.floor(upto); i++) { const v = BTC_2020_03[i][1]; i ? ctx.lineTo(X(i), Y(v)) : ctx.moveTo(X(i), Y(v)); }
+      const fi = Math.floor(upto); let hx = X(0), hy2 = Y(BTC_2020_03[0][1]);
+      if (fi < n) { const v = lerp(BTC_2020_03[fi][1], BTC_2020_03[fi + 1][1], upto - fi); hx = X(upto); hy2 = Y(v); ctx.lineTo(hx, hy2); } else { hx = X(n); hy2 = Y(BTC_2020_03[n][1]); }
+      ctx.strokeStyle = RED; ctx.lineWidth = 6; ctx.lineJoin = 'round'; ctx.stroke();
+      glow(ctx, hx, hy2, 50, RED, .9);
+      BTC_2020_03.forEach(([d], i) => { if (i % 2 === 0 || i === n) text(ctx, d.replace('03-', '3/'), X(i), rect.y + rect.h + 30, { size: 18, fam: F_MONO, color: 'rgba(255,255,255,.5)', align: 'center' }); });
+      ctx.restore();
+      stamp(ctx, '3.12', P ? st.cx + 250 : rect.x + rect.w + 230, P ? st.y + 600 : st.y + 170, t, s.at(1, '312') - .2, { size: P ? 90 : 120, color: RED, rot: -.1 });
+      const ak = win(t, s.at(1, '腰斩'), .4) * aC;
+      text(ctx, '≈ −50%', P ? st.cx : rect.x + rect.w + 230, P ? st.y + 740 : st.y + 360, { size: P ? 80 : 96, fam: F_GR, weight: 700, color: RED, align: 'center', alpha: ak, shadow: 30, shadowColor: RED });
+    }
+    // c2: calendar flip 12 → 16
+    const aK = win(t, c2 - .1, .4) * (1 - win(t, launch + .8, .5));
+    if (aK > 0) {
+      const day = 12 + Math.min(4, Math.floor(inv(c2, s.at(2, '3 月 16') + .2, t) * 4.999));
+      const x = P ? st.cx : st.cx - 480, y = P ? st.y + 230 : st.cy - 60;
+      ctx.save(); ctx.globalAlpha = aK;
+      rr(ctx, x - 130, y - 150, 260, 300, 26); ctx.fillStyle = '#f4f0ff'; ctx.fill();
+      rr(ctx, x - 130, y - 150, 260, 80, 26); ctx.fillStyle = day === 16 ? GREEN : RED; ctx.fill(); ctx.fillRect(x - 130, y - 100, 260, 30);
+      text(ctx, '2020 · 3 月', x, y - 112, { size: 32, weight: 800, color: '#fff', align: 'center' });
+      text(ctx, String(day), x, y + 50, { size: 150, fam: F_GR, weight: 700, color: '#1a1030', align: 'center' });
+      ctx.restore();
+    }
+    // c3: genesis block
+    const aG = win(t, c3 - .3, .7);
+    if (aG > 0) {
+      const gx = st.cx, gy = P ? st.cy - 40 : st.cy - 20, R = P ? 150 : 140;
+      glow(ctx, gx, gy, R * 3, GREEN, .5 * aG);
+      cube(ctx, gx, gy, R * eBack(aG), t);
+      ring(ctx, gx, gy, t - c3, { r: 520, color: GREEN, dur: 1.2 });
+      gradText(ctx, 'MAINNET BETA', gx, gy - R - (P ? 130 : 110), { size: P ? 80 : 92, fam: F_GR, weight: 700, align: 'center', alpha: aG, ls: 6 });
+      text(ctx, '2020.03.16 · 创世区块 Block 0', gx, gy - R - (P ? 60 : 44), { size: P ? 34 : 36, weight: 800, color: WHITE, align: 'center', alpha: aG });
+      // chain begins
+      for (let b = 0; b < 8; b++) {
+        const tb = c3 + .6 + b * .45, a = win(t, tb, .3, eBack); if (a <= 0) continue;
+        const dir = b % 2 ? 1 : -1, k = Math.floor(b / 2) + 1;
+        const bx = gx + dir * (R + 30 + k * (P ? 90 : 120)), by = gy + R + (P ? 90 : 60);
+        ctx.save(); ctx.globalAlpha = clamp(a); rr(ctx, bx - 36, by - 24, 72, 48, 10); ctx.fillStyle = 'rgba(8,30,24,.9)'; ctx.fill(); ctx.strokeStyle = GREEN; ctx.lineWidth = 3; ctx.stroke(); ctx.restore();
+        text(ctx, String(b + 1), bx, by + 2, { size: 22, fam: F_MONO, weight: 700, color: GREEN, align: 'center', alpha: clamp(a) });
+      }
+    }
+  },
+  sfx(s) {
+    const launch = s.at(2, 'Solana');
+    return [
+      { t: 0, k: 'rainloop', d: launch + 1.5 },
+      { t: s.cue(1) + .4, k: 'thunder' }, { t: s.at(1, '暴跌') + .1, k: 'thunder', v: .8 }, { t: s.at(1, '腰斩'), k: 'thunder' },
+      { t: s.cue(1) + .2, k: 'drop', v: .8 }, { t: s.at(1, '312') - .2, k: 'stamp', v: 1 },
+      { t: s.cue(2), k: 'flip' }, { t: s.cue(2) + .35, k: 'flip' }, { t: s.cue(2) + .7, k: 'flip' }, { t: s.at(2, '3 月 16') - .1, k: 'flip' },
+      { t: launch - .8, k: 'rocket', d: 3.5 }, { t: s.cue(3), k: 'impact', v: .8 }, { t: s.cue(3) + .1, k: 'shimmer' },
+    ];
+  },
+};
+function cube(ctx, x, y, R, t) {
+  const a = t * .5;
+  const pts = []; for (let i = 0; i < 8; i++) { const px = i & 1 ? 1 : -1, py = i & 2 ? 1 : -1, pz = i & 4 ? 1 : -1; const rx = px * Math.cos(a) - pz * Math.sin(a), rz = px * Math.sin(a) + pz * Math.cos(a); const ry = py * Math.cos(.5) - rz * Math.sin(.5), rz2 = py * Math.sin(.5) + rz * Math.cos(.5); pts.push([x + rx * R * .6, y + ry * R * .6, rz2]); }
+  const faces = [[0, 1, 3, 2], [4, 5, 7, 6], [0, 1, 5, 4], [2, 3, 7, 6], [0, 2, 6, 4], [1, 3, 7, 5]];
+  const sorted = faces.map(f => ({ f, z: f.reduce((s, i) => s + pts[i][2], 0) })).sort((p, q) => p.z - q.z);
+  ctx.save();
+  sorted.forEach(({ f }, k) => {
+    ctx.beginPath(); f.forEach((i, j) => ctx[j ? 'lineTo' : 'moveTo'](pts[i][0], pts[i][1])); ctx.closePath();
+    ctx.fillStyle = `rgba(${20 + k * 10},${120 + k * 18},${110 + k * 10},.35)`; ctx.fill(); ctx.strokeStyle = k > 2 ? GREEN : hexA(GREEN, .5); ctx.lineWidth = 3; ctx.stroke();
+  });
+  ctx.restore();
+  text(ctx, '0', x, y, { size: R * .5, fam: F_GR, weight: 700, color: WHITE, align: 'center', shadow: 20, shadowColor: GREEN });
+}
+
+// ---------------------------------------------------------------- 7. RISE 2021
+const ECO = [['Serum', '订单簿交易所', '#00D1FF'], ['Raydium', '自动做市商 AMM', PURPLE], ['Phantom', '钱包', '#ab9ff2'], ['Magic Eden', 'NFT 市场', PINK]];
+const rise = {
+  draw(ctx, L, s) {
+    const { t } = s, st = L.stage, P = L.portrait;
+    const c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3), c4 = s.cue(4);
+    const rect = P ? { x: st.x + 90, y: st.y + 400, w: st.w - 120, h: st.h - 430 } : { x: st.x + 110, y: st.y + 30, w: st.w - 140, h: st.h - 70 };
+    const prog = .1 * eOut(inv(.4, c3, t)) + .9 * eIO(inv(c3, s.end(3) + .4, t));
+    const head = drawChart(ctx, rect, { from: idx('2021-01-01'), to: idx('2021-11-07'), prog, alpha: win(t, .2, .6), yMin: 0, yMax: 280, gridVals: [50, 100, 150, 200, 250] });
+    // eco bubbles
+    ECO.forEach(([nm, cat, col], i) => {
+      const a = win(t, s.at(1, nm.split(' ')[0]), .5, eBack) * (1 - .55 * win(t, c3, .6));
+      if (a <= 0) return;
+      const fl = Math.sin(t * 1.3 + i * 1.7) * 10;
+      let x, y, r;
+      if (P) { r = 96; x = st.cx + (i % 2 ? 210 : -210); y = st.y + 70 + (i < 2 ? 0 : 200) + fl; }
+      else { r = 105; x = rect.x + 170 + (i % 2) * 290 + (i > 1 ? 120 : 0); y = rect.y + 120 + (i > 1 ? 250 : 0) + fl; }
+      ctx.save(); ctx.globalAlpha = clamp(a); ctx.translate(x, y); ctx.scale(a, a);
+      glow(ctx, 0, 0, r * 1.8, col, .4);
+      ctx.fillStyle = 'rgba(14,10,32,.85)'; ctx.beginPath(); ctx.arc(0, 0, r, 0, 7); ctx.fill();
+      ctx.strokeStyle = col; ctx.lineWidth = 5; ctx.stroke();
+      text(ctx, nm, 0, -12, { size: r * .3, fam: F_GR, weight: 700, color: WHITE, align: 'center', maxW: r * 1.7 });
+      text(ctx, cat, 0, r * .3, { size: r * .18, weight: 700, color: col, align: 'center', maxW: r * 1.7 });
+      ctx.restore();
+    });
+    // users/devs flowing in
+    const aU = win(t, c2 - .2, .5) * (1 - win(t, c3 + .5, .6));
+    if (aU > 0) {
+      ctx.save(); ctx.globalCompositeOperation = 'lighter';
+      for (let k = 0; k < 120; k++) {
+        const ang = hash1(k) * Math.PI * 2, sp = .4 + hash1(k + 3) * .6, ph = (hash1(k + 7) + (t - c2) * sp) % 1;
+        const R0 = Math.max(L.W, L.H) * .7;
+        const x = st.cx + Math.cos(ang) * R0 * (1 - ph), y = st.cy + Math.sin(ang) * R0 * (1 - ph);
+        ctx.fillStyle = k % 2 ? GREEN : PURPLE; ctx.globalAlpha = aU * ph; ctx.beginPath(); ctx.arc(x, y, 4, 0, 7); ctx.fill();
+      }
+      ctx.restore();
+      gradText(ctx, '开发者 + 用户 涌入', st.cx, P ? st.y + 340 : st.y + st.h - 120, { size: P ? 50 : 56, align: 'center', alpha: aU });
+    }
+    // ×170
+    if (t > c4 - .2) {
+      const x = P ? st.cx - 40 : rect.x + rect.w * .38, y = P ? st.y + 230 : rect.y + rect.h * .35;
+      stamp(ctx, '×170', x, y, t, c4, { size: P ? 120 : 150, color: GREEN, fam: F_GR, rot: -.08 });
+      text(ctx, '$1.51 → $258.93（日收盘）', x, y + (P ? 120 : 140), { size: P ? 32 : 36, fam: F_SC, weight: 800, color: WHITE, align: 'center', alpha: win(t, c4 + .3, .4) });
+      burst(ctx, head.x, head.y, t - c4, { r: 300, n: 40, seed: 8 });
+    }
+  },
+  sfx(s) {
+    const ev = [{ t: .2, k: 'riser', v: .5 }];
+    ECO.forEach(([nm]) => ev.push({ t: s.at(1, nm.split(' ')[0]), k: 'bubble' }));
+    ev.push({ t: s.cue(2) - .2, k: 'swarm', d: 2.5 });
+    ev.push({ t: s.cue(3), k: 'climb', d: s.end(3) + .4 - s.cue(3) });
+    ev.push({ t: s.cue(4), k: 'stamp', v: 1 }, { t: s.cue(4), k: 'impact', v: .7 });
+    return ev;
+  },
+};
+
+export const SCENES_A = { hook, night, poh, name: nameScene, build, mainnet, rise };

solana-clock/js/scenes-b.js

@@ -0,0 +1,788 @@
+// Scenes 8–15: outage, ftx, rebuild, meme, ath, wall, now, outro
+import { clamp, lerp, inv, eOut, eIn, eIO, eBack, win, rng, hash1, hexStr, glow, text, gradText, glowText, glass, pill, rr, solLogo, dial, burst, ring, shake, measure, hexA, fmtUSD, F_SC, F_GR, F_MONO, PURPLE, GREEN, TEAL, PINK, RED, GOLD, WHITE } from './draw.js';
+import { monitor, coin, stamp, bubble, nodesIn, linksFor, tower, crumble, snow, bigNum } from './props.js';
+import { drawChart, idx, LAST, price } from './chart.js';
+
+// ---------------------------------------------------------------- 8. OUTAGE
+const outage = {
+  draw(ctx, L, s) {
+    const { t, T } = s, st = L.stage, P = L.portrait;
+    const c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3), c4 = s.cue(4);
+    const rect = P ? { x: st.x + 40, y: st.y + 40, w: st.w - 80, h: st.h - 160 } : { x: st.x + 60, y: st.y + 20, w: st.w - 120, h: st.h - 80 };
+    outage._n = outage._n || {}; outage._l = outage._l || {};
+    const nodes = outage._n[L.orient] || (outage._n[L.orient] = nodesIn(23, P ? 26 : 36, rect, P ? 110 : 140));
+    const links = outage._l[L.orient] || (outage._l[L.orient] = linksFor(nodes, 3));
+    const flood = win(t, c1 + .3, 2.2, eIn);
+    const dead = win(t, c2 - .2, .4);
+    const aNet = win(t, 0, .6) * (1 - .8 * win(t, c3 - .2, .5));
+    if (aNet > 0) {
+      ctx.save();
+      links.forEach(([i, j], k) => {
+        const A = nodes[i], B = nodes[j];
+        ctx.strokeStyle = dead > .5 ? `rgba(90,90,110,${.25 * aNet})` : hexA(flood > .3 ? RED : TEAL, .35 * aNet); ctx.lineWidth = 2;
+        ctx.beginPath(); ctx.moveTo(A.x, A.y); ctx.lineTo(B.x, B.y); ctx.stroke();
+        if (dead < .5) {
+          const np = 1 + Math.floor(flood * 6);
+          for (let q = 0; q < np; q++) {
+            const p = ((t * (.7 + flood * 2.5)) + hash1(k * 7 + q)) % 1;
+            ctx.fillStyle = q > 0 ? hexA(RED, aNet) : hexA(GREEN, aNet); ctx.beginPath(); ctx.arc(lerp(A.x, B.x, p), lerp(A.y, B.y, p), q > 0 ? 5 : 4, 0, 7); ctx.fill();
+          }
+        }
+      });
+      nodes.forEach((n, i) => {
+        const off = dead > .5 && hash1(i * 3) < dead * 1.1;
+        const col = off ? '#3a3a4a' : flood > .4 ? RED : GREEN;
+        if (!off) glow(ctx, n.x, n.y, 40, col, .45 * aNet);
+        ctx.fillStyle = col; ctx.globalAlpha = aNet; ctx.beginPath(); ctx.arc(n.x, n.y, 8, 0, 7); ctx.fill(); ctx.globalAlpha = 1;
+      });
+      ctx.restore();
+      if (flood > .1 && dead < .5) {
+        for (let k = 0; k < 14; k++) {
+          const a = win(t, c1 + .4 + k * .18, .2) * (1 - dead) * aNet; if (a <= 0) continue;
+          const x = rect.x + hash1(k * 11) * rect.w, y = rect.y + hash1(k * 13) * rect.h;
+          pill(ctx, 'BOT', x, y, { size: 22, color: RED, fg: '#fff', alpha: a, fam: F_MONO });
+        }
+        text(ctx, `垃圾交易 ${(Math.floor(flood * 400000)).toLocaleString()} / 秒`, st.cx, P ? st.y + st.h - 100 : st.y + st.h - 40, { size: P ? 36 : 40, fam: F_SC, weight: 900, color: RED, align: 'center', alpha: flood, stroke: 6, strokeColor: 'rgba(0,0,0,.7)' });
+      }
+    }
+    // c2: breaking news + 17h timer
+    const aB = win(t, c2 - .1, .4) * (1 - win(t, c3 - .1, .4));
+    if (aB > 0) {
+      ctx.save(); ctx.fillStyle = `rgba(0,0,0,${.45 * aB})`; ctx.fillRect(0, 0, L.W, L.H); ctx.restore();
+      const hrs = 17 * eOut(inv(c2, s.end(2), t));
+      const hh = Math.floor(hrs), mm = Math.floor((hrs - hh) * 60), ss = Math.floor(((hrs - hh) * 60 - mm) * 60);
+      const tstr = `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}:${String(ss).padStart(2, '0')}`;
+      glowText(ctx, 'OFFLINE', st.cx, st.cy - (P ? 160 : 120), { size: P ? 120 : 150, fam: F_GR, weight: 700, color: RED, align: 'center', alpha: aB * (Math.sin(t * 10) > -.3 ? 1 : .5), glowColor: RED, ls: 10 });
+      text(ctx, tstr, st.cx, st.cy + (P ? 10 : 40), { size: P ? 110 : 130, fam: F_MONO, weight: 800, color: WHITE, align: 'center', alpha: aB });
+      newsBar(ctx, L, '突发', 'Solana 主网中断约 17 小时 · 验证者协调重启', aB, t);
+    }
+    // c3: outage markers on a timeline
+    const aT = win(t, c3 - .1, .5) * (1 - win(t, c4 + .2, .4));
+    if (aT > 0) {
+      const marks = [['2021.09', 0], ['2022.01', .3], ['2022.05', .45], ['2022.06', .6], ['2022.10', .78], ['2023.02', .95]];
+      const x0 = P ? st.x + 40 : st.x + 80, x1 = P ? st.x + st.w - 40 : st.x + st.w - 80, y = st.cy;
+      ctx.save(); ctx.globalAlpha = aT;
+      ctx.strokeStyle = 'rgba(255,255,255,.4)'; ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(x0, y); ctx.lineTo(x1, y); ctx.stroke();
+      ctx.restore();
+      marks.forEach(([d, f], i) => {
+        const a = win(t, c3 + .2 + i * .35, .3, eBack) * aT; if (a <= 0) return;
+        const x = lerp(x0, x1, f), up = i % 2 ? -1 : 1;
+        glow(ctx, x, y, 70, RED, .6 * clamp(a));
+        ctx.save(); ctx.translate(x, y); ctx.scale(a, a); ctx.strokeStyle = RED; ctx.lineWidth = 9; ctx.lineCap = 'round';
+        ctx.beginPath(); ctx.moveTo(-18, -18); ctx.lineTo(18, 18); ctx.moveTo(18, -18); ctx.lineTo(-18, 18); ctx.stroke(); ctx.restore();
+        text(ctx, d, x, y + up * 64, { size: P ? 26 : 30, fam: F_MONO, weight: 700, color: WHITE, align: 'center', alpha: clamp(a) });
+      });
+      text(ctx, '停摆 / 严重降级 · 示意', st.cx, y + (P ? 170 : 150), { size: 26, weight: 700, color: 'rgba(255,255,255,.55)', align: 'center', alpha: aT });
+    }
+    // c4: the running joke
+    const aJ = win(t, c4 - .1, .5);
+    if (aJ > 0) {
+      const sh = shake(t, 4 * aJ);
+      glowText(ctx, '又宕机了？', st.cx + sh[0], st.cy - (P ? 60 : 40) + sh[1], { size: P ? 120 : 150, weight: 900, color: WHITE, align: 'center', alpha: aJ, glowColor: RED });
+      const bs = [['哈哈哈哈', -1, -1], ['重启大师', 1, -1], ['又双叒叕', -1, 1], ['熟悉的味道', 1, 1], ['关机下班', 0, 1.6]];
+      bs.forEach(([str, dx, dy], i) => {
+        const a = win(t, c4 + .2 + i * .25, .3, eBack); if (a <= 0) return;
+        const x = st.cx + dx * (P ? 230 : 480) + Math.sin(t * 2 + i) * 8, y = st.cy - 40 + dy * (P ? 210 : 190);
+        bubble(ctx, str, x, y, { size: P ? 32 : 36, alpha: clamp(a), tail: dx > 0 ? 'right' : 'left' });
+      });
+    }
+  },
+  post(ctx, L, s) {
+    // RGB-split glitch slices while the network floods
+    const { t } = s;
+    const g = win(t, s.cue(1) + .6, 1.5) * (1 - win(t, s.cue(2) + .3, .4)) + (s.t > s.cue(4) && s.t < s.cue(4) + .25 ? 1 : 0);
+    if (g <= 0) return;
+    const cv = ctx.canvas, sc = cv.width / L.W;
+    ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0);
+    const n = 7, f = Math.floor(t * 18);
+    for (let i = 0; i < n; i++) {
+      if (hash1(f * 31 + i) > .55 * g + .1) continue;
+      const y = hash1(f * 17 + i * 3) * cv.height, h = (10 + hash1(f + i * 5) * 60) * sc, dx = (hash1(f * 7 + i) - .5) * 120 * sc * g;
+      ctx.drawImage(cv, 0, y, cv.width, h, dx, y, cv.width, h);
+    }
+    ctx.globalCompositeOperation = 'lighter'; ctx.globalAlpha = .12 * g; ctx.fillStyle = RED; ctx.fillRect(0, 0, cv.width, cv.height);
+    ctx.restore();
+  },
+  sfx(s) {
+    return [
+      { t: 0, k: 'hum', d: s.cue(1) + .5 },
+      { t: s.cue(1) + .3, k: 'glitchloop', d: s.cue(2) - s.cue(1) },
+      { t: s.cue(2) - .2, k: 'powerdown', v: 1 }, { t: s.cue(2) + .1, k: 'alarm', d: 2.4 },
+      ...[0, 1, 2, 3, 4, 5].map(i => ({ t: s.cue(3) + .2 + i * .35, k: 'error', v: .6 })),
+      { t: s.cue(4), k: 'glitch', v: .8 }, ...[0, 1, 2, 3, 4].map(i => ({ t: s.cue(4) + .2 + i * .25, k: 'pop', v: .5 })),
+    ];
+  },
+};
+function newsBar(ctx, L, tag, msg, a, t) {
+  const P = L.portrait;
+  const y = P ? L.safe.b - 230 : L.H - 230, x = P ? L.safe.l : 0, w = P ? L.safe.r - L.safe.l : L.W;
+  ctx.save(); ctx.globalAlpha = a;
+  ctx.fillStyle = 'rgba(10,10,20,.92)'; ctx.fillRect(x, y, w, 70);
+  ctx.fillStyle = RED; ctx.fillRect(x, y, P ? 120 : 190, 70);
+  text(ctx, tag, x + (P ? 60 : 95), y + 36, { size: 36, weight: 900, color: '#fff', align: 'center' });
+  ctx.save(); ctx.beginPath(); ctx.rect(x + (P ? 130 : 210), y, w - (P ? 140 : 220), 70); ctx.clip();
+  const mw = measure(ctx, msg, 34, 800);
+  const avail = w - (P ? 140 : 220);
+  const off = mw > avail ? ((t * 140) % (mw + 200)) : 0;
+  text(ctx, msg, x + (P ? 140 : 230) - off, y + 36, { size: 34, weight: 800, color: '#fff' });
+  if (mw > avail) text(ctx, msg, x + (P ? 140 : 230) - off + mw + 200, y + 36, { size: 34, weight: 800, color: '#fff' });
+  ctx.restore();
+  ctx.fillStyle = GOLD; ctx.fillRect(x, y + 70, w, 5);
+  ctx.restore();
+}
+
+// ---------------------------------------------------------------- 9. FTX
+const ftx = {
+  draw(ctx, L, s) {
+    const { t, T } = s, st = L.stage, P = L.portrait;
+    const c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3), c4 = s.cue(4), c5 = s.cue(5);
+    snow(ctx, L, T, 140, .6);
+    const base = st.y + st.h - (P ? 40 : 10);
+    const fall = s.at(3, '大厦');
+    const aTw = win(t, c1 - .4, .7) * (1 - win(t, c4, .5));
+    const tw = P ? [{ x: st.cx - 170, w: 220, h: 560, l: 'FTX', sd: 3 }, { x: st.cx + 170, w: 200, h: 440, l: 'Alameda', sd: 5 }] : [{ x: st.cx - 520, w: 240, h: 580, l: 'FTX', sd: 3 }, { x: st.cx - 200, w: 220, h: 460, l: 'Alameda', sd: 5 }];
+    if (aTw > 0) {
+      tw.forEach((b, i) => {
+        if (i === 1 && t < c2 - .2) return;
+        const a = (i ? win(t, s.at(2, 'Alameda') - .2, .5) : 1) * aTw;
+        const rise = 1 - win(t, i ? s.at(2, 'Alameda') - .2 : c1 - .4, .9);
+        if (t < fall) {
+          const sh = t > c1 && t < fall ? shake(t, i === 0 ? 3 : 1, i) : [0, 0];
+          tower(ctx, b.x + sh[0], base + rise * 300, b.w, b.h, b.l, { alpha: a, seed: b.sd, lit: .55 });
+          // cracks
+          const cr = win(t, c1 + .5, 1.5);
+          if (i === 0 && cr > 0) { ctx.save(); ctx.strokeStyle = `rgba(255,255,255,${.8 * cr})`; ctx.lineWidth = 3; ctx.beginPath(); let x = b.x - 10, y = base - b.h + 60; ctx.moveTo(x, y); const r = rng(4); for (let k = 0; k < 12 * cr; k++) { x += (r() - .5) * 50; y += 40; ctx.lineTo(x, y); } ctx.stroke(); ctx.restore(); }
+        } else {
+          crumble(ctx, b.x, base, b.w, b.h, b.l, t - fall - i * .25, { seed: 9 + i });
+        }
+      });
+      if (t > fall) for (let i = 0; i < 2; i++) { const d = t - fall - i * .25; if (d > 0 && d < 2.5) { ctx.save(); ctx.globalAlpha = (1 - d / 2.5) * .55; ctx.fillStyle = '#b8c4d8'; ctx.beginPath(); ctx.ellipse(tw[i].x, base, 140 + d * 200, 50 + d * 60, 0, 0, 7); ctx.fill(); ctx.restore(); } }
+    }
+    // news
+    const aN = win(t, c1 - .1, .4) * (1 - win(t, c2 + .4, .4));
+    if (aN > 0) newsBar(ctx, L, '突发', '曾经的头部加密交易所 FTX 申请破产保护（2022.11）', aN, t);
+    // SOL linked with chains to the towers
+    const aS = win(t, c2 + .2, .6) * (1 - win(t, c4, .5));
+    const sx = P ? st.cx : st.cx + 320, sy = P ? st.y + 150 : st.cy - 60;
+    if (aS > 0) {
+      const tension = t < fall ? 0 : 1;
+      tw.forEach((b, i) => {
+        ctx.save(); ctx.globalAlpha = aS * (1 - tension * win(t, fall, .4)); ctx.strokeStyle = '#8aa0c0'; ctx.lineWidth = 5; ctx.setLineDash([16, 10]); ctx.lineDashOffset = -t * 40;
+        ctx.beginPath(); ctx.moveTo(b.x, base - b.h + 30); ctx.quadraticCurveTo((b.x + sx) / 2, sy + 120, sx, sy); ctx.stroke(); ctx.restore();
+        void i;
+      });
+      const drop = t > fall ? Math.min(1, (t - fall) * .5) : 0;
+      coin(ctx, sx, sy + drop * 60, P ? 90 : 110, { label: 'SOL', c1: PURPLE, c2: GREEN, alpha: aS, spin: t * 1.4, fs: 40 });
+      text(ctx, '大量 SOL 持仓', sx, sy + (P ? 140 : 160), { size: 32, weight: 800, color: WHITE, align: 'center', alpha: aS });
+    }
+    // crash chart
+    const aC = win(t, fall + .2, .5);
+    if (aC > 0) {
+      const rect = P ? { x: st.x + 90, y: st.y + 300, w: st.w - 120, h: st.h - 380 } : { x: st.x + 120, y: st.y + 50, w: st.w - 160, h: st.h - 120 };
+      const prog = eIO(inv(fall + .2, c4 - .1, t));
+      ctx.save(); ctx.fillStyle = `rgba(4,6,14,${.55 * aC})`; ctx.fillRect(0, 0, L.W, L.H); ctx.restore();
+      drawChart(ctx, rect, { from: idx('2022-11-01'), to: idx('2022-12-30'), prog, color: RED, color2: '#ff9a3d', alpha: aC * (1 - .7 * win(t, c5, .5)), yMin: 0, yMax: 40, gridVals: [10, 20, 30, 40] });
+      // −96%
+      if (t > c4 - .1) {
+        const sh = shake(t, 10 * (1 - inv(c4, c4 + .8, t)));
+        stamp(ctx, '−96%', st.cx + sh[0], (P ? st.y + 180 : st.cy - 40) + sh[1], t, c4, { size: P ? 140 : 190, color: RED, fam: F_GR, rot: -.06 });
+        text(ctx, '$258.93 → $9.69（日收盘）', st.cx, (P ? st.y + 330 : st.cy + 140), { size: P ? 34 : 40, weight: 800, color: WHITE, align: 'center', alpha: win(t, c4 + .3, .4) * (1 - win(t, c5, .4)) });
+      }
+    }
+    // c5: "Solana is dead"
+    const aD = win(t, c5 - .1, .6);
+    if (aD > 0) {
+      ctx.save(); ctx.fillStyle = `rgba(2,3,8,${.6 * aD})`; ctx.fillRect(0, 0, L.W, L.H); ctx.restore();
+      const gx = st.cx, gy = P ? st.cy + 140 : st.cy + 120, gw = P ? 360 : 380, gh = P ? 440 : 420;
+      ctx.save(); ctx.globalAlpha = aD; ctx.translate(0, (1 - eOut(aD)) * 200);
+      ctx.fillStyle = '#4a4f62'; ctx.beginPath(); ctx.moveTo(gx - gw / 2, gy + gh / 2); ctx.lineTo(gx - gw / 2, gy - gh / 2 + gw / 2); ctx.arc(gx, gy - gh / 2 + gw / 2, gw / 2, Math.PI, 0); ctx.lineTo(gx + gw / 2, gy + gh / 2); ctx.closePath(); ctx.fill();
+      ctx.strokeStyle = '#6c7390'; ctx.lineWidth = 6; ctx.stroke();
+      text(ctx, 'R.I.P.', gx, gy - gh / 2 + 120, { size: 64, fam: F_GR, weight: 700, color: '#cfd5e6', align: 'center' });
+      text(ctx, 'SOLANA', gx, gy + 10, { size: 54, fam: F_GR, weight: 700, color: '#cfd5e6', align: 'center', ls: 6 });
+      text(ctx, '2020 – 2022 ?', gx, gy + 80, { size: 34, fam: F_MONO, weight: 600, color: '#aab1c6', align: 'center' });
+      ctx.fillStyle = '#1a1d28'; ctx.fillRect(gx - gw, gy + gh / 2 - 4, gw * 2, 30);
+      ctx.restore();
+      const hl = ['“Solana 已死”', '“归零倒计时”', '“生态大逃亡”'];
+      hl.forEach((h, i) => {
+        const a = win(t, c5 + .3 + i * .3, .4) * aD; if (a <= 0) return;
+        const x = P ? st.cx + (i - 1) * 40 : st.cx + (i - 1) * 540, y = P ? st.y + 120 + i * 120 : st.y + 60 + (i % 2) * 80;
+        text(ctx, h, x, y, { size: P ? 42 : 46, weight: 900, color: '#9aa3bb', align: 'center', alpha: a * .9 });
+      });
+    }
+  },
+  sfx(s) {
+    const fall = s.at(3, '大厦');
+    return [
+      { t: 0, k: 'wind', d: s.d }, { t: s.cue(1) - .4, k: 'rumble', d: 1.5 }, { t: s.cue(1), k: 'news', v: 1 },
+      { t: s.cue(1) + .5, k: 'crack', v: .8 }, { t: s.at(2, 'Alameda') - .2, k: 'rumble', d: 1 },
+      { t: fall, k: 'collapse', v: 1 }, { t: fall + .25, k: 'crash', v: .8 }, { t: fall + .3, k: 'drop', v: 1 },
+      { t: s.cue(4), k: 'impact', v: 1 }, { t: s.cue(5) - .1, k: 'bell', v: .7 },
+    ];
+  },
+};
+
+// ---------------------------------------------------------------- 10. REBUILD 2023
+const rebuild = {
+  draw(ctx, L, s) {
+    const { t, T } = s, st = L.stage, P = L.portrait;
+    const c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3), c4 = s.cue(4), c5 = s.cue(5);
+    // c0: embers converge into the logo
+    const a0 = 1 - win(t, c1 - .1, .5);
+    if (a0 > 0) {
+      const lx = st.cx, ly = st.cy - 30, size = P ? 380 : 360;
+      const conv = eIO(inv(.2, c1 - .6, t));
+      ctx.save(); ctx.globalCompositeOperation = 'lighter';
+      for (let k = 0; k < 260; k++) {
+        const r1 = hash1(k), r2 = hash1(k + 500), r3 = hash1(k + 900);
+        const bar = Math.floor(r3 * 3), yy = [-size * .32, 0, size * .32][bar], xx = (r1 - .5) * size * .9 + (bar === 1 ? -1 : 1) * (r2 - .5) * 20;
+        const sx = st.cx + (hash1(k + 77) - .5) * L.W * 1.1, sy = L.H + 50 - hash1(k + 33) * 300 - ((t * 120 * (.5 + r2)) % 200);
+        const x = lerp(sx, lx + xx, conv), y = lerp(sy, ly + yy, conv);
+        ctx.globalAlpha = a0 * (.4 + .6 * r2); ctx.fillStyle = r1 > .5 ? '#ffb347' : '#ff6a3d'; ctx.beginPath(); ctx.arc(x, y, 3 + r2 * 3, 0, 7); ctx.fill();
+      }
+      ctx.restore();
+      glow(ctx, lx, ly, size * 1.4, '#ff8a3d', .5 * conv * a0);
+      solLogo(ctx, lx, ly, size, conv > .9 ? 1 : 0, a0 * win(t, c1 - 1, .6));
+      // wings
+      const wa = win(t, c1 - .9, .6) * a0;
+      if (wa > 0) for (const d of [-1, 1]) {
+        ctx.save(); ctx.globalAlpha = wa * .8; ctx.translate(lx + d * size * .55, ly); ctx.scale(d, 1);
+        for (let f = 0; f < 6; f++) { const a = -.3 - f * .22 + Math.sin(T * 3) * .05; ctx.rotate(0); ctx.strokeStyle = f % 2 ? GOLD : '#ff6a3d'; ctx.lineWidth = 8 - f; ctx.beginPath(); ctx.moveTo(0, 0); ctx.quadraticCurveTo(size * .3, -size * .2 + f * 10, Math.cos(a) * size * (.7 - f * .06), Math.sin(a) * size * (.7 - f * .06)); ctx.stroke(); }
+        ctx.restore();
+      }
+    }
+    // c1: Serum → OpenBook fork
+    const aF = win(t, c1 - .1, .5) * (1 - win(t, c2 - .1, .4));
+    if (aF > 0) {
+      const y = st.cy, x0 = P ? st.x + 90 : st.cx - 600, xm = P ? st.cx - 60 : st.cx - 150, x1 = P ? st.x + st.w - 120 : st.cx + 520;
+      const p = eIO(inv(c1, c1 + 1.6, t));
+      ctx.save(); ctx.globalAlpha = aF; ctx.lineCap = 'round';
+      ctx.strokeStyle = '#7a7a90'; ctx.lineWidth = 12; ctx.beginPath(); ctx.moveTo(x0, y); ctx.lineTo(xm, y); ctx.stroke();
+      ctx.strokeStyle = 'rgba(255,90,90,.6)'; ctx.setLineDash([10, 14]); ctx.beginPath(); ctx.moveTo(xm, y); ctx.lineTo(lerp(xm, x1, p), y + (P ? 220 : 160) * p); ctx.stroke(); ctx.setLineDash([]);
+      const g = ctx.createLinearGradient(xm, 0, x1, 0); g.addColorStop(0, PURPLE); g.addColorStop(1, GREEN);
+      ctx.strokeStyle = g; ctx.beginPath(); ctx.moveTo(xm, y); ctx.bezierCurveTo(xm + 120, y, lerp(xm, x1, p) - 100, y - (P ? 220 : 160) * p, lerp(xm, x1, p), y - (P ? 220 : 160) * p); ctx.stroke();
+      ctx.restore();
+      node(ctx, x0, y, 'Serum', '#9a9ab0', aF);
+      if (p > .95) { node(ctx, x1, y - (P ? 220 : 160), 'OpenBook', GREEN, aF); text(ctx, '已停用', x1, y + (P ? 220 : 160) + 70, { size: 28, weight: 700, color: 'rgba(255,120,120,.8)', align: 'center', alpha: aF }); }
+      pill(ctx, '社区分叉 Fork', xm, y + 80, { size: 30, color: GOLD, alpha: aF });
+    }
+    // c2: BONK christmas
+    const aK = win(t, c2 - .1, .5) * (1 - win(t, c3 - .1, .4));
+    if (aK > 0) {
+      // string lights
+      ctx.save(); ctx.globalAlpha = aK;
+      for (let row = 0; row < 2; row++) {
+        const y0 = (P ? st.y + 30 : st.y - 10) + row * 60;
+        ctx.strokeStyle = '#2b4a2b'; ctx.lineWidth = 3; ctx.beginPath();
+        for (let x = 0; x <= L.W; x += 20) { const y = y0 + Math.sin(x / L.W * Math.PI * 3 + row) * 22; x ? ctx.lineTo(x, y) : ctx.moveTo(x, y); } ctx.stroke();
+        for (let k = 0; k < 18; k++) { const x = (k + .5) / 18 * L.W, y = y0 + Math.sin(x / L.W * Math.PI * 3 + row) * 22 + 10; const on = Math.sin(T * 4 + k * 1.7 + row) > 0; const col = [RED, GOLD, GREEN, TEAL][(k + row) % 4]; if (on) glow(ctx, x, y, 26, col, .9); ctx.fillStyle = col; ctx.beginPath(); ctx.arc(x, y, 7, 0, 7); ctx.fill(); }
+      }
+      ctx.restore();
+      for (let k = 0; k < 30; k++) {
+        const t0 = c2 + k * .13, d = t - t0; if (d < 0) continue;
+        const x = st.x + hash1(k * 5) * st.w, y = st.y - 60 + d * d * 500 + d * 150;
+        if (y > L.H + 60) continue;
+        coin(ctx, x, y, 38, { label: 'BONK', c1: '#ffb13b', c2: '#ff7a00', spin: d * 5 + k, alpha: aK, fs: 16 });
+      }
+      const bx = st.cx, by = st.cy;
+      glow(ctx, bx, by, 300, '#ff9f2e', .5 * aK);
+      dog(ctx, bx, by, P ? 1.1 : 1.15, aK, T);
+      text(ctx, '2022.12.25 · BONK 空投', bx, by + (P ? 230 : 220), { size: P ? 42 : 46, weight: 900, color: '#ffcf6b', align: 'center', alpha: aK, stroke: 6, strokeColor: 'rgba(0,0,0,.6)' });
+    }
+    // c3: Firedancer
+    const aD = win(t, c3 - .1, .5) * (1 - win(t, c4 - .1, .4));
+    if (aD > 0) {
+      const fx = st.cx, fy = st.cy + (P ? 140 : 160);
+      flames(ctx, fx, fy, P ? 1.25 : 1.3, T, aD);
+      const v = Math.round(1000000 * eOut(inv(s.at(3, '百万') - .6, s.at(3, '百万') + .6, t)));
+      bigNum(ctx, v.toLocaleString('en-US'), fx, fy - (P ? 380 : 360), P ? 110 : 130, { c1: GOLD, c2: '#ff5a3d', alpha: aD });
+      text(ctx, 'TPS · 测试演示', fx, fy - (P ? 290 : 270), { size: 34, weight: 800, color: WHITE, align: 'center', alpha: aD });
+      text(ctx, 'Firedancer', fx, fy + (P ? 100 : 80), { size: P ? 64 : 70, fam: F_GR, weight: 700, color: '#ffd28a', align: 'center', alpha: aD, shadow: 30, shadowColor: '#ff6a3d' });
+      text(ctx, 'Jump 团队打造的第二个验证者客户端', fx, fy + (P ? 170 : 145), { size: 30, weight: 700, color: 'rgba(255,255,255,.8)', align: 'center', alpha: aD });
+    }
+    // c4: three cards
+    const aC = win(t, c4 - .1, .4) * (1 - win(t, c5 - .1, .4));
+    if (aC > 0) {
+      const cards = [['状态压缩', '100 万个 NFT', '≈ $110', s.at(4, '状态压缩')], ['Helium', '整个网络迁入', 'Solana', s.at(4, 'Helium')], ['Saga', 'Solana 手机', '2023', s.at(4, 'Saga')]];
+      cards.forEach(([a1, a2, a3, at], i) => {
+        const a = win(t, at, .45) * aC; if (a <= 0) return;
+        let x, y, w = P ? 520 : 470, h = P ? 220 : 380;
+        if (P) { x = st.cx; y = st.y + 120 + i * 260; } else { x = st.cx + (i - 1) * 520; y = st.cy; }
+        ctx.save(); ctx.globalAlpha = a; ctx.translate(x, y + (1 - a) * 80);
+        glass(ctx, -w / 2, -h / 2, w, h, { border: '#ffa63d' });
+        if (i === 2) phone(ctx, P ? -170 : 0, P ? 0 : -60, P ? .6 : .9, t);
+        else if (i === 0) { for (let k = 0; k < 16; k++) { const gx = (k % 4 - 1.5) * (P ? 34 : 44) + (P ? -170 : 0), gy = (Math.floor(k / 4) - 1.5) * (P ? 34 : 44) + (P ? 0 : -60); ctx.fillStyle = [PURPLE, GREEN, TEAL, PINK][k % 4]; ctx.globalAlpha = a * (.5 + .5 * Math.sin(t * 3 + k)); rr(ctx, gx - 14, gy - 14, 28, 28, 6); ctx.fill(); } ctx.globalAlpha = a; }
+        else { ctx.strokeStyle = TEAL; ctx.lineWidth = 4; for (let k = 1; k <= 3; k++) { ctx.globalAlpha = a * (1 - ((t * .8 + k / 3) % 1)); ctx.beginPath(); ctx.arc(P ? -170 : 0, P ? 0 : -60, ((t * .8 + k / 3) % 1) * 80, 0, 7); ctx.stroke(); } ctx.globalAlpha = a; ctx.fillStyle = TEAL; ctx.beginPath(); ctx.arc(P ? -170 : 0, P ? 0 : -60, 14, 0, 7); ctx.fill(); }
+        const tx = P ? 60 : 0, ty0 = P ? -60 : 80;
+        text(ctx, a1, tx, ty0, { size: P ? 44 : 46, weight: 900, fam: F_SC, color: WHITE, align: 'center' });
+        text(ctx, a2, tx, ty0 + 52, { size: 30, weight: 700, color: 'rgba(255,255,255,.75)', align: 'center' });
+        gradText(ctx, a3, tx, ty0 + 108, { size: 42, fam: F_GR, weight: 700, align: 'center', c1: GOLD, c2: GREEN });
+        ctx.restore();
+      });
+    }
+    // c5: 2023 chart ×10
+    const aR = win(t, c5 - .1, .5);
+    if (aR > 0) {
+      const rect = P ? { x: st.x + 90, y: st.y + 330, w: st.w - 120, h: st.h - 400 } : { x: st.x + 120, y: st.y + 40, w: st.w - 160, h: st.h - 110 };
+      const prog = eIO(inv(c5, s.end(5) + .2, t));
+      const head = drawChart(ctx, rect, { from: idx('2023-01-01'), to: idx('2023-12-31'), prog, alpha: aR, color: '#ffb347', color2: GREEN, yMin: 0, yMax: 130, gridVals: [25, 50, 75, 100, 125] });
+      if (t > s.end(5) - .4) {
+        stamp(ctx, '×10', P ? st.cx : rect.x + rect.w * .3, P ? st.y + 170 : rect.y + rect.h * .3, t, s.end(5) - .4, { size: P ? 130 : 150, color: GREEN, fam: F_GR });
+        burst(ctx, head.x, head.y, t - s.end(5) + .4, { r: 300, seed: 12 });
+      }
+    }
+  },
+  sfx(s) {
+    return [
+      { t: .2, k: 'riser', v: .8 }, { t: s.cue(1) - .9, k: 'phoenix', v: 1 }, { t: s.cue(1) - .6, k: 'shimmer' },
+      { t: s.cue(1) + .2, k: 'whoosh', v: .6 }, { t: s.cue(1) + 1.6, k: 'pop' },
+      { t: s.cue(2), k: 'jingle', d: s.cue(3) - s.cue(2) }, { t: s.cue(2) + .2, k: 'coins', d: 2.5 }, { t: s.cue(2) + .4, k: 'bark' },
+      { t: s.cue(3) - .1, k: 'fire', d: s.cue(4) - s.cue(3) + .2 }, { t: s.at(3, '百万') + .6, k: 'impact', v: .6 },
+      { t: s.at(4, '状态压缩'), k: 'card' }, { t: s.at(4, 'Helium'), k: 'card' }, { t: s.at(4, 'Saga'), k: 'card' },
+      { t: s.cue(5), k: 'climb', d: s.end(5) - s.cue(5) }, { t: s.end(5) - .4, k: 'stamp', v: 1 },
+    ];
+  },
+};
+function node(ctx, x, y, label, col, a) {
+  glow(ctx, x, y, 90, col, .5 * a);
+  ctx.save(); ctx.globalAlpha = a; ctx.fillStyle = '#0d0b1c'; ctx.beginPath(); ctx.arc(x, y, 34, 0, 7); ctx.fill(); ctx.strokeStyle = col; ctx.lineWidth = 6; ctx.stroke(); ctx.restore();
+  text(ctx, label, x, y - 66, { size: 38, fam: F_GR, weight: 700, color: col, align: 'center', alpha: a });
+}
+function dog(ctx, x, y, s, a, T) {
+  ctx.save(); ctx.globalAlpha = a; ctx.translate(x, y); ctx.scale(s, s); ctx.rotate(Math.sin(T * 3) * .05);
+  ctx.fillStyle = '#f2a33a';
+  ctx.beginPath(); ctx.moveTo(-110, -60); ctx.lineTo(-80, -170); ctx.lineTo(-30, -100); ctx.fill();
+  ctx.beginPath(); ctx.moveTo(110, -60); ctx.lineTo(80, -170); ctx.lineTo(30, -100); ctx.fill();
+  ctx.beginPath(); ctx.ellipse(0, 0, 130, 120, 0, 0, 7); ctx.fill();
+  ctx.fillStyle = '#fff3dd'; ctx.beginPath(); ctx.ellipse(0, 50, 80, 62, 0, 0, 7); ctx.fill();
+  ctx.fillStyle = '#1a1020'; ctx.beginPath(); ctx.ellipse(-45, -20, 13, 17, 0, 0, 7); ctx.ellipse(45, -20, 13, 17, 0, 0, 7); ctx.fill();
+  ctx.beginPath(); ctx.ellipse(0, 22, 22, 15, 0, 0, 7); ctx.fill();
+  ctx.strokeStyle = '#1a1020'; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(0, 36); ctx.lineTo(0, 56); ctx.moveTo(-28, 64); ctx.quadraticCurveTo(0, 82, 28, 64); ctx.stroke();
+  // santa hat
+  ctx.fillStyle = RED; ctx.beginPath(); ctx.moveTo(-90, -95); ctx.quadraticCurveTo(10, -230, 120, -150); ctx.lineTo(70, -95); ctx.fill();
+  ctx.fillStyle = '#fff'; rr(ctx, -100, -112, 180, 34, 17); ctx.fill(); ctx.beginPath(); ctx.arc(124, -150, 20, 0, 7); ctx.fill();
+  ctx.restore();
+}
+function flames(ctx, x, y, s, T, a) {
+  ctx.save(); ctx.globalAlpha = a; ctx.translate(x, y); ctx.scale(s, s); ctx.globalCompositeOperation = 'lighter';
+  for (let k = 0; k < 26; k++) {
+    const ph = (T * (1.2 + hash1(k) * .8) + hash1(k + 3)) % 1, xo = (hash1(k + 9) - .5) * 260 * (1 - ph * .6);
+    const h = 180 + hash1(k + 4) * 160, w = 50 + hash1(k + 1) * 50;
+    const yy = -ph * h;
+    const g = ctx.createRadialGradient(xo, yy, 0, xo, yy, w);
+    g.addColorStop(0, `rgba(255,240,180,${(1 - ph) * .9})`); g.addColorStop(.4, `rgba(255,130,40,${(1 - ph) * .6})`); g.addColorStop(1, 'rgba(255,60,20,0)');
+    ctx.fillStyle = g; ctx.beginPath(); ctx.arc(xo, yy, w, 0, 7); ctx.fill();
+  }
+  ctx.restore();
+  glow(ctx, x, y - 120, 360, '#ff7a2e', .55 * a);
+}
+function phone(ctx, x, y, s, t) {
+  ctx.save(); ctx.translate(x, y); ctx.scale(s, s);
+  rr(ctx, -55, -100, 110, 200, 18); ctx.fillStyle = '#111'; ctx.fill(); ctx.strokeStyle = '#ffa63d'; ctx.lineWidth = 4; ctx.stroke();
+  rr(ctx, -46, -88, 92, 176, 10); const g = ctx.createLinearGradient(0, -88, 0, 88); g.addColorStop(0, PURPLE); g.addColorStop(1, GREEN); ctx.fillStyle = g; ctx.fill();
+  solLogo(ctx, 0, 0, 56, 1, .9 + .1 * Math.sin(t * 3));
+  ctx.restore();
+}
+
+// ---------------------------------------------------------------- 11. MEME 2024
+const MEMES = [['WIF', '#e8b98a', 'hat'], ['BONK', '#f2a33a', 'dog'], ['POPCAT', '#d9d0c4', 'cat']];
+const meme = {
+  draw(ctx, L, s) {
+    const { t, T } = s, st = L.stage, P = L.portrait;
+    const c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3), c4 = s.cue(4);
+    // confetti
+    ctx.save();
+    for (let k = 0; k < 90; k++) {
+      const x = (hash1(k) * L.W + Math.sin(T + k) * 30), y = ((hash1(k + 4) * L.H + T * (80 + hash1(k + 2) * 120)) % (L.H + 40)) - 20;
+      ctx.save(); ctx.translate(x, y); ctx.rotate(T * 3 + k); ctx.fillStyle = [PURPLE, GREEN, GOLD, PINK, TEAL][k % 5]; ctx.globalAlpha = .55; ctx.fillRect(-7, -3, 14, 6); ctx.restore();
+    }
+    ctx.restore();
+    // c0: title
+    const a0 = win(t, .2, .5, eBack) * (1 - win(t, c1 - .1, .4));
+    if (a0 > 0) {
+      ctx.save(); ctx.translate(st.cx, st.cy); ctx.rotate(Math.sin(T * 4) * .03); ctx.scale(a0, a0);
+      gradText(ctx, 'MEME', 0, -40, { size: P ? 200 : 240, fam: F_GR, weight: 700, align: 'center', c1: PINK, c2: GOLD, ls: 10 });
+      text(ctx, '主 场', 0, P ? 110 : 130, { size: P ? 80 : 90, weight: 900, color: WHITE, align: 'center', ls: 20 });
+      ctx.restore();
+    }
+    // c1: Jupiter airdrop parachutes
+    const aJ = win(t, c1 - .1, .4) * (1 - win(t, c2 - .1, .4));
+    if (aJ > 0) {
+      for (let k = 0; k < 9; k++) {
+        const t0 = c1 + k * .25, d = t - t0; if (d < 0) continue;
+        const x = st.x + (k + .5) / 9 * st.w + Math.sin(T * 1.5 + k) * 20, y = st.y - 80 + d * 140;
+        ctx.save(); ctx.globalAlpha = aJ;
+        ctx.fillStyle = k % 2 ? GREEN : TEAL; ctx.beginPath(); ctx.arc(x, y - 90, 60, Math.PI, 0); ctx.fill();
+        ctx.strokeStyle = 'rgba(255,255,255,.6)'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(x - 60, y - 90); ctx.lineTo(x, y - 20); ctx.lineTo(x + 60, y - 90); ctx.moveTo(x, y - 150); ctx.lineTo(x, y - 20); ctx.stroke();
+        ctx.restore();
+        coin(ctx, x, y, 30, { label: 'JUP', c1: '#2fd1a5', c2: '#c7f284', alpha: aJ, spin: T * 2 + k, fs: 15 });
+      }
+      const n = Math.round(955000 * eOut(inv(c1, s.end(1), t)) / 1000) * 1000;
+      ctx.save(); ctx.globalAlpha = aJ;
+      glass(ctx, st.cx - (P ? 400 : 420), st.cy + (P ? 120 : 80), P ? 800 : 840, 200, {});
+      ctx.restore();
+      text(ctx, 'Jupiter 空投 · 2024.01', st.cx, st.cy + (P ? 165 : 125), { size: 36, weight: 800, color: GREEN, align: 'center', alpha: aJ });
+      bigNum(ctx, '≈ ' + n.toLocaleString('en-US') + ' 个地址', st.cx, st.cy + (P ? 245 : 205), P ? 58 : 64, { alpha: aJ, fam: F_SC, weight: 900 });
+    }
+    // c2: pump.fun coin machine
+    const aP = win(t, c2 - .1, .4) * (1 - win(t, c3 - .1, .4));
+    if (aP > 0) {
+      const mx = P ? st.cx - 200 : st.cx - 420, my = st.cy;
+      ctx.save(); ctx.globalAlpha = aP;
+      rr(ctx, mx - 130, my - 170, 260, 340, 30); const g = ctx.createLinearGradient(mx - 130, 0, mx + 130, 0); g.addColorStop(0, '#2a1f5a'); g.addColorStop(1, '#4a2f8a'); ctx.fillStyle = g; ctx.fill(); ctx.strokeStyle = GREEN; ctx.lineWidth = 5; ctx.stroke();
+      rr(ctx, mx - 90, my - 130, 180, 110, 16); ctx.fillStyle = '#0a1a14'; ctx.fill();
+      text(ctx, 'pump.fun', mx, my - 76, { size: 34, fam: F_GR, weight: 700, color: GREEN, align: 'center' });
+      ctx.fillStyle = RED; ctx.beginPath(); ctx.arc(mx, my + 50, 40 + 4 * Math.sin(t * 10), 0, 7); ctx.fill();
+      text(ctx, '发币', mx, my + 52, { size: 26, weight: 900, color: '#fff', align: 'center' });
+      ctx.restore();
+      const per = .22, n0 = Math.floor((t - c2) / per);
+      for (let k = Math.max(0, n0 - 14); k <= n0; k++) {
+        const d = t - (c2 + k * per); if (d < 0) continue;
+        const x = mx + 150 + d * (P ? 260 : 520), y = my + 120 + Math.sin(d * 3 + k) * 20 - d * 60 * (hash1(k) - .3);
+        if (x > L.W + 50) continue;
+        coin(ctx, x, y, 32, { label: hexStr(k, 3).toUpperCase(), c1: [PINK, GOLD, TEAL, GREEN][k % 4], c2: PURPLE, alpha: aP, spin: d * 4, fs: 16 });
+      }
+      const cnt = Math.max(0, n0) * 137 + 1;
+      text(ctx, `新币 +${cnt.toLocaleString()}`, P ? st.cx : st.cx + 280, P ? st.y + 120 : st.cy - 200, { size: P ? 56 : 64, fam: F_SC, weight: 900, color: GOLD, align: 'center', alpha: aP, stroke: 6, strokeColor: 'rgba(0,0,0,.6)' });
+      text(ctx, '几秒钟，发一个币（示意）', P ? st.cx : st.cx + 280, P ? st.y + 190 : st.cy - 130, { size: 30, weight: 700, color: 'rgba(255,255,255,.75)', align: 'center', alpha: aP });
+    }
+    // c3: meme faces
+    const aM = win(t, c3 - .1, .4) * (1 - win(t, c4 - .1, .4));
+    if (aM > 0) {
+      MEMES.forEach(([nm, col, kind], i) => {
+        const a = win(t, s.at(3, nm), .4, eBack) * aM; if (a <= 0) return;
+        const x = P ? st.cx + (i === 1 ? 160 : -100) : st.cx + (i - 1) * 520, y = P ? st.y + 160 + i * 270 : st.cy - 40;
+        const r = P ? 120 : 150, bob = Math.sin(T * 3 + i) * 12;
+        ctx.save(); ctx.translate(x, y + bob); ctx.scale(a, a); ctx.globalAlpha = clamp(a);
+        glow(ctx, 0, 0, r * 1.8, col, .45);
+        face(ctx, 0, 0, r, col, kind, T);
+        ctx.restore();
+        text(ctx, '$' + nm, x + (P ? (i === 1 ? -190 : 190) : 0), y + bob + (P ? 0 : r + 50), { size: P ? 50 : 54, fam: F_GR, weight: 700, color: WHITE, align: 'center', alpha: clamp(a), stroke: 6, strokeColor: 'rgba(0,0,0,.6)' });
+      });
+      const aa = win(t, s.at(3, '数十亿'), .4) * aM;
+      gradText(ctx, '市值 数十亿美元', st.cx, P ? st.y + st.h - 20 : st.y + st.h - 50, { size: P ? 60 : 66, align: 'center', alpha: aa, c1: GOLD, c2: GREEN });
+    }
+    // c4: DEX volume race (illustrative)
+    const aV = win(t, c4 - .1, .4);
+    if (aV > 0) {
+      const p = inv(c4, s.end(4) + .3, t);
+      const sol = .45 + .5 * eIO(p), eth = .7 + .05 * Math.sin(p * 6);
+      const bars = [['Solana DEX', sol, GREEN], ['Ethereum DEX', eth, '#8c9cff']];
+      const bx = P ? st.x + 30 : st.cx - 640, bwMax = P ? st.w - 60 : 1280, by = st.cy - 80;
+      bars.forEach(([nm, v, col], i) => {
+        const y = by + i * 150;
+        ctx.save(); ctx.globalAlpha = aV;
+        text(ctx, nm, bx, y - 50, { size: 36, fam: F_GR, weight: 700, color: col });
+        rr(ctx, bx, y - 22, bwMax, 56, 28); ctx.fillStyle = 'rgba(255,255,255,.06)'; ctx.fill();
+        rr(ctx, bx, y - 22, bwMax * v, 56, 28); ctx.fillStyle = col; ctx.fill();
+        ctx.restore();
+        if (i === 0) glow(ctx, bx + bwMax * v, y + 6, 90, GREEN, .6 * aV);
+      });
+      if (sol > eth) stamp(ctx, '反超！', P ? st.cx : st.cx + 420, by - 170, t, c4 + (s.end(4) + .3 - c4) * .62, { size: P ? 70 : 80, color: GREEN, rot: -.1 });
+      text(ctx, '交易量对比 · 示意', st.cx, by + 260, { size: 26, weight: 700, color: 'rgba(255,255,255,.5)', align: 'center', alpha: aV });
+    }
+  },
+  sfx(s) {
+    const ev = [{ t: .2, k: 'party', v: 1 }, { t: s.cue(1), k: 'whoosh', v: .5 }];
+    for (let k = 0; k < 9; k++) ev.push({ t: s.cue(1) + k * .25, k: 'coin', v: .45, p: k });
+    ev.push({ t: s.cue(2), k: 'machine', d: s.cue(3) - s.cue(2) });
+    MEMES.forEach(([nm]) => ev.push({ t: s.at(3, nm), k: 'boing' }));
+    ev.push({ t: s.cue(4), k: 'climb', d: s.end(4) - s.cue(4) }, { t: s.cue(4) + (s.end(4) + .3 - s.cue(4)) * .62, k: 'stamp', v: 1 });
+    return ev;
+  },
+};
+function face(ctx, x, y, r, col, kind, T) {
+  ctx.fillStyle = col; ctx.beginPath(); ctx.arc(x, y, r, 0, 7); ctx.fill();
+  if (kind === 'cat') { ctx.beginPath(); ctx.moveTo(x - r * .9, y - r * .3); ctx.lineTo(x - r * .7, y - r * 1.1); ctx.lineTo(x - r * .25, y - r * .85); ctx.moveTo(x + r * .9, y - r * .3); ctx.lineTo(x + r * .7, y - r * 1.1); ctx.lineTo(x + r * .25, y - r * .85); ctx.fill(); }
+  else { ctx.beginPath(); ctx.ellipse(x - r * .85, y - r * .2, r * .25, r * .5, .3, 0, 7); ctx.ellipse(x + r * .85, y - r * .2, r * .25, r * .5, -.3, 0, 7); ctx.fill(); }
+  ctx.fillStyle = '#1a1020'; ctx.beginPath(); ctx.arc(x - r * .35, y - r * .15, r * .1, 0, 7); ctx.arc(x + r * .35, y - r * .15, r * .1, 0, 7); ctx.fill();
+  if (kind === 'cat') { const o = (Math.sin(T * 8) > 0) ? 1 : .2; ctx.beginPath(); ctx.ellipse(x, y + r * .35, r * .22, r * .3 * o + r * .04, 0, 0, 7); ctx.fill(); }
+  else { ctx.beginPath(); ctx.ellipse(x, y + r * .12, r * .15, r * .1, 0, 0, 7); ctx.fill(); ctx.strokeStyle = '#1a1020'; ctx.lineWidth = r * .05; ctx.beginPath(); ctx.arc(x, y + r * .3, r * .25, .2, Math.PI - .2); ctx.stroke(); }
+  if (kind === 'hat') { ctx.fillStyle = '#ff9fc8'; ctx.beginPath(); ctx.ellipse(x, y - r * .78, r * .62, r * .28, 0, 0, 7); ctx.fill(); ctx.beginPath(); ctx.ellipse(x, y - r * .7, r * .9, r * .14, 0, 0, 7); ctx.fill(); }
+  if (kind === 'dog') { ctx.fillStyle = '#fff3dd'; ctx.beginPath(); ctx.ellipse(x, y + r * .4, r * .5, r * .35, 0, 0, 7); ctx.globalAlpha *= .6; ctx.fill(); ctx.globalAlpha /= .6; }
+}
+
+// ---------------------------------------------------------------- 12. ATH 2025
+const ath = {
+  draw(ctx, L, s) {
+    const { t, T } = s, st = L.stage, P = L.portrait;
+    const c1 = s.cue(1), c2 = s.cue(2);
+    const rect = P ? { x: st.x + 90, y: st.y + 360, w: st.w - 120, h: st.h - 420 } : { x: st.x + 120, y: st.y + 40, w: st.w - 160, h: st.h - 100 };
+    const prog = eIO(inv(.3, c1 + .4, t));
+    const dim = 1 - .55 * win(t, c1 + .4, .5);
+    const head = drawChart(ctx, rect, { from: idx('2024-01-01'), to: idx('2025-01-19'), prog, alpha: win(t, 0, .5) * dim, yMin: 50, yMax: 290, gridVals: [100, 150, 200, 250] });
+    // fireworks
+    if (t > c1 + .3) {
+      for (let k = 0; k < 14; k++) {
+        const t0 = c1 + .3 + k * .42, d = t - t0; if (d < 0) continue;
+        const x = st.x + hash1(k * 7) * st.w, y = st.y + 60 + hash1(k * 9) * st.h * .55;
+        const up = inv(0, .35, d); if (up < 1) { ctx.save(); ctx.fillStyle = GOLD; ctx.globalAlpha = .8; ctx.beginPath(); ctx.arc(x, L.H - (L.H - y) * eOut(up), 4, 0, 7); ctx.fill(); ctx.restore(); continue; }
+        burst(ctx, x, y, d - .35, { r: 200 + hash1(k) * 140, n: 44, seed: k + 20, color: [GREEN, PINK, GOLD, TEAL][k % 4], dur: 1.5, size: 5 });
+      }
+    }
+    const aN = win(t, c1 + .4, .5, eBack);
+    if (aN > 0) {
+      const v = 262.09 * eOut(inv(c1 + .4, c1 + 1.6, t));
+      const y = P ? st.y + 160 : st.cy - 60;
+      glow(ctx, st.cx, y, 520, GREEN, .45 * clamp(aN));
+      ctx.save(); ctx.translate(st.cx, y); ctx.scale(clamp(aN, 0, 1.2), clamp(aN, 0, 1.2));
+      bigNum(ctx, '$' + v.toFixed(2), 0, 0, P ? 170 : 220, { c1: '#b3ffdf', c2: GREEN });
+      ctx.restore();
+      pill(ctx, 'ATH · 2025.01.19 日收盘', st.cx, y + (P ? 120 : 150), { size: P ? 32 : 36, alpha: clamp(aN), color: GOLD });
+    }
+    const a2 = win(t, c2, .5);
+    if (a2 > 0) {
+      const y = P ? st.y + st.h - 20 : st.cy + 250;
+      text(ctx, '$0.74', st.cx - (P ? 230 : 300), y, { size: P ? 60 : 70, fam: F_GR, weight: 700, color: 'rgba(255,255,255,.75)', align: 'center', alpha: a2 });
+      text(ctx, '→', st.cx - (P ? 90 : 120), y, { size: 60, fam: F_GR, weight: 700, color: WHITE, align: 'center', alpha: a2 });
+      text(ctx, '$262', st.cx + (P ? 30 : 40), y, { size: P ? 60 : 70, fam: F_GR, weight: 700, color: GREEN, align: 'center', alpha: a2 });
+      stamp(ctx, '×350', st.cx + (P ? 230 : 330), y - 10, t, c2 + .4, { size: P ? 70 : 84, color: GOLD, fam: F_GR, rot: -.1 });
+      text(ctx, '2020.04.10 首个日线收盘 → 2025.01.19', st.cx, y + (P ? 70 : 80), { size: 26, weight: 600, color: 'rgba(255,255,255,.55)', align: 'center', alpha: a2 });
+    }
+    void head;
+  },
+  sfx(s) {
+    const ev = [{ t: .3, k: 'climb', d: s.cue(1) + .1 }, { t: s.cue(1) + .4, k: 'impact', v: 1 }, { t: s.cue(1) + .45, k: 'cheer', d: 4 }];
+    for (let k = 0; k < 14; k++) ev.push({ t: s.cue(1) + .3 + k * .42 + .35, k: 'firework', v: .55, p: k });
+    ev.push({ t: s.cue(2) + .4, k: 'stamp', v: .9 });
+    return ev;
+  },
+};
+
+// ---------------------------------------------------------------- 13. WALL ST 2025
+const wall = {
+  draw(ctx, L, s) {
+    const { t, T } = s, st = L.stage, P = L.portrait;
+    const c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3);
+    const out = win(t, c3 - .2, .6);
+    // exchange facade
+    const aF = win(t, 0, .8) * (1 - out);
+    if (aF > 0) {
+      const fx = st.cx, fb = st.y + st.h - (P ? 30 : 10), fw = P ? 760 : 980, fh = P ? 520 : 560;
+      ctx.save(); ctx.globalAlpha = aF;
+      ctx.fillStyle = '#1c2236'; ctx.beginPath(); ctx.moveTo(fx - fw / 2 - 30, fb - fh + 110); ctx.lineTo(fx, fb - fh); ctx.lineTo(fx + fw / 2 + 30, fb - fh + 110); ctx.closePath(); ctx.fill();
+      ctx.strokeStyle = hexA(GOLD, .7); ctx.lineWidth = 4; ctx.stroke();
+      ctx.fillStyle = '#232a42'; ctx.fillRect(fx - fw / 2 - 20, fb - fh + 110, fw + 40, 40);
+      text(ctx, 'WALL  STREET', fx, fb - fh + 131, { size: 28, fam: F_GR, weight: 700, color: GOLD, align: 'center', ls: 8 });
+      const n = P ? 6 : 8;
+      for (let i = 0; i < n; i++) { const x = fx - fw / 2 + (i + .5) * fw / n; const g = ctx.createLinearGradient(x - 22, 0, x + 22, 0); g.addColorStop(0, '#2e3654'); g.addColorStop(.5, '#59628a'); g.addColorStop(1, '#2e3654'); ctx.fillStyle = g; ctx.fillRect(x - 22, fb - fh + 150, 44, fh - 190); }
+      ctx.fillStyle = '#1c2236'; ctx.fillRect(fx - fw / 2 - 40, fb - 40, fw + 80, 40);
+      ctx.restore();
+      // door light (c2)
+      const dl = win(t, s.at(2, '大门') - .3, .8);
+      if (dl > 0) { ctx.save(); ctx.globalCompositeOperation = 'lighter'; const g = ctx.createLinearGradient(0, fb - 260, 0, L.H); g.addColorStop(0, hexA(GREEN, .55 * dl)); g.addColorStop(1, hexA(PURPLE, 0)); ctx.fillStyle = g; ctx.beginPath(); ctx.moveTo(fx - 50, fb - 220); ctx.lineTo(fx + 50, fb - 220); ctx.lineTo(fx + 300 * dl, L.H); ctx.lineTo(fx - 300 * dl, L.H); ctx.fill(); ctx.restore(); glow(ctx, fx, fb - 160, 200, GREEN, dl * .7); }
+    }
+    // c1: balance sheet
+    const aB = win(t, c1 - .1, .5) * (1 - win(t, c2 - .1, .4));
+    if (aB > 0) {
+      const w = P ? 640 : 620, h = 420, x = st.cx - w / 2, y = st.cy - h / 2 - (P ? 40 : 30);
+      ctx.save(); ctx.globalAlpha = aB; ctx.translate(0, (1 - aB) * 60);
+      rr(ctx, x, y, w, h, 18); ctx.fillStyle = '#f5f2ea'; ctx.fill();
+      text(ctx, '资产负债表 · 资产', x + 40, y + 50, { size: 36, weight: 900, color: '#1a1030' });
+      ctx.fillStyle = '#c9c2b0'; ctx.fillRect(x + 40, y + 84, w - 80, 3);
+      const rows = [['现金及等价物', '$ ███'], ['短期投资', '$ ███'], ['数字资产 · SOL', '◎ ████']];
+      rows.forEach(([a, b], i) => {
+        const ra = i < 2 ? 1 : win(t, s.at(1, 'SOL'), .4);
+        const yy = y + 140 + i * 80;
+        if (i === 2 && ra > 0) { ctx.globalAlpha = aB * ra; rr(ctx, x + 24, yy - 34, w - 48, 68, 12); ctx.fillStyle = hexA(GREEN, .25); ctx.fill(); }
+        text(ctx, a, x + 40, yy, { size: 32, weight: 700, color: '#2a2040', alpha: ra });
+        text(ctx, b, x + w - 40, yy, { size: 32, fam: F_MONO, weight: 700, color: i === 2 ? '#0a7a50' : '#2a2040', align: 'right', alpha: ra });
+        ctx.globalAlpha = aB;
+      });
+      ctx.restore();
+      stamp(ctx, '上市公司', st.cx + (P ? 180 : 260), st.cy - h / 2 - (P ? 40 : 20), t, c1 + .5, { size: 54, color: PURPLE, rot: .12 });
+    }
+    // c2: ETF board
+    const aE = win(t, c2 - .1, .5) * (1 - out);
+    if (aE > 0) {
+      const y = P ? st.y + 120 : st.y + 70, w = P ? 780 : 1000;
+      ctx.save(); ctx.globalAlpha = aE;
+      rr(ctx, st.cx - w / 2, y - 70, w, 140, 16); ctx.fillStyle = '#05070c'; ctx.fill(); ctx.strokeStyle = GOLD; ctx.lineWidth = 4; ctx.stroke();
+      ctx.restore();
+      const msg = '现货 SOLANA ETF';
+      const flip = inv(c2, c2 + 1.2, t);
+      const shown = Array.from(msg).map((ch, i) => (flip * (msg.length + 4) - i > 1 ? ch : '▒')).join('');
+      text(ctx, shown, st.cx, y + 2, { size: P ? 64 : 76, weight: 900, color: GOLD, align: 'center', alpha: aE, ls: 4, shadow: 20, shadowColor: GOLD });
+      pill(ctx, '2025 年 10 月底 · 美国首批上市交易', st.cx, y + 115, { size: 28, alpha: win(t, c2 + 1, .4) * aE, color: GREEN });
+    }
+    // c3: Alpenglow
+    const aA = win(t, c3 - .1, .7);
+    if (aA > 0) {
+      const base = st.y + st.h + (P ? -60 : 40);
+      ctx.save(); ctx.globalAlpha = aA;
+      const sky = ctx.createLinearGradient(0, 0, 0, L.H); sky.addColorStop(0, 'rgba(30,10,50,.85)'); sky.addColorStop(1, 'rgba(255,110,140,.45)'); ctx.fillStyle = sky; ctx.fillRect(0, 0, L.W, L.H);
+      for (let layer = 0; layer < 3; layer++) {
+        ctx.beginPath(); ctx.moveTo(0, L.H);
+        const r = rng(30 + layer), peaks = 7 + layer * 2;
+        let x = -60; ctx.lineTo(x, base - 100);
+        for (let i = 0; i <= peaks; i++) { x = (i + .5) / peaks * (L.W + 120) - 60; const h = (360 - layer * 90) * (.5 + r() * .7); ctx.lineTo(x - 50, base - h * .55); ctx.lineTo(x, base - h); }
+        ctx.lineTo(L.W + 60, base - 80); ctx.lineTo(L.W, L.H); ctx.closePath();
+        const g = ctx.createLinearGradient(0, base - 400, 0, base); g.addColorStop(0, ['#ff7aa8', '#c04a8a', '#3a1a4a'][layer]); g.addColorStop(1, ['#4a1a5a', '#2a0f3a', '#120618'][layer]);
+        ctx.fillStyle = g; ctx.fill();
+      }
+      ctx.restore();
+      glow(ctx, L.W * .7, base - 400, 500, '#ff7aa8', .4 * aA);
+      const ty = P ? st.y + 110 : st.y + 60;
+      gradText(ctx, 'Alpenglow', st.cx, ty, { size: P ? 100 : 120, fam: F_GR, weight: 700, align: 'center', alpha: aA, c1: '#ffd1e0', c2: GREEN });
+      text(ctx, '新共识 · 2025 年获验证者投票通过', st.cx, ty + (P ? 80 : 90), { size: P ? 34 : 38, weight: 800, color: WHITE, align: 'center', alpha: aA });
+      // finality bars
+      const p = eIO(inv(s.at(3, '目标'), s.end(3), t));
+      const bx = P ? st.x + 30 : st.cx - 600, bw = P ? st.w - 60 : 1200, by = ty + (P ? 250 : 230);
+      const rows = [['当前最终确认 ≈ 12.8 秒', 1, '#c0c6dc'], ['Alpenglow 目标 ≈ 150 毫秒', lerp(1, .012, p), GREEN]];
+      rows.forEach(([lab, v, col], i) => {
+        const y = by + i * 130;
+        ctx.save(); ctx.globalAlpha = aA * win(t, c3 + .5 + i * .4, .4);
+        text(ctx, lab, bx, y - 40, { size: P ? 32 : 34, weight: 800, color: col });
+        rr(ctx, bx, y - 12, Math.max(14, bw * v), 40, 20); ctx.fillStyle = col; ctx.fill();
+        ctx.restore();
+      });
+      if (p > .9) { glow(ctx, bx + 14, by + 138, 80, GREEN, .8 * aA); text(ctx, '≈ 85× 更快', bx + 60, by + 138, { size: 34, weight: 900, color: GREEN, alpha: win(t, s.end(3) - .3, .4) }); }
+    }
+    void T;
+  },
+  sfx(s) {
+    return [
+      { t: 0, k: 'bell', v: .5 }, { t: s.cue(1), k: 'paper' }, { t: s.at(1, 'SOL'), k: 'pop' }, { t: s.cue(1) + .5, k: 'stamp', v: .8 },
+      { t: s.cue(2), k: 'flipboard', d: 1.2 }, { t: s.at(2, '大门') - .3, k: 'bell', v: 1 }, { t: s.at(2, '大门'), k: 'shimmer' },
+      { t: s.cue(3) - .1, k: 'riser', v: .5 }, { t: s.at(3, '目标'), k: 'zip', d: s.end(3) - s.at(3, '目标') }, { t: s.end(3), k: 'chime' },
+    ];
+  },
+};
+
+// ---------------------------------------------------------------- 14. NOW — the whole ride
+const MARKS = [['2020-04-10', '起点'], ['2021-11-07', '2021 高点'], ['2022-12-30', 'FTX 后低点'], ['2023-12-31', '重回 $100'], ['2025-01-19', '历史新高'], [null, '今天']];
+const now = {
+  draw(ctx, L, s) {
+    const { t } = s, st = L.stage, P = L.portrait;
+    const c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3);
+    const rect = P ? { x: st.x + 90, y: st.y + 160, w: st.w - 130, h: st.h - 260 } : { x: st.x + 120, y: st.y + 40, w: st.w - 200, h: st.h - 110 };
+    const prog = eIO(inv(.3, s.end(1) + .2, t));
+    const head = drawChart(ctx, rect, { from: 0, to: LAST, prog, log: true, yMin: .4, yMax: 420, gridVals: [1, 10, 100], headLabel: t > s.end(1), lw: 5 });
+    // milestone markers
+    MARKS.forEach(([d, lab], i) => {
+      const di = d ? idx(d) : LAST;
+      if (head.i < di) return;
+      const x = head.X(di), y = head.Y(price(di));
+      const a = win(t, .3 + (s.end(1) - .1) * (di / LAST), .35, eBack) * (1 - .5 * win(t, c2, .5));
+      const up = i % 2 === 0 ? -1 : 1, off = (P ? 70 : 80) * (i === 2 ? 1 : up === -1 ? -1 : -1);
+      glow(ctx, x, y, 40, GOLD, .7 * clamp(a));
+      ctx.save(); ctx.globalAlpha = clamp(a); ctx.fillStyle = GOLD; ctx.beginPath(); ctx.arc(x, y, 8, 0, 7); ctx.fill(); ctx.restore();
+      if (i === 5) return;
+      const yy = y + off - (i === 4 ? 30 : 0);
+      text(ctx, fmtUSD(price(di)), x, yy - 14, { size: P ? 24 : 28, fam: F_MONO, weight: 800, color: WHITE, align: 'center', alpha: clamp(a), stroke: 5, strokeColor: 'rgba(0,0,0,.7)' });
+      text(ctx, lab, x, yy + 16, { size: P ? 20 : 22, weight: 700, color: GOLD, align: 'center', alpha: clamp(a), stroke: 4, strokeColor: 'rgba(0,0,0,.7)' });
+    });
+    // rollercoaster cart riding the head
+    if (prog > 0 && prog < 1) {
+      const ang = Math.atan(head.slope);
+      ctx.save(); ctx.translate(head.x, head.y); ctx.rotate(ang); ctx.translate(0, -26);
+      rr(ctx, -34, -18, 68, 30, 8); ctx.fillStyle = PINK; ctx.fill(); ctx.strokeStyle = '#fff'; ctx.lineWidth = 3; ctx.stroke();
+      ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(-18, 14, 7, 0, 7); ctx.arc(18, 14, 7, 0, 7); ctx.fill();
+      ctx.fillStyle = '#1a1030'; ctx.beginPath(); ctx.arc(-8, -26, 9, 0, 7); ctx.arc(12, -26, 9, 0, 7); ctx.fill();
+      ctx.restore();
+    }
+    // c2: 2026 range band
+    const aR = win(t, c2, .5);
+    if (aR > 0) {
+      const x0 = head.X(idx('2026-01-01')), x1 = head.X(LAST), y0 = head.Y(146.51), y1 = head.Y(62.18);
+      ctx.save(); ctx.globalAlpha = aR;
+      ctx.fillStyle = hexA(TEAL, .16); ctx.fillRect(x0, y0, x1 - x0 + 10, y1 - y0);
+      ctx.strokeStyle = TEAL; ctx.setLineDash([8, 6]); ctx.lineWidth = 2; ctx.strokeRect(x0, y0, x1 - x0 + 10, y1 - y0); ctx.setLineDash([]);
+      ctx.restore();
+      text(ctx, '2026 震荡区间 $62 – $147', x0 - 16, y1 + 34, { size: P ? 24 : 28, weight: 800, color: TEAL, align: 'right', alpha: aR, stroke: 5, strokeColor: 'rgba(0,0,0,.7)' });
+    }
+    const aN = win(t, c3, .5);
+    if (aN > 0) {
+      const y = P ? st.y + 40 : st.y + 10;
+      ctx.save(); ctx.globalAlpha = aN; glass(ctx, st.cx - (P ? 360 : 380), y - 50, P ? 720 : 760, 100, {}); ctx.restore();
+      text(ctx, 'SOL ≈ $117 · 2026.10.07', st.cx, y + 2, { size: P ? 46 : 52, fam: F_GR, weight: 700, color: WHITE, align: 'center', alpha: aN });
+    }
+    text(ctx, '数据：Surf · SOL/USD 日收盘价（对数坐标）', rect.x + rect.w, rect.y + rect.h + (P ? 60 : 56), { size: 20, weight: 500, color: 'rgba(255,255,255,.45)', align: 'right', alpha: win(t, .3, .5) });
+  },
+  sfx(s) {
+    const ev = [{ t: .3, k: 'coaster', d: s.end(1) - .1 }];
+    MARKS.forEach(([d]) => { const di = d ? idx(d) : LAST; ev.push({ t: .3 + (s.end(1) - .1) * (di / LAST), k: 'blip', v: .6, p: 3 }); });
+    ev.push({ t: s.cue(2), k: 'whoosh', v: .4 }, { t: s.cue(3), k: 'chime' });
+    return ev;
+  },
+};
+
+// ---------------------------------------------------------------- 15. OUTRO
+const outro = {
+  draw(ctx, L, s) {
+    const { t, T } = s, st = L.stage, P = L.portrait;
+    const c1 = s.cue(1), c2 = s.cue(2), c3 = s.cue(3), c4 = s.cue(4);
+    const cx = st.cx, cy = P ? st.cy - 120 : st.cy - 20;
+    const R = P ? 330 : 300;
+    const aC = win(t, 0, 1) * (1 - .65 * win(t, c2 - .2, .5) * (1 - win(t, c3, .6)));
+    // chain ring of hashes around the clock
+    const beads = 36;
+    ctx.save(); ctx.globalAlpha = aC;
+    for (let i = 0; i < beads; i++) {
+      const lit = (t / .4) % beads;
+      const a = (i / beads) * Math.PI * 2 - Math.PI / 2 + t * .05;
+      const x = cx + Math.cos(a) * R * 1.18, y = cy + Math.sin(a) * R * 1.18;
+      const on = ((lit - i + beads) % beads) < 8;
+      ctx.fillStyle = on ? GREEN : hexA(PURPLE, .5); ctx.beginPath(); ctx.arc(x, y, on ? 9 : 6, 0, 7); ctx.fill();
+      if (on) glow(ctx, x, y, 26, GREEN, .5);
+    }
+    ctx.restore();
+    dial(ctx, cx, cy, R, { alpha: aC, hand: Math.floor(t / .4) / 60, minute: t / 600, lw: 4 });
+    glow(ctx, cx, cy, R * 1.3, PURPLE, .35 * aC);
+    solLogo(ctx, cx, cy, R * .8, eOut(inv(.2, 1.6, t)), aC);
+    // c0/c1 quote lines
+    const q = [['第一个发明', '证明时间', 0, .1], ['被嘲笑 · 宕机 · 被判死刑', '又一次次站起来', 1, .1]];
+    q.forEach(([a1, a2, li]) => {
+      const a = win(t, s.cue(li) + .1, .5) * (1 - win(t, s.end(li) + .1, .3));
+      if (a <= 0) return;
+      const y = P ? cy + R + 200 : cy + R + 50;
+      text(ctx, a1, cx, y - 30, { size: P ? 40 : 38, weight: 700, color: 'rgba(255,255,255,.8)', align: 'center', alpha: a });
+      gradText(ctx, a2, cx, y + 36, { size: P ? 64 : 58, align: 'center', alpha: a });
+    });
+    // c2: the line
+    const aT = win(t, c2 - .1, .6) * (1 - win(t, c3 + .2, .5));
+    if (aT > 0) {
+      ctx.save(); ctx.fillStyle = `rgba(3,2,10,${.5 * aT})`; ctx.fillRect(0, 0, L.W, L.H); ctx.restore();
+      const y1 = P ? st.cy - 160 : st.cy - 90, y2 = P ? st.cy + 60 : st.cy + 90;
+      glowText(ctx, '速度，可以靠工程；', cx, y1, { size: P ? 80 : 104, weight: 900, color: WHITE, align: 'center', alpha: win(t, c2, .5), glowColor: PURPLE });
+      const a2 = win(t, s.at(2, '信任'), .5);
+      glow(ctx, cx, y2, 500, GREEN, .35 * a2 * aT);
+      gradText(ctx, '信任，只能靠时间。', cx, y2, { size: P ? 92 : 120, align: 'center', alpha: a2 * aT, c1: GOLD, c2: GREEN });
+    }
+    // c3: chain keeps writing
+    const a3 = win(t, c3, .5);
+    if (a3 > 0) {
+      const y = P ? cy + R + 170 : cy + R + 50;
+      const slot = Math.floor((T) / .4) + 420000000;
+      text(ctx, 'SLOT ' + slot.toLocaleString('en-US'), cx, y, { size: P ? 50 : 54, fam: F_MONO, weight: 800, color: GREEN, align: 'center', alpha: a3 * (1 - win(t, c4 - .2, .4)), shadow: 20, shadowColor: GREEN });
+      text(ctx, '每 400 毫秒 · 新的一页', cx, y + 64, { size: 34, weight: 700, color: 'rgba(255,255,255,.75)', align: 'center', alpha: a3 * (1 - win(t, c4 - .2, .4)) });
+    }
+    // c4: CTA
+    const a4 = win(t, c4 - .1, .5);
+    if (a4 > 0) {
+      const y = P ? cy + R + 170 : cy + R + 60;
+      const icons = [['赞', PINK], ['币', GOLD], ['藏', TEAL], ['关注', GREEN]];
+      icons.forEach(([lab, col], i) => {
+        const a = win(t, c4 + .2 + i * .25, .35, eBack); if (a <= 0) return;
+        const x = cx + (i - 1.5) * (P ? 170 : 190);
+        ctx.save(); ctx.translate(x, y); ctx.scale(a, a);
+        glow(ctx, 0, 0, 90, col, .5);
+        ctx.fillStyle = 'rgba(14,10,32,.9)'; ctx.beginPath(); ctx.arc(0, 0, 58, 0, 7); ctx.fill(); ctx.strokeStyle = col; ctx.lineWidth = 5; ctx.stroke();
+        text(ctx, lab, 0, 2, { size: lab.length > 1 ? 32 : 44, weight: 900, color: col, align: 'center' });
+        ctx.restore();
+      });
+      text(ctx, '仅为科普回顾 · 不构成任何投资建议', cx, y + 110, { size: 28, weight: 700, color: 'rgba(255,255,255,.6)', align: 'center', alpha: a4 });
+      text(ctx, 'SOLANA · 2017 → ∞', cx, P ? st.y + 20 : st.y - 30, { size: P ? 44 : 44, fam: F_GR, weight: 700, color: 'rgba(255,255,255,.85)', align: 'center', alpha: a4, ls: 8 });
+    }
+  },
+  sfx(s) {
+    const ev = [{ t: .1, k: 'shimmer' }];
+    for (let k = 1; k * .4 < 2.4; k++) ev.push({ t: k * .4, k: 'tick', v: .35 });
+    ev.push({ t: s.cue(2) - .1, k: 'impact', v: .6 }, { t: s.at(2, '信任'), k: 'shimmer' });
+    ev.push({ t: s.cue(3), k: 'hashtick', v: .35, p: 1 });
+    for (let i = 0; i < 4; i++) ev.push({ t: s.cue(4) + .2 + i * .25, k: 'pop', v: .6 });
+    ev.push({ t: s.d - 2.6, k: 'tick', v: .8 }, { t: s.d - 2.2, k: 'tick', v: .8 }, { t: s.d - 1.8, k: 'tick', v: 1 });
+    return ev;
+  },
+};
+
+export const SCENES_B = { outage, ftx, rebuild, meme, ath, wall, now, outro };

solana-clock/js/scenes.js

@@ -0,0 +1,3 @@
+import { SCENES_A } from './scenes-a.js';
+import { SCENES_B } from './scenes-b.js';
+export const SCENES = { ...SCENES_A, ...SCENES_B };

solana-clock/js/timeline.js

@@ -0,0 +1,75 @@
+// Narration-driven timeline + layouts
+import { SCRIPT } from './script-data.js';
+
+const LEAD = { hook: 2.6, outro: 1.0 };      // silence before first line (s)
+const TAIL = { hook: 1.6, outro: 4.5, ftx: 1.8, ath: 1.8 };
+const GAP = { default: .42 };
+
+export function buildTimeline() {
+  let T = 0;
+  const scenes = SCRIPT.map((sc, si) => {
+    const start = T;
+    let t = LEAD[sc.id] ?? 1.0;
+    const lines = sc.lines.map((ln, i) => {
+      const l = { ...ln, i, scene: sc.id, local: t, start: start + t, end: start + t + ln.dur };
+      t += ln.dur + (GAP[sc.id] ?? GAP.default);
+      return l;
+    });
+    t += (TAIL[sc.id] ?? 1.2) - (GAP[sc.id] ?? GAP.default);
+    T += t;
+    return { ...sc, si, start, end: start + t, dur: t, lines };
+  });
+  const lines = scenes.flatMap(s => s.lines);
+  return { scenes, lines, total: T };
+}
+
+export const SIZES = { landscape: [1920, 1080], portrait: [1080, 1920] };
+
+/** Layout regions. Portrait keeps clear of notch/status bar (top), Douyin caption + nav (bottom) and action buttons (right). */
+export function layout(orient) {
+  const [W, H] = SIZES[orient];
+  if (orient === 'landscape') {
+    return {
+      orient, W, H, portrait: false,
+      safe: { l: 90, t: 56, r: W - 90, b: H - 56 },
+      head: { x: 96, y: 92 },
+      stage: { x: 110, y: 170, w: W - 220, h: 700, cx: W / 2, cy: 170 + 350 },
+      sub: { cx: W / 2, y: H - 92, maxW: 1560, size: 50 },
+      unit: 1,
+    };
+  }
+  const safe = { l: 64, t: 236, r: W - 156, b: H - 450 };
+  return {
+    orient, W, H, portrait: true,
+    safe,
+    head: { x: 72, y: safe.t + 52 },
+    stage: { x: safe.l, y: safe.t + 170, w: safe.r - safe.l, h: 880, cx: (safe.l + safe.r) / 2, cy: safe.t + 170 + 440 },
+    sub: { cx: (safe.l + safe.r) / 2, y: safe.b - 76, maxW: safe.r - safe.l - 10, size: 50 },
+    unit: 1,
+  };
+}
+
+/** split a narration line into subtitle chunks with timings proportional to character count */
+export function subChunks(line, maxChars) {
+  const parts = line.t.match(/[^，。；：？！、—]+[，。；：？！、—]*/g) || [line.t];
+  const chunks = [];
+  let cur = '';
+  const len = s => Array.from(s.replace(/[A-Za-z0-9.\-$%]/g, 'a')).reduce((n, ch) => n + (/[a-z]/.test(ch) ? .55 : 1), 0);
+  for (const p of parts) {
+    if (cur && len(cur + p) > maxChars) { chunks.push(cur); cur = p; } else cur += p;
+  }
+  if (cur) chunks.push(cur);
+  // split chunks still too long
+  const out = [];
+  for (const c of chunks) {
+    if (len(c) <= maxChars * 1.15) { out.push(c); continue; }
+    const arr = Array.from(c), n = Math.ceil(len(c) / maxChars), step = Math.ceil(arr.length / n);
+    for (let i = 0; i < arr.length; i += step) out.push(arr.slice(i, i + step).join(''));
+  }
+  const total = out.reduce((n, c) => n + len(c), 0);
+  let acc = 0;
+  return out.map(c => {
+    const a = line.start + line.dur * acc / total; acc += len(c);
+    return { text: c.replace(/[，。；、—]+$/, ''), start: a, end: line.start + line.dur * acc / total };
+  });
+}

solana-clock/tools/fonts.py

@@ -0,0 +1,43 @@
+#!/usr/bin/env python3
+"""Subset fonts to only the characters used by the animation + UI -> fonts/*.woff2
+Usage: python3 tools/fonts.py   (expects source fonts in /tmp/fonts)
+"""
+import pathlib, re
+from fontTools import subset
+from fontTools.ttLib import TTFont
+
+ROOT = pathlib.Path(__file__).resolve().parent.parent
+SRC = pathlib.Path('/tmp/fonts')
+OUT = ROOT / 'fonts'
+OUT.mkdir(exist_ok=True)
+
+chars = set()
+for p in list((ROOT / 'js').glob('*.js')) + [ROOT / 'tools' / 'script.json', ROOT / 'index.html']:
+    if p.exists() and p.name != 'data-sol.js':
+        chars |= set(p.read_text(encoding='utf-8'))
+chars |= set(chr(c) for c in range(0x20, 0x7f))
+chars |= set('“”‘’…—–·•×÷±≈≥≤→←↑↓★☆●○◆▲▼✓✕％＄，。！？：；、（）《》【】')
+text = ''.join(sorted(c for c in chars if ord(c) >= 0x20))
+print('chars:', len(text))
+
+JOBS = [
+    ('NotoSansSC-Black.otf', 'sol-sc-900.woff2', None),
+    ('NotoSansSC-Bold.otf', 'sol-sc-700.woff2', None),
+    ('NotoSansSC-Regular.otf', 'sol-sc-400.woff2', None),
+    ('SpaceGrotesk[wght].ttf', 'sol-grotesk.woff2', 'latin'),
+    ('JetBrainsMono[wght].ttf', 'sol-mono.woff2', 'latin'),
+]
+for src, dst, kind in JOBS:
+    opts = subset.Options()
+    opts.flavor = 'woff2'
+    opts.layout_features = ['*']
+    opts.name_IDs = ['*']
+    opts.hinting = False
+    f = TTFont(SRC / src)
+    s = subset.Subsetter(opts)
+    t = text if kind is None else ''.join(c for c in text if ord(c) < 0x2500)
+    s.populate(text=t)
+    s.subset(f)
+    f.flavor = 'woff2'
+    f.save(OUT / dst)
+    print(dst, (OUT / dst).stat().st_size // 1024, 'KB')

solana-clock/tools/lint_layout.py

@@ -0,0 +1,70 @@
+#!/usr/bin/env python3
+"""Layout lint: instrument fillText/strokeText and path calls; report text that leaves the frame
+(or the Douyin safe area in portrait) and NaN coordinates. Samples every STEP seconds."""
+import sys, json, asyncio, pathlib
+from playwright.async_api import async_playwright
+base = 'http://localhost:8765/solana-clock/index.html'
+STEP = float(sys.argv[1]) if len(sys.argv) > 1 else 0.5
+
+JS = r"""
+(async (STEP) => {
+  const P = CanvasRenderingContext2D.prototype;
+  const issues = new Map();
+  let cur = null, L = null;
+  const note = (k, msg) => { if (!issues.has(k)) issues.set(k, msg); };
+  for (const fn of ['fillText', 'strokeText']) {
+    const orig = P[fn];
+    P[fn] = function (str, x, y, maxW) {
+      if (cur !== null && this.canvas.id === 'view' && this.globalAlpha > 0.12 && String(str).trim()) {
+        const m = this.measureText(str);
+        let x0 = x - m.actualBoundingBoxLeft, x1 = x + m.actualBoundingBoxRight;
+        if (maxW && x1 - x0 > maxW) { const s = maxW / (x1 - x0); x0 = x + (x0 - x) * s; x1 = x + (x1 - x) * s; }
+        const y0 = y - m.actualBoundingBoxAscent, y1 = y + m.actualBoundingBoxDescent;
+        const t = this.getTransform(), sc = this.canvas.width / L.W;
+        const pts = [[x0, y0], [x1, y0], [x0, y1], [x1, y1]].map(([a, b]) => [(t.a * a + t.c * b + t.e) / sc, (t.b * a + t.d * b + t.f) / sc]);
+        const bx0 = Math.min(...pts.map(p => p[0])), bx1 = Math.max(...pts.map(p => p[0]));
+        const by0 = Math.min(...pts.map(p => p[1])), by1 = Math.max(...pts.map(p => p[1]));
+        const R = L.portrait ? L.safe : { l: 0, t: 0, r: L.W, b: L.H };
+        const tol = 6;
+        if (!window.__guides && (bx0 < R.l - tol || bx1 > R.r + tol || by0 < R.t - tol || by1 > R.b + tol)) {
+          const k = L.orient + '|' + cur.id + '|' + String(str).slice(0, 18);
+          note(k, `${L.orient} ${cur.id} @${cur.T.toFixed(1)} "${String(str).slice(0, 24)}" box=[${bx0|0},${by0|0},${bx1|0},${by1|0}] a=${this.globalAlpha.toFixed(2)}`);
+        }
+      }
+      return orig.apply(this, arguments);
+    };
+  }
+  for (const fn of ['moveTo', 'lineTo', 'arc', 'fillRect', 'quadraticCurveTo', 'bezierCurveTo', 'rect', 'drawImage', 'ellipse']) {
+    const orig = P[fn];
+    P[fn] = function (...a) {
+      if (cur && a.some(v => typeof v === 'number' && !Number.isFinite(v))) note('nan|' + cur.id + fn, `NaN in ${fn} ${L.orient} ${cur.id} @${cur.T.toFixed(1)}`);
+      return orig.apply(this, a);
+    };
+  }
+  const eng = await import('./js/engine.js'), tl = await import('./js/timeline.js');
+  const origGuides = eng.safeGuides;
+  for (const o of ['landscape', 'portrait']) {
+    L = tl.layout(o);
+    for (let T = 0; T < eng.TL.total; T += STEP) {
+      cur = { id: eng.sceneAt(T).id, T };
+      window.__render(T, o);
+    }
+  }
+  cur = null;
+  return [...issues.values()];
+})
+"""
+
+async def main():
+    async with async_playwright() as p:
+        b = await p.chromium.launch()
+        pg = await b.new_page(viewport={'width': 1400, 'height': 900})
+        errs = []
+        pg.on('pageerror', lambda e: errs.append(str(e)))
+        await pg.goto(base + '?nomix=1', wait_until='networkidle')
+        await pg.wait_for_function('window.__ready === true')
+        res = await pg.evaluate(JS + f'({STEP})')
+        print(len(res), 'issues'); print('\n'.join(res))
+        print('pageerrors:', errs)
+        await b.close()
+asyncio.run(main())

solana-clock/tools/shoot.py

@@ -0,0 +1,44 @@
+#!/usr/bin/env python3
+"""Headless smoke test: load the player, render frames at many times in both orientations,
+collect console errors, save screenshots to tools/out/.
+Usage: python3 tools/shoot.py [base_url] [--every N] [--times 1,2,3]"""
+import sys, json, pathlib, asyncio
+from playwright.async_api import async_playwright
+
+ROOT = pathlib.Path(__file__).resolve().parent.parent
+OUT = ROOT / 'tools' / 'out'; OUT.mkdir(parents=True, exist_ok=True)
+base = next((a for a in sys.argv[1:] if a.startswith('http')), 'http://localhost:5173/solana-clock/index.html')
+times = None
+if '--times' in sys.argv: times = [float(x) for x in sys.argv[sys.argv.index('--times') + 1].split(',')]
+orients = ['landscape', 'portrait']
+if '--only' in sys.argv: orients = [sys.argv[sys.argv.index('--only') + 1]]
+
+async def main():
+    async with async_playwright() as p:
+        b = await p.chromium.launch(args=['--autoplay-policy=no-user-gesture-required'])
+        errors = []
+        for o in orients:
+            pg = await b.new_page(viewport={'width': 1920, 'height': 1080} if o == 'landscape' else {'width': 1080, 'height': 1920})
+            pg.on('console', lambda m: errors.append(f'[{m.type}] {m.text}') if m.type in ('error', 'warning') else None)
+            pg.on('pageerror', lambda e: errors.append(f'[pageerror] {e}'))
+            await pg.goto(base + f'?nomix=1&o={o}', wait_until='networkidle')
+            await pg.wait_for_function('window.__ready === true', timeout=30000)
+            # make canvas exact design size for screenshots
+            await pg.add_style_tag(content='.top,.controls,.toggles,.side,.foot,.big-play,.loading{display:none!important}.app{padding:0;max-width:none}.layout{display:block}.stage-wrap{border:0;border-radius:0}.stage,.stage-wrap.portrait .stage{width:%dpx!important;height:%dpx!important}' % ((1920, 1080) if o == 'landscape' else (1080, 1920)))
+            await pg.wait_for_timeout(300)
+            scenes = await pg.evaluate('import("./js/engine.js").then(m => m.TL.scenes.map(s => ({id: s.id, start: s.start, dur: s.dur, cues: s.lines.map(l => l.local)})))')
+            ts = []
+            if times: ts = [(f't{t:07.2f}', t) for t in times]
+            else:
+                for s in scenes:
+                    for k, f in enumerate([.12, .45, .8]):
+                        ts.append((f"{s['id']}-{k}", s['start'] + s['dur'] * f))
+            for name, t in ts:
+                await pg.evaluate(f'window.__render({t})')
+                await pg.locator('#view').screenshot(path=str(OUT / f'{o[0]}-{name}.png'))
+            await pg.close()
+        await b.close()
+        print('frames ok')
+        print('\n'.join(dict.fromkeys(errors)) or 'no console errors')
+
+asyncio.run(main())