libra/README.md

# ♎ 项目六（全新制作）：天秤座 —— 在左右之间（libra/）

> 用一支 **约 3 分钟** 的网页动画视频，生动地讲解黄道十二星座中的 **天秤座 Libra**：
> 星空坐标、真实星图、名字的来历、岁差与秋分点、正义女神的神话、星座文化中的"天秤性格"、深空彩蛋。
> **全新制作**：文案、分镜、画面代码、音乐、音效、旁白全部从零编写，**不参考**仓库中任何已有目录的代码；
> 不删除、不修改任何已有项目，只新增 `libra/` 目录（根目录 README / index.html 只做"追加"）。

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

| # | 阶段 | 状态 |
|---|------|------|
| 1 | 写计划 / 大纲 / 步骤（本文件） | ✅ 完成 |
| 2 | 旁白文案定稿（9 章 / 34 句）+ TTS 配音（逐句 mp3，纯语音约 196 秒）+ 时长清单 `js/narration.js` | ✅ 完成 |
| 3 | 动画引擎 + 全部场景（横屏 16:9 / 竖屏 9:16 安全区布局 + 烧录字幕） | ⏳ |
| 4 | 程序化音乐 + 合成音效 + 旁白闪避混音（实时播放与离线渲染共用一套代码） | ⏳ |
| 5 | 播放器 UI + 浏览器本地 MP4 导出（24 / 30 / 60 fps；横屏 1920×1080 B站 / 竖屏 1080×1920 抖音） | ⏳ |
| 6 | 四平台（小红书 / 抖音 / B站 / 视频号）标题、描述、话题一键复制 + 字数校验 | ⏳ |
| 7 | 四平台封面生成（4:3 / 3:4 / 16:9）页面内一键下载 + `covers/` 静态 PNG | ⏳ |
| 8 | 无头浏览器自动化测试（播放、横竖屏、导出 MP4、封面）+ 修复 + 最终推送 | ⏳ |

## 1. 创意核心

**一句话主题：** 天秤是黄道上唯一"不是活物"的星座符号——它不讲力量，讲的是 **平衡**。

视觉母题：**一架会呼吸的星光天平**。全片所有元素都"挂"在天平两端：昼与夜、南爪与北爪、
过去与现在、神话与科学、理性与感性。每一章结束时天平摇晃一次，再回到水平——这就是转场。

视觉风格：**深空鎏金 + 玫瑰粉雾**（金星是天秤的守护星，取金色 #F3D28A + 玫瑰 #F2A7C3 + 夜空靛蓝 #0B0F2A），
细线描金几何、粒子星尘、柔光辉光、缓动弹性动画。

## 2. 分镜大纲（8 章）

| 章 | 标题 | 画面 | 旁白要点 |
|----|------|------|----------|
| 0 | 冷开场 · 秋分 | 太阳与月亮分坐天平两端，昼夜各半 | 秋分昼夜平分，天秤季开始 |
| 1 | 星空坐标 | 黄道带圆环旋转，室女与天蝎之间亮起天秤 | 第七个黄道星座；唯一非生物符号 |
| 2 | 星图连线 | 真实亮星位置逐颗点亮、描金连线、标注名字 | 氐宿一 / 氐宿四 / 氐宿三等；阿拉伯语"南爪/北爪" |
| 3 | 从蝎钳到天平 | 天蝎的两只钳子被"剪下"，变形为天平秤盘 | 古巴比伦已称"天平"；希腊时期曾是蝎钳；罗马时期定型 |
| 4 | 岁差与秋分点 | 地轴陀螺进动，秋分点沿黄道从天秤滑入室女 | 约 2000 多年前秋分点在天秤，如今已移入室女座 |
| 5 | 正义女神 | 星光勾勒的女神阿斯特赖亚举起天平，升入夜空 | 神话：最后离开人间的神，天平留在了星空 |
| 6 | 天秤性格（娱乐向） | 关键词卡片在秤盘上左右称重 | 9/23–10/23，风象，守护星金星；审美、公正、选择困难 |
| 7 | 深空彩蛋 | 镜头推进：红矮星 Gliese 581 与"玛土撒拉星" HD 140283 | 天秤座方向的著名天体 |
| 8 | 结尾 | 天平最后一次摇晃后静止，片名浮现 | "在左右之间，找到自己的平衡" |

## 3. 技术方案

- **纯前端、零构建**：`index.html` + 原生 ES 模块（`js/*.js`），在 HF Static Space 直接运行。
- **画面**：Canvas 2D，**确定性渲染** `renderFrame(t)` —— 同一时刻永远画出同一帧，
  所以实时播放、拖动进度、离线导出用的是同一份代码。
- **横竖屏**：逻辑坐标系分两套布局：
  - 横屏 1920×1080（B站）。
  - 竖屏 1080×1920（抖音）：顶部预留 ≈ 7% 刘海/状态栏、底部预留 ≈ 22% 标题文案/进度条、
    右侧预留 ≈ 13% 点赞评论按钮栏；主体与字幕全部落在安全区内，页面可开关"安全区参考线"。
- **旁白**：edge-tts 中文女声逐句生成 mp3，Python 用 mutagen 量出时长，写进 `js/narration.js`，
  时间轴由时长自动排布（不手抠时间码），字幕与旁白天然同步。
- **音乐**：Web Audio 程序化合成（和弦铺底 / 竖琴琶音 / 低音 / 钟琴 / 混响），按章节换和声；
  **音效**：合成的"叮"、星点亮起、天平摇晃、嗖声转场、深空低鸣等。旁白出现时音乐自动闪避（ducking）。
- **MP4 导出（浏览器本地）**：
  1. 用 `OfflineAudioContext` 把 音乐 + 音效 + 旁白 一次性离线混音成 PCM；
  2. 逐帧调用 `renderFrame(i / fps)` 画到离屏 Canvas → `VideoEncoder`（H.264，AVC High）；
  3. 音频 → `AudioEncoder`（AAC）；
  4. `mp4-muxer` 封装为 MP4（fastStart），本地下载，无需服务器。
  帧率可选 **24 / 30 / 60**；尺寸可选 **横屏 1920×1080** / **竖屏 1080×1920**。
- **发布助手**：四平台标题 / 话题 / 正文一键复制，实时字数与话题数校验（超限标红）。
- **封面**：同一套绘图代码生成 小红书 4:3 & 3:4、抖音 4:3 & 3:4、B站 4:3 & 16:9、视频号 3:4 & 4:3，一键下载 PNG。

## 4. 目录

```
libra/
├── README.md            本文件（计划 + 进度）
├── index.html           播放器页面
├── css/style.css
├── js/
│   ├── narration.js     旁白文案 + 时长（脚本生成）
│   ├── timeline.js      时间轴排布
│   ├── scenes.js        全部场景绘制（确定性）
│   ├── audio.js         音乐 / 音效 / 混音（实时 & 离线共用）
│   ├── exporter.js      WebCodecs + mp4-muxer 导出
│   ├── publish.js       四平台文案 + 封面
│   └── app.js           播放器控制
├── vendor/mp4-muxer.min.js
├── audio/               旁白 mp3
├── covers/              静态封面 PNG
└── tools/gen_tts.py     旁白生成脚本
```

## 5. 数据与事实来源说明

天文事实（亮星名称、星座位置、岁差、Gliese 581、HD 140283）为公开天文学常识；
"星座性格"部分属于流行文化 / 占星娱乐内容，片中会明确标注"娱乐向，不具科学依据"。