# ♈ 项目八（全新制作）：白羊座 · 春天从这里出发（aries/）

> 一支 **约 3 分 33 秒** 的华丽网页动画，讲解黄道第一宫 **白羊座（Aries）**：为什么它排第一、怎样在夜空找到它、星星名字的来历、金羊毛神话、♈ 符号的含义、占星文化里的白羊性格，
> 并在高潮处为白羊座观众颁发一枚 **「白羊座 · 先锋荣耀铭牌」**——可以填写自己的名字，铭牌会出现在视频里、导出的 MP4 里，也能单独保存为手机壁纸/头像卡。
>
> **理念**：不否定星座不是科学，但把它当作一份浪漫、有趣、值得骄傲的文化来讲，让白羊座的观众看完有 **归属感、认可感、荣耀感**。
>
> **全新制作**：文案、分镜、渲染架构、着色器、配乐、音效、旁白全部从零编写，**不参考**仓库内任何旧目录（包括 `libra/`、`libra-scales/`），也 **不删除** 任何已有文件，只新增 `aries/` 并在首页/根 README 增加入口。

---

## 0. 进度看板（每完成一个大动作推送一次到 Ethscriptions/POLS）

| # | 阶段 | 状态 |
|---|---|---|
| 1 | 计划 / 大纲 / 步骤（本文件） | ✅ 完成 |
| 2 | 旁白文案定稿（10 幕）+ 男声 TTS（云希）+ 词级对齐字幕（73 条）+ 时间轴（总长 3:33） | ✅ 完成 |
| 3 | 渲染引擎：WebGL2 火焰星云着色器 + Canvas2D 矢量层 + 10 个场景（横/竖屏） | ✅ 完成（横竖屏逐幕截图自检，全片 1154 帧扫描 0 报错） |
| 4 | 荣耀铭牌系统：动态金属质感铭牌 + 个性化署名 + 单独导出 PNG | ✅ 完成（视频内署名 + 9:16 壁纸 / 1:1 头像 PNG） |
| 5 | 史诗配乐（太鼓 + 弦乐 + 铜管号角）+ 音效，离线渲染 | ✅ 完成（`audio/score.mp3`，旁白时自动让位） |
| 6 | 浏览器本地导出 MP4（24/30/60 fps，横/竖屏，1080p/720p） | ✅ 完成（实测 24/30/60 fps、横/竖屏，H.264 + AAC/Opus） |
| 7 | 四平台标题/描述/话题 + 8 张封面 | ✅ 完成（字数/话题数实时校验 + 8 张封面） |
| 8 | 首页入口、全片自检、最终推送 | ✅ 完成 |

## 1. 技术方案（与以往作品不同的新架构）

| 模块 | 方案 |
|---|---|
| 模块化 | 原生 **ES Modules**（`src/*.js`），无构建工具 |
| 背景 | **WebGL2 片元着色器**：分形噪声（fBm）火焰星云 + 星尘 + 体积光，按场景切换色调（烈焰红金 / 深海蓝 / 圣林翠金 / 皇家紫金）；无 WebGL 时自动降级为 Canvas 渐变 |
| 前景 | Canvas2D 矢量绘制：金色公羊、羊角黄金螺线、星图、神话剪影、铭牌、粒子（火星余烬、金粉、光点） |
| 时间 | `draw(t)` 为时间纯函数 → 实时播放与逐帧导出画面一致 |
| 旁白 | 中文神经网络 TTS（男声 `zh-CN-YunxiNeural`），句级字幕时间戳，自动生成 `src/timeline.js` |
| 配乐 | WebAudio 离线合成：E 小调英雄进行（Em–C–G–D），太鼓、定音鼓、弦乐 Pad、铜管号角、竖琴，铭牌段落全奏高潮；预渲染为 mp3，缺失时浏览器现场合成 |
| 导出 | WebCodecs（H.264 + AAC/Opus）+ mp4-muxer，**24 / 30 / 60 fps**，横屏 1920×1080 / 竖屏 1080×1920 |
| 铭牌 | 输入名字 → 视频第 9 幕的铭牌署名同步更新；可单独下载 **铭牌卡片 PNG（9:16 壁纸 / 1:1 头像）** |
| 发布 | 小红书 / 抖音 / B 站 / 视频号 的标题、描述、话题（字数校验 + 一键复制）与 8 张封面 |

## 2. 分镜大纲（10 幕）

| 幕 | 标题 | 画面 |
|---|---|---|
| 1 | 序章 · 第一缕春光 | 火星余烬汇聚，金色公羊从烈焰中显形、低头蓄力；“白羊座 ARIES 3.21–4.19” |
| 2 | 为什么排第一 | 黄道环与太阳轨迹，春分点亮起；♈ 作为“白羊座第一点”的天文标记 |
| 3 | 找到它 | ✅ 完成（横竖屏逐幕截图自检，全片 1154 帧扫描 0 报错） |
| 4 | 星星的名字 | ✅ 完成（视频内署名 + 9:16 壁纸 / 1:1 头像 PNG） |
| 5 | 金羊毛 · 飞越大海 | ✅ 完成（`audio/score.mp3`，旁白时自动让位） |
| 6 | 金羊毛 · 升上星空 | ✅ 完成（实测 24/30/60 fps、横/竖屏，H.264 + AAC/Opus） |
| 7 | ♈ 的秘密 | ✅ 完成（字数/话题数实时校验 + 8 张封面） |
| 8 | 火象 · 火星 | ✅ 完成 |
| 9 | 荣耀铭牌 | 金属铭牌从烈焰中锻造成形：羊角徽记、月桂、星图蚀刻、守护星/元素/关键词、署名，扫光与礼花 |
| 10 | 尾声 · 出发 | 公羊奔向晨光，星座收束成标题，“愿你的每一次出发，都被星光照亮” |

## 3. 步骤
1. 写本计划并推送。
2. 旁白文案 → `tools/build_voice.py` 生成 mp3 与 `src/timeline.js` → 推送。
3. `src/gl.js`（着色器背景）、`src/kit.js`（绘图工具）、`src/scenes.js` + `src/stage.js` → 截图逐幕自检 → 推送。
4. `src/badge.js` 铭牌 + 个性化 → 推送。
5. `src/score.js` 配乐音效 → 预渲染 `audio/score.mp3` → 推送。
6. `src/export.js` 导出（24/30/60）→ 实测 → 推送。
7. `src/publish.js` 文案 + 封面 → 推送。
8. 首页卡片、根 README、全片扫描 → 最终推送。

## 4. 旁白全文（第 2 步产出）

| 幕 | 时间 | 旁白 |
|---|---|---|
| 1 序章 | 0:00 | 每年三月下旬，寒冬刚刚退场，春天的第一缕阳光照向大地。夜空里，一只金色的公羊，正低下犄角，准备冲锋。它就是黄道十二星座的第一位，白羊座。三月二十一日到四月十九日出生的朋友，都属于它。 |
| 2 为什么排第一 | 0:23 | 为什么白羊座排在第一位？因为它和春天有关。两千多年前，每到春分，昼夜等长、万物复苏，太阳恰好走进白羊座。于是，一年的星空之旅，就从白羊开始。直到今天，天文学家仍把春分点叫作“白羊座第一点”，还用白羊座的符号来标记它。 |
| 3 找到它 | 0:48 | 在双鱼座和金牛座之间，三颗亮星连成一道弯弯的弧线，就像公羊卷曲的犄角……这片星空属于二十八宿中的娄宿和胃宿。 |
| 4 星星的名字 | 1:09 | 哈马尔（阿拉伯语“羊”），橙色巨星，约 66 光年；娄宿二是双星，1664 年胡克发现，是最早用望远镜发现的双星之一。 |
| 5 金羊毛 · 飞越大海 | 1:31 | 佛里克索斯与赫勒被继母迫害，母亲送来金色公羊；赫勒坠海，海峡得名赫勒斯滂。 |
| 6 金羊毛 · 升上星空 | 1:54 | 科尔基斯、圣林、巨龙、伊阿宋与阿尔戈英雄；公羊被宙斯升上夜空。 |
| 7 ♈ 的秘密 | 2:14 | 羊角 = 勇往直前；嫩芽 = 新的开始。 |
| 8 火象 · 火星 | 2:32 | 热情、勇敢、直率、行动派、从不记仇，像春天的第一声惊雷。 |
| 9 荣耀铭牌 | 2:55 | 如果你是白羊座，这枚铭牌属于你……白羊座，先锋之证。 |
| 10 尾声 | 3:13 | 每一年，春天都从白羊座出发……愿你的每一次出发，都被星光照亮。 |

字幕：TTS 词级时间戳回贴原文，按标点切成短句，过短的短句在句中并入前句、在句首并入后句。

## 5. 文件结构与使用

```
aries/
├─ index.html / style.css      页面（播放器、铭牌、导出、发布）
├─ src/
│  ├─ timeline.js   旁白时间轴与字幕（tools/build_voice.py 生成）
│  ├─ gl.js         WebGL2 fBm 星云背景（6 种色调）
│  ├─ kit.js        绘图工具：金属渐变、光晕、粒子、羊角螺线、公羊、♈、月桂、火焰…
│  ├─ scenes.js     十幕场景（横/竖屏各自排版）
│  ├─ badge.js      先锋荣耀铭牌（锻造动画 + 卡片导出）
│  ├─ stage.js      合成器：背景 + 场景交叉淡化 + 光带转场 + 字幕 + 角标
│  ├─ score.js      配乐与音效离线合成；mixTrack 将配乐与旁白合成为一条音轨
│  ├─ export.js     WebCodecs + mp4-muxer 逐帧导出（降级 MediaRecorder）
│  ├─ publish.js    四平台文案 + 封面绘制
│  └─ main.js       页面逻辑
├─ audio/  vo-01..10.mp3（旁白）、score.mp3（配乐 + 音效）
├─ covers/ cover-{xhs,douyin,bilibili,wechat}-{4x3,3x4,16x9}.jpg
└─ vendor/mp4-muxer.mjs（v5.2.2，MIT）
```

- **播放**：打开 `aries/index.html`，点击播放；控制条可切换 **横 / 竖** 画幅与全屏（iOS 使用页面内全屏）。空格 = 播放/暂停，← → = 快退/快进 5 秒；下方章节按钮可跳转。
- **铭牌**：输入名字（≤12 字）与生日（选填），视频第 9 幕铭牌署名“授予 · 名字”同步更新，导出的 MP4 也会带上；可保存 9:16 壁纸与 1:1 头像卡。
- **导出**：选择 24 / 30 / 60 fps、横屏 1920×1080 或竖屏 1080×1920（也可 720p），点击“开始导出 MP4”，完全在本地浏览器完成。推荐电脑版 Chrome / Edge；音频优先 AAC，不支持时自动改用 Opus。
- **配乐**：E 小调 84 BPM，Em–C–G–D；序章低频与晨光号角，星空段竖琴琶音，神话段弦乐与太鼓，铭牌段铜管全奏并以 E 大调（皮卡第三度）收束；音效包括太鼓、雷声、浪花、风声、钟声、铁砧锻打、礼花等。旁白期间音乐自动压低。

## 6. 发布文案

| 平台 | 标题（字数 / 上限） | 话题数 / 上限 | 封面 |
|---|---|---|---|
| 小红书 | 白羊座为什么排第一？3分钟看懂（15/20） | 10/10 | 4:3、3:4 |
| 抖音 | 白羊座看过来！这枚先锋铭牌，只颁给春天第一个出发的你（26/30） | 5/5 | 4:3、3:4 |
| B站 | 【星座动画】白羊座为什么是黄道第一宫？金羊毛神话、哈马尔与♈的秘密｜看完领取你的白羊座荣耀铭牌（47/80） | 10/10 | 4:3、16:9（个人空间） |
| 视频号 | 白羊座：春天从这里出发（11/16） | 10/不限 | 3:4（主页卡片）、4:3（分享卡片） |

完整描述（B 站含自动生成的章节时间）在页面“四平台发布文案与封面”中一键复制。