feat(onboarding): first-chart reveal becomes a star convergence, no buttons (F4)

TASK-birth-sky-followup-20260928 F4: - pure timeline / seeded scatter / interpolation in lib/birth-sky/converge.ts; drawBirthSky takes an optional frame (positions interpolated, alphas multiplied) so the settled frame is the exported cover call for call - lazy full-screen <dialog> overlay driven by requestAnimationFrame at viewport x DPR; tap / click / Esc end it; reduced motion only fades - data, serif and overlay chunk must all arrive inside the 3 s budget, otherwise skipped silently; page.tsx wiring unchanged - one sonner hint after it ends; dialog reveal variant (继续, is-reveal) removed - DESIGN §17, VOICE, CHANGELOG, checklist, PROGRESS with verification Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01N4f2nya58RoRu4yEmJgRGE
2026-09-28 22:07:01 +08:00
parent a9a917d50c
commit 731c3b364b
15 changed files with 654 additions and 92 deletions
@@ -5,6 +5,7 @@
 - 从这次起，新生成的报告会记下生成时用的是哪一套出生资料；打开报告时，只要这套资料和现在一致，正文最上方就有一张「那一刻的天空」封面（深色，和星盘页那张同一种画法）。打印或存 PDF 时封面换成浅色纸面版，单独占第一页。
 - 以前生成的报告没有这份记录，永远不显示封面；改过出生时间或出生地之后，改之前生成的报告也不再显示封面。
 - 封面拿不到就不显示，不留空白、不转圈，报告正文不受影响。浏览器拿不到出生资料和指纹，只知道「要不要画、画谁」。
+- 第一次建完自己的盘时，原来带「继续」的弹窗换成约 3 秒的群星汇聚过场：星星从散开处汇聚到出生那一刻的真实位置，再显出那句话，停一会儿后整层淡出，回到原本的下一步。过场里没有按钮，点一下或按 Esc 立刻结束；手机开了「减弱动态效果」就只淡入淡出。3 秒内数据没到就不放。放完后首页提示一次「这片天空在星盘页可以保存。」平时打开首页的加载动画不变。
 - Skill 版本不 bump（Skill 文本未改）。不改数据库结构。

 ## 2026-09-28 — 星盘页新增「那一刻的天空」（待验收）
@@ -144,3 +144,74 @@ JS 的 +773 B 是首页为 T6 引入的 `useBirthSkyReveal`、`startBirthSkyReve
 - 打印：`.report-sky-cover-screen` 隐藏、`.report-sky-cover-print` 显示；`.report-sky-cover { break-after: page }`，图高 246mm 居中（A4 减报告 `@page` 边距后版心 186 × 270mm，3:4 在 186mm 宽时 248mm 高）。
 - `BLOCKED.md` 的 T5 条目已划掉并注明「→ 已解除：产品 2026-09-28 选 A」。
 - 测试：`frontend/tests/report-sky-cover.test.ts`（5 条：coverSubject 有 / 无；封面在正文之上且懒加载、无按钮无等待；night + paper 两张；取数失败 / 空 / 画图失败 / abort 都返回 null；打印 CSS 的 paper 与分页）。
+
+### F4 · 首次建盘群星汇聚过场（替换 T6 弹窗）
+
+- 触发不变：仍只由 `saveOnboardingPlace` 成功后的 `onOwnBirthPlaceSaved?.()` 触发；`saveProfile`、星盘档案、`chart-profile-form` 不触发（原合同测试保留）。`page.tsx` 未改一行（接线 `<BirthSkyReveal cover=… onClose=…/>` 与 `onOwnBirthPlaceSaved: birthSkyReveal.begin` 原样），`Home()` 的 `useState` / `useRef` 数不变。
+- 不等待：`startBirthSkyReveal` 改成泛型，仍是 3 秒预算；预算内要到齐三样——`/api/birth-sky?subject=self`、宋体（`waitForHeadingSerif`，最多 1.5 秒）、过场 chunk（`import("@/components/birth-sky/birth-sky-converge")`）。任一失败或超时就静默跳过，无 spinner / 骨架。
+- 纯函数 `lib/birth-sky/converge.ts`：`birthSkyScatter`（种子取自这张盘可见天体的投影坐标，mulberry32，均匀撒在地平线圆 95% 半径内）、`birthSkyPositionsAt(sky, scatter, t)`、`interpolateSkyPoint`（在 `draw.ts`，t ≥ 1 精确返回真实点）、`easeOutCubic`、`birthSkyRevealAt(elapsed, reduced)` 时间轴：0–1.5 s 汇聚（ease-out）+ 地平线 / 高度圈 / 方位字 / 连线 / 行星名淡入、整层前 200ms 淡入；1.5–2.5 s 文字 400ms 淡入后停留；2.5–3 s 整层淡出；reduced-motion 不汇聚，400ms 淡入、停留、同时刻淡出。
+- `drawBirthSky(ctx, sky, options, frame?)`：新增可选 `frame`，只对位置插值、对透明度乘系数；不传或全为 1 时调用序列与原来逐条相同。
+- 过场组件 `components/birth-sky/birth-sky-converge.tsx` + `.css`（懒加载）：原生 `<dialog>` 全屏、底色取 `night` palette；画布取视口内最大 3:4 区域 × `devicePixelRatio`；`requestAnimationFrame` 每帧调 `drawBirthSky`；`pointerdown`（点击 / 触摸）与 Esc（`cancel`）立即结束；卸载时 `cancelAnimationFrame`、摘监听、`close()`。无按钮。
+- 结束提示：`useBirthSkyReveal.close` 只在过场真的放过后执行一次（`playing` ref 守卫），`toast("这片天空在星盘页可以保存。")`，复用 `layout.tsx` 已挂的 sonner Toaster；这句收进 VOICE.md。失败 / 超时没有过场也没有提示。
+- 删除：`BirthSkyDialog` 的 `reveal` 属性、「继续」按钮、`birth-sky.css` 的 `is-reveal` 样式与 `@keyframes birth-sky-reveal`。星盘页弹窗其余不动。
+- 四帧 PNG（样稿虚构资料的真实引擎 golden → 同一个 `drawBirthSky`，1080 × 1440，无头 Chrome `canvas.toDataURL` + `--dump-dom` 取出；为排除字体加载时序，这组帧与对照导出都用黑体画）：
+  - `/tmp/claude-1000/-workspace-Jyotisha/fb88e01e-1ced-4bcc-92fe-44c5bdcc878e/scratchpad/birth-sky-converge-night-t0.png`（0 ms，散开）
+  - 同目录 `birth-sky-converge-night-t050.png`（750 ms，汇聚过半，地平线与方位字半透明）
+  - 同目录 `birth-sky-converge-night-t100.png`（1500 ms，到位，文字未出）
+  - 同目录 `birth-sky-converge-night-hold.png`（2400 ms，停留）
+  - 另有 `day` 一组同名四张。**停留帧与 `drawBirthSky` 导出封面的 PNG dataURL 逐字节相同**（night、day 两组都是 `true`）。
+- 测试：`profile-onboarding-birth-sky-reveal.test.ts` 由 5 条改为 10 条（见下「改动的既有断言」）。
+
+### 改动的既有断言（本分支第 3 个提交 `14ef18ac` 新增的测试；基线 `d670521f` 里没有这些测试）
+
+| 测试 | 原值 | 新值 | 原因 |
+| --- | --- | --- | --- |
+| saved in time…（改名 → 「the convergence starts once its data is ready; ending touches nothing else」） | 载荷类型 `BirthSkyCover`，名字说 dialog | 载荷类型 `BirthSkyRevealSky`（天空 + 宋体结论），断言不变 | F4 把弹窗换成过场，载荷不再是画好的 PNG |
+| timeout…（改名 → 「no overlay, the late data is dropped…」） | 同上 | 同上，断言不变 | 同上 |
+| failure…（改名 → 「no overlay, no retry, no error surfaced」） | `doesNotMatch(revealHook, /toast\|setError\|console…/)` | `doesNotMatch(revealHook, /setError\|console…/)`，另加：hook 里 `toast(` 恰好 1 处，且不在 `onReady` 里 | F4 要求过场结束后提示一次；失败路径仍然不提示（`close` 只在 `playing` 为真时执行，另有新测试锁住） |
+| only the reader's own onboarding place save triggers it… | `revealHook` 匹配 `loadBirthSkyCover("self:reveal", "self", signal)` | 匹配 `loadBirthSkyRevealSky(signal)` | 过场不再需要 PNG，只取天空与字体 |
+| the reveal is the chart page's dialog plus 「继续」, faded in 600ms…（**删除**） | 断言弹窗 `reveal` 变体、「继续」、`is-reveal` 600ms 淡入 CSS | 由「overlay: full screen, no buttons…」「timeline…」「the chart page dialog no longer has a reveal variant」三条取代 | 任务书 F4 明令删除弹窗 reveal 变体 |
+
+基线 `d670521f` 的既有断言：无改动。
+
+## 追加单验证（两个提交完成后）
+
+| 项 | 基线 `d670521f` | 交付（第 5 个提交） |
+| --- | --- | --- |
+| `tsc --noEmit` | 0 错 | 0 错 |
+| `npm run lint` | 0 error / 127 warning | 0 error / 127 warning |
+| `npm test` | tests 4255 · pass 4200 · fail 24 · cancelled 0 · skipped 31 | tests 4310 · pass 4255 · fail 24 · cancelled 0 · skipped 31 |
+| 测试名对比（`frontend/AGENTS.md` 方法） | — | 对基线：消失 0；对本分支第 3 个提交：消失 4（上表 4 条改名 / 删除，均有替代），新增 28 |
+| 失败清单 | 24 条（Docker / PostgreSQL 数据库与部署套件） | 与基线逐条同名 |
+| `python3 -m pytest tests/test_birth_sky.py tests/test_api_server_growth_contract.py tests/test_personal_report_contract.py` | — | 63 passed |
+| `python3 scripts/run_quality_gate.py --profile quick`（Node 22 在 PATH） | — | 所有 Python 步骤通过（pytest 997 passed / 1 skipped）；最后一步 `npm test` 的 24 条失败与基线逐条同名 → 退出码 1，属无 Docker 环境缺口 |
+| `python3 -m pytest tests/test_repo_privacy_markers.py -q` | — | 通过 |
+| `rm -rf .next && next build` | `/` ○ Static | `/` ○ Static；路由表与第 3 个提交交付时逐行相同 |
+| `JyotishAPIHandler` 方法数 / `__new__` 计数 | 218 / 不变 | 未改 Python API 服务文件 |
+| `Home()` 的 `useState` / `useRef` 数 | — | `page.tsx` 未改 |
+
+### 首屏 gzip（`index.html` 引用的全部 js / css，gzip -9 求和，干净全量构建）
+
+| | 基线 | 第 3 个提交交付 | 本次交付 | 对基线变化 |
+| --- | ---: | ---: | ---: | ---: |
+| JS | 651,590 B | 652,363 B | 652,605 B | +1,015 B（+0.16%） |
+| CSS | 66,346 B | 66,346 B | 66,346 B | 0 |
+
+比第 3 个提交多的 242 B 是首页 hook 里新增的 `sonner` 提示调用、泛型 `startBirthSkyReveal`、`loadBirthSkyRevealSky`；过场组件、`converge.ts`、`draw.ts`、样式都在懒 chunk。报告封面组件在报告页的懒 chunk，不进首页。
+
+## 追加单偏离任务书（请 Claude 定）
+
+1. **指纹只写进报告文档，不写进 v2 evidence bundle。** 任务书写「v2 evidence bundle / 报告文档的 schema 加这个可选字段」。bundle 会原样发给模型（分章写作），把指纹放进去等于把一个出生资料派生值送给供应商，也会改变 bundle 哈希；所以只在组装后的文档（guard 之前）写入，TS / JSON Schema / Python 三处文档合同都加了可选字段。测试断言分章调用发给模型的 bundle 不含指纹。
+2. **指纹覆盖姓名。** 同一算法（`resolveServerOwnedChartBirth`）的指纹里本来就含 `name`、岁差等字段，所以改了人物名字或岁差之后，旧报告也会失去封面。这是「与星盘页同一种算法」的直接结果，未另造一个只含出生时刻 / 地点的指纹。
+3. **`coverSubject` 只在 ready 读取时下发**（创建响应、replay、失败 / 生成中都不带该键）。
+4. **过场用原生 `<dialog>`** 而不是普通 `div`：保证在兑换弹窗（同为顶层）之上，Esc 走 `cancel` 事件；无按钮、无焦点陷阱内容。
+5. **整层前 200ms 淡入**（任务书未写），避免保存后页面瞬间变黑；reduced-motion 下整体淡入 400ms。
+6. **四帧的「t=0.5」取时间过半（750 ms）**，此时 ease-out 位置进度约 0.875；纯函数测试里的 t 是位置插值参数本身（t=0 散开、t=1 真实）。
+7. **报告封面打印高 246mm**（版心 186 × 270mm，3:4 满宽是 248mm，留 2mm 余量防止溢出到第二页）。
+
+## 追加单环境缺口
+
+- 无登录态与真机：报告封面（屏幕 / 打印 PDF）、过场（真机点击跳过、减弱动态效果、慢网）只在单测、源码合同与无头 Chrome 画布取帧上验证；真机清单 `docs/testing/birth-sky-cover-checklist.md` 新增 18–30 条（11、12、13、14、16 作废）。
+- 无 Docker：24 条 DB / 部署套件失败与基线逐条同名；quick 门禁最后一步因此退出码 1。本单不改表结构、不加迁移。
+- 无模型凭据：真实报告生成（含写入指纹的三条路径）只在注入假代理的单测里跑过，部署后需新生成一份报告复核（清单第 18 条）。
+- 未推送、未部署（按任务书由 Claude 验收后整体快进推 staging）。
@@ -42,10 +42,19 @@

 ## 首次建盘揭幕

+追加单（`TASK-birth-sky-followup-20260928` F4）把弹窗换成了没有按钮的群星汇聚过场，原 13、14、16 条作废，15、17 仍然有效，另按 24 起的新条目走。
+
 | # | 设备 / 浏览器 | 操作 | 期望 | 结果 |
 | --- | --- | --- | --- | --- |
-| 13 | iPhone Safari | 新账号走完首页引导，最后一步保存出生地 | 3 秒内在当前页面上淡入同一张图（约 0.6 秒），多一个「继续」 | |
-| 14 | 同上 | 点「继续」/ Esc / 点遮罩 | 关掉，下面就是原本的下一步（问候或校正引导），没有被换掉 | |
-| 15 | 桌面 Chrome | 新账号，保存出生地前在 DevTools → Network → Request blocking 加一条 `*api/birth-sky*`（或把 `/api/birth-sky` 限速到 3 秒以上） | 保存成功后不出现弹层、不报错，引导照常往下走 | |
-| 16 | 任一 | 系统开启「减少动态效果」后重复 13 | 弹层直接出现，没有淡入 | |
-| 17 | 任一 | 在星盘档案里新建一个家人、或在设置里改自己的出生资料 | 都不弹「那一刻的天空」 | |
+| ~~13~~ | ~~iPhone Safari~~ | ~~新账号走完首页引导，最后一步保存出生地~~ | ~~3 秒内在当前页面上淡入同一张图（约 0.6 秒），多一个「继续」~~ | 作废 |
+| ~~14~~ | ~~同上~~ | ~~点「继续」/ Esc / 点遮罩~~ | ~~关掉，下面就是原本的下一步（问候或校正引导），没有被换掉~~ | 作废 |
+| 15 | 桌面 Chrome | 新账号，保存出生地前在 DevTools → Network → Request blocking 加一条 `*api/birth-sky*`（或把 `/api/birth-sky` 限速到 3 秒以上） | 保存成功后不出现过场、不报错、不转圈，引导照常往下走，也没有「这片天空…」提示 | |
+| ~~16~~ | ~~任一~~ | ~~系统开启「减少动态效果」后重复 13~~ | ~~弹层直接出现，没有淡入~~ | 作废 |
+| 17 | 任一 | 在星盘档案里新建一个家人、或在设置里改自己的出生资料 | 都不出现「那一刻的天空」过场 | |
+| 24 | iPhone Safari | 新账号走完首页引导，最后一步保存出生地，完整看一遍 | 约 3 秒：星星从散开处汇聚到位（约 1.5 秒）→ 主句与事实句淡入并停一会儿 → 整层淡出，露出原本的下一步（问候或校正引导）；全程没有按钮 | |
+| 25 | 同上（再开一个新账号） | 过场进行中点一下屏幕 | 立刻结束，直接是下一步 | |
+| 26 | 桌面 Chrome（新账号） | 过场进行中按 Esc | 立刻结束，直接是下一步 | |
+| 27 | iPhone（设置 → 辅助功能 → 动态效果 → 减弱动态效果） | 新账号重复 24 | 星星不移动：整张图淡入、停留、淡出 | |
+| 28 | 任一 | 网络很慢或断网时保存出生地（手机可开飞行模式后再关、或 DevTools 限速 Slow 3G） | 过场不出现，引导不卡住，没有转圈 | |
+| 29 | 任一 | 24 看完之后 | 首页下方轻提示一次「这片天空在星盘页可以保存。」，只出现一次；刷新首页不再出现，也不再放过场 | |
+| 30 | 任一 | 老账号平时打开首页 | 加载动画和以前一样，没有群星过场 | |
@@ -1160,9 +1160,14 @@ D40 / D45 / D60 的表格上方，出生时间不是「已校正」时多一句
 - **打印 / PDF：** 同一次取数同时画一张 `paper` palette 的图，只在打印时显示；封面独占 A4 第一页（`break-after: page`，高 246mm 居中，恰好放进报告 `@page` 的 186 × 270mm 版心）。不新增打印入口，仍是报告原来的「打印」。
 - **取数与等待：** 组件与正文同一次渲染挂载，副作用在正文上屏之后才发请求；两张图都画好才出现。取数、画图任一失败就不显示封面，不留占位、不加等待态，正文不受影响。组件与样式在懒加载 chunk 里（`components/birth-sky/report-sky-cover.tsx`），首页不带。

-### 位置三：首次建盘揭幕
+### 位置三：首次建盘群星汇聚过场（2026-09-28 追加，TASK-birth-sky-followup-20260928 F4，替换原弹窗）

- 触发只有一处：首页 onboarding 里**自己的**出生地保存成功（`saveOnboardingPlace` 成功之后）。每个账户只发生一次，所以没有「看过」标记、不写库。星盘档案里新建家人、设置里改资料都不触发。
- 保存成功后，onboarding 先照常走到下一步，再去取 `/api/birth-sky?subject=self` 并画图；**3 秒内**画好就在当前页面之上淡入同一个弹层（600ms 透明度，`prefers-reduced-motion` 时直接出现），多一个主按钮「继续」。超时或失败静默跳过：不提示、不重试、不等待。
- 「继续」、「关闭」、Esc、点遮罩都只关掉弹层，下面就是原本的下一步（问候或校正引导），下一步不因它改变。onboarding 保存出生地后本来不会自动进入出生时间校正，所以不存在「关闭后再进入」的排队。0 点数账户的兑换弹窗若同时出现，天空弹层在它之上（原生 `<dialog>` 顶层），关掉后兑换弹窗仍在。
- 这是用户操作之后的结果展示，不是首页加载等待，不违反 §9「首页只揭幕一次」；首页加载揭幕的轨道环逻辑不动。逻辑在 `hooks/use-birth-sky-reveal.ts`（自持状态），`page.tsx` 只接线（`Home()` 的 `useState` / `useRef` 数不变）。
+- **触发不变：** 只有一处——首页 onboarding 里**自己的**出生地保存成功（`saveOnboardingPlace` 成功、下一步已设好之后）。每个账户只发生一次，没有「看过」标记、不写库。星盘档案里新建家人、设置里改资料、平时打开首页都不触发。
+- **不等待：** 保存成功后 onboarding 照常走到下一步，同时取 `/api/birth-sky?subject=self`、等宋体（最多 1.5 秒）、加载过场代码；三样都在 **3 秒**内到齐才开始放，否则静默跳过：不提示、不重试、不转圈、不骨架（§9）。过场开始时数据已全部就绪。
+- **时序（约 3 秒）：** ① 汇聚约 1.5 秒：地平线以上的恒星与行星从散开的位置 ease-out（三次方）汇聚到真实投影位置；散开位置由这张盘自己的数据做种子，均匀撒在地平线圆内，同一张盘每次一样。地平线圆、30° / 60° 高度圈、方位字、星座连线、行星名同步淡入。整层前 200ms 淡入，避免页面一下变黑。② 显现文字约 1 秒：顶部小字、细线、主句、事实句、底部说明在前 400ms 淡入，然后停留。③ 淡出约 0.5 秒：整层透明度降到 0，露出**原本的下一步**（问候 / 首页，或出生时间校正引导），下一步不因它改变。
+- **最后一帧就是封面：** 每一帧都是 `drawBirthSky` 画的，只对位置插值（t = 0 散开、t = 1 真实位置，`interpolateSkyPoint`，t = 1 精确返回真实点）、对透明度乘系数；停留阶段的画布调用序列与导出封面逐条相同（单测逐调用比对）。
+- **全屏、无按钮：** 原生 `<dialog>`（顶层，0 点数账户的兑换弹窗若同时出现，过场在它之上）铺满视口，底色是 `night` 的页底色；画布按视口取最大的 3:4 区域、乘 `devicePixelRatio` 绘制，`requestAnimationFrame` 驱动，卸载时取消。点击、触摸（`pointerdown`）或 Esc 立刻结束，直接进入下一步。
+- **减少动态效果：** `prefers-reduced-motion: reduce` 时不汇聚：成品画面整体淡入（400ms）、停留、同一时刻淡出，总长同样约 3 秒。
+- **结束后的提示：** 过场正常结束或被点掉后，首页用已有的 sonner Toaster 轻提示一次「这片天空在星盘页可以保存。」（VOICE.md）。取数失败、超时时没有过场，也没有提示。
+- **平时的首页加载动画不改。** 这是用户操作之后的一次性结果展示，不是首页加载等待，不违反 §9「首页只揭幕一次」；轨道环揭幕逻辑不动。
+- 代码：时序与插值是 `lib/birth-sky/converge.ts` 的纯函数；过场组件 `components/birth-sky/birth-sky-converge.tsx`（懒加载 chunk，含 `draw.ts` 与样式）；状态在 `hooks/use-birth-sky-reveal.ts`，`page.tsx` 接线未变（`Home()` 的 `useState` / `useRef` 数不变）。星盘页的「那一刻的天空」弹窗删掉了只给揭幕用的 `is-reveal` 样式与「继续」按钮，其余不动。
@@ -159,7 +159,9 @@ Jyotisha 的可见文案是产品的一部分。正确性红线（真实性、

 首页开场语不用星星、月亮一类比喻（上文），那一条只管首页问候。封面写的是出生那一刻真实在天上的天体，不是比喻，两者不冲突。

-弹层文案：标题「那一刻的天空」（也是星盘页按钮字），按钮「保存图片」「关闭」，首次揭幕多一个「继续」。保存失败（极少见，分享与下载都不可用时）写「没能保存。长按或右键上面的图，也能存下来。」图片的替代文字是主句加事实句。
+弹层文案：标题「那一刻的天空」（也是星盘页按钮字），按钮「保存图片」「关闭」。保存失败（极少见，分享与下载都不可用时）写「没能保存。长按或右键上面的图，也能存下来。」图片的替代文字是主句加事实句。
+
+首次建盘的群星汇聚过场（2026-09-28 追加，TASK-birth-sky-followup-20260928）里**没有按钮、没有额外文字**，字就是封面上的主句与事实句；原来弹层上的「继续」已删除。过场结束后首页轻提示一次：「这片天空在星盘页可以保存。」——一句陈述，句号结尾，不加感叹、不加 emoji，不催用户去做。报告封面也不加任何文字或按钮。

 ## 七条原则

@@ -0,0 +1,25 @@
+/* First-chart convergence (TASK-birth-sky-followup-20260928 F4). Loaded with
+   the lazy overlay chunk only. Full screen, no buttons; opacity is driven
+   frame by frame from requestAnimationFrame, never from CSS keyframes. The
+   background is the night palette's floor, set inline from the painter. */
+.birth-sky-converge {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  cursor: default;
+  touch-action: none;
+}
+.birth-sky-converge:not([open]) { display: none; }
+.birth-sky-converge::backdrop { background: transparent; }
+.birth-sky-converge canvas { display: block; }
+@supports (height: 1dvh) { .birth-sky-converge { height: 100dvh; } }
+@media print { .birth-sky-converge { display: none !important; } }
@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+import "./birth-sky-converge.css";
+
+import { birthSkyRevealAt, birthSkyScatter } from "@/lib/birth-sky/converge";
+import { BIRTH_SKY_PALETTES, drawBirthSky, type BirthSkyCanvas } from "@/lib/birth-sky/draw";
+import type { BirthSkyRevealSky } from "@/lib/birth-sky/reveal";
+import { birthSkyFactLine, birthSkyHeadline } from "@/lib/birth-sky/sentence";
+
+/** Largest 3:4 box that fits the viewport, in CSS pixels. */
+export function birthSkyConvergeSize(viewportWidth: number, viewportHeight: number) {
+  const width = Math.max(1, Math.min(viewportWidth, (viewportHeight * 3) / 4));
+  return { width, height: (width * 4) / 3 };
+}
+
+/**
+ * First-chart convergence (TASK-birth-sky-followup-20260928 F4). A full-screen
+ * layer with no buttons: the stars converge, the words appear, the layer fades
+ * and the step underneath (unchanged) is simply there. A tap, a click or Esc
+ * ends it at once. Every frame is `drawBirthSky` with interpolated positions,
+ * so the settled frame is the exported cover.
+ */
+export function BirthSkyConverge({ reveal, onDone }: { reveal: BirthSkyRevealSky; onDone: () => void }) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const canvas = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const layer = dialog.current;
+    const surface = canvas.current;
+    const context = surface?.getContext("2d");
+    if (!layer || !surface || !context) {
+      onDone();
+      return;
+    }
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+    const scatter = birthSkyScatter(reveal.sky);
+    let frameHandle = 0;
+    let started: number | null = null;
+    let finished = false;
+
+    const fit = () => {
+      const size = birthSkyConvergeSize(window.innerWidth, window.innerHeight);
+      const ratio = window.devicePixelRatio || 1;
+      surface.style.width = `${size.width}px`;
+      surface.style.height = `${size.height}px`;
+      surface.width = Math.round(size.width * ratio);
+      surface.height = Math.round(size.height * ratio);
+    };
+    const finish = () => {
+      if (finished) return;
+      finished = true;
+      cancelAnimationFrame(frameHandle);
+      onDone();
+    };
+    const tick = (now: number) => {
+      if (finished) return;
+      started ??= now;
+      const moment = birthSkyRevealAt(now - started, reduced);
+      layer.style.opacity = String(moment.layer);
+      drawBirthSky(context as BirthSkyCanvas, reveal.sky, {
+        palette: "night",
+        width: surface.width,
+        height: surface.height,
+        serif: reveal.serif,
+      }, { ...moment.frame, scatter });
+      if (moment.done) finish();
+      else frameHandle = requestAnimationFrame(tick);
+    };
+    const cancel = (event: Event) => {
+      event.preventDefault();
+      finish();
+    };
+
+    fit();
+    layer.style.opacity = "0";
+    layer.showModal();
+    layer.addEventListener("cancel", cancel);
+    layer.addEventListener("pointerdown", finish);
+    window.addEventListener("resize", fit);
+    frameHandle = requestAnimationFrame(tick);
+    return () => {
+      finished = true;
+      cancelAnimationFrame(frameHandle);
+      layer.removeEventListener("cancel", cancel);
+      layer.removeEventListener("pointerdown", finish);
+      window.removeEventListener("resize", fit);
+      layer.close();
+    };
+  }, [reveal, onDone]);
+
+  return (
+    <dialog
+      ref={dialog}
+      className="birth-sky-converge"
+      aria-label="那一刻的天空"
+      style={{ background: BIRTH_SKY_PALETTES.night.background }}
+    >
+      <canvas
+        ref={canvas}
+        role="img"
+        aria-label={`${birthSkyHeadline(reveal.sky)}${birthSkyFactLine(reveal.sky)}。`}
+      />
+    </dialog>
+  );
+}
@@ -12,8 +12,6 @@ import { birthSkyFactLine, birthSkyHeadline } from "@/lib/birth-sky/sentence";
 export type BirthSkyDialogProps = Readonly<{
  cover: BirthSkyCover;
  onClose: () => void;
-  /** First-chart reveal: fade in over the current step and offer 「继续」. */
-  reveal?: boolean;
 }>;

 /**
@@ -21,7 +19,7 @@ export type BirthSkyDialogProps = Readonly<{
 * centred on desktop. The picture is an `<img>` of the painted PNG, so a long
 * press saves it on iOS; 「保存图片」 shares or downloads the same file.
 */
-export function BirthSkyDialog({ cover, onClose, reveal = false }: BirthSkyDialogProps) {
+export function BirthSkyDialog({ cover, onClose }: BirthSkyDialogProps) {
  const dialog = useRef<HTMLDialogElement>(null);
  const saving = useRef(false);
  const [error, setError] = useState<string | null>(null);
@@ -53,7 +51,7 @@ export function BirthSkyDialog({ cover, onClose, reveal = false }: BirthSkyDialo
  return (
    <dialog
      ref={dialog}
-      className={reveal ? "birth-sky-dialog is-reveal" : "birth-sky-dialog"}
+      className="birth-sky-dialog"
      aria-labelledby="birth-sky-title"
      onCancel={(event) => { event.preventDefault(); onClose(); }}
      onClick={(event) => { if (event.target === event.currentTarget) onClose(); }}
@@ -70,7 +68,6 @@ export function BirthSkyDialog({ cover, onClose, reveal = false }: BirthSkyDialo
        <footer className="birth-sky-footer">
          {error ? <p role="alert">{error}</p> : null}
          <Button type="button" variant="outline" onClick={() => void save()}>保存图片</Button>
-          {reveal ? <Button type="button" onClick={onClose}>继续</Button> : null}
        </footer>
      </div>
    </dialog>
@@ -2,14 +2,14 @@

 import dynamic from "next/dynamic";

-import type { BirthSkyCover } from "@/lib/birth-sky/cover";
+import type { BirthSkyRevealSky } from "@/lib/birth-sky/reveal";

-const BirthSkyDialog = dynamic(
-  () => import("./birth-sky-dialog").then((module) => module.BirthSkyDialog),
+const BirthSkyConverge = dynamic(
+  () => import("./birth-sky-converge").then((module) => module.BirthSkyConverge),
  { ssr: false },
 );

-/** First-chart reveal: the chart page's dialog, faded in once, with 「继续」. */
-export function BirthSkyReveal({ cover, onClose }: { cover: BirthSkyCover | null; onClose: () => void }) {
-  return cover ? <BirthSkyDialog cover={cover} onClose={onClose} reveal /> : null;
+/** First-chart reveal: the stars converge once over the next step, then get out of the way. */
+export function BirthSkyReveal({ cover, onClose }: { cover: BirthSkyRevealSky | null; onClose: () => void }) {
+  return cover ? <BirthSkyConverge reveal={cover} onDone={onClose} /> : null;
 }
@@ -74,12 +74,4 @@
  .birth-sky-panel { height: auto; max-height: calc(92vh - 2px); }
  .birth-sky-image { max-height: calc(92vh - 160px); }
 }
-/* First-chart reveal: one 600ms fade, no motion when the reader asked for none. */
-.birth-sky-dialog.is-reveal[open] { animation: birth-sky-reveal 600ms ease-out; }
-.birth-sky-dialog.is-reveal[open]::backdrop { animation: birth-sky-reveal 600ms ease-out; }
-@keyframes birth-sky-reveal { from { opacity: 0; } to { opacity: 1; } }
-@media (prefers-reduced-motion: reduce) {
-  .birth-sky-dialog.is-reveal[open],
-  .birth-sky-dialog.is-reveal[open]::backdrop { animation: none; }
-}
@media print { .birth-sky-dialog { display: none !important; } }
@@ -1,34 +1,49 @@
 "use client";

 import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";

-import { loadBirthSkyCover, releaseBirthSkyCover, type BirthSkyCover } from "@/lib/birth-sky/cover";
-import { startBirthSkyReveal } from "@/lib/birth-sky/reveal";
+import { loadBirthSkyRevealSky, startBirthSkyReveal, type BirthSkyRevealSky } from "@/lib/birth-sky/reveal";
+
+/** Shown once on the home page after the convergence ends (VOICE.md). */
+export const BIRTH_SKY_REVEAL_HINT = "这片天空在星盘页可以保存。";

 /**
- * The one-time 「那一刻的天空」 reveal after the reader's own first chart
- * (TASK-birth-sky-cover-20260928 T6). Owns its state so Home only wires it:
- * `begin` goes to the onboarding hook, `cover` / `close` to the dialog.
- * Saving one's own birth place happens once per account, so no "seen" flag.
+ * The one-time 「那一刻的天空」 convergence after the reader's own first chart
+ * (TASK-birth-sky-cover-20260928 T6 → TASK-birth-sky-followup-20260928 F4).
+ * Owns its state so Home only wires it: `begin` goes to the onboarding hook,
+ * `cover` / `close` to the overlay. `cover` is the sky plus the serif verdict,
+ * ready before the first frame. Saving one's own birth place happens once per
+ * account, so no "seen" flag.
 */
 export function useBirthSkyReveal() {
-  const [cover, setCover] = useState<BirthSkyCover | null>(null);
+  const [cover, setCover] = useState<BirthSkyRevealSky | null>(null);
  const cancel = useRef<(() => void) | null>(null);
+  const playing = useRef(false);

  const begin = useCallback(() => {
    cancel.current?.();
-    cancel.current = startBirthSkyReveal({
-      load: (signal) => loadBirthSkyCover("self:reveal", "self", signal),
-      onReady: (next) => setCover(next),
-      onDiscard: releaseBirthSkyCover,
+    cancel.current = startBirthSkyReveal<BirthSkyRevealSky>({
+      // The overlay chunk loads inside the same budget, so the first frame never waits for code.
+      load: async (signal) => {
+        const [sky] = await Promise.all([
+          loadBirthSkyRevealSky(signal),
+          import("@/components/birth-sky/birth-sky-converge"),
+        ]);
+        return sky;
+      },
+      onReady: (next) => {
+        playing.current = true;
+        setCover(next);
+      },
    });
  }, []);

  const close = useCallback(() => {
-    setCover((current) => {
-      releaseBirthSkyCover(current);
-      return null;
-    });
+    if (!playing.current) return;
+    playing.current = false;
+    setCover(null);
+    toast(BIRTH_SKY_REVEAL_HINT);
  }, []);

  useEffect(() => () => { cancel.current?.(); }, []);
@@ -0,0 +1,146 @@
+import type { BirthSkyOk } from "./contract.ts";
+import {
+  BIRTH_SKY_CENTER,
+  BIRTH_SKY_RADIUS,
+  birthSkyBodyKey,
+  interpolateSkyPoint,
+  skyPoint,
+  type BirthSkyFrame,
+  type SkyPoint,
+} from "./draw.ts";
+
+/**
+ * First-chart convergence (TASK-birth-sky-followup-20260928 F4): the visible
+ * stars and planets travel from seeded scattered positions to their true
+ * projection, then the words appear, then the whole layer fades out. Pure
+ * functions only; the overlay feeds them `requestAnimationFrame` time.
+ */
+
+export const BIRTH_SKY_CONVERGE_MS = 1_500;
+export const BIRTH_SKY_TEXT_MS = 1_000;
+export const BIRTH_SKY_FADE_MS = 500;
+export const BIRTH_SKY_REVEAL_TOTAL_MS = BIRTH_SKY_CONVERGE_MS + BIRTH_SKY_TEXT_MS + BIRTH_SKY_FADE_MS;
+/** Words fade in over the first part of their second, then hold. */
+const TEXT_FADE_IN_MS = 400;
+/** The layer itself comes in quickly so the page does not flash to dark. */
+const LAYER_FADE_IN_MS = 200;
+/** Reduced motion: no travel, one fade in, a hold, one fade out. */
+const REDUCED_FADE_IN_MS = 400;
+/** Scattered stars stay inside the horizon so the clip never hides them. */
+const SCATTER_RADIUS = BIRTH_SKY_RADIUS * 0.95;
+
+export type BirthSkyVisibleBody = Readonly<{ key: string; point: SkyPoint }>;
+
+/** Bodies drawn on the cover (above the horizon), keyed as the painter keys them. */
+export function birthSkyVisibleBodies(sky: BirthSkyOk): readonly BirthSkyVisibleBody[] {
+  return [
+    ...sky.stars
+      .filter((star) => star.altitude > 0)
+      .map((star) => ({ key: birthSkyBodyKey("star", star.hr), point: skyPoint(star.altitude, star.azimuth) })),
+    ...sky.planets
+      .filter((planet) => planet.altitude > 0)
+      .map((planet) => ({ key: birthSkyBodyKey("planet", planet.id), point: skyPoint(planet.altitude, planet.azimuth) })),
+  ];
+}
+
+/** Seed from the chart itself, so the same chart always scatters the same way. */
+export function birthSkySeed(sky: BirthSkyOk): number {
+  let hash = 0x811c9dc5;
+  const feed = (value: string) => {
+    for (let index = 0; index < value.length; index += 1) {
+      hash ^= value.charCodeAt(index);
+      hash = Math.imul(hash, 0x01000193);
+    }
+  };
+  for (const body of birthSkyVisibleBodies(sky)) feed(`${body.key}@${body.point.x.toFixed(3)},${body.point.y.toFixed(3)};`);
+  return hash >>> 0;
+}
+
+/** mulberry32: small, fast, deterministic. */
+function random(seed: number): () => number {
+  let state = seed >>> 0;
+  return () => {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let t = state;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4_294_967_296;
+  };
+}
+
+/** Uniform scattered start points inside the horizon, one per visible body. */
+export function birthSkyScatter(sky: BirthSkyOk, seed = birthSkySeed(sky)): ReadonlyMap<string, SkyPoint> {
+  const next = random(seed);
+  const scatter = new Map<string, SkyPoint>();
+  for (const body of birthSkyVisibleBodies(sky)) {
+    const radius = Math.sqrt(next()) * SCATTER_RADIUS;
+    const angle = next() * Math.PI * 2;
+    scatter.set(body.key, {
+      x: BIRTH_SKY_CENTER.x + radius * Math.cos(angle),
+      y: BIRTH_SKY_CENTER.y + radius * Math.sin(angle),
+    });
+  }
+  return scatter;
+}
+
+/** Positions at progress t (0 = scattered, 1 = true). */
+export function birthSkyPositionsAt(
+  sky: BirthSkyOk,
+  scatter: ReadonlyMap<string, SkyPoint>,
+  t: number,
+): ReadonlyMap<string, SkyPoint> {
+  const positions = new Map<string, SkyPoint>();
+  for (const body of birthSkyVisibleBodies(sky)) {
+    positions.set(body.key, interpolateSkyPoint(scatter.get(body.key) ?? body.point, body.point, t));
+  }
+  return positions;
+}
+
+export function easeOutCubic(t: number): number {
+  if (t <= 0) return 0;
+  if (t >= 1) return 1;
+  return 1 - (1 - t) ** 3;
+}
+
+function clamp01(value: number): number {
+  return value <= 0 ? 0 : value >= 1 ? 1 : value;
+}
+
+export type BirthSkyRevealTimeline = Readonly<{
+  /** Painter frame at this moment. */
+  frame: Omit<BirthSkyFrame, "scatter">;
+  /** Opacity of the whole overlay. */
+  layer: number;
+  /** True once the last fade has finished: remove the overlay, show the next step. */
+  done: boolean;
+}>;
+
+const SETTLED = { converge: 1, chrome: 1, text: 1 } as const;
+
+/**
+ * Normal: 0–1.5 s converge (ease-out) with horizon, rings and letters fading
+ * in; 1.5–2.5 s words fade in and hold; 2.5–3 s the layer fades out.
+ * Reduced motion: the finished picture fades in, holds, fades out.
+ */
+export function birthSkyRevealAt(elapsedMs: number, reducedMotion: boolean): BirthSkyRevealTimeline {
+  const t = Math.max(0, elapsedMs);
+  const fadeStart = BIRTH_SKY_CONVERGE_MS + BIRTH_SKY_TEXT_MS;
+  const done = t >= BIRTH_SKY_REVEAL_TOTAL_MS;
+  const fadeOut = t >= fadeStart ? 1 - clamp01((t - fadeStart) / BIRTH_SKY_FADE_MS) : 1;
+  if (reducedMotion) {
+    return { frame: SETTLED, layer: Math.min(clamp01(t / REDUCED_FADE_IN_MS), fadeOut), done };
+  }
+  if (t < BIRTH_SKY_CONVERGE_MS) {
+    const progress = t / BIRTH_SKY_CONVERGE_MS;
+    return {
+      frame: { converge: easeOutCubic(progress), chrome: progress, text: 0 },
+      layer: clamp01(t / LAYER_FADE_IN_MS),
+      done: false,
+    };
+  }
+  return {
+    frame: { converge: 1, chrome: 1, text: clamp01((t - BIRTH_SKY_CONVERGE_MS) / TEXT_FADE_IN_MS) },
+    layer: fadeOut,
+    done,
+  };
+}
@@ -92,6 +92,35 @@ export function skyPoint(altitude: number, azimuth: number): SkyPoint {
 }

 export const BIRTH_SKY_CENTER: SkyPoint = { x: CENTER_X, y: CENTER_Y };
+/** Horizon radius in design units. */
+export const BIRTH_SKY_RADIUS = RADIUS;
+
+/**
+ * One frame of the first-chart convergence (TASK-birth-sky-followup-20260928 F4).
+ * Omitted, or with every field at 1, the painter draws the exported cover
+ * exactly: positions are only interpolated, alphas only multiplied.
+ */
+export type BirthSkyFrame = Readonly<{
+  /** Eased progress: 0 = scattered positions, 1 = true projected positions. */
+  converge: number;
+  /** Horizon circle, altitude rings, direction letters, constellation lines, planet names. */
+  chrome: number;
+  /** Text frame: top label, rules, headline, fact line, footnote, disclaimer. */
+  text: number;
+  /** Scattered start positions keyed by `birthSkyBodyKey`. */
+  scatter: ReadonlyMap<string, SkyPoint>;
+}>;
+
+export function birthSkyBodyKey(kind: "star" | "planet", id: number | string): string {
+  return `${kind}:${id}`;
+}
+
+/** Pure: t = 0 returns `from`, t = 1 returns `to` exactly (no floating-point residue). */
+export function interpolateSkyPoint(from: SkyPoint, to: SkyPoint, t: number): SkyPoint {
+  if (t >= 1) return to;
+  if (t <= 0) return from;
+  return { x: from.x * (1 - t) + to.x * t, y: from.y * (1 - t) + to.y * t };
+}

 function resolvePalette(palette: BirthSkyDrawOptions["palette"]): BirthSkyPalette {
  return typeof palette === "string" ? BIRTH_SKY_PALETTES[palette] : palette;
@@ -111,8 +140,18 @@ function overlaps(a: Box, b: Box): boolean {
  return a.x0 < b.x1 && b.x0 < a.x1 && a.y0 < b.y1 && b.y0 < a.y1;
 }

-export function drawBirthSky(ctx: BirthSkyCanvas, sky: BirthSkyOk, options: BirthSkyDrawOptions): void {
+export function drawBirthSky(
+  ctx: BirthSkyCanvas,
+  sky: BirthSkyOk,
+  options: BirthSkyDrawOptions,
+  frame?: BirthSkyFrame,
+): void {
  const palette = resolvePalette(options.palette);
+  const chromeAlpha = frame?.chrome ?? 1;
+  const textAlpha = frame?.text ?? 1;
+  const place = (key: string, point: SkyPoint): SkyPoint => (
+    frame ? interpolateSkyPoint(frame.scatter.get(key) ?? point, point, frame.converge) : point
+  );
  const serif = options.serif ?? true;
  const footnote = options.footnote === undefined ? birthSkyFootnote(sky) : options.footnote;
  const unit = options.width / UNIT_WIDTH;
@@ -131,7 +170,7 @@ export function drawBirthSky(ctx: BirthSkyCanvas, sky: BirthSkyOk, options: Birt

  ctx.strokeStyle = palette.star;
  ctx.lineWidth = 0.5;
-  ctx.globalAlpha = 0.22;
+  ctx.globalAlpha = 0.22 * chromeAlpha;
  ctx.setLineDash([1, 4]);
  for (const ring of [30, 60]) {
    ctx.beginPath();
@@ -145,7 +184,7 @@ export function drawBirthSky(ctx: BirthSkyCanvas, sky: BirthSkyOk, options: Birt
  ctx.globalAlpha = 0.85;
  for (const star of sky.stars) {
    if (star.altitude <= 0) continue;
-    const point = skyPoint(star.altitude, star.azimuth);
+    const point = place(birthSkyBodyKey("star", star.hr), skyPoint(star.altitude, star.azimuth));
    visible.set(star.hr, point);
    ctx.beginPath();
    ctx.arc(point.x, point.y, starRadius(star.magnitude), 0, Math.PI * 2);
@@ -154,7 +193,7 @@ export function drawBirthSky(ctx: BirthSkyCanvas, sky: BirthSkyOk, options: Birt

  ctx.strokeStyle = palette.star;
  ctx.lineWidth = 0.6;
-  ctx.globalAlpha = 0.4;
+  ctx.globalAlpha = 0.4 * chromeAlpha;
  for (const line of sky.lines) {
    for (const stroke of line.strokes) {
      for (let index = 1; index < stroke.length; index += 1) {
@@ -170,8 +209,11 @@ export function drawBirthSky(ctx: BirthSkyCanvas, sky: BirthSkyOk, options: Birt
  }

  const planets = sky.planets.filter((planet) => planet.altitude > 0);
+  const planetPoint = (planet: (typeof planets)[number]) => (
+    place(birthSkyBodyKey("planet", planet.id), skyPoint(planet.altitude, planet.azimuth))
+  );
  for (const planet of planets) {
-    const point = skyPoint(planet.altitude, planet.azimuth);
+    const point = planetPoint(planet);
    if (planet.id === "sun") {
      ctx.fillStyle = palette.sun;
      ctx.globalAlpha = 0.18;
@@ -201,7 +243,7 @@ export function drawBirthSky(ctx: BirthSkyCanvas, sky: BirthSkyOk, options: Birt
  ctx.font = font(400, 11, false);
  const labels: Box[] = [];
  for (const planet of planets) {
-    const point = skyPoint(planet.altitude, planet.azimuth);
+    const point = planetPoint(planet);
    const name = BIRTH_SKY_PLANET_NAMES[planet.id];
    const width = 24;
    const candidates = planet.id === "sun"
@@ -214,20 +256,20 @@ export function drawBirthSky(ctx: BirthSkyCanvas, sky: BirthSkyOk, options: Birt
    const choice = candidates.find((item) => !labels.some((taken) => overlaps(box(item), taken))) ?? candidates[0];
    labels.push(box(choice));
    ctx.fillStyle = planet.id === "sun" ? palette.sun : palette.ink;
-    ctx.globalAlpha = 0.9;
+    ctx.globalAlpha = 0.9 * chromeAlpha;
    ctx.textAlign = choice.align;
    ctx.fillText(name, point.x + choice.dx, point.y + choice.dy);
  }

  ctx.strokeStyle = palette.star;
  ctx.lineWidth = 0.9;
-  ctx.globalAlpha = 0.6;
+  ctx.globalAlpha = 0.6 * chromeAlpha;
  ctx.beginPath();
  ctx.arc(CENTER_X, CENTER_Y, RADIUS, 0, Math.PI * 2);
  ctx.stroke();

  ctx.fillStyle = palette.inkSecondary;
-  ctx.globalAlpha = 0.9;
+  ctx.globalAlpha = 0.9 * chromeAlpha;
  ctx.textAlign = "center";
  ctx.font = font(400, 12, false);
  for (const [text, dx, dy] of [["北", 0, -1], ["南", 0, 1], ["东", -1, 0], ["西", 1, 0]] as const) {
@@ -237,7 +279,7 @@ export function drawBirthSky(ctx: BirthSkyCanvas, sky: BirthSkyOk, options: Birt
  // Text frame (sample C): label, rule, headline … rule, fact, footnote, disclaimer.
  ctx.textAlign = "left";
  ctx.fillStyle = palette.inkSecondary;
-  ctx.globalAlpha = 1;
+  ctx.globalAlpha = 1 * textAlpha;
  ctx.font = font(600, 12, serif);
  // Tracked by hand (canvas letterSpacing is not in every Safari we support).
  let cursor = 48;
@@ -1,26 +1,45 @@
-import type { BirthSkyCover } from "./cover.ts";
+import type { BirthSkyOk } from "./contract.ts";
+import { fetchBirthSky } from "./cover.ts";

 /**
- * First-chart reveal timing (TASK-birth-sky-cover-20260928 T6).
+ * First-chart reveal timing (TASK-birth-sky-cover-20260928 T6, convergence
+ * since TASK-birth-sky-followup-20260928 F4).
 *
- * After the reader's own birth place is saved, the cover gets one chance: if
- * it is fetched and painted within `timeoutMs` it is shown, otherwise it is
- * dropped silently — no error, no retry, and the onboarding flow never waits.
+ * After the reader's own birth place is saved, the reveal gets one chance: if
+ * its data is ready within `timeoutMs` it plays, otherwise it is dropped
+ * silently — no error, no retry, and the onboarding flow never waits.
 */
 export const BIRTH_SKY_REVEAL_TIMEOUT_MS = 3_000;

-export type BirthSkyRevealInput = Readonly<{
-  load: (signal: AbortSignal) => Promise<BirthSkyCover | null>;
-  onReady: (cover: BirthSkyCover) => void;
-  /** A cover that arrived too late; the caller releases its object URL. */
-  onDiscard?: (cover: BirthSkyCover) => void;
+/** Everything the convergence overlay needs before its first frame. */
+export type BirthSkyRevealSky = Readonly<{ sky: BirthSkyOk; serif: boolean }>;
+
+/** Fetch the reader's own sky and wait (bounded) for the heading serif. Null on any failure. */
+export async function loadBirthSkyRevealSky(signal: AbortSignal): Promise<BirthSkyRevealSky | null> {
+  try {
+    const sky = await fetchBirthSky("self", signal);
+    if (!sky || signal.aborted) return null;
+    const { BIRTH_SKY_TOP_LABEL, birthSkyHeadline } = await import("./sentence.ts");
+    const { waitForHeadingSerif } = await import("./render.ts");
+    const serif = await waitForHeadingSerif(`${birthSkyHeadline(sky)}${BIRTH_SKY_TOP_LABEL}`);
+    return signal.aborted ? null : { sky, serif };
+  } catch {
+    return null;
+  }
+}
+
+export type BirthSkyRevealInput<T> = Readonly<{
+  load: (signal: AbortSignal) => Promise<T | null>;
+  onReady: (value: T) => void;
+  /** A value that arrived too late; the caller releases whatever it holds. */
+  onDiscard?: (value: T) => void;
  timeoutMs?: number;
  setTimer?: (callback: () => void, ms: number) => unknown;
  clearTimer?: (handle: unknown) => void;
 }>;

 /** Starts one reveal attempt; the returned function cancels it. */
-export function startBirthSkyReveal(input: BirthSkyRevealInput): () => void {
+export function startBirthSkyReveal<T>(input: BirthSkyRevealInput<T>): () => void {
  const setTimer = input.setTimer ?? ((callback: () => void, ms: number) => setTimeout(callback, ms));
  const clearTimer = input.clearTimer ?? ((handle: unknown) => clearTimeout(handle as ReturnType<typeof setTimeout>));
  const controller = new AbortController();
@@ -2,20 +2,41 @@ import assert from "node:assert/strict";
 import { readFileSync } from "node:fs";
 import test from "node:test";

-import type { BirthSkyCover } from "../src/lib/birth-sky/cover.ts";
-import { BIRTH_SKY_REVEAL_TIMEOUT_MS, startBirthSkyReveal } from "../src/lib/birth-sky/reveal.ts";
+import {
+  BIRTH_SKY_CONVERGE_MS,
+  BIRTH_SKY_FADE_MS,
+  BIRTH_SKY_REVEAL_TOTAL_MS,
+  BIRTH_SKY_TEXT_MS,
+  birthSkyPositionsAt,
+  birthSkyRevealAt,
+  birthSkyScatter,
+  birthSkySeed,
+  birthSkyVisibleBodies,
+} from "../src/lib/birth-sky/converge.ts";
+import {
+  BIRTH_SKY_EXPORT_HEIGHT,
+  BIRTH_SKY_EXPORT_WIDTH,
+  drawBirthSky,
+  interpolateSkyPoint,
+  type BirthSkyCanvas,
+} from "../src/lib/birth-sky/draw.ts";
+import { BIRTH_SKY_REVEAL_TIMEOUT_MS, startBirthSkyReveal, type BirthSkyRevealSky } from "../src/lib/birth-sky/reveal.ts";
 import { goldenSky } from "./birth-sky-test-support.ts";

-// 「那一刻的天空」 first-chart reveal (TASK-birth-sky-cover-20260928 T6).
+// 「那一刻的天空」 first-chart reveal (TASK-birth-sky-cover-20260928 T6),
+// convergence since TASK-birth-sky-followup-20260928 F4.

 const onboarding = readFileSync(new URL("../src/hooks/use-profile-onboarding.ts", import.meta.url), "utf8");
 const page = readFileSync(new URL("../src/app/(app)/page.tsx", import.meta.url), "utf8");
 const revealHook = readFileSync(new URL("../src/hooks/use-birth-sky-reveal.ts", import.meta.url), "utf8");
 const revealComponent = readFileSync(new URL("../src/components/birth-sky/birth-sky-reveal.tsx", import.meta.url), "utf8");
+const converge = readFileSync(new URL("../src/components/birth-sky/birth-sky-converge.tsx", import.meta.url), "utf8");
+const convergeCss = readFileSync(new URL("../src/components/birth-sky/birth-sky-converge.css", import.meta.url), "utf8");
 const dialog = readFileSync(new URL("../src/components/birth-sky/birth-sky-dialog.tsx", import.meta.url), "utf8");
 const dialogCss = readFileSync(new URL("../src/components/birth-sky/birth-sky.css", import.meta.url), "utf8");
+const voice = readFileSync(new URL("../docs/VOICE.md", import.meta.url), "utf8");

-const cover: BirthSkyCover = { key: "self:reveal", sky: goldenSky("day"), blob: new Blob([]), url: "blob:sky" };
+const cover: BirthSkyRevealSky = { sky: goldenSky("day"), serif: true };

 function fakeClock() {
  let pending: { callback: () => void; ms: number } | null = null;
@@ -34,10 +55,10 @@ function deferred<T>() {
  return { promise, resolve, reject };
 }

-test("saved in time: the dialog opens with the painted cover; closing touches nothing else", async () => {
+test("saved in time: the convergence starts once its data is ready; ending touches nothing else", async () => {
  const clock = fakeClock();
-  const load = deferred<BirthSkyCover | null>();
-  const shown: BirthSkyCover[] = [];
+  const load = deferred<BirthSkyRevealSky | null>();
+  const shown: BirthSkyRevealSky[] = [];
  startBirthSkyReveal({ load: () => load.promise, onReady: (item) => shown.push(item), ...clock });
  assert.equal(clock.ms, BIRTH_SKY_REVEAL_TIMEOUT_MS);
  assert.equal(BIRTH_SKY_REVEAL_TIMEOUT_MS, 3_000);
@@ -45,18 +66,18 @@ test("saved in time: the dialog opens with the painted cover; closing touches no
  await load.promise;
  await Promise.resolve();
  assert.deepEqual(shown, [cover]);
-  assert.equal(clock.ms, null, "the timeout is cleared once the cover is shown");
-  // Close only clears the reveal's own cover; the onboarding step is not touched.
+  assert.equal(clock.ms, null, "the timeout is cleared once the reveal starts");
+  // Ending only clears the reveal's own state; the onboarding step is not touched.
  assert.match(page, /<BirthSkyReveal cover=\{birthSkyReveal\.cover\} onClose=\{birthSkyReveal\.close\} \/>/);
  const close = revealHook.slice(revealHook.indexOf("const close"));
  assert.doesNotMatch(close.slice(0, close.indexOf("}, []);")), /Onboarding|setOnboarding|setProfile|Journey/);
 });

-test("timeout: no dialog, the late cover is released, the request is aborted", async () => {
+test("timeout: no overlay, the late data is dropped, the request is aborted", async () => {
  const clock = fakeClock();
-  const load = deferred<BirthSkyCover | null>();
-  const shown: BirthSkyCover[] = [];
-  const discarded: BirthSkyCover[] = [];
+  const load = deferred<BirthSkyRevealSky | null>();
+  const shown: BirthSkyRevealSky[] = [];
+  const discarded: BirthSkyRevealSky[] = [];
  let signal: AbortSignal | null = null;
  startBirthSkyReveal({
    load: (next) => { signal = next; return load.promise; },
@@ -73,18 +94,20 @@ test("timeout: no dialog, the late cover is released, the request is aborted", a
  assert.deepEqual(discarded, [cover]);
 });

-test("failure: no dialog, no retry, no error surfaced", async () => {
+test("failure: no overlay, no retry, no error surfaced", async () => {
  const clock = fakeClock();
  let calls = 0;
-  const shown: BirthSkyCover[] = [];
+  const shown: BirthSkyRevealSky[] = [];
  startBirthSkyReveal({ load: async () => { calls += 1; throw new Error("offline"); }, onReady: (item) => shown.push(item), ...clock });
  await new Promise((resolve) => setImmediate(resolve));
  const nullCover = fakeClock();
-  startBirthSkyReveal({ load: async () => { calls += 1; return null; }, onReady: (item) => shown.push(item), ...nullCover });
+  startBirthSkyReveal<BirthSkyRevealSky>({ load: async () => { calls += 1; return null; }, onReady: (item) => shown.push(item), ...nullCover });
  await new Promise((resolve) => setImmediate(resolve));
  assert.equal(calls, 2);
  assert.deepEqual(shown, []);
-  assert.doesNotMatch(revealHook, /toast|setError|console\.(error|warn)/);
+  assert.doesNotMatch(revealHook, /setError|console\.(error|warn)/);
+  // The only toast is the hint in `close`, which runs after the overlay has played.
+  assert.equal(revealHook.match(/toast\(/g)?.length, 1);
 });

 test("only the reader's own onboarding place save triggers it, after the flow has moved on", () => {
@@ -106,15 +129,123 @@ test("only the reader's own onboarding place save triggers it, after the flow ha
    assert.doesNotMatch(readFileSync(new URL(path, import.meta.url), "utf8"), /BirthSkyReveal|useBirthSkyReveal|onOwnBirthPlaceSaved/);
  }
  assert.match(page, /onOwnBirthPlaceSaved: birthSkyReveal\.begin,/);
-  assert.match(revealHook, /loadBirthSkyCover\("self:reveal", "self", signal\)/);
+  assert.match(revealHook, /loadBirthSkyRevealSky\(signal\)/);
 });

-test("the reveal is the chart page's dialog plus 「继续」, faded in 600ms, still under reduced motion", () => {
-  assert.match(revealComponent, /dynamic\(\s*\(\) => import\("\.\/birth-sky-dialog"\)/);
-  assert.match(revealComponent, /reveal \/>/);
-  assert.match(dialog, /\{reveal \? <Button type="button" onClick=\{onClose\}>继续<\/Button> : null\}/);
-  assert.match(dialog, /onCancel=\{\(event\) => \{ event\.preventDefault\(\); onClose\(\); \}\}/);
-  assert.match(dialog, /if \(event\.target === event\.currentTarget\) onClose\(\);/);
-  assert.match(dialogCss, /\.birth-sky-dialog\.is-reveal\[open\] \{ animation: birth-sky-reveal 600ms ease-out; \}/);
-  assert.match(dialogCss, /@media \(prefers-reduced-motion: reduce\) \{\s*\.birth-sky-dialog\.is-reveal\[open\],\s*\.birth-sky-dialog\.is-reveal\[open\]::backdrop \{ animation: none; \}/);
+test("interpolation is pure: t=0 is the seeded scatter, t=1 is the true projection point for point", () => {
+  const sky = goldenSky("night");
+  const bodies = birthSkyVisibleBodies(sky);
+  assert.ok(bodies.length > 20, "night golden has plenty of visible stars");
+  const scatter = birthSkyScatter(sky);
+  // Same chart, same seed, same scatter; another chart scatters differently.
+  assert.deepEqual([...birthSkyScatter(sky)], [...scatter]);
+  assert.deepEqual([...birthSkyScatter(sky, birthSkySeed(sky))], [...scatter]);
+  assert.notEqual(birthSkySeed(goldenSky("day")), birthSkySeed(sky));
+  const start = birthSkyPositionsAt(sky, scatter, 0);
+  const end = birthSkyPositionsAt(sky, scatter, 1);
+  for (const body of bodies) {
+    assert.deepEqual(start.get(body.key), scatter.get(body.key));
+    assert.deepEqual(end.get(body.key), body.point, body.key);
+    const point = scatter.get(body.key)!;
+    assert.ok(Math.hypot(point.x - 300, point.y - 400) <= 200, "scatter stays inside the horizon");
+  }
+  assert.deepEqual(interpolateSkyPoint({ x: 0, y: 0 }, { x: 10, y: 20 }, 0.5), { x: 5, y: 10 });
+});
+
+type Call = { method: string; args: unknown[]; state: Record<string, unknown> };
+function recorder() {
+  const calls: Call[] = [];
+  const state: Record<string, unknown> = {};
+  const ctx = new Proxy({} as Record<string, unknown>, {
+    get(_target, key: string) {
+      if (key in state) return state[key];
+      if (key === "measureText") return (text: string) => ({ width: text.length * 10 });
+      return (...args: unknown[]) => { calls.push({ method: key, args, state: { ...state } }); };
+    },
+    set(_target, key: string, value: unknown) {
+      state[key] = value;
+      return true;
+    },
+  }) as unknown as BirthSkyCanvas;
+  return { ctx, calls };
+}
+
+test("the settled frame is the exported cover, call for call; earlier frames move and fade", () => {
+  for (const phase of ["day", "night", "twilight_evening"] as const) {
+    const sky = goldenSky(phase);
+    const options = { palette: "night" as const, width: BIRTH_SKY_EXPORT_WIDTH, height: BIRTH_SKY_EXPORT_HEIGHT };
+    const exported = recorder();
+    drawBirthSky(exported.ctx, sky, options);
+    const scatter = birthSkyScatter(sky);
+    const settled = recorder();
+    const hold = birthSkyRevealAt(BIRTH_SKY_CONVERGE_MS + BIRTH_SKY_TEXT_MS - 1, false);
+    drawBirthSky(settled.ctx, sky, options, { ...hold.frame, scatter });
+    assert.deepEqual(settled.calls, exported.calls, phase);
+    const first = recorder();
+    drawBirthSky(first.ctx, sky, options, { ...birthSkyRevealAt(0, false).frame, scatter });
+    assert.notDeepEqual(first.calls, exported.calls);
+    const words = first.calls.filter((call) => call.method === "fillText" && call.args[0] === "仅供自我探索，不替你做决定。");
+    assert.equal(words[0]?.state.globalAlpha, 0, "the words are not visible while the stars travel");
+  }
+  // The overlay draws every frame through the same painter.
+  assert.match(converge, /drawBirthSky\(context as BirthSkyCanvas, reveal\.sky, \{/);
+});
+
+test("timeline: converge ~1.5 s, words ~1 s, fade ~0.5 s; reduced motion only fades in, holds, fades out", () => {
+  assert.equal(BIRTH_SKY_CONVERGE_MS, 1_500);
+  assert.equal(BIRTH_SKY_TEXT_MS, 1_000);
+  assert.equal(BIRTH_SKY_FADE_MS, 500);
+  assert.equal(BIRTH_SKY_REVEAL_TOTAL_MS, 3_000);
+  const at = (ms: number) => birthSkyRevealAt(ms, false);
+  assert.deepEqual(at(0).frame, { converge: 0, chrome: 0, text: 0 });
+  assert.ok(at(750).frame.converge > 0.5, "ease-out: more than half way at half time");
+  assert.equal(at(750).frame.text, 0);
+  assert.equal(at(1_500).frame.converge, 1);
+  assert.equal(at(2_400).frame.text, 1);
+  assert.equal(at(2_400).layer, 1);
+  assert.ok(at(2_750).layer > 0 && at(2_750).layer < 1);
+  assert.equal(at(2_999).done, false);
+  assert.equal(at(3_000).done, true);
+  assert.equal(at(3_000).layer, 0);
+  for (const ms of [0, 200, 1_000, 2_000, 2_700]) {
+    assert.deepEqual(birthSkyRevealAt(ms, true).frame, { converge: 1, chrome: 1, text: 1 }, `no travel at ${ms}ms`);
+  }
+  assert.equal(birthSkyRevealAt(0, true).layer, 0);
+  assert.equal(birthSkyRevealAt(1_000, true).layer, 1);
+  assert.ok(birthSkyRevealAt(2_750, true).layer < 1);
+  assert.equal(birthSkyRevealAt(3_000, true).done, true);
+  assert.match(converge, /window\.matchMedia\?\.\("\(prefers-reduced-motion: reduce\)"\)/);
+});
+
+test("overlay: full screen, no buttons; tap, click or Esc ends it at once; rAF sized to viewport × DPR and cancelled on unmount", () => {
+  assert.match(revealComponent, /dynamic\(\s*\(\) => import\("\.\/birth-sky-converge"\)/);
+  assert.match(revealComponent, /<BirthSkyConverge reveal=\{cover\} onDone=\{onClose\} \/>/);
+  assert.doesNotMatch(converge, /<Button|<button|继续|Spinner/);
+  assert.match(converge, /layer\.addEventListener\("pointerdown", finish\)/);
+  assert.match(converge, /layer\.addEventListener\("cancel", cancel\)/);
+  assert.match(converge, /requestAnimationFrame\(tick\)/);
+  assert.match(converge, /window\.devicePixelRatio/);
+  assert.match(converge, /window\.innerWidth, window\.innerHeight/);
+  const cleanup = converge.slice(converge.indexOf("return () => {\n      finished = true;"));
+  assert.match(cleanup, /cancelAnimationFrame\(frameHandle\)/);
+  assert.match(convergeCss, /\.birth-sky-converge \{[^}]*position: fixed;[^}]*inset: 0;/);
+  assert.doesNotMatch(convergeCss, /animation|@keyframes/, "opacity comes from the frame clock, not CSS");
+  // The reveal only starts once data (and the overlay code) is ready, inside the 3 s budget.
+  assert.equal(BIRTH_SKY_REVEAL_TIMEOUT_MS, 3_000);
+  assert.match(revealHook, /import\("@\/components\/birth-sky\/birth-sky-converge"\)/);
+});
+
+test("the hint is the VOICE line, shown once after the overlay ends", () => {
+  assert.match(revealHook, /export const BIRTH_SKY_REVEAL_HINT = "这片天空在星盘页可以保存。";/);
+  assert.match(voice, /这片天空在星盘页可以保存。/);
+  const close = revealHook.slice(revealHook.indexOf("const close"));
+  const body = close.slice(0, close.indexOf("}, []);"));
+  assert.match(body, /if \(!playing\.current\) return;\s*playing\.current = false;/);
+  assert.match(body, /toast\(BIRTH_SKY_REVEAL_HINT\)/);
+  assert.match(revealHook, /from "sonner"/, "reuses the app's Toaster, no new component");
+});
+
+test("the chart page dialog no longer has a reveal variant (「继续」, is-reveal)", () => {
+  assert.doesNotMatch(dialog, /reveal|继续/);
+  assert.doesNotMatch(dialogCss, /is-reveal|birth-sky-reveal/);
 });