gemini-stars: 配乐音效与预渲染音轨、播放器、MP4 导出（24/30/60fps）、多平台封面与文案、本地字体，自检完成（step 4–7）

.gitattributes

@@ -72,3 +72,6 @@ gemini/audio/n01.mp3 filter=lfs diff=lfs merge=lfs -text
 gemini/audio/n10.mp3 filter=lfs diff=lfs merge=lfs -text
 gemini/audio/n07.mp3 filter=lfs diff=lfs merge=lfs -text
 gemini/audio/n03.mp3 filter=lfs diff=lfs merge=lfs -text
+gemini-stars/fonts/gemini-serif.woff2 filter=lfs diff=lfs merge=lfs -text
+gemini-stars/fonts/gemini-sans.woff2 filter=lfs diff=lfs merge=lfs -text
+gemini-stars/audio/soundtrack.mp3 filter=lfs diff=lfs merge=lfs -text

gemini-stars/README.md

@@ -39,34 +39,49 @@
 
 ```
 gemini-stars/
-├── index.html          # 页面骨架：播放器 + 控制条 + 导出面板 + 封面 + 文案
-├── style.css           # 深空主题 UI，手机自适应
-├── app.js              # 入口：播放器、UI、导出、封面、文案
-├── scenes.js           # 所有场景的绘制函数（纯函数：draw(ctx, t, W, H)）
-├── audio.js            # 配乐 / 音效合成 + 旁白混音（OfflineAudioContext）
-├── timeline.js         # 由 tools/make_voice.py 生成：每句旁白的起止时间、字幕
-├── copy.js             # 各平台标题 / 描述 / 话题
-├── vendor/mp4-muxer.mjs# MIT 许可的 MP4 封装库（本地化，离线可用）
-├── audio/*.mp3         # 旁白音频
-└── tools/make_voice.py # 旁白生成与时间轴计算脚本
+├── index.html              # 页面：播放器 + 章节条 + 导出面板 + 多平台发布素材
+├── style.css               # 深空主题 UI，桌面/手机自适应
+├── app.js                  # 播放器、横竖屏、MP4 导出（WebCodecs / MediaRecorder 回退）、封面与文案面板
+├── scenes.js               # 9 个章节的程序化绘制（纯函数 renderFrame(ctx, t, W, H)）+ 封面绘制 drawCover
+├── audio.js                # 配乐 / 音效 / 旁白混音（OfflineAudioContext，确定性）
+├── timeline.js             # 由 tools/make_voice.py 生成：每句旁白起止时间与字幕
+├── copy.js                 # 小红书 / 抖音 / 哔哩哔哩 / 视频号 标题、描述、话题与封面配置
+├── audio/v01–v29.mp3       # 29 句中文 AI 旁白
+├── audio/soundtrack.mp3    # 由 audio.js 预渲染的完整混音（秒开；加载失败时浏览器内实时合成）
+├── fonts/*.woff2           # Noto Sans/Serif SC 子集（OFL），国内网络也能正确显示
+├── vendor/mp4-muxer.mjs    # MIT 许可 MP4 封装库（本地化）
+└── tools/
+    ├── make_voice.py       # 旁白 TTS + 时间轴
+    ├── build_audio.mjs     # 预渲染 soundtrack.mp3（node-web-audio-api + ffmpeg）
+    └── subset_fonts.py     # 字体子集化（修改文字后需重新运行）
 ```
 
 关键设计：
-- **确定性渲染**：每一帧只由时间 `t` 决定（随机数用固定种子），所以实时播放与离线导出画面一致。
-- **单一混音缓冲**：配乐 + 音效 + 旁白在 `OfflineAudioContext` 中一次混成完整音轨，播放和导出共用，保证音画同步。
+- **确定性渲染**：每一帧只由时间 `t` 决定（随机数固定种子），实时播放与离线导出画面完全一致。
+- **单一混音缓冲**：配乐 + 音效 + 旁白混成一条音轨，播放和导出共用，音画严格同步；旁白出现时音乐自动闪避。
 - **画内字幕**：字幕绘制在 Canvas 内，导出的 MP4 自带字幕。
+- **导出编码**：视频优先 H.264（avc1），不支持时依次 HEVC / VP9 / AV1（均封装 MP4）；音频优先 AAC，否则 Opus；每 2 秒一个关键帧。
 
 ## 4. 步骤与进度看板
 
 - [x] Step 1：撰写本计划（本文件）并推送
 - [x] Step 2：撰写旁白文案，生成 TTS 音频与 `timeline.js`，推送
 - [x] Step 3：场景动画引擎与全部场景（横/竖屏自适应），推送
-- [ ] Step 4：配乐与音效合成、混音、播放器，推送
-- [ ] Step 5：MP4 本地导出（24/30/60fps，横/竖屏），推送
-- [ ] Step 6：多平台封面 + 文案复制面板，推送
-- [ ] Step 7：自检、修正与最终推送
+- [x] Step 4：配乐与音效合成、混音（-13.6 LUFS）、预渲染音轨、播放器，推送
+- [x] Step 5：MP4 本地导出（24/30/60fps，横/竖屏，1080p/720p），推送
+- [x] Step 6：多平台封面（8 张）+ 文案复制面板（字数/话题数自动校验），推送
+- [x] Step 7：自检、修正与最终推送
+
+### 自检记录
+- 横屏 + 竖屏全片逐帧扫描（24fps × 214s × 2 = 10,288 帧）：0 报错。
+- 无头 Chromium 实测完整导出：24fps / 1280×720 / 3:34，约 2.5 分钟完成，得到含视频与音频的 MP4（该浏览器无 H.264 编码器，自动回退为 VP9 + Opus）。
+- 手机视口（390×844）自动切换竖屏，播放、字幕、控制条正常。
+- 音轨：整体响度 -13.6 LUFS，峰值 -1 dB。
 
 ## 5. 使用
 
-直接打开 Space 中的 `gemini-stars/index.html`（需通过 http(s) 访问以加载模块与音频）。
-导出 MP4 推荐使用桌面版 Chrome / Edge（WebCodecs 支持最好）。
+打开 Space 中的 `gemini-stars/index.html`（需通过 http(s) 访问）。
+- 播放：点击画面或 ▶；空格暂停，← → 快退/快进 5 秒；下方章节条可跳转。
+- 画幅：右上角切换横屏 16:9 / 竖屏 9:16；手机竖持时默认竖屏。
+- 导出：选择画幅、帧率（24/30/60）、清晰度后点击“开始导出”，完成后自动下载。推荐桌面版 Chrome / Edge（H.264 + AAC，兼容性最好）。
+- 发布素材：切换平台标签，复制标题 / 描述 / 话题，下载对应比例封面 PNG。

gemini-stars/app.js

@@ -0,0 +1,307 @@
+// 双子座 · 播放器 / 导出 / 封面 / 文案
+import { renderFrame, drawCover, TIMELINE, sceneAt } from './scenes.js';
+import { buildSoundtrack, SR } from './audio.js';
+import { PLATFORMS, charLen, tagText } from './copy.js';
+import { Muxer, ArrayBufferTarget } from './vendor/mp4-muxer.mjs';
+
+const $ = s => document.querySelector(s);
+const DUR = TIMELINE.duration;
+const fmt = t => { t = Math.max(0, t); const m = Math.floor(t / 60), s = Math.floor(t % 60); return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`; };
+const CH_NAMES = { intro: '序章', find: '怎样找到它', myth: '神话', castor: '北河二', pollux: '北河三', meteor: '流星雨', discover: '发现', zodiac: '黄道与文化', outro: '尾声' };
+
+/* ================= 状态 ================= */
+const state = { orient: 'landscape', playing: false, offset: 0, startAt: 0, buffer: null, ac: null, src: null, gain: null, subs: true, muted: false, exporting: false, userOrient: false };
+const canvas = $('#view'), ctx = canvas.getContext('2d');
+
+function logical() { return state.orient === 'landscape' ? [1920, 1080] : [1080, 1920]; }
+function sizeCanvas() {
+  const [W, H] = logical();
+  const r = canvas.getBoundingClientRect(); const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  const target = Math.min(W, Math.max(480, Math.round(r.width * dpr)));
+  const s = target / W;
+  canvas.width = Math.round(W * s); canvas.height = Math.round(H * s);
+  state.scale = s;
+}
+function setOrient(o, byUser) {
+  state.orient = o; if (byUser) state.userOrient = true;
+  document.body.classList.toggle('portrait', o === 'portrait');
+  document.querySelectorAll('.orient button').forEach(b => b.classList.toggle('on', b.dataset.o === o));
+  requestAnimationFrame(() => { sizeCanvas(); draw(); });
+}
+document.querySelectorAll('.orient button').forEach(b => b.onclick = () => setOrient(b.dataset.o, true));
+// 手机竖持默认竖屏
+const mq = window.matchMedia('(orientation: portrait) and (max-width: 900px)');
+const autoOrient = () => { if (!state.userOrient) setOrient(mq.matches ? 'portrait' : 'landscape'); };
+mq.addEventListener ? mq.addEventListener('change', autoOrient) : mq.addListener(autoOrient);
+window.addEventListener('resize', () => { sizeCanvas(); draw(); });
+
+/* ================= 时钟 ================= */
+function now() {
+  if (!state.playing) return state.offset;
+  const lat = (state.ac.outputLatency || 0) + (state.ac.baseLatency || 0);
+  return Math.min(DUR, state.offset + (state.ac.currentTime - state.startAt) - lat);
+}
+function play() {
+  if (!state.buffer) return;
+  if (!state.ac) { state.ac = new AudioContext({ sampleRate: SR, latencyHint: 'playback' }); state.gain = state.ac.createGain(); state.gain.connect(state.ac.destination); }
+  state.ac.resume();
+  if (state.offset >= DUR - .05) state.offset = 0;
+  const src = state.ac.createBufferSource(); src.buffer = state.buffer; src.connect(state.gain);
+  state.gain.gain.value = state.muted ? 0 : 1;
+  state.startAt = state.ac.currentTime + .05; src.start(state.startAt, state.offset);
+  src.onended = () => { if (state.src === src && state.playing && now() >= DUR - .2) { state.playing = false; state.offset = DUR; ui(); } };
+  state.src = src; state.playing = true; state.started = true; $('#gate').classList.add('hide'); ui(); loop();
+}
+function pause() {
+  if (!state.playing) return;
+  state.offset = now(); state.playing = false;
+  try { state.src.stop(); } catch (e) { }
+  state.src = null; ui();
+}
+function seek(t) { const was = state.playing; if (was) pause(); state.offset = Math.max(0, Math.min(DUR, t)); draw(); ui(); if (was) play(); }
+function toggle() { state.playing ? pause() : play(); }
+
+/* ================= 绘制 ================= */
+function draw() {
+  const [W, H] = logical(); const s = state.scale || 1;
+  ctx.setTransform(s, 0, 0, s, 0, 0);
+  const t = state.started || state.offset > 0 ? now() : 14.2; // 未开始时显示标题画面作为海报
+  renderFrame(ctx, t, W, H, { layerScale: s, subtitles: state.subs && t !== 14.2 });
+}
+let raf = 0;
+function loop() { cancelAnimationFrame(raf); const step = () => { draw(); ui(true); if (state.playing) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); }
+
+/* ================= 控制条 ================= */
+const seekEl = $('#seek');
+let dragging = false;
+seekEl.addEventListener('input', () => { dragging = true; state.offset = seekEl.value / 1000 * DUR; if (!state.playing) draw(); $('#time').textContent = `${fmt(state.offset)} / ${fmt(DUR)}`; });
+seekEl.addEventListener('change', () => { dragging = false; seek(seekEl.value / 1000 * DUR); });
+function ui(light) {
+  const t = now();
+  if (!dragging) seekEl.value = Math.round(t / DUR * 1000);
+  $('#time').textContent = `${fmt(t)} / ${fmt(DUR)}`;
+  if (!light) $('#play').innerHTML = state.playing ? '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>' : '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M7 4.5v15l13-7.5z"/></svg>';
+  const id = sceneAt(t).id; document.querySelectorAll('#chapters button').forEach(b => b.classList.toggle('on', b.dataset.id === id));
+}
+$('#play').onclick = toggle; $('#bigplay').onclick = play;
+canvas.onclick = () => { if (state.buffer) toggle(); if (!state.playing) $('#gate').classList.remove('hide'); };
+$('#sub').onclick = e => { state.subs = !state.subs; e.currentTarget.classList.toggle('on', state.subs); draw(); };
+$('#mute').onclick = e => { state.muted = !state.muted; e.currentTarget.classList.toggle('muted', state.muted); if (state.gain) state.gain.gain.value = state.muted ? 0 : 1; };
+$('#fs').onclick = () => { const st = $('#stage'); if (document.fullscreenElement) document.exitFullscreen(); else (st.requestFullscreen || st.webkitRequestFullscreen)?.call(st); };
+document.addEventListener('fullscreenchange', () => setTimeout(() => { sizeCanvas(); draw(); }, 50));
+document.addEventListener('keydown', e => {
+  if (e.target.tagName === 'INPUT' && e.target.type !== 'range') return;
+  if (e.code === 'Space') { e.preventDefault(); toggle(); }
+  if (e.code === 'ArrowRight') seek(now() + 5); if (e.code === 'ArrowLeft') seek(now() - 5);
+});
+TIMELINE.scenes.forEach(sc => { const b = document.createElement('button'); b.dataset.id = sc.id; b.textContent = `${fmt(sc.start)} ${CH_NAMES[sc.id]}`; b.onclick = () => seek(sc.start + .01); $('#chapters').appendChild(b); });
+
+/* ================= 启动 ================= */
+// 优先加载预渲染音轨（由 tools/build_audio.mjs 用同一份 audio.js 生成），秒开；失败时回退到浏览器内实时合成
+async function loadPrebuilt() {
+  $('#status').textContent = '载入音轨…';
+  const res = await fetch('audio/soundtrack.mp3'); if (!res.ok) throw new Error('HTTP ' + res.status);
+  const total = +res.headers.get('content-length') || 0; const reader = res.body.getReader(); const parts = []; let got = 0;
+  for (;;) { const { done, value } = await reader.read(); if (done) break; parts.push(value); got += value.length; if (total) $('#status').textContent = `载入音轨 ${Math.round(got / total * 100)}%`; }
+  const ab = await new Blob(parts).arrayBuffer();
+  const oc = new OfflineAudioContext(2, 1, SR);
+  const buf = await new Promise((ok, bad) => oc.decodeAudioData(ab, ok, bad));
+  if (Math.abs(buf.duration - DUR) > 1.5) throw new Error('音轨时长不匹配');
+  return buf;
+}
+// 本地子集化字体（Noto Sans/Serif SC，OFL），预载后画布文字才会使用正确字体
+async function loadFonts() {
+  $('#status').textContent = '载入字体…';
+  const jobs = [];
+  for (const w of [400, 500, 600, 700]) jobs.push(document.fonts.load(`${w} 40px "Gemini Sans"`, '双子座'));
+  for (const w of [600, 700, 800, 900]) jobs.push(document.fonts.load(`${w} 40px "Gemini Serif"`, '双子座'));
+  try { await Promise.race([Promise.all(jobs), new Promise(r => setTimeout(r, 5000))]); } catch (e) { }
+}
+async function boot() {
+  autoOrient(); sizeCanvas();
+  await loadFonts();
+  draw(); ui();
+  try {
+    state.buffer = await loadPrebuilt().catch(e => { console.warn('预渲染音轨不可用，改为实时合成', e); return null; })
+      || await buildSoundtrack(s => $('#status').textContent = '实时合成音轨 · ' + s);
+    $('#status').textContent = '点击播放 · 建议佩戴耳机';
+    $('#bigplay').disabled = false; $('#play').disabled = false; $('#ex-go').disabled = false;
+  } catch (e) { console.error(e); $('#status').textContent = '音轨合成失败：' + e.message; }
+  buildPublish();
+}
+
+/* ================= 导出 MP4 ================= */
+const ex = { orient: 'landscape', fps: 30, res: 1, cancel: false };
+function segBind(id, key, cast = v => v) { document.querySelectorAll(`#${id} button`).forEach(b => b.onclick = () => { ex[key] = cast(b.dataset.v); document.querySelectorAll(`#${id} button`).forEach(x => x.classList.toggle('on', x === b)); }); }
+segBind('ex-orient', 'orient'); segBind('ex-fps', 'fps', Number); segBind('ex-res', 'res', Number);
+const exMsg = m => $('#ex-msg').textContent = m;
+const exProg = k => { $('#ex-prog').hidden = false; $('#ex-fill').style.width = (k * 100).toFixed(1) + '%'; };
+
+async function pickVideoCodec(w, h, fps, bitrate) {
+  // 优先 H.264（兼容性最好）；不支持时依次尝试 HEVC / VP9 / AV1（同样封装为 MP4）
+  const list = [
+    ...['avc1.640034', 'avc1.640033', 'avc1.64002A', 'avc1.640028', 'avc1.4D4034', 'avc1.4D402A', 'avc1.42E034', 'avc1.42E02A', 'avc1.42001f'].map(c => [c, 'avc']),
+    ['hvc1.1.6.L123.B0', 'hevc'], ['hvc1.1.6.L150.B0', 'hevc'],
+    ['vp09.00.41.08', 'vp9'], ['vp09.00.40.08', 'vp9'], ['av01.0.09M.08', 'av1'], ['av01.0.08M.08', 'av1'],
+  ];
+  for (const [codec, mux] of list) {
+    for (const hw of ['prefer-hardware', 'no-preference', 'prefer-software']) {
+      const cfg = { codec, width: w, height: h, bitrate, framerate: fps, hardwareAcceleration: hw };
+      if (mux === 'avc') cfg.avc = { format: 'avc' };
+      if (mux === 'hevc') cfg.hevc = { format: 'hevc' };
+      try { const r = await VideoEncoder.isConfigSupported(cfg); if (r.supported) return { cfg, mux }; } catch (e) { }
+    }
+  }
+  return null;
+}
+async function pickAudioCodec() {
+  for (const c of [{ codec: 'mp4a.40.2', mux: 'aac' }, { codec: 'opus', mux: 'opus' }]) {
+    const cfg = { codec: c.codec, sampleRate: SR, numberOfChannels: 2, bitrate: 192000 };
+    try { const r = await AudioEncoder.isConfigSupported(cfg); if (r.supported) return { cfg, mux: c.mux }; } catch (e) { }
+  }
+  return null;
+}
+
+async function exportWebCodecs() {
+  const [LW, LH] = ex.orient === 'landscape' ? [1920, 1080] : [1080, 1920];
+  const s = ex.res, w = Math.round(LW * s / 2) * 2, h = Math.round(LH * s / 2) * 2, fps = ex.fps;
+  const bitrate = Math.round((s === 1 ? 10e6 : 5e6) * (fps >= 60 ? 1.6 : fps >= 30 ? 1 : .85));
+  const vpick = await pickVideoCodec(w, h, fps, bitrate);
+  if (!vpick) throw new Error('此浏览器没有可用的视频编码器');
+  const vcfg = vpick.cfg; state.vcodec = vpick.mux;
+  const acodec = await pickAudioCodec();
+  const target = new ArrayBufferTarget();
+  const muxer = new Muxer({ target, fastStart: 'in-memory', firstTimestampBehavior: 'offset',
+    video: { codec: vpick.mux, width: w, height: h, frameRate: fps },
+    audio: acodec ? { codec: acodec.mux, numberOfChannels: 2, sampleRate: SR } : undefined });
+  let err = null;
+  const venc = new VideoEncoder({ output: (c, m) => muxer.addVideoChunk(c, m), error: e => err = e });
+  venc.configure(vcfg);
+  // 音频
+  if (acodec) {
+    exMsg(`编码音轨（${acodec.mux.toUpperCase()}）…`);
+    const aenc = new AudioEncoder({ output: (c, m) => muxer.addAudioChunk(c, m), error: e => err = e });
+    aenc.configure(acodec.cfg);
+    const L = state.buffer.getChannelData(0), R = state.buffer.getChannelData(1), N = L.length, CH = 4800;
+    for (let i = 0; i < N; i += CH) {
+      const n = Math.min(CH, N - i), data = new Float32Array(n * 2); data.set(L.subarray(i, i + n), 0); data.set(R.subarray(i, i + n), n);
+      const ad = new AudioData({ format: 'f32-planar', sampleRate: state.buffer.sampleRate, numberOfFrames: n, numberOfChannels: 2, timestamp: Math.round(i / state.buffer.sampleRate * 1e6), data });
+      aenc.encode(ad); ad.close();
+      if (aenc.encodeQueueSize > 20) await new Promise(r => setTimeout(r, 0));
+    }
+    await aenc.flush(); aenc.close();
+  }
+  // 视频
+  const cv = typeof OffscreenCanvas !== 'undefined' ? new OffscreenCanvas(w, h) : Object.assign(document.createElement('canvas'), { width: w, height: h });
+  const c2 = cv.getContext('2d', { alpha: false });
+  const total = Math.ceil(DUR * fps), t0 = performance.now();
+  for (let i = 0; i < total; i++) {
+    if (ex.cancel) { venc.close(); throw new Error('已取消'); }
+    if (err) throw err;
+    c2.setTransform(s, 0, 0, s, 0, 0);
+    renderFrame(c2, i / fps, LW, LH, { layerScale: s, subtitles: true });
+    const vf = new VideoFrame(cv, { timestamp: Math.round(i * 1e6 / fps), duration: Math.round(1e6 / fps) });
+    venc.encode(vf, { keyFrame: i % (fps * 2) === 0 }); vf.close();
+    while (venc.encodeQueueSize > 4) await new Promise(r => setTimeout(r, 1));
+    if (i % 6 === 0) {
+      const k = (i + 1) / total, el = (performance.now() - t0) / 1000, eta = el / k - el;
+      exProg(k); exMsg(`渲染第 ${i + 1}/${total} 帧 · ${fps}fps · ${w}×${h} · 预计剩余 ${fmt(eta)}`);
+      await new Promise(r => setTimeout(r, 0));
+    }
+  }
+  await venc.flush(); venc.close();
+  if (err) throw err;
+  muxer.finalize();
+  return new Blob([target.buffer], { type: 'video/mp4' });
+}
+
+async function exportRecorder() {
+  // 回退：实时录制（时长等于视频时长）
+  const [LW, LH] = ex.orient === 'landscape' ? [1920, 1080] : [1080, 1920];
+  const s = ex.res, w = Math.round(LW * s / 2) * 2, h = Math.round(LH * s / 2) * 2, fps = ex.fps;
+  const cv = Object.assign(document.createElement('canvas'), { width: w, height: h }); const c2 = cv.getContext('2d');
+  const ac = new AudioContext({ sampleRate: SR }); const dest = ac.createMediaStreamDestination();
+  const src = ac.createBufferSource(); src.buffer = state.buffer; src.connect(dest);
+  const stream = new MediaStream([...cv.captureStream(fps).getVideoTracks(), ...dest.stream.getAudioTracks()]);
+  const types = ['video/mp4;codecs=avc1.640028,mp4a.40.2', 'video/mp4;codecs=avc1,mp4a', 'video/mp4', 'video/webm;codecs=vp9,opus', 'video/webm'];
+  const mime = types.find(t => window.MediaRecorder && MediaRecorder.isTypeSupported(t));
+  if (!mime) throw new Error('此浏览器既不支持 WebCodecs 也不支持 MediaRecorder');
+  const rec = new MediaRecorder(stream, { mimeType: mime, videoBitsPerSecond: 8e6 }); const parts = [];
+  rec.ondataavailable = e => e.data.size && parts.push(e.data);
+  const done = new Promise(r => rec.onstop = r);
+  await ac.resume(); rec.start(1000); const t0 = ac.currentTime + .1; src.start(t0);
+  await new Promise(resolve => {
+    const tick = () => {
+      const t = ac.currentTime - t0;
+      if (ex.cancel || t >= DUR) { resolve(); return; }
+      c2.setTransform(s, 0, 0, s, 0, 0); renderFrame(c2, Math.max(0, t), LW, LH, { layerScale: s });
+      exProg(t / DUR); exMsg(`实时录制中 ${fmt(t)} / ${fmt(DUR)}（${mime.split(';')[0]}）`); requestAnimationFrame(tick);
+    }; tick();
+  });
+  rec.stop(); src.stop(); await done; ac.close();
+  if (ex.cancel) throw new Error('已取消');
+  if (!mime.startsWith('video/mp4')) exMsg('提示：此浏览器只能录制 WebM，已按 WebM 保存；需要 MP4 请使用 Chrome / Edge / Safari 新版本。');
+  return new Blob(parts, { type: mime.split(';')[0] });
+}
+
+$('#ex-go').onclick = async () => {
+  if (state.exporting || !state.buffer) return;
+  pause(); state.exporting = true; ex.cancel = false; state.vcodec = null;
+  $('#ex-go').disabled = true; $('#ex-cancel').hidden = false; $('#ex-dl').hidden = true; exProg(0);
+  try {
+    const useWC = typeof VideoEncoder !== 'undefined' && typeof AudioEncoder !== 'undefined';
+    const blob = useWC ? await exportWebCodecs() : await exportRecorder();
+    const ext = blob.type.includes('webm') ? 'webm' : 'mp4';
+    const url = URL.createObjectURL(blob); const a = $('#ex-dl');
+    a.href = url; a.download = `双子座_${ex.orient === 'landscape' ? '横屏' : '竖屏'}_${ex.fps}fps.${ext}`; a.hidden = false;
+    a.textContent = `下载 ${ext.toUpperCase()}（${(blob.size / 1048576).toFixed(1)} MB）`;
+    exProg(1); exMsg('导出完成 ✓ 点击“下载”保存到本地。' + (state.vcodec && state.vcodec !== 'avc' ? `（此浏览器不支持 H.264 编码，已使用 ${state.vcodec.toUpperCase()} 编码的 MP4；如需最大兼容性请用桌面版 Chrome / Edge 导出）` : '')); a.click();
+  } catch (e) { console.error(e); exMsg('导出未完成：' + e.message); }
+  state.exporting = false; $('#ex-go').disabled = false; $('#ex-cancel').hidden = true;
+};
+$('#ex-cancel').onclick = () => { ex.cancel = true; };
+
+/* ================= 发布素材：文案 + 封面 ================= */
+function copyText(btn, s) {
+  const ok = () => { btn.classList.add('done'); btn.textContent = '已复制'; setTimeout(() => { btn.classList.remove('done'); btn.textContent = '复制'; }, 1400); };
+  if (navigator.clipboard && window.isSecureContext) navigator.clipboard.writeText(s).then(ok, () => fallback());
+  else fallback();
+  function fallback() { const ta = document.createElement('textarea'); ta.value = s; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); ok(); } catch (e) { } ta.remove(); }
+}
+function field(label, value, extra = '') {
+  const d = document.createElement('div'); d.className = 'field';
+  d.innerHTML = `<div class="hd"><span><b>${label}</b> ${extra}</span><button class="copy">复制</button></div><pre></pre>`;
+  d.querySelector('pre').textContent = value; d.querySelector('.copy').onclick = e => copyText(e.currentTarget, value);
+  return d;
+}
+function renderPlatform(p) {
+  const box = $('#pub'); box.innerHTML = '';
+  const tl = charLen(p.title), tn = p.tags.length;
+  box.appendChild(field('标题', p.title, `<span class="count ${tl <= p.titleMax ? 'ok' : 'bad'}">${tl}/${p.titleMax} 字</span>`));
+  box.appendChild(field('描述', p.desc));
+  box.appendChild(field('话题', tagText(p), `<span class="count ${tn <= p.tagMax ? 'ok' : 'bad'}">${tn} 个${p.tagMax === Infinity ? '（不限）' : ' / 最多 ' + p.tagMax}</span>`));
+  const all = `${p.title}\n\n${p.desc}\n\n${tagText(p)}`;
+  box.appendChild(field('一键复制全部', all));
+  const grid = document.createElement('div'); grid.className = 'covers'; box.appendChild(grid);
+  p.covers.forEach(cv => {
+    const card = document.createElement('div'); card.className = 'cover';
+    const c = document.createElement('canvas'); c.width = cv.w; c.height = cv.h; card.appendChild(c);
+    const hd = document.createElement('div'); hd.className = 'hd'; hd.innerHTML = `<span>${p.name} · ${cv.label} · ${cv.w}×${cv.h}</span>`;
+    const b = document.createElement('button'); b.className = 'copy'; b.textContent = '下载 PNG';
+    b.onclick = () => c.toBlob(bl => { const a = document.createElement('a'); a.href = URL.createObjectURL(bl); a.download = `双子座封面_${p.name}_${cv.ratio.replace(':', 'x')}.png`; a.click(); }, 'image/png');
+    hd.appendChild(b); card.appendChild(hd); grid.appendChild(card);
+    requestAnimationFrame(() => drawCover(c.getContext('2d'), cv.w, cv.h, cv));
+  });
+}
+function buildPublish() {
+  const tabs = $('#tabs');
+  PLATFORMS.forEach((p, i) => {
+    const b = document.createElement('button'); b.textContent = p.name; if (!i) b.classList.add('on');
+    b.onclick = () => { tabs.querySelectorAll('button').forEach(x => x.classList.toggle('on', x === b)); renderPlatform(p); };
+    tabs.appendChild(b);
+  });
+  renderPlatform(PLATFORMS[0]);
+}
+
+window.__gemini = { state, ex };
+boot();

gemini-stars/audio.js

@@ -0,0 +1,181 @@
+// 双子座 · 配乐 / 音效 / 旁白 混音（全部在 OfflineAudioContext 中合成，确定性）
+import { TIMELINE, METEORS, rng } from './scenes.js';
+
+export const SR = 48000;
+const mtof = m => 440 * Math.pow(2, (m - 69) / 12);
+
+// 和声进行（MIDI）
+const PROG = {
+  major: [[50, 54, 57, 61], [47, 50, 54, 57], [43, 47, 50, 54], [45, 50, 52, 57]],      // Dmaj7 Bm7 Gmaj7 Asus
+  minor: [[47, 50, 54, 59], [43, 47, 50, 55], [40, 43, 47, 52], [42, 46, 49, 54]],      // Bm G Em F#
+  dream: [[50, 54, 57, 64], [43, 47, 50, 57], [47, 50, 54, 61], [45, 49, 52, 59]],      // D G Bm A(add)
+};
+const MOOD = {
+  intro: { prog: 'dream', arp: 0.0, pad: .9, bell: .6 },
+  find: { prog: 'major', arp: .55, pad: .8, bell: .3 },
+  myth: { prog: 'minor', arp: .3, pad: 1, bell: .2, drum: 1 },
+  castor: { prog: 'dream', arp: .8, pad: .75, bell: .4 },
+  pollux: { prog: 'major', arp: .8, pad: .8, bell: .4 },
+  meteor: { prog: 'dream', arp: 1, pad: .8, bell: .5 },
+  discover: { prog: 'major', arp: .7, pad: .75, bell: .3 },
+  zodiac: { prog: 'dream', arp: .6, pad: .85, bell: .5 },
+  outro: { prog: 'major', arp: .5, pad: 1, bell: .7 },
+};
+const BEAT = .6, CHORD = BEAT * 8;
+
+function makeIR(ctx, sec = 3.6) {
+  const len = Math.floor(SR * sec), b = ctx.createBuffer(2, len, SR), r = rng(4242);
+  for (let c = 0; c < 2; c++) { const d = b.getChannelData(c); for (let i = 0; i < len; i++) d[i] = (r() * 2 - 1) * Math.pow(1 - i / len, 2.6) * (i < 200 ? i / 200 : 1); }
+  return b;
+}
+function makeNoise(ctx, sec = 4) {
+  const len = Math.floor(SR * sec), b = ctx.createBuffer(1, len, SR), d = b.getChannelData(0), r = rng(99);
+  for (let i = 0; i < len; i++) d[i] = r() * 2 - 1; return b;
+}
+
+export async function buildSoundtrack(onStatus = () => { }, baseUrl = '') {
+  const dur = TIMELINE.duration;
+  const ctx = new OfflineAudioContext(2, Math.ceil(SR * dur), SR);
+  // 总线
+  const master = ctx.createDynamicsCompressor(); master.threshold.value = -14; master.ratio.value = 3; master.attack.value = .01; master.release.value = .25;
+  const out = ctx.createGain(); out.gain.value = 1.2; master.connect(out);
+  const limiter = ctx.createDynamicsCompressor(); limiter.threshold.value = -1.5; limiter.knee.value = 0; limiter.ratio.value = 20; limiter.attack.value = .002; limiter.release.value = .1;
+  out.connect(limiter); limiter.connect(ctx.destination);
+  const music = ctx.createGain(); music.gain.value = .55; music.connect(master);
+  const sfx = ctx.createGain(); sfx.gain.value = .7; sfx.connect(master);
+  const voice = ctx.createGain(); voice.gain.value = 1.15; voice.connect(master);
+  const verb = ctx.createConvolver(); verb.buffer = makeIR(ctx); const verbOut = ctx.createGain(); verbOut.gain.value = .55; verb.connect(verbOut); verbOut.connect(master);
+  const musicVerb = ctx.createGain(); musicVerb.gain.value = .8; musicVerb.connect(verb);
+  const NOISE = makeNoise(ctx);
+
+  // 旁白闪避（ducking）
+  music.gain.setValueAtTime(.55, 0);
+  const iv = [];
+  for (const sc of TIMELINE.scenes) for (const ln of sc.lines) {
+    const a = Math.max(0.01, ln.start - .3), b = ln.end + .2, last = iv[iv.length - 1];
+    if (last && a - last[1] < .9) last[1] = b; else iv.push([a, b]);
+  }
+  for (const [a, b] of iv) { music.gain.setValueAtTime(.55, a); music.gain.linearRampToValueAtTime(.32, a + .3); music.gain.setValueAtTime(.32, b); music.gain.linearRampToValueAtTime(.55, b + .8); }
+  // 结尾淡出
+  out.gain.setValueAtTime(1.2, Math.max(0, dur - 4)); out.gain.linearRampToValueAtTime(0, dur);
+
+  /* ---------- 乐器 ---------- */
+  const pad = (t0, len, notes, g) => {
+    const lp = ctx.createBiquadFilter(); lp.type = 'lowpass'; lp.frequency.value = 900; lp.Q.value = .6;
+    lp.frequency.setValueAtTime(600, t0); lp.frequency.linearRampToValueAtTime(1400, t0 + len * .5); lp.frequency.linearRampToValueAtTime(700, t0 + len);
+    const env = ctx.createGain(); env.gain.setValueAtTime(0, t0); env.gain.linearRampToValueAtTime(g, t0 + 1.6); env.gain.setValueAtTime(g, t0 + len - .4); env.gain.linearRampToValueAtTime(0, t0 + len + 1.6);
+    lp.connect(env); env.connect(music); env.connect(musicVerb);
+    notes.forEach((m, i) => [-7, 7].forEach(det => {
+      const o = ctx.createOscillator(); o.type = i === 0 ? 'triangle' : 'sawtooth'; o.frequency.value = mtof(m); o.detune.value = det;
+      const og = ctx.createGain(); og.gain.value = (i === 0 ? .1 : .035); o.connect(og); og.connect(lp); o.start(t0); o.stop(t0 + len + 1.8);
+    }));
+  };
+  const pluck = (t, m, g, pan = 0) => {
+    const o = ctx.createOscillator(); o.type = 'triangle'; o.frequency.value = mtof(m);
+    const o2 = ctx.createOscillator(); o2.type = 'sine'; o2.frequency.value = mtof(m) * 2;
+    const e = ctx.createGain(); e.gain.setValueAtTime(0, t); e.gain.linearRampToValueAtTime(g, t + .008); e.gain.exponentialRampToValueAtTime(.0005, t + 1.4);
+    const e2 = ctx.createGain(); e2.gain.value = .3;
+    const p = ctx.createStereoPanner(); p.pan.value = pan;
+    o.connect(e); o2.connect(e2); e2.connect(e); e.connect(p); p.connect(music); p.connect(musicVerb);
+    o.start(t); o2.start(t); o.stop(t + 1.5); o2.stop(t + 1.5);
+  };
+  const bell = (t, m, g, dest = music) => {
+    [[1, 1, 3.2], [2.76, .45, 1.6], [5.4, .25, .9], [8.93, .12, .5]].forEach(([r, a, d]) => {
+      if (mtof(m) * r > 16000) return;
+      const o = ctx.createOscillator(); o.type = 'sine'; o.frequency.value = mtof(m) * r;
+      const e = ctx.createGain(); e.gain.setValueAtTime(0, t); e.gain.linearRampToValueAtTime(g * a, t + .005); e.gain.exponentialRampToValueAtTime(.0001, t + d);
+      o.connect(e); e.connect(dest); e.connect(verb); o.start(t); o.stop(t + d + .05);
+    });
+  };
+  const sub = (t, f0, f1, len, g) => {
+    const o = ctx.createOscillator(); o.type = 'sine'; o.frequency.setValueAtTime(f0, t); o.frequency.exponentialRampToValueAtTime(f1, t + len);
+    const e = ctx.createGain(); e.gain.setValueAtTime(0, t); e.gain.linearRampToValueAtTime(g, t + .02); e.gain.exponentialRampToValueAtTime(.0001, t + len);
+    o.connect(e); e.connect(sfx); o.start(t); o.stop(t + len + .05);
+  };
+  const noise = (t, len, type, f0, f1, g, q = 1, pan = 0, attack = .05, toVerb = .5) => {
+    const s = ctx.createBufferSource(); s.buffer = NOISE; s.loop = true;
+    const f = ctx.createBiquadFilter(); f.type = type; f.Q.value = q; f.frequency.setValueAtTime(f0, t); f.frequency.exponentialRampToValueAtTime(f1, t + len);
+    const e = ctx.createGain(); e.gain.setValueAtTime(0, t); e.gain.linearRampToValueAtTime(g, t + attack); e.gain.exponentialRampToValueAtTime(.0001, t + len);
+    const p = ctx.createStereoPanner(); p.pan.setValueAtTime(-pan, t); p.pan.linearRampToValueAtTime(pan, t + len);
+    s.connect(f); f.connect(e); e.connect(p); p.connect(sfx);
+    if (toVerb) { const vg = ctx.createGain(); vg.gain.value = toVerb; p.connect(vg); vg.connect(verb); }
+    s.start(t, (t * 7.3) % 3); s.stop(t + len + .05);
+  };
+  const whoosh = (t, g = .5) => noise(t, 1.4, 'bandpass', 250, 3200, g, 1.2, .8, .7);
+  const shimmer = (t, g = .12, n = 9, base = 86) => { const r = rng(Math.floor(t * 1000)); for (let i = 0; i < n; i++) bell(t + i * .07 + r() * .05, base + [0, 2, 4, 7, 9, 12][Math.floor(r() * 6)], g * (1 - i / n * .5), sfx); };
+  const ping = (t, m = 88, g = .1) => bell(t, m, g, sfx);
+  const zip = (t, g = .18, pan = 0) => { noise(t, .7, 'bandpass', 5000, 900, g, 4, pan, .03, .6); const o = ctx.createOscillator(); o.type = 'sine'; o.frequency.setValueAtTime(2400, t); o.frequency.exponentialRampToValueAtTime(500, t + .5); const e = ctx.createGain(); e.gain.setValueAtTime(0, t); e.gain.linearRampToValueAtTime(g * .15, t + .02); e.gain.exponentialRampToValueAtTime(.0001, t + .5); o.connect(e); e.connect(sfx); e.connect(verb); o.start(t); o.stop(t + .55); };
+  const boom = (t, g = .6) => { sub(t, 90, 32, 2.2, g); noise(t, 1.6, 'lowpass', 400, 60, g * .5, .7, 0, .01, .3); };
+  const thunder = (t) => { boom(t, .7); const r = rng(77); for (let i = 0; i < 7; i++) noise(t + r() * 1.2, .4 + r() * .8, 'lowpass', 1800, 120, .25 + r() * .2, .8, r() - .5, .005, .6); };
+  const arrow = (t) => { noise(t, .35, 'bandpass', 1500, 4500, .5, 3, -1, .01, .2); };
+
+  /* ---------- 作曲 ---------- */
+  onStatus('作曲中…');
+  const S = TIMELINE.scenes;
+  S.forEach((sc, si) => {
+    const md = MOOD[sc.id], prog = PROG[md.prog];
+    const r = rng(500 + si);
+    let t = sc.start, ci = 0;
+    while (t < sc.end - .5) {
+      const len = Math.min(CHORD, sc.end - t + .4);
+      const ch = prog[ci % prog.length];
+      pad(t, len, ch, md.pad * .9);
+      // 低音
+      sub(t, mtof(ch[0] - 12), mtof(ch[0] - 12) * .999, len + .5, .16 * md.pad);
+      // 琶音
+      if (md.arp > 0) {
+        const steps = Math.floor(len / (BEAT / 2));
+        const pat = [0, 1, 2, 3, 2, 1, 3, 2];
+        for (let k = 0; k < steps; k++) {
+          if (r() > md.arp) continue;
+          const n = ch[pat[k % 8] % ch.length] + 24 + (k % 8 === 6 ? 12 : 0);
+          pluck(t + k * BEAT / 2, n, .06 * (k % 4 === 0 ? 1.2 : .8), Math.sin(k * 1.3) * .5);
+        }
+      }
+      // 钟声点缀
+      if (md.bell && r() < md.bell) bell(t + BEAT * 4, ch[2] + 24, .06);
+      // 神话：定音鼓式低频
+      if (md.drum) for (let k = 0; k < 8; k += 4) sub(t + k * BEAT, 70, 40, .9, .22);
+      t += CHORD; ci++;
+    }
+  });
+  // 尾声终止和弦
+  const outro = S[S.length - 1];
+  const fin = outro.lines[2].start - .3;
+  [62, 66, 69, 74, 78].forEach((m, i) => bell(fin + i * .12, m, .1));
+
+  /* ---------- 音效（与画面时间对齐） ---------- */
+  onStatus('布置音效…');
+  const at = id => S.find(s => s.id === id);
+  const Ls = sc => sc.lines.map(l => l.start);
+  S.forEach((sc, i) => { if (i > 0) whoosh(sc.start - .55, .35); });
+  { const sc = at('intro'), L = Ls(sc); ping(sc.start + 1.2, 81, .12); ping(sc.start + 2.2, 85, .12); shimmer(L[1] + .6, .1, 12); boom(L[1] + .5, .35); }
+  { const sc = at('find'), L = Ls(sc); shimmer(L[0] + .8, .07, 6, 93);
+    for (let k = 0; k < 15; k++) ping(L[3] - .3 + 4.8 * (k + .5) / 15, 84 + [0, 2, 4, 7, 9][k % 5], .06);
+    shimmer(L[2] + .9, .08, 6); shimmer(L[3] + 3, .08, 8); }
+  { const sc = at('myth'), L = Ls(sc); boom(sc.start + .3, .45); ping(L[0] + 2, 74, .1); ping(L[0] + 4, 78, .1);
+    arrow(L[2] - .25); boom(L[2] + .42, .8); thunder(L[3] + 2); shimmer(L[3] + 2.6, .07, 14, 88);
+    shimmer(L[4] + 4.5, .1, 16, 86); boom(L[4] + 4.4, .35); }
+  { const sc = at('castor'), L = Ls(sc); whoosh(L[0] + .2, .3); ping(L[1] + 1.7, 86, .12); for (let k = 0; k < 4; k++) ping(L[2] + .3 + k * .45, 88 + k * 3, .1); shimmer(L[2] + 2.3, .08, 8); ping(L[2] + 5.2, 79, .1); }
+  { const sc = at('pollux'), L = Ls(sc); boom(sc.start + .4, .4); ping(L[1] + .4, 83, .08); ping(L[1] + .9, 86, .08); shimmer(L[1] + 3, .08, 8); ping(L[2] + .2, 81, .12); }
+  { let n = 0; for (const m of METEORS.list) { if (m.br < .55 || n > 60) continue; const t = METEORS.start + m.t; zip(t, .1 + m.br * .1, Math.cos(m.a) * .7); n++; } }
+  { const sc = at('meteor'), L = Ls(sc); shimmer(L[1] + .2, .08, 10, 91); whoosh(L[2] + 1.2, .3); ping(L[2] + 2.2, 76, .12); }
+  { const sc = at('discover'), L = Ls(sc); ping(L[1] + .2, 79, .12); shimmer(L[1] + .8, .07, 8); ping(L[2] + .2, 76, .12);
+    for (let k = 0; k < 8; k++) ping(L[2] + k / 2.2, 96, .03); shimmer(L[2] + 1.4, .07, 8); }
+  { const sc = at('zodiac'), L = Ls(sc); ping(sc.start + .5, 74, .1); shimmer(L[1] - .2, .1, 12, 86); for (let k = 0; k < 3; k++) ping(L[2] + 1 + k * .7, 86 + k * 2, .08); }
+  { const sc = at('outro'), L = Ls(sc); shimmer(sc.start + .5, .08, 10); for (let k = 0; k < 3; k++) ping(sc.start + 1 + k * .9, 84 + k * 3, .08); }
+
+  /* ---------- 旁白 ---------- */
+  const lines = S.flatMap(s => s.lines);
+  let done = 0;
+  const bufs = await Promise.all(lines.map(async ln => {
+    const res = await fetch(baseUrl + ln.file); const ab = await res.arrayBuffer();
+    const b = await ctx.decodeAudioData(ab); done++; onStatus(`载入旁白 ${done}/${lines.length}`); return b;
+  }));
+  const hp = ctx.createBiquadFilter(); hp.type = 'highpass'; hp.frequency.value = 90; hp.connect(voice);
+  const vVerb = ctx.createGain(); vVerb.gain.value = .08; hp.connect(vVerb); vVerb.connect(verb);
+  lines.forEach((ln, i) => { const s = ctx.createBufferSource(); s.buffer = bufs[i]; s.connect(hp); s.start(ln.start); });
+
+  onStatus('混音渲染中…');
+  return await ctx.startRendering();
+}

gemini-stars/audio/soundtrack.mp3

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

gemini-stars/copy.js

@@ -0,0 +1,62 @@
+// 各平台发布文案：标题 / 描述 / 话题（含字数与数量上限，页面会自动校验）
+export const PLATFORMS = [
+  {
+    id: 'xhs', name: '小红书', titleMax: 20, tagMax: 10, tagStyle: 'hash',
+    title: '双子座：天上最浪漫的一对兄弟✨',
+    desc: `冬夜抬头，东方那两颗肩并肩的亮星，就是双子座的“头”🌟
+🔭 怎么找：猎户座腰带 → 往东北方看
+🏛 神话：凡人哥哥卡斯托尔 × 不朽弟弟波吕克斯，弟弟把永生分了一半给哥哥
+✨ 北河二：看着是一颗星，其实是 6 颗恒星（3 对双星）
+🧡 北河三：橙色巨星，比“二号”哥哥还亮，身边还有一颗行星
+☄️ 双子座流星雨：12 月中旬，母体竟是小行星法厄同
+🪐 天王星、冥王星的发现都和它有关
+用 3 分半的动画讲给你听，下一个晴夜记得抬头找找它们～`,
+    tags: ['双子座', '星座', '天文科普', '星空', '希腊神话', '双子座流星雨', '冬季星空', '观星', '涨知识', '科普动画'],
+    covers: [
+      { ratio: '4:3', w: 1440, h: 1080, label: '横封面 4:3', hook: '天上最浪漫的一对兄弟', tags: ['神话', '六星家族', '流星雨'] },
+      { ratio: '3:4', w: 1080, h: 1440, label: '竖封面 3:4', hook: '天上最浪漫的一对兄弟', tags: ['神话', '六星家族', '流星雨'] },
+    ],
+  },
+  {
+    id: 'douyin', name: '抖音', titleMax: 30, tagMax: 5, tagStyle: 'hash',
+    title: '一颗星藏着6颗恒星？3分半看懂双子座的浪漫与秘密',
+    desc: '肉眼看是一颗星，望远镜里却是 6 颗恒星！双子座的兄弟神话、橙色巨星北河三、母体是小行星的流星雨，一次讲清楚。',
+    tags: ['双子座', '天文科普', '星空', '双子座流星雨', '涨知识'],
+    covers: [
+      { ratio: '4:3', w: 1440, h: 1080, label: '横封面 4:3', hook: '一颗星藏着 6 颗恒星？', tags: ['北河二', '北河三', '流星雨'] },
+      { ratio: '3:4', w: 1080, h: 1440, label: '竖封面 3:4', hook: '一颗星藏着 6 颗恒星？', tags: ['北河二', '北河三', '流星雨'] },
+    ],
+  },
+  {
+    id: 'bili', name: '哔哩哔哩', titleMax: 80, tagMax: 10, tagStyle: 'plain',
+    title: '【星空动画】双子座有多神奇？一颗星竟是6颗恒星，流星雨母体是小行星，还见证了天王星和冥王星的发现',
+    desc: `全程手工编程的星空动画，带你认识双子座：
+00:00 序章 · 冬夜的两颗星
+00:15 怎样找到它（猎户座腰带 → 东北方）
+00:40 神话 · 卡斯托尔与波吕克斯
+01:22 北河二 · 6 颗恒星组成的三对双星（约 51 光年）
+01:45 北河三 · 橙色巨星与它的行星（约 34 光年）
+02:06 双子座流星雨 · 母体为小行星 3200 法厄同
+02:28 星空里的发现 · 1781 天王星 / 1930 冥王星
+02:46 黄道与星座文化（占星部分仅为文化趣味）
+03:12 尾声
+数据为常见天文资料的近似值，欢迎在评论区补充指正～`,
+    tags: ['双子座', '天文', '科普', '星座', '希腊神话', '流星雨', '星空', '宇宙', '动画', '知识分享'],
+    covers: [
+      { ratio: '4:3', w: 1440, h: 1080, label: '视频封面 4:3', hook: '双子座到底有多神奇？', tags: ['神话', '六星家族', '流星雨'], badge: '星空动画' },
+      { ratio: '16:9', w: 1920, h: 1080, label: '个人空间封面 16:9', hook: '双子座到底有多神奇？', tags: ['神话', '六星家族', '流星雨'], badge: '星空动画' },
+    ],
+  },
+  {
+    id: 'wx', name: '微信视频号', titleMax: 16, tagMax: Infinity, tagStyle: 'hash',
+    title: '双子座：并肩千年的两颗星',
+    desc: '冬夜东方的两颗亮星，是一对兄弟的约定。3 分半动画，带你读懂双子座的神话与科学。',
+    tags: ['双子座', '星座', '天文科普', '星空', '希腊神话', '流星雨', '冬季星空', '观星', '科普', '宇宙'],
+    covers: [
+      { ratio: '3:4', w: 1080, h: 1440, label: '个人主页卡片 3:4', hook: '并肩千年的两颗星', tags: ['神话', '科学', '流星雨'] },
+      { ratio: '4:3', w: 1440, h: 1080, label: '分享卡片 4:3', hook: '并肩千年的两颗星', tags: ['神话', '科学', '流星雨'] },
+    ],
+  },
+];
+export const charLen = s => Array.from(s).length;
+export const tagText = p => p.tags.map(t => (p.tagStyle === 'hash' ? '#' + t : t)).join(p.tagStyle === 'hash' ? ' ' : '，');

gemini-stars/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2014-2021 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

gemini-stars/fonts/gemini-sans.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:93582b984a341bb481a349295ad3940731aa1295f9249f16aaed5f8e0a189dd7
+size 218016

gemini-stars/fonts/gemini-serif.woff2

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

gemini-stars/index.html

@@ -0,0 +1,72 @@
+<!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>双子座 · 星河里的一对兄弟 | 星空动画解说</title>
+<meta name="theme-color" content="#05060f">
+<link rel="preload" href="fonts/gemini-sans.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="fonts/gemini-serif.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<header class="top">
+  <div class="brand"><span class="glyph">Ⅱ</span><div><h1>双子座 · 星河里的一对兄弟</h1><p>动画解说 · 配乐音效 · 旁白字幕 · 本地导出 MP4</p></div></div>
+  <div class="orient" role="group" aria-label="画幅">
+    <button data-o="landscape" class="on">横屏 16:9</button><button data-o="portrait">竖屏 9:16</button>
+  </div>
+</header>
+
+<main>
+  <section class="player">
+    <div class="stage" id="stage">
+      <canvas id="view"></canvas>
+      <div class="gate" id="gate">
+        <button id="bigplay" disabled><span class="tri"></span></button>
+        <p id="status">载入中…</p>
+      </div>
+    </div>
+    <div class="bar">
+      <button id="play" class="ic" aria-label="播放/暂停" disabled></button>
+      <span id="time">00:00 / 00:00</span>
+      <input id="seek" type="range" min="0" max="1000" value="0" step="1">
+      <button id="sub" class="ic small on" title="字幕">字</button>
+      <button id="mute" class="ic small" title="静音"><svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M4 9h4l5-4v14l-5-4H4z"/><path class="wave" d="M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/><path class="x" d="M16 9l5 6M21 9l-5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
+      <button id="fs" class="ic small" title="全屏"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5"/></svg></button>
+    </div>
+    <div class="chapters" id="chapters"></div>
+  </section>
+
+  <section class="panel" id="export">
+    <h2>导出 MP4 <small>浏览器本地渲染，不上传任何数据</small></h2>
+    <div class="row">
+      <label>画幅</label>
+      <div class="seg" id="ex-orient"><button data-v="landscape" class="on">横屏 1920×1080</button><button data-v="portrait">竖屏 1080×1920</button></div>
+    </div>
+    <div class="row">
+      <label>帧率</label>
+      <div class="seg" id="ex-fps"><button data-v="24">24 fps</button><button data-v="30" class="on">30 fps</button><button data-v="60">60 fps</button></div>
+    </div>
+    <div class="row">
+      <label>清晰度</label>
+      <div class="seg" id="ex-res"><button data-v="1" class="on">1080p</button><button data-v="0.6667">720p</button></div>
+    </div>
+    <div class="row">
+      <button id="ex-go" class="primary" disabled>开始导出</button>
+      <button id="ex-cancel" class="ghost" hidden>取消</button>
+      <a id="ex-dl" class="primary" hidden download>下载 MP4</a>
+    </div>
+    <div class="prog" hidden id="ex-prog"><div class="fill" id="ex-fill"></div></div>
+    <p class="note" id="ex-msg">推荐桌面版 Chrome / Edge（支持 WebCodecs，离线逐帧渲染，速度快且帧率精确）；不支持时会自动改用实时录制。</p>
+  </section>
+
+  <section class="panel" id="publish">
+    <h2>多平台发布素材 <small>标题 · 描述 · 话题 · 封面</small></h2>
+    <div class="tabs" id="tabs"></div>
+    <div id="pub"></div>
+  </section>
+</main>
+<footer>全新原创制作 · 画面由 Canvas 程序实时绘制 · 配乐与音效由 Web Audio 合成 · 旁白为 AI 语音</footer>
+<script type="module" src="app.js"></script>
+</body>
+</html>

gemini-stars/scenes.js

@@ -3,8 +3,8 @@
 import { TIMELINE } from './timeline.js';
 export { TIMELINE };
 
-export const SERIF = '"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif';
-export const SANS = '"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",sans-serif';
+export const SERIF = '"Gemini Serif","Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif';
+export const SANS = '"Gemini Sans","Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",sans-serif';
 
 /* ---------------- 数学工具 ---------------- */
 const TAU = Math.PI * 2;
@@ -13,7 +13,7 @@ export const lerp = (a, b, k) => a + (b - a) * k;
 export const sstep = (a, b, x) => { const k = clamp((x - a) / (b - a)); return k * k * (3 - 2 * k); };
 const easeIO = k => (k < .5 ? 4 * k * k * k : 1 - Math.pow(-2 * k + 2, 3) / 2);
 const easeOut = k => 1 - Math.pow(1 - clamp(k), 3);
-const backOut = k => { k = clamp(k); const c = 1.7; return 1 + (c + 1) * Math.pow(k - 1, 3) + c * Math.pow(k - 1, 2); };
+const backOut = k => { k = clamp(k); const c = 1.7; return Math.max(0, 1 + (c + 1) * Math.pow(k - 1, 3) + c * Math.pow(k - 1, 2)); };
 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; };
@@ -422,7 +422,7 @@ SC.myth = (ctx, lt, D, W, H, L, t) => {
   const zA = sstep(L[3] + 2, L[3] + 3, lt) * (1 - sstep(L[4] + .8, L[4] + 1.8, lt));
   const zf = zA * (.7 + .3 * Math.sin(lt * 14) * Math.sin(lt * 5));
   bolt(ctx, W / 2, H * (port ? .12 : .14), 1.4 * u, zf);
-  text(ctx, '宙 斯', W / 2, H * (port ? .12 : .14) + 110 * u, 30 * u, '#fff2b0', 'center', zA, SERIF, 700);
+  text(ctx, '宙 斯', W / 2 + 60 * u, H * (port ? .12 : .14), 30 * u, '#fff2b0', 'left', zA, SERIF, 700);
   // 不朽之光流向哥哥
   const flow = sstep(L[3] + 2.5, L[3] + 3.5, lt) * (1 - sstep(L[4] + 4, L[4] + 5, lt));
   if (flow > 0) {
@@ -617,7 +617,7 @@ export const METEORS = (() => {
     const peak = tt > L[1] - .5 && tt < L[2] + 1.5;
     const end = L[2] + 2.5;
     if (tt > end && tt < D - 2) { tt += 1.2; continue; }
-    out.push({ t: tt, a: r() * TAU, len: .5 + r() * .5, sp: .9 + r() * .6, br: r(), d0: .05 + r() * .2 });
+    out.push({ t: tt, a: -.12 * Math.PI + r() * 1.24 * Math.PI, len: .5 + r() * .5, sp: .9 + r() * .6, br: r(), d0: .03 + r() * .12 });
     tt += peak ? .05 + r() * .14 : .35 + r() * .7;
   }
   return { list: out, start: sc.start };
@@ -642,7 +642,7 @@ SC.meteor = (ctx, lt, D, W, H, L, t) => {
       const x0 = x - Math.cos(m.a) * tail, y0 = y - Math.sin(m.a) * tail;
       const a = Math.sin(k * Math.PI) * (.5 + m.br * .5);
       const gr = ctx.createLinearGradient(x0, y0, x, y); gr.addColorStop(0, 'rgba(255,255,255,0)'); gr.addColorStop(.7, `rgba(190,220,255,${a * .6})`); gr.addColorStop(1, `rgba(255,255,255,${a})`);
-      ctx.strokeStyle = gr; ctx.lineWidth = (1.5 + m.br * 2.5) * u; ctx.lineCap = 'round';
+      ctx.strokeStyle = gr; ctx.lineWidth = (2 + m.br * 3) * u; ctx.lineCap = 'round';
       ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x, y); ctx.stroke();
       drawStar(ctx, x, y, (3 + m.br * 4) * u, '#e7f1ff', a);
     }
@@ -731,7 +731,7 @@ SC.discover = (ctx, lt, D, W, H, L, t) => {
   panel(p2[0], p2[1] + (1 - a2) * 40 * u, a2, '1930', '克莱德·汤博 · 比对照相底片');
   // 天王星 + 望远镜
   if (a1 > 0) {
-    const x = p1[0] + pw * .72, y = p1[1] + ph * .55, r = Math.min(pw, ph) * .2 * backOut(sstep(L[1] + .6, L[1] + 1.8, lt));
+    const x = p1[0] + pw * .72, y = p1[1] + ph * .55, r = Math.max(.5, Math.min(pw, ph) * .2 * backOut(sstep(L[1] + .6, L[1] + 1.8, lt)));
     ctx.save(); ctx.globalAlpha = a1;
     const g = ctx.createRadialGradient(x - r * .3, y - r * .3, r * .1, x, y, r); g.addColorStop(0, '#e6ffff'); g.addColorStop(.6, '#7fd7e6'); g.addColorStop(1, '#2c7c93');
     ctx.fillStyle = g; ctx.beginPath(); ctx.arc(x, y, Math.max(r, .1), 0, TAU); ctx.fill();
@@ -757,7 +757,7 @@ SC.discover = (ctx, lt, D, W, H, L, t) => {
       ctx.beginPath(); ctx.arc(dx, dy, 3.5 * u, 0, TAU); ctx.fill();
       ctx.strokeStyle = '#ff8fbf'; ctx.lineWidth = 2 * u; ctx.beginPath(); ctx.arc(dx, dy, 16 * u, 0, TAU); ctx.stroke(); ctx.restore();
     });
-    const x = p2[0] + pw * .82, y = p2[1] + ph * .58, r = Math.min(pw, ph) * .13 * backOut(sstep(L[2] + 1.2, L[2] + 2.4, lt));
+    const x = p2[0] + pw * .82, y = p2[1] + ph * .58, r = Math.max(.5, Math.min(pw, ph) * .13 * backOut(sstep(L[2] + 1.2, L[2] + 2.4, lt)));
     ctx.save(); ctx.globalAlpha = a2; const g = ctx.createRadialGradient(x - r * .3, y - r * .3, r * .1, x, y, Math.max(r, .1)); g.addColorStop(0, '#fff1e6'); g.addColorStop(.6, '#d8b29a'); g.addColorStop(1, '#6b4d45');
     ctx.fillStyle = g; ctx.beginPath(); ctx.arc(x, y, Math.max(r, .1), 0, TAU); ctx.fill(); ctx.restore();
     text(ctx, '冥王星', x, y + r + 30 * u, 26 * u, '#ffc6dc', 'center', a2 * sstep(L[2] + 1.5, L[2] + 2.5, lt), SANS, 700);
@@ -873,12 +873,12 @@ export function renderFrame(ctx, t, W, H, opt = {}) {
   // 场景（淡入淡出）
   const fa = Math.min(sstep(0, .9, lt), 1 - sstep(D - .8, D, lt));
   ctx.save(); ctx.globalAlpha = 1;
-  if (sc.id === 'intro') { SC[sc.id](ctx, lt, D, W, H, L, t); }
+  if (sc.id === 'intro') { try { SC[sc.id](ctx, lt, D, W, H, L, t); } catch (e) { console.warn('frame', t, e); } }
   else {
     // 用离屏层实现整体淡化
     const layer = getLayer(W, H, opt.layerScale || 1); const lc = layer.getContext('2d');
     lc.setTransform(1, 0, 0, 1, 0, 0); lc.clearRect(0, 0, layer.width, layer.height); lc.setTransform(layer.width / W, 0, 0, layer.height / H, 0, 0);
-    SC[sc.id](lc, lt, D, W, H, L, t);
+    try { SC[sc.id](lc, lt, D, W, H, L, t); } catch (e) { console.warn('frame', t, e); }
     ctx.globalAlpha = sc.id === 'outro' ? Math.max(fa, sstep(D - .8, D, lt)) : fa; ctx.drawImage(layer, 0, 0, W, H);
   }
   ctx.restore();
@@ -947,7 +947,7 @@ export function drawCover(ctx, W, H, cfg) {
   const size = (port ? 190 : wide ? 170 : 160) * u;
   ctx.save(); ctx.font = `900 ${size}px ${SERIF}`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.shadowColor = 'rgba(255,170,70,.85)'; ctx.shadowBlur = 40 * u;
   ctx.fillStyle = goldGrad(ctx, tx - size * 1.6, ty - size / 2, tx + size * 1.6, ty + size / 2); ctx.fillText('双子座', tx, ty); ctx.restore();
-  text(ctx, cfg.hook || '天上最浪漫的一对兄弟', tx, ty + size * .78, (port ? 54 : 48) * u, '#fff4dc', 'center', 1, SERIF, 800, 'rgba(0,0,0,.9)');
+  text(ctx, cfg.hook || '天上最浪漫的一对兄弟', tx, ty + size * .9, (port ? 54 : 48) * u, '#fff4dc', 'center', 1, SERIF, 800, 'rgba(0,0,0,.9)');
   // 卖点标签
   const tags = cfg.tags || ['神话', '六星家族', '流星雨'];
   const ty2 = port ? H * .9 : wide ? H * .4 + size * 1.55 : H * .9;

gemini-stars/style.css

@@ -0,0 +1,74 @@
+@font-face{font-family:"Gemini Sans";src:url(fonts/gemini-sans.woff2) format("woff2");font-weight:100 900;font-display:swap}
+@font-face{font-family:"Gemini Serif";src:url(fonts/gemini-serif.woff2) format("woff2");font-weight:200 900;font-display:swap}
+:root{--bg:#05060f;--card:#0d1028;--line:rgba(255,214,140,.22);--gold:#f5c66a;--txt:#eef1ff;--mut:#9aa3c7}
+*{box-sizing:border-box}
+html,body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,#1a1440 0,transparent 60%),var(--bg);color:var(--txt);font-family:"Gemini Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
+button{font:inherit;color:inherit;cursor:pointer}
+.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;flex-wrap:wrap}
+.brand{display:flex;gap:14px;align-items:center}
+.glyph{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font:900 26px "Gemini Serif","Noto Serif SC",serif;color:#1b1030;background:linear-gradient(135deg,#fff1c8,#f0b54e)}
+h1{font:800 20px "Gemini Serif","Noto Serif SC",serif;margin:0;letter-spacing:.04em}
+.brand p{margin:2px 0 0;color:var(--mut);font-size:13px}
+.orient,.seg{display:inline-flex;background:#0b0e24;border:1px solid var(--line);border-radius:999px;padding:3px}
+.orient button,.seg button{background:none;border:0;padding:7px 14px;border-radius:999px;color:var(--mut);font-size:14px;white-space:nowrap}
+.orient button.on,.seg button.on{background:linear-gradient(135deg,#ffe2a0,#e9a945);color:#1b1030;font-weight:700}
+main{max-width:1280px;margin:0 auto;padding:0 20px 40px;display:grid;gap:22px}
+.player{background:#000;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.5)}
+.stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;margin:0 auto}
+body.portrait .stage{aspect-ratio:9/16;width:min(100%,calc(82vh * 9 / 16));height:auto}
+canvas#view{width:100%;height:100%;display:block}
+.gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle,rgba(5,6,15,.25),rgba(5,6,15,.7));transition:opacity .4s}
+.gate.hide{opacity:0;pointer-events:none}
+#bigplay{width:92px;height:92px;border-radius:50%;border:1px solid rgba(255,230,180,.6);background:rgba(255,214,140,.15);backdrop-filter:blur(6px);display:grid;place-items:center}
+#bigplay:disabled{opacity:.4;cursor:wait}
+.tri{width:0;height:0;border-left:28px solid #ffe6b0;border-top:17px solid transparent;border-bottom:17px solid transparent;margin-left:8px}
+#status{margin:0;color:#ffe6b0;font-size:14px;text-shadow:0 1px 4px #000}
+.bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#090b1d}
+.ic{background:#141838;border:1px solid var(--line);border-radius:10px;width:40px;height:36px;display:grid;place-items:center}
+.ic.small{width:36px;font-size:14px}
+.ic.on{border-color:var(--gold);color:var(--gold)}
+.ic:disabled{opacity:.4}
+#time{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--mut);font-size:13px;min-width:104px}
+#seek{flex:1;accent-color:var(--gold)}
+.chapters{display:flex;gap:6px;overflow-x:auto;padding:8px 14px 12px;background:#090b1d;scrollbar-width:thin}
+.chapters button{flex:none;background:#10142f;border:1px solid transparent;color:var(--mut);border-radius:999px;padding:5px 12px;font-size:12px}
+.chapters button.on{border-color:var(--gold);color:#ffe6b0}
+.panel{background:linear-gradient(180deg,#0e1130,#0a0c22);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
+.panel h2{margin:0 0 14px;font:800 18px "Gemini Serif","Noto Serif SC",serif}
+.panel h2 small{font:400 12px "Gemini Sans","Noto Sans SC",sans-serif;color:var(--mut);margin-left:8px}
+.row{display:flex;align-items:center;gap:12px;margin:10px 0;flex-wrap:wrap}
+.row>label{width:56px;color:var(--mut);font-size:14px}
+.primary{background:linear-gradient(135deg,#ffe2a0,#e9a945);color:#1b1030;border:0;border-radius:12px;padding:10px 22px;font-weight:800;text-decoration:none;display:inline-block}
+.primary:disabled{opacity:.4}
+.ghost{background:none;border:1px solid var(--line);border-radius:12px;padding:9px 18px}
+.prog{height:10px;background:#141838;border-radius:99px;overflow:hidden;margin-top:6px}
+.fill{height:100%;width:0;background:linear-gradient(90deg,#8fb5ff,#ffd48a);transition:width .2s}
+.note{color:var(--mut);font-size:13px;line-height:1.6;margin:10px 0 0}
+.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
+.tabs button{background:#10142f;border:1px solid var(--line);border-radius:12px;padding:8px 16px;color:var(--mut)}
+.tabs button.on{background:linear-gradient(135deg,#ffe2a0,#e9a945);color:#1b1030;font-weight:800;border-color:transparent}
+.field{background:#080a1c;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px 14px;margin-bottom:12px}
+.field .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:13px;color:var(--mut)}
+.field .hd b{color:#ffe6b0;font-weight:700}
+.count.ok{color:#8fe3a8}.count.bad{color:#ff8f8f}
+.field pre{margin:0;white-space:pre-wrap;word-break:break-all;font:15px/1.7 "Gemini Sans","Noto Sans SC",sans-serif;color:var(--txt)}
+.copy{background:#1a1f45;border:1px solid var(--line);border-radius:9px;padding:4px 12px;font-size:12px;color:#ffe6b0}
+.copy.done{background:#1f4a33;color:#bff5cf}
+.covers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:start}
+.cover{background:#080a1c;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:10px}
+.cover canvas{width:100%;height:auto;border-radius:8px;display:block}
+.cover .hd{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;color:var(--mut)}
+footer{text-align:center;color:#5d6488;font-size:12px;padding:10px 20px 30px}
+:fullscreen .stage,.stage:fullscreen{width:100vw!important;height:100vh!important;aspect-ratio:auto;max-width:none}
+:fullscreen canvas#view{object-fit:contain}
+@media (max-width:640px){
+  .top{padding:12px 14px}
+  h1{font-size:16px}
+  main{padding:0 10px 30px;gap:14px}
+  body.portrait .stage{width:min(100%,calc(86svh * 9 / 16))}
+  .row>label{width:100%}
+  .seg button{padding:7px 10px;font-size:13px}
+  #time{min-width:auto;font-size:12px}
+}
+[hidden]{display:none!important}
+#mute .x{display:none}#mute.muted .x{display:inline}#mute.muted .wave{display:none}

gemini-stars/tools/build_audio.mjs

@@ -0,0 +1,24 @@
+// 预渲染完整音轨（配乐 + 音效 + 旁白）为 audio/soundtrack.mp3，网页可秒开播放；
+// 与浏览器内实时合成使用同一份 audio.js，结果一致。
+// 依赖: npm i node-web-audio-api ；ffmpeg 可执行文件路径通过环境变量 FFMPEG 指定
+// 用法: FFMPEG=/path/to/ffmpeg node tools/build_audio.mjs
+import fs from 'fs';
+import path from 'path';
+import { execFileSync } from 'child_process';
+import { fileURLToPath, pathToFileURL } from 'url';
+const ROOT = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
+const wa = await import(process.env.WEBAUDIO || 'node-web-audio-api');
+globalThis.OfflineAudioContext = wa.OfflineAudioContext;
+globalThis.fetch = async f => ({ arrayBuffer: async () => { const b = fs.readFileSync(path.join(ROOT, f)); return b.buffer.slice(b.byteOffset, b.byteOffset + b.byteLength); } });
+const { buildSoundtrack } = await import(pathToFileURL(path.join(ROOT, 'audio.js')).href);
+const buf = await buildSoundtrack(s => process.stdout.write(s + '\r'));
+const L = buf.getChannelData(0), R = buf.getChannelData(1), n = L.length;
+const wav = Buffer.alloc(44 + n * 4);
+wav.write('RIFF', 0); wav.writeUInt32LE(36 + n * 4, 4); wav.write('WAVEfmt ', 8); wav.writeUInt32LE(16, 16); wav.writeUInt16LE(1, 20); wav.writeUInt16LE(2, 22);
+wav.writeUInt32LE(buf.sampleRate, 24); wav.writeUInt32LE(buf.sampleRate * 4, 28); wav.writeUInt16LE(4, 32); wav.writeUInt16LE(16, 34); wav.write('data', 36); wav.writeUInt32LE(n * 4, 40);
+const q = v => Math.max(-32767, Math.min(32767, Math.round(v * 32767)));
+for (let i = 0; i < n; i++) { wav.writeInt16LE(q(L[i]), 44 + i * 4); wav.writeInt16LE(q(R[i]), 46 + i * 4); }
+const tmp = path.join(ROOT, 'soundtrack.tmp.wav'); fs.writeFileSync(tmp, wav);
+execFileSync(process.env.FFMPEG || 'ffmpeg', ['-y', '-loglevel', 'error', '-i', tmp, '-c:a', 'libmp3lame', '-b:a', '192k', '-ar', String(buf.sampleRate), path.join(ROOT, 'audio', 'soundtrack.mp3')]);
+fs.unlinkSync(tmp);
+console.log('\nsoundtrack.mp3 written,', buf.duration.toFixed(2), 's');

gemini-stars/tools/subset_fonts.py

@@ -0,0 +1,18 @@
+"""把 Noto Sans SC / Noto Serif SC（SIL OFL 1.1）按项目实际用到的字符子集化为 woff2，
+保证画布文字在任何网络环境（包括无法访问 Google Fonts 的地区）都使用统一字体。
+用法: python tools/subset_fonts.py <NotoSansSC.ttf> <NotoSerifSC.ttf>
+依赖: pip install fonttools brotli
+"""
+import sys, os, glob
+from fontTools import subset
+HERE = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+txt = ''
+for f in ['scenes.js', 'copy.js', 'timeline.js', 'app.js', 'index.html']:
+    txt += open(os.path.join(HERE, f), encoding='utf-8').read()
+chars = set(c for c in txt if ord(c) > 127) | set(chr(i) for i in range(32, 127)) | set('，。、；：！？“”‘’（）—…·《》【】≈≥★–')
+text = ''.join(sorted(chars))
+for src, out in [(sys.argv[1], 'gemini-sans.woff2'), (sys.argv[2], 'gemini-serif.woff2')]:
+    opts = subset.Options(); opts.flavor = 'woff2'; opts.layout_features = ['*']; opts.name_IDs = ['*']; opts.notdef_outline = True
+    f = subset.load_font(src, opts); s = subset.Subsetter(opts); s.populate(text=text); s.subset(f)
+    subset.save_font(f, os.path.join(HERE, 'fonts', out), opts)
+    print(out, os.path.getsize(os.path.join(HERE, 'fonts', out)), 'bytes,', len(text), 'chars')