solana-clock: 计划与大纲 (README)

README.md

@@ -1,5 +1,5 @@
 ---
-title: 知识动画工作室 · 四部动画
+title: 知识动画工作室 · 五部动画
 emoji: 🐒
 colorFrom: yellow
 colorTo: red
@@ -8,6 +8,119 @@ app_file: index.html
 pinned: false
 ---
 
+<!-- solana-clock:start -->
+# ⏱️ 项目五（全新制作）：SOLANA —— 给区块链装上时钟的人（solana-clock/）
+
+> 用一支 **约 5 分钟** 的网页动画视频，讲完 Solana / SOL 从 2017 年一个深夜的灵感，到 2026 年的完整发展历程。
+> **全新制作**：文案、分镜、画面代码、音乐、音效、旁白全部从零编写，**不参考**仓库中任何旧目录（包括旧的 `solana/`）。
+> 新作品全部位于 **`solana-clock/`** 目录，打开 `solana-clock/index.html` 即可播放。
+
+## 0. 进度看板（每完成一个大动作就推送一次到 Ethscriptions/POLS）
+
+| # | 阶段 | 状态 |
+|---|------|------|
+| 1 | 写计划 / 大纲 / 步骤（本节） | ✅ 完成 |
+| 2 | 旁白文案定稿 + TTS 配音 + 时长清单 + 字体子集 + SOL 真实价格数据 | ⏳ 进行中 |
+| 3 | 动画引擎 + 全部场景（横屏 16:9 / 竖屏 9:16 双布局 + 烧录字幕 + 安全区） | ⬜ 待做 |
+| 4 | 程序化音乐 + 合成音效 + 旁白闪避混音 | ⬜ 待做 |
+| 5 | 播放器 UI + 浏览器本地 MP4 导出（24 / 30 / 60 fps，横屏 / 竖屏） | ⬜ 待做 |
+| 6 | 抖音 / B站 发布标题、简介、标签（一键复制） | ⬜ 待做 |
+| 7 | 横屏 1920×1080 / 竖屏 1080×1920 封面图 | ⬜ 待做 |
+| 8 | 无头浏览器自动化测试 + 修复 + 最终推送 | ⬜ 待做 |
+
+## 1. 创意核心
+
+**一句话主题：** Solana 的第一个发明是「证明时间」（Proof of History）；而它最终需要的，也是「时间」来证明自己。
+
+整支片子用 **「时钟 / 时间」** 作为视觉母题贯穿：
+开场是滴答声与一条不断自我哈希的光链；每一章用一个巨大的「年份时钟」翻页转场；
+价格曲线、宕机、FTX 崩塌、重生，全部挂在这条「时间链」上；结尾时钟停在 2026 年，回扣主题。
+
+视觉风格：**深空霓虹 + 数据可视化**。Solana 品牌渐变（紫 #9945FF → 青绿 #14F195），
+发光粒子、哈希光链、等距节点网络、真实价格曲线动画、故障风（宕机）、碎裂坍塌（FTX）、凤凰式重生（2023）、烟花（ATH）。
+
+## 2. 分镜大纲（15 个场景，约 5 分钟）
+
+| # | 场景 ID | 时间点 | 内容 | 关键画面 | 音乐情绪 |
+|---|---|---|---|---|---|
+| 1 | hook | — | 设问开场：一条链凭什么这么快？又凭什么摔得那么惨还能爬回来？ | 黑屏 → 滴答 → 光链点亮 → Solana 三道杠 Logo 组装 | 悬念脉冲 |
+| 2 | night | 2017.11 | 高通老兵 Anatoly Yakovenko，深夜两杯咖啡一杯啤酒，想到「给区块链装时钟」 | 深夜书桌、台灯、咖啡杯、白板公式 | 低保真夜曲 |
+| 3 | poh | 原理 | 历史证明：SHA-256 一环套一环，事件插进链里就带上了时间戳 | 哈希珠串流动、事件插入、对比「没有时钟的会议」 | 电子律动 |
+| 4 | name | 2018 | 原名 Loom，撞名后改为 Solana —— 圣地亚哥北边的海滨小镇 Solana Beach | 海浪夕阳、文字 Loom → Solana 变形 | 温暖合成器 |
+| 5 | build | 2018-19 | 联合创始人团队（Raj Gokal、Greg Fitzgerald、Stephen Akridge），测试网，2019 年 Multicoin 领投 A 轮 | 节点网络逐个点亮 | 推进 |
+| 6 | mainnet | 2020.3 | 「312」大暴跌后四天，主网 Beta 上线（3 月 16 日） | 红色暴跌背景 + 倒计时发射 + 创世区块 | 紧张→释放 |
+| 7 | rise | 2021 | 生态爆发：Serum、Raydium、Phantom、Magic Eden、NFT；SOL 从 1.5 美元到 259 美元 | 真实价格曲线攀升，生态气泡涌现 | 高能合成波 |
+| 8 | outage | 2021-22 | 2021.9.14 机器人交易洪水导致约 17 小时停摆，此后多次宕机 | 故障风、节点熄灭、OFFLINE 警报 | 故障电子 |
+| 9 | ftx | 2022.11 | FTX 崩塌，SOL 跌至 9.69 美元（2022.12.30 收盘），一年跌超 94% | 高塔碎裂、曲线跳水 | 低沉崩塌 |
+| 10 | rebuild | 2023 | 社区自救：OpenBook 分叉、BONK 空投、Firedancer、状态压缩、Helium 迁移、Saga 手机 | 碎片重组、凤凰升起 | 希望渐强 |
+| 11 | meme | 2024 | Jupiter 空投、pump.fun、Meme 狂潮，DEX 交易量多次超越以太坊 | Meme 气泡、交易量对比柱 | 欢快狂热 |
+| 12 | ath | 2025.1 | 2025.1.19 SOL 收盘 262 美元，创历史新高 | 烟花 + 数字滚动 | 高潮 |
+| 13 | wall | 2025 | 华尔街入场：现货 SOL ETF、上市公司储备、Alpenglow 共识升级 | 大楼、K 线、闪电 | 庄重 |
+| 14 | now | 2026 | 全程真实价格曲线回放 + 截至 2026.10.7 约 117 美元 | 2020→2026 全曲线 + 里程碑标注 | 回顾 |
+| 15 | outro | — | 主题升华 + 互动引导 + 免责声明 | 时钟停摆、Logo、三连 | 余韵 |
+
+## 3. 技术方案
+
+| 模块 | 方案 |
+|---|---|
+| 画面 | 原生 Canvas 2D，**纯函数式渲染 `render(t)`**：任意��间点都能精确重绘 → 预览与导出完全一致、可逐帧离线渲染 |
+| 布局 | 横屏 1920×1080（B站）与竖屏 1080×1920（抖音）两套布局，所有元素按「安全区」排布 |
+| 竖屏安全区 | 顶部 ≈ 230px（刘海/状态栏/抖音顶栏），底部 ≈ 440px（标题文案/音乐条/底部导航），右侧 ≈ 150px（点赞评论按钮栏）；预览中可开启参考线 |
+| 字幕 | 烧录进画面，横屏在底部，竖屏在底部安全线之上 |
+| 旁白 | Edge 神经网络 TTS（zh-CN-YunxiNeural 主旁白 + zh-CN-XiaoxiaoNeural 新闻播报腔）预生成 MP3，附时长清单；画面动画按旁白每句的起点对齐 |
+| 音乐 | Web Audio 程序化合成（Pad / 琶音 / 贝斯 / 鼓组 / 上升音效），按场景切换情绪与和弦；固定随机种子保证每次一致 |
+| 音效 | 合成：滴答、哈希嘀嗒、嗖、冲击、故障、警报、碎裂、硬币、烟花、翻页等 |
+| 混音 | OfflineAudioContext 分窗渲染 → 旁白侧链闪避（ducking）→ 软限幅，生成整条立体声音轨；播放和导出共用同一条音轨 |
+| 导出 MP4 | 浏览器本地：WebCodecs + mediabunny 封装；H.264 + AAC，不支持时自动回退；**24 / 30 / 60 fps** 可选；横/竖屏可选；带进度条与取消 |
+| 数据 | SOL 历史日线价格来自 Surf 数据 API 的真实快照（2020-04-10 → 2026-10-07），打包为静态 JS |
+| 字体 | Noto Sans SC 按全片用字做子集（woff2），保证导出画面在任何电脑上字形一致 |
+| 发布文案 | 抖音 / B站 标题、简介（B站自动生成章节时间戳）、标签，一键复制 |
+| 封面 | 网页内实时绘制并下载 PNG；同时提供静态 `covers/cover-landscape.png`、`covers/cover-portrait.png` |
+
+## 4. 目录结构
+
+```
+solana-clock/
+├── index.html            播放器页面
+├── css/app.css
+├── js/
+│   ├── main.js           播放器 UI / 控制
+│   ├── timeline.js       旁白时长 → 场景时间轴
+│   ├── script.js         旁白文案 + 场景表
+│   ├── draw.js           绘图工具（发光、文字、缓动、粒子）
+│   ├── scenes.js         15 个场景的渲染函数
+│   ├── audio.js          音乐 + 音效 + 混音
+│   ├── exporter.js       MP4 导出
+│   ├── publish.js        发布文案
+│   └── data-sol.js       SOL 真实价格数据
+├── audio/                旁白 MP3 + manifest.json
+├── fonts/                子集字体
+├── covers/               横竖屏封面 PNG
+├── vendor/mediabunny.min.mjs
+└── tools/                配音生成 / 字体子集 / 截图测试脚本
+```
+
+## 5. 执行步骤
+
+1. 写本计划并推送。
+2. 定稿旁白 → `tools/build_voice.py` 生成 MP3 与时长 → 拉取 SOL 真实价格 → 字体子集化 → 推送。
+3. 写动画引擎和 15 个场景，横竖屏都逐场截图检查 → 推送。
+4. 写音乐/音效/混音 → 推送。
+5. 播放器、导出 MP4（帧率、方向选择、进度）→ 推送。
+6. 发布文案 + 封面 → 推送。
+7. 无头 Chromium 自动测试：逐场截图、导出一段 MP4 校验 → 修复 → 最终推送。
+
+## 6. 事实核查说明
+
+- 价格均为 **日收盘价**（Surf 数据快照），盘中最高价会更高（例如 2025-01-19 盘中约 295 美元）。
+- 内容仅为科普回顾，**不构成任何投资建议**。
+
+---
+
+
+<!-- solana-clock:end -->
+
+
 # 🐒 收猴子的故事 —— 网页动画视频项目（shouhouzi）
 
 > 用知识区博主「子木土土」式的讲法（口语化、设问开场、手绘涂鸦画风、算账拆解、最后升华），

index.html

@@ -12,6 +12,7 @@ a.card div{padding:14px 16px}a.card b{font-size:19px}a.card span{display:block;o
 </style></head><body>
 <h1>知识动画工作室</h1><p>网页即播 · 浏览器本地导出 MP4 · 横屏 B站 / 竖屏抖音</p>
 <div class="grid">
+<a class="card" href="solana-clock/index.html"><img src="solana-clock/covers/cover-landscape.png" alt="SOLANA 给区块链装上时钟的人" onerror="this.style.visibility='hidden'"><div><b>⏱️ SOLANA：给区块链装上时钟的人</b><span>2017 → 2026 · 全新制作 · 时间之链霓虹风 · 约 5 分钟</span></div></a>
 <a class="card" href="ethereum/index.html"><img src="ethereum/covers/cover-landscape.png" alt="以太坊简史" onerror="this.style.visibility='hidden'"><div><b>⟠ 以太坊简史：从一份白皮书到世界计算机</b><span>2013 → 2026 · 深空光之晶体风格 · 约 7 分钟</span></div></a>
 <a class="card" href="guozu/index.html"><img src="guozu/covers/cover-landscape.png" alt="国足投注模拟器" onerror="this.style.visibility='hidden'"><div><b>⚽ 国足投注模拟器：每场押 ¥100，23 年后还剩多少？</b><span>2002 → 2026.10 · 149 场正式比赛 + 8 场友谊赛彩蛋 · 8-bit 像素街机风 · 约 5 分 50 秒 · 数据模拟，远离赌博</span></div></a>
 <a class="card" href="shouhouzi/index.html"><img src="shouhouzi/covers/cover-landscape.png" alt="收猴子的故事"><div><b>🐒 收猴子的故事</b><span>经济学寓言 · 手绘涂鸦风格 · 6 分 22 秒</span></div></a>