v8：远光照亮整块路面并闪白；喷射气体改为自然粒子气体；新增动感歌词（LRC / 打轴工具，随导出）

.gitattributes

@@ -92,3 +92,4 @@ public/mvfonts/neon.woff2 filter=lfs diff=lfs merge=lfs -text
 素材/longshot20261021193923.png filter=lfs diff=lfs merge=lfs -text
 素材/longshot20261021193931.png filter=lfs diff=lfs merge=lfs -text
 素材/longshot20261021193942.png filter=lfs diff=lfs merge=lfs -text
+public/mvfonts/lyric.woff2 filter=lfs diff=lfs merge=lfs -text

README.md

@@ -33,7 +33,8 @@ pinned: false
 | 5 | ~~适配手机竖屏~~（v5 按要求取消，只保留 16:9） | 横屏 16:9 / 竖屏 9:16 两套构图；所有场景按画布宽高自适应排版；手机端默认竖屏 |
 | 6 | 导出帧率 **24 / 30 / 60** 可选（16:9，1080P / 720P） | 在导出面板中单选；第 i 帧的时间 = i / fps，保证和音频严格对齐 |
 | 7 | 可复制的**标题、描述、标签** | 小红书 / 抖音 / 微信视频号 / 哔哩哔哩 四套文案，带字数和话题数校验，一键复制 |
-| 8 | **封面**：4:3、3:4、16:9，每种比例多张，可多选 | 用 MV 关键帧渲染并叠加封面排版，每种比例 8 款设计，可勾选多张批量下载 PNG |
+| 8 | **封面**：4:3、3:4、16:9，每种比例多张，可多选 |
+| 9 | **动感歌词**（v8） | 页面「歌词」区粘贴 LRC 或纯文本 + 打轴工具；逐字弹出、卡拉OK 填色、随鼓点缩放 / 抖动 / 色散，随视频一起导出 | 用 MV 关键帧渲染并叠加封面排版，每种比例 8 款设计，可勾选多张批量下载 PNG |
 
 ### 平台文案约束
 
@@ -256,3 +257,8 @@ npm run build && npm start   # 生产（http://localhost:3000）
   - Drop2：去掉大货车；Roadster 座舱加上清晰可见的方向盘（平底、带轮辐与中心标志，双手握持）；01:56 改为从车辆正后方拍摄起飞；去掉左上角遥测文字；冷气改为灰白色常规混合的雾团（不再发光叠加），去掉发光的喷口芯；Roadster 侧面比例加高（车顶、腰线、轮径），解决 02:02 看起来「扁」的问题；
   - 音乐：未修改音频文件（线上文件与素材 MD5 一致）。检测到原始母带峰值为 +0.49 dBFS（超过 0 dB），浏览器解码后会削波、听起来发沙；现在播放器音量设为 0.89（约 -1 dB 余量），导出时同样留 -1 dB 余量，AAC 码率提高到 256 kbps；
   - 校验：飞越净空 0.78 m，对决最近 0.70 m；全时间轴扫描无报错。
+- **步骤 13（v8：远光爆闪 / 自然喷射气体 / 动感歌词）** ✅
+  - 58–59 秒：甩尾结束瞬间打开远光——整块路面（含护栏）被照亮，随后全屏闪白再回落；之后远光跟随鼓点和低频照亮整条路面，隔拍闪白，节奏更明显；
+  - Drop2 喷射气体重做为粒子模型 `gas.ts`：气体从四个推力口高速喷出，受空气阻力减速，撞到路面后沿地面向四周翻滚扩散，再受浮力缓慢上升、膨胀、消散；向后喷射时形成长长的尾流；用缓存的柔和云团贴图（带自阴影、边缘不规则）以常规混合绘制，不发光；气体在车身前后正确分层；侧面镜头使用同一套粒子；
+  - 新增动感歌词 `lyrics.ts` + 页面「02 歌词」区：支持粘贴 LRC（含 offset）或纯文本，「打轴」模式下音乐从头播放，每唱到一句按 Enter / J 自动生成时间轴，可 ±0.1 s 微调、复制 LRC；歌词逐字弹出（回弹）、已唱部分红橙渐变填色、鼓点时整句缩放、字符抖动并出现红青色散、结束时逐字上飘消失；歌词会画进画面，导出 MP4 时一并带上；首次使用时按需加载含 6763 个常用汉字的歌词字体（约 950 KB）；
+  - 说明：歌词受版权保护，项目不内置歌词原文，需要使用者自行粘贴。

public/mvfonts/lyric.woff2

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

public/mvfonts/neon.woff2

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f3b543db0e6ed2617414c7f1235ce3b372af24b30b78cd1e72d56b48e6921688
-size 112996
+oid sha256:20d820c00590a0a27a935085f18e1df27987f669d1f92950468802ec9efcbada
+size 118748

src/mv/MvApp.tsx

@@ -4,10 +4,12 @@ import './styles.css'
 import { DURATION } from './engine/audio'
 import { Renderer } from './engine/renderer'
 import { SCENES, sceneAt } from './engine/timeline'
-import { AUDIO_URL, loadFonts } from './fonts'
+import { AUDIO_URL, ensureLyricFont, loadFonts } from './fonts'
 import { exportMp4, exportRenderer, webCodecsSupported, type ExportResult } from './export/exportMp4'
 import { DESIGNS, RATIOS, RATIO_SIZE, renderCover, type CoverItem, type Ratio } from './covers/covers'
 import { PLATFORMS, countChars, formatTags } from './copy/platforms'
+import { getLyricOffset, loadSavedLyrics, lyricCount, parseLrc, setLyricOffset, setLyrics } from './engine/lyrics'
+import { bus } from './playerBus'
 
 type Orient = 'landscape' | 'portrait'
 
@@ -79,6 +81,11 @@ export default function MvApp() {
       return { url: r.out.toDataURL('image/jpeg', 0.85), ms, webgl: r.webgl }
     }
     ;(window as unknown as { __mvExport: unknown }).__mvExport = exportMp4
+    ;(window as unknown as { __mvSetLyrics: unknown }).__mvSetLyrics = async (src: string) => {
+      const n = setLyrics(src, false)
+      await ensureLyricFont()
+      return n
+    }
     ;(window as unknown as { __mvSheet: unknown }).__mvSheet = async (which: string, w: number, h: number) => {
       const H = await import('./engine/hero')
       const c = document.createElement('canvas')
@@ -114,12 +121,14 @@ export default function MvApp() {
         </div>
         <nav className="mv-nav">
           <a href="#player">播放</a>
+          <a href="#lyrics">歌词</a>
           <a href="#export">导出</a>
           <a href="#copy">文案</a>
           <a href="#covers">封面</a>
         </nav>
       </header>
       <Player ready={ready} orient={orient} setOrient={setOrient} />
+      <LyricsPanel toast={toast.show} />
       <ExportPanel orient={orient} ready={ready} />
       <CopyPanel toast={toast.show} />
       <CoverPanel ready={ready} toast={toast.show} />
@@ -221,6 +230,19 @@ function Player({ ready, orient, setOrient }: { ready: boolean; orient: Orient;
     setTime(v)
   }, [])
 
+  useEffect(() => {
+    bus.time = () => audioRef.current?.currentTime ?? tRef.current
+    bus.seek = seek
+    bus.play = () => {
+      setStarted(true)
+      audioRef.current?.play().catch(() => {})
+    }
+    bus.pause = () => audioRef.current?.pause()
+    const onLyrics = () => (dirty.current = true)
+    window.addEventListener('mv-lyrics', onLyrics)
+    return () => window.removeEventListener('mv-lyrics', onLyrics)
+  }, [seek])
+
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if ((e.target as HTMLElement)?.closest('input,textarea')) return
@@ -378,7 +400,7 @@ function ExportPanel({ orient, ready }: { orient: Orient; ready: boolean }) {
   return (
     <section id="export" className="mv-section">
       <h2>
-        <span className="mv-h-idx">02</span> 导出 MP4 <small>浏览器本地渲染 · 不上传</small>
+        <span className="mv-h-idx">03</span> 导出 MP4 <small>浏览器本地渲染 · 不上传</small>
       </h2>
       <div className="mv-card mv-export">
         <div className="mv-opt">
@@ -474,7 +496,7 @@ function CopyPanel({ toast }: { toast: (m: string) => void }) {
   return (
     <section id="copy" className="mv-section">
       <h2>
-        <span className="mv-h-idx">03</span> 发布文案 <small>标题 · 描述 · 话题，一键复制</small>
+        <span className="mv-h-idx">04</span> 发布文案 <small>标题 · 描述 · 话题，一键复制</small>
       </h2>
       <div className="mv-tabs">
         {PLATFORMS.map((x) => (
@@ -608,7 +630,7 @@ function CoverPanel({ ready, toast }: { ready: boolean; toast: (m: string) => vo
   return (
     <section id="covers" className="mv-section">
       <h2>
-        <span className="mv-h-idx">04</span> 封面 <small>16:9 · 4:3 · 3:4 · 每种比例 {DESIGNS.length} 款，可多选</small>
+        <span className="mv-h-idx">05</span> 封面 <small>16:9 · 4:3 · 3:4 · 每种比例 {DESIGNS.length} 款，可多选</small>
       </h2>
       <div className="mv-cover-bar">
         <div className="mv-seg">
@@ -673,3 +695,159 @@ function CoverPanel({ ready, toast }: { ready: boolean; toast: (m: string) => vo
     </section>
   )
 }
+
+// ====================================================================== Lyrics
+const fmtLrc = (t: number) => {
+  const m = Math.floor(t / 60)
+  const sec = t - m * 60
+  return `[${String(m).padStart(2, '0')}:${sec.toFixed(2).padStart(5, '0')}]`
+}
+
+function LyricsPanel({ toast }: { toast: (m: string) => void }) {
+  const [text, setText] = useState('')
+  const [count, setCount] = useState(0)
+  const [offset, setOffset] = useState(0)
+  const [tap, setTap] = useState<{ lines: string[]; times: number[] } | null>(null)
+  useEffect(() => {
+    const saved = loadSavedLyrics()
+    setText(saved)
+    setCount(lyricCount())
+    if (lyricCount()) ensureLyricFont()
+  }, [])
+  const notify = () => window.dispatchEvent(new Event('mv-lyrics'))
+  const apply = (src = text) => {
+    const n = setLyrics(src)
+    setCount(n)
+    notify()
+    if (n) ensureLyricFont()
+    toast(n ? `已应用 ${n} 句歌词` : '没有识别到时间轴，请用「打轴」逐句标记')
+  }
+  const plainLines = () =>
+    text
+      .split(/\r?\n/)
+      .map((l) => l.replace(/\[[^\]]*\]/g, '').trim())
+      .filter(Boolean)
+  const startTap = () => {
+    const ls = plainLines()
+    if (!ls.length) {
+      toast('请先粘贴歌词文本')
+      return
+    }
+    setTap({ lines: ls, times: [] })
+    bus.seek(0)
+    bus.play()
+  }
+  const stamp = useCallback(() => {
+    setTap((cur) => {
+      if (!cur) return cur
+      const times = [...cur.times, bus.time()]
+      if (times.length >= cur.lines.length) {
+        const lrc = cur.lines.map((l, i) => fmtLrc(times[i]) + l).join('\n')
+        setText(lrc)
+        const n = setLyrics(lrc)
+        setCount(n)
+        notify()
+        ensureLyricFont()
+        bus.pause()
+        toast(`打轴完成：${n} 句`)
+        return null
+      }
+      return { ...cur, times }
+    })
+  }, [toast])
+  useEffect(() => {
+    if (!tap) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.code === 'Enter' || e.code === 'KeyJ') {
+        e.preventDefault()
+        stamp()
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [tap, stamp])
+  const nudge = (d: number) => {
+    const v = Math.round((getLyricOffset() + d) * 10) / 10
+    setLyricOffset(v)
+    setOffset(v)
+    notify()
+  }
+  const copyLrc = async () => {
+    const ok = await copyText(text)
+    toast(ok ? '已复制 LRC' : '复制失败')
+  }
+  const preview = parseLrc(text).length
+  return (
+    <section id="lyrics" className="mv-section">
+      <h2>
+        <span className="mv-h-idx">02</span> 歌词 <small>逐字弹出 · 卡拉OK 填色 · 跟随鼓点跳动 · 会一起导出到 MP4</small>
+      </h2>
+      <div className="mv-card mv-lyrics">
+        <p className="mv-hint">
+          粘贴带时间轴的 LRC 歌词（音乐平台一般都能下载），或者粘贴纯文本歌词后点「打轴」：音乐会从头播放，每唱到一句按一下 Enter（或 J 键 / 下方按钮），就会自动生成时间轴。
+        </p>
+        {!tap ? (
+          <>
+            <textarea className="mv-input" rows={8} value={text} placeholder={'[00:12.30]第一句歌词\n[00:16.80]第二句歌词\n……'} onChange={(e) => setText(e.target.value)} />
+            <div className="mv-lyrics-bar">
+              <button className="mv-primary sm" onClick={() => apply()}>
+                应用歌词{preview ? `（${preview} 句）` : ''}
+              </button>
+              <button className="mv-ghost" onClick={startTap}>
+                打轴（边听边按）
+              </button>
+              <button className="mv-ghost" onClick={copyLrc} disabled={!text}>
+                复制 LRC
+              </button>
+              <button
+                className="mv-ghost"
+                onClick={() => {
+                  setText('')
+                  apply('')
+                }}
+              >
+                清空
+              </button>
+              <span className="mv-lyrics-offset">
+                时间微调
+                <button className="mv-ghost" onClick={() => nudge(-0.1)}>
+                  −0.1s
+                </button>
+                <b>{offset >= 0 ? '+' : ''}{offset.toFixed(1)}s</b>
+                <button className="mv-ghost" onClick={() => nudge(0.1)}>
+                  +0.1s
+                </button>
+              </span>
+              <span className="mv-hint">当前已应用 {count} 句</span>
+            </div>
+          </>
+        ) : (
+          <div className="mv-tap">
+            <div className="mv-tap-prog">
+              第 {tap.times.length + 1} / {tap.lines.length} 句
+            </div>
+            <div className="mv-tap-now">{tap.lines[tap.times.length]}</div>
+            <div className="mv-tap-next">{tap.lines[tap.times.length + 1] ?? '（最后一句）'}</div>
+            <div className="mv-lyrics-bar">
+              <button className="mv-primary" onClick={stamp}>
+                唱到这一句了（Enter）
+              </button>
+              <button className="mv-ghost" onClick={() => setTap((c) => (c && c.times.length ? { ...c, times: c.times.slice(0, -1) } : c))}>
+                撤销上一句
+              </button>
+              <button
+                className="mv-ghost"
+                onClick={() => {
+                  setTap(null)
+                  bus.pause()
+                }}
+              >
+                退出打轴
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

src/mv/covers/covers.ts

@@ -185,6 +185,7 @@ let shared: Renderer | null = null
 export async function renderCover(ratio: Ratio, design: CoverDesign): Promise<CoverItem> {
   const [W, H] = RATIO_SIZE[ratio]
   shared ??= new Renderer()
+  shared.lyrics = false
   shared.setSize(W, H)
   shared.render(design.t)
   const c = document.createElement('canvas')

src/mv/engine/gas.ts

@@ -0,0 +1,147 @@
+// Natural-looking thruster gas: a particle model with drag, ground impact,
+// lateral roll-out, buoyant rise and expansion — drawn with a cached soft
+// cloud sprite (normal blending, no glow) so hundreds of puffs stay cheap.
+import { hash } from './util'
+
+export interface GasState {
+  /** world z of the car */
+  z: number
+  /** height of the car's underside above the road (m) */
+  y: number
+  /** forward speed of the car (m/s) */
+  vz: number
+  power: number
+  /** π/2 = blowing down, π = blowing backwards */
+  angle: number
+}
+
+export interface GasP {
+  x: number
+  y: number
+  z: number
+  r: number
+  a: number
+  warm: boolean
+}
+
+const sprites: Record<string, HTMLCanvasElement> = {}
+
+function sprite(warm: boolean): HTMLCanvasElement {
+  const key = warm ? 'w' : 'c'
+  if (sprites[key]) return sprites[key]
+  const c = document.createElement('canvas')
+  c.width = c.height = 128
+  const g = c.getContext('2d')!
+  // soft body
+  const body = g.createRadialGradient(64, 58, 4, 64, 64, 62)
+  const base = warm ? [196, 186, 180] : [186, 192, 204]
+  body.addColorStop(0, `rgba(${base[0] + 20},${base[1] + 20},${base[2] + 20},1)`)
+  body.addColorStop(0.45, `rgba(${base[0]},${base[1]},${base[2]},0.75)`)
+  body.addColorStop(0.8, `rgba(${base[0] - 30},${base[1] - 30},${base[2] - 25},0.25)`)
+  body.addColorStop(1, `rgba(${base[0] - 40},${base[1] - 40},${base[2] - 35},0)`)
+  g.fillStyle = body
+  g.fillRect(0, 0, 128, 128)
+  // self-shadowed underside
+  const sh = g.createLinearGradient(0, 40, 0, 128)
+  sh.addColorStop(0, 'rgba(40,46,60,0)')
+  sh.addColorStop(1, 'rgba(40,46,60,0.35)')
+  g.globalCompositeOperation = 'source-atop'
+  g.fillStyle = sh
+  g.fillRect(0, 0, 128, 128)
+  // a few lumps so it reads as vapour, not a disc
+  g.globalCompositeOperation = 'destination-out'
+  for (let i = 0; i < 7; i++) {
+    const a = (i / 7) * Math.PI * 2
+    g.fillStyle = 'rgba(0,0,0,0.35)'
+    g.beginPath()
+    g.arc(64 + Math.cos(a) * 54, 64 + Math.sin(a) * 54, 14 + 6 * hash(i), 0, Math.PI * 2)
+    g.fill()
+  }
+  sprites[key] = c
+  return c
+}
+
+/**
+ * Particles alive at tNow, emitted from `nozzles` (car-relative x, z) while
+ * the thrusters are on. `stateAt(te)` gives the car state at emission time.
+ */
+export function gasParticles(tNow: number, from: number, stateAt: (te: number) => GasState, nozzles: [number, number][], rate = 46): GasP[] {
+  const out: GasP[] = []
+  const dt = 1 / rate
+  const maxLife = 3.6
+  const start = Math.max(from, tNow - maxLife)
+  for (let te = Math.ceil(start / dt) * dt; te <= tNow; te += dt) {
+    const s = stateAt(te)
+    if (s.power < 0.15) continue
+    const a = tNow - te
+    nozzles.forEach(([nx, nz], n) => {
+      const h1 = hash(te * 91.7 + n * 13.1)
+      const h2 = hash(te * 37.3 + n * 7.7)
+      const h3 = hash(te * 53.9 + n * 3.3)
+      const life = 2.4 + 1.2 * h1
+      if (a > life) return
+      const drag = 2.2
+      const sd = (1 - Math.exp(-drag * a)) / drag
+      const back = s.angle > 2.2
+      let x = nx
+      let y: number
+      let z: number
+      if (!back) {
+        const vj = 15 * s.power * (0.8 + 0.4 * h2)
+        const y0 = s.y + 0.2
+        const drop = vj * sd
+        z = s.z + nz + s.vz * sd
+        if (drop < y0 - 0.25) {
+          y = y0 - drop
+          x += (h3 - 0.5) * 0.6 * a
+        } else {
+          // hit the road: roll outwards along the surface, then lift
+          const sHit = (y0 - 0.25) / vj
+          const spread = Math.max(0, sd - sHit) * 10
+          const ang = h3 * Math.PI * 2
+          x += Math.cos(ang) * spread * 1.2
+          z += Math.sin(ang) * spread * 0.8
+          y = 0.3 + 0.55 * Math.max(0, a - sHit * 1.2) + h2 * 0.4
+        }
+      } else {
+        const vj = 22 * s.power * (0.8 + 0.4 * h2)
+        z = s.z + nz + (s.vz - vj) * sd
+        y = s.y + 0.4 + 0.35 * a + (h2 - 0.5) * 0.5 * a
+        x += (h3 - 0.5) * 1.6 * a
+      }
+      // turbulence
+      x += Math.sin(a * 2.7 + h1 * 6) * 0.25 * a
+      y += Math.sin(a * 3.1 + h2 * 6) * 0.12 * a
+      const r = 0.22 + 1.5 * Math.pow(a, 0.75) * (0.7 + 0.6 * h2)
+      const fadeIn = Math.min(1, a / 0.06)
+      const alpha = 0.62 * s.power * Math.pow(1 - a / life, 1.4) * fadeIn
+      out.push({ x, y, z, r, a: alpha, warm: h1 > 0.72 })
+    })
+  }
+  return out
+}
+
+type Proj = (x: number, y: number, z: number) => { x: number; y: number; k: number; z: number } | null
+
+/** draw particles with a projection; `maxR` caps sprite size on screen */
+export function drawGas(ctx: CanvasRenderingContext2D, ps: GasP[], project: Proj, maxR: number, nearFade = 2) {
+  const list: { x: number; y: number; r: number; a: number; d: number; warm: boolean }[] = []
+  for (const p of ps) {
+    const q = project(p.x, p.y, p.z)
+    if (!q) continue
+    const r = Math.min(maxR, p.r * q.k)
+    if (r < 0.6) continue
+    const near = Math.min(1, Math.max(0, (q.z - nearFade) / 5))
+    const a = p.a * near
+    if (a < 0.01) continue
+    list.push({ x: q.x, y: q.y, r, a, d: q.z, warm: p.warm })
+  }
+  list.sort((p, q) => q.d - p.d)
+  const cool = sprite(false)
+  const warm = sprite(true)
+  for (const g of list) {
+    ctx.globalAlpha = Math.min(1, g.a)
+    ctx.drawImage(g.warm ? warm : cool, g.x - g.r, g.y - g.r, g.r * 2, g.r * 2)
+  }
+  ctx.globalAlpha = 1
+}

src/mv/engine/lyrics.ts

@@ -0,0 +1,171 @@
+// Kinetic, beat-reactive lyrics. Lyrics are supplied by the user (LRC with
+// timestamps, or plain lines stamped with the in-page timing tool) and are
+// rendered into the frame, so they also appear in the exported MP4.
+import type { AudioFrame } from './audio'
+import { clamp, easeOutBack, hash } from './util'
+
+export interface LyricLine {
+  t: number
+  end: number
+  text: string
+}
+
+let lines: LyricLine[] = []
+let offset = 0
+const KEY = 'mv-lyrics-lrc'
+
+export function parseLrc(src: string): LyricLine[] {
+  const out: { t: number; text: string }[] = []
+  let off = 0
+  for (const raw of src.split(/\r?\n/)) {
+    const om = /^\[offset:([+-]?\d+)\]/i.exec(raw.trim())
+    if (om) off = parseInt(om[1], 10) / 1000
+    const tags = [...raw.matchAll(/\[(\d{1,2}):(\d{1,2}(?:\.\d{1,3})?)\]/g)]
+    if (!tags.length) continue
+    const text = raw.replace(/\[[^\]]*\]/g, '').trim()
+    if (!text) continue
+    for (const m of tags) out.push({ t: parseInt(m[1], 10) * 60 + parseFloat(m[2]) - off, text })
+  }
+  out.sort((a, b) => a.t - b.t)
+  return out.map((l, i) => {
+    const next = out[i + 1]?.t ?? l.t + 6
+    return { t: l.t, end: Math.min(next - 0.05, l.t + 7), text: l.text }
+  })
+}
+
+export function setLyrics(src: string, persist = true): number {
+  lines = parseLrc(src)
+  if (persist) {
+    try {
+      localStorage.setItem(KEY, src)
+    } catch {
+      /* private mode */
+    }
+  }
+  return lines.length
+}
+
+export function loadSavedLyrics(): string {
+  try {
+    const s = localStorage.getItem(KEY) ?? ''
+    if (s) lines = parseLrc(s)
+    return s
+  } catch {
+    return ''
+  }
+}
+
+export function setLyricOffset(sec: number) {
+  offset = sec
+}
+export function getLyricOffset() {
+  return offset
+}
+export function lyricCount() {
+  return lines.length
+}
+
+const FONT_STACK = '"MV Lyric", "MV Black", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif'
+
+export function drawLyrics(ctx: CanvasRenderingContext2D, W: number, H: number, tIn: number, a: AudioFrame) {
+  if (!lines.length) return
+  const t = tIn - offset
+  const line = lines.find((l) => t >= l.t - 0.05 && t < l.end + 0.45)
+  if (!line) return
+  const chars = Array.from(line.text)
+  const n = chars.length
+  const dur = Math.max(0.6, line.end - line.t)
+  let size = H * 0.066
+  ctx.save()
+  ctx.font = `900 ${size}px ${FONT_STACK}`
+  let widths = chars.map((c) => ctx.measureText(c).width)
+  const spacing = () => size * 0.06
+  let total = widths.reduce((s, w) => s + w + spacing(), -spacing())
+  if (total > W * 0.88) {
+    size *= (W * 0.88) / total
+    ctx.font = `900 ${size}px ${FONT_STACK}`
+    widths = chars.map((c) => ctx.measureText(c).width)
+    total = widths.reduce((s, w) => s + w + spacing(), -spacing())
+  }
+  const baseY = H * 0.86
+  const pulse = 1 + 0.07 * a.kick
+  // readability band
+  const band = ctx.createLinearGradient(0, baseY - size * 1.3, 0, baseY + size * 0.9)
+  band.addColorStop(0, 'rgba(0,0,0,0)')
+  band.addColorStop(0.5, 'rgba(0,0,0,0.38)')
+  band.addColorStop(1, 'rgba(0,0,0,0)')
+  ctx.fillStyle = band
+  ctx.fillRect(0, baseY - size * 1.3, W, size * 2.2)
+  ctx.translate(W / 2, baseY)
+  ctx.scale(pulse, pulse)
+  ctx.textBaseline = 'middle'
+  ctx.textAlign = 'left'
+  const stagger = Math.min(0.09, (dur * 0.45) / Math.max(1, n))
+  const sung = clamp((t - line.t) / (dur * 0.92)) * n
+  let x = -total / 2
+  for (let i = 0; i < n; i++) {
+    const c = chars[i]
+    const w = widths[i]
+    const ti = line.t + i * stagger
+    const kIn = clamp((t - ti) / 0.24)
+    const kOut = clamp((t - line.end - i * 0.025) / 0.32)
+    if (kIn <= 0) {
+      x += w + spacing()
+      continue
+    }
+    const pop = easeOutBack(kIn)
+    const jitter = a.kick * size * 0.035
+    const jx = (hash(i * 3.1 + a.beat) - 0.5) * jitter
+    const jy = (hash(i * 7.7 + a.beat) - 0.5) * jitter - Math.sin(i * 0.9 + a.beatPos * Math.PI) * size * 0.05 * a.pulse
+    const y = (1 - pop) * size * 0.55 + jy - kOut * size * 0.9
+    const sc = (0.4 + 0.6 * pop) * (1 + kOut * 0.35)
+    const alpha = clamp(kIn * 1.4) * (1 - kOut)
+    const cx = x + w / 2 + jx
+    ctx.save()
+    ctx.translate(cx, y)
+    ctx.scale(sc, sc)
+    ctx.rotate((1 - pop) * (hash(i) - 0.5) * 0.6 + kOut * (hash(i * 2) - 0.5) * 0.8)
+    ctx.globalAlpha = alpha
+    // chromatic split on the kick
+    if (a.kick > 0.2) {
+      ctx.globalCompositeOperation = 'lighter'
+      ctx.fillStyle = `rgba(255,40,80,${0.55 * a.kick})`
+      ctx.fillText(c, -w / 2 - size * 0.05 * a.kick, 0)
+      ctx.fillStyle = `rgba(40,220,255,${0.55 * a.kick})`
+      ctx.fillText(c, -w / 2 + size * 0.05 * a.kick, 0)
+      ctx.globalCompositeOperation = 'source-over'
+    }
+    ctx.lineJoin = 'round'
+    ctx.strokeStyle = 'rgba(0,0,0,0.85)'
+    ctx.lineWidth = size * 0.14
+    ctx.strokeText(c, -w / 2, 0)
+    const done = i < Math.floor(sung)
+    const partial = i === Math.floor(sung) ? sung - i : 0
+    if (done || partial > 0) {
+      const g = ctx.createLinearGradient(0, -size / 2, 0, size / 2)
+      g.addColorStop(0, '#ffd27a')
+      g.addColorStop(1, '#ff2d55')
+      ctx.shadowColor = '#ff2d55'
+      ctx.shadowBlur = size * 0.35
+      ctx.fillStyle = done ? g : '#f4ece0'
+      ctx.fillText(c, -w / 2, 0)
+      if (partial > 0) {
+        ctx.save()
+        ctx.beginPath()
+        ctx.rect(-w / 2, -size, w * partial, size * 2)
+        ctx.clip()
+        ctx.fillStyle = g
+        ctx.fillText(c, -w / 2, 0)
+        ctx.restore()
+      }
+    } else {
+      ctx.shadowColor = 'rgba(255,255,255,0.6)'
+      ctx.shadowBlur = size * 0.2
+      ctx.fillStyle = '#f4ece0'
+      ctx.fillText(c, -w / 2, 0)
+    }
+    ctx.restore()
+    x += w + spacing()
+  }
+  ctx.restore()
+}

src/mv/engine/renderer.ts

@@ -1,6 +1,7 @@
 import { DROP1, DROP2, DURATION, analyse, type AudioFrame } from './audio'
 import { Post, type PostParams } from './post'
 import { PULSE } from './draw'
+import { drawLyrics } from './lyrics'
 import { CUTS, sceneAt } from './timeline'
 import type { SceneCtx } from './types'
 import { clamp, hash, noise1, smoothstep } from './util'
@@ -18,6 +19,8 @@ export class Renderer {
   private out2d: CanvasRenderingContext2D | null = null
   private cache = new Map<string, unknown>()
   private warned = new Set<string>()
+  /** draw the user's lyrics into the frame (off for covers) */
+  lyrics = true
   W = 0
   H = 0
 
@@ -88,6 +91,13 @@ export class Renderer {
     ctx.setTransform(1, 0, 0, 1, 0, 0)
     ctx.globalAlpha = 1
     ctx.shadowBlur = 0
+    if (this.lyrics) {
+      try {
+        drawLyrics(ctx, W, H, t, a)
+      } catch (e) {
+        console.warn('lyrics error', e)
+      }
+    }
 
     const pp = postParams(t, a)
     if (this.post) {

src/mv/engine/scenesCar.ts

@@ -7,7 +7,8 @@
 //      nozzles swivel backwards → boost away.
 import { BAR, BEAT } from './audio'
 import { carRear, carSide, heroCarFront, roadsterSide, truckSide } from './cars'
-import { drawActors, drawHighway, drawPuffs, emit, makeCam, plume3, proj, rearMirror, type Actor, type Cam, type Puff } from './road3d'
+import { drawActors, drawHighway, drawPuffs, emit, makeCam, plume3, poly3, proj, rearMirror, type Actor, type Cam, type Puff } from './road3d'
+import { drawGas, gasParticles, type GasP, type GasState } from './gas'
 import { glowBlob, lightCone, skyline, speedLines, splitText, vGradient } from './draw'
 import { HERO, HERO_H, armPiece, capsule, circle, heroHead, ik, ink, torso, withPalette, RIVAL } from './hero'
 import { resetCam, type SceneCtx } from './types'
@@ -718,17 +719,56 @@ export function sDuel(s: SceneCtx) {
     handbrakeCU(s, seg(inBar, BEAT * 1.6, BEAT * 2.1))
     return
   }
-  // from 1:00 his high beams breathe with the music (kick + bass)
-  const beam = bar >= 7 && bar <= 9 ? clamp(a.kick * 1.15 + a.low * 0.35 + a.high * 0.15) : 0
+  // the moment the spin ends he slams on the high beams: the whole road lights up,
+  // a white flash — then the beams pump with the music (kick + bass)
+  const beamOn = 6 * BAR + 2.6 * BEAT
+  const sinceOn = tau - beamOn
+  let beam = 0
+  if (sinceOn >= 0 && bar <= 9) beam = Math.max(clamp(1 - sinceOn / 0.6), bar >= 7 ? clamp(a.kick * 1.2 + a.low * 0.4 + a.high * 0.15) : 0.85)
+  const whiteOut = (sinceOn >= 0 && sinceOn < 1.2 ? Math.exp(-sinceOn * 3.2) : 0) + (bar >= 7 && bar <= 9 && a.beat % 2 === 0 ? clamp((beam - 0.72) * 3) * 0.85 : 0)
+  const flood = (c: Cam) => {
+    // light thrown over the entire road surface in the direction the car faces
+    if (beam <= 0.02) return
+    const h = st.hero
+    const fz = Math.cos(h.h)
+    const z0 = h.z + fz * 2
+    ctx.save()
+    ctx.globalCompositeOperation = 'lighter'
+    for (let d = 0; d < 90; d += 3) {
+      const fall = 1 / (1 + d / 22)
+      const za = z0 + fz * d
+      const zb = z0 + fz * (d + 3.05)
+      poly3(ctx, c, s, [
+        [-7.4, 0.02, za],
+        [7.4, 0.02, za],
+        [7.4, 0.02, zb],
+        [-7.4, 0.02, zb],
+      ], `rgba(255,246,228,${0.42 * beam * fall})`)
+      // guard rails catch the light too
+      for (const sd of [-1, 1])
+        poly3(ctx, c, s, [
+          [sd * 7.6, 0.55, za],
+          [sd * 7.6, 0.9, za],
+          [sd * 7.6, 0.9, zb],
+          [sd * 7.6, 0.55, zb],
+        ], `rgba(255,246,228,${0.5 * beam * fall})`)
+    }
+    ctx.restore()
+  }
+  const flashScreen = () => {
+    if (whiteOut <= 0.01) return
+    ctx.fillStyle = `rgba(255,252,245,${clamp(whiteOut)})`
+    ctx.fillRect(0, 0, W, H)
+  }
   if (bar === 6 || bar === 7 || bar === 10) {
     // POV through the spin: the whole world swings 180° across the windscreen
     const spinning = (bar === 6 || bar === 10) && inBar > BEAT * 0.4 && inBar < BEAT * 2.7
     const roll = spinning ? Math.sin(inBar * 9) * 0.03 : shake
     const c = heroPOV(s, st.hero, 0, 0.02, 1, roll)
     drawHighway(s, c)
+    flood(c)
     const acts = actorsDuel(tau, beam, beam)
-    const puffs = spinSmoke(tau)
-    drawPuffs(s, c, puffs.filter((p) => true))
+    drawPuffs(s, c, spinSmoke(tau))
     drawActors(s, c, acts)
     windshield(s, false)
     if (spinning) {
@@ -736,30 +776,24 @@ export function sDuel(s: SceneCtx) {
       ctx.fillRect(0, 0, W, H)
       speedLines(ctx, W / 2, H / 2, Math.max(W, H) * 0.9, t, 80, '#ffffff', 0.12, 0.45)
     }
+    flashScreen()
     return
   }
   if (bar === 8 || bar === 9) {
-    // flashing the high beams, on the beat: POV ↔ the hand on the stalk
-    const flash = beam
+    // high beams pumping on the beat: POV ↔ the hand on the stalk
     const view = Math.floor((tau - 8 * BAR) / BEAT) % 4
     if (view === 2) {
-      stalkCU(s, flash)
+      stalkCU(s, beam)
+      flashScreen()
       return
     }
     const c = heroPOV(s, st.hero, 0, 0.02, 1.1, shake)
     drawHighway(s, c)
-    const acts = actorsDuel(tau, flash, flash)
+    flood(c)
     drawPuffs(s, c, spinSmoke(tau))
-    // his beams on the road
-    if (flash > 0.05) {
-      ctx.save()
-      ctx.globalCompositeOperation = 'lighter'
-      const r = proj(c, s, st.rival.x, 0.6, st.rival.z)
-      if (r) glowBlob(ctx, r.x, r.y, W * 0.16, '#fff6e0', 0.3 * flash)
-      ctx.restore()
-    }
-    drawActors(s, c, acts)
+    drawActors(s, c, actorsDuel(tau, beam, beam))
     windshield(s, false)
+    flashScreen()
     return
   }
   // floor it: POV forward, the red car shrinking in the mirror; then a low road camera
@@ -810,26 +844,31 @@ const PORTS: [number, number][] = [
   [0.75, 1.3],
 ]
 
-/** cold-gas thrusters: huge white clouds, in world space */
-function fogFx(s: SceneCtx, c: Cam, tj: number) {
-  const puffs: Puff[] = []
-  PORTS.forEach(([px, pz], idx) => {
-    // downward thrust → gas slams into the road and rolls out
-    emit(puffs, tj, 0.3, 20, 24, (te) => {
-      const { st, hz } = jw(te)
-      if (st.jetAngle > 2.2 || st.jetPower < 0.3) return null
-      const y = st.y - st.compress
-      return { x: px * 1.2, y: y < 4.5 ? 0.5 : y - 0.6, z: hz + pz }
-    }, { spread: 4.2, rise: 1.3, grow: 3.4, life: 3.6, r0: 1.2, a0: 0.36, col: idx % 2 ? [176, 182, 196] : [196, 186, 196], drift: { x: px * 2.6, z: -11 } })
-    // backward thrust behind the plate → long white wake
-    emit(puffs, tj, 0.3, 20, 26, (te) => {
-      const { st, hz } = jw(te)
-      if (st.jetAngle < 2.2 || st.jetPower < 0.2) return null
-      return { x: px * 0.6, y: st.y - st.compress + 0.45, z: hz - 2.3 }
-    }, { spread: 2.2, rise: 0.8, grow: 3.0, life: 3.0, r0: 0.7, a0: 0.3, col: idx % 2 ? [180, 186, 200] : [200, 180, 190], drift: { x: 0, z: -16 } })
-  })
-  drawPuffs(s, c, puffs)
+/** thruster gas (particle model) for the jump, in world coordinates */
+function jumpGas(tj: number): GasP[] {
+  const st = (te: number, back: boolean): GasState => {
+    const a = jw(te)
+    const b = jw(te + 0.02)
+    const on = back ? a.st.jetAngle > 2.2 : a.st.jetAngle <= 2.2
+    return { z: a.hz, y: a.st.y - a.st.compress + 0.12, vz: (b.hz - a.hz) / 0.02, power: on ? a.st.jetPower : 0, angle: a.st.jetAngle }
+  }
+  const down = gasParticles(tj, 0.25, (te) => st(te, false), PORTS.map(([x, z]) => [x * 1.1, z] as [number, number]), 46)
+  const back = gasParticles(tj, 0.25, (te) => st(te, true), [
+    [-0.35, -2.25],
+    [0.35, -2.25],
+  ], 52)
+  return down.concat(back)
+}
 
+/** draw the gas split around the car so it wraps it correctly */
+function gas3D(s: SceneCtx, c: Cam, ps: GasP[], carZ: number, part: 'far' | 'near') {
+  const carDepth = proj(c, s, 0, 0, carZ)?.z ?? 1e9
+  const sel = ps.filter((p) => {
+    const q = proj(c, s, p.x, p.y, p.z)
+    if (!q) return false
+    return part === 'far' ? q.z >= carDepth : q.z < carDepth
+  })
+  drawGas(s.ctx, sel, (x, y, z) => proj(c, s, x, y, z), s.W * 0.45, 1.5)
 }
 
 /** telemetry HUD like the demo footage */
@@ -1043,36 +1082,11 @@ function sideJumpRoadster(s: SceneCtx, tj: number) {
   }
   ctx.fillStyle = '#0d0e12'
   ctx.fillRect(0, gy, W, H - gy)
-  // gas clouds (white, lit pink by the tail lights)
-  for (let te = Math.max(0.3, tj - 3.2); te <= tj; te += 1 / 36) {
-    const q = jumpState(te)
-    if (q.jetPower < 0.25) continue
-    const age = tj - te
-    const back = q.jetAngle > 2.2
-    for (let n = 0; n < 3; n++) {
-      const hx = hash(te * 53 + n) - 0.5
-      const hy2 = hash(te * 29 + n)
-      let px: number
-      let py: number
-      if (!back) {
-        px = q.dx + (n - 1) * 1.2 + hx * 3 * (0.4 + age * 2) - age * 10
-        py = Math.min(q.y, 0.6) + age * (0.8 + hy2 * 1.2)
-      } else {
-        px = q.dx - 2.3 - age * 16 + hx * age * 2
-        py = q.y + 0.5 + hx * age * 1.4 + age * 0.4
-      }
-      const r = (0.8 + age * 2.4) * k
-      const al = 0.3 * (1 - age / 3.2) * q.jetPower
-      const X = toX(px)
-      const Y = gy - py * k
-      const gr = ctx.createRadialGradient(X, Y - r * 0.25, 0, X, Y, r)
-      const col = n === 1 ? '196,184,194' : '180,186,200'
-      gr.addColorStop(0, `rgba(${col},${al})`)
-      gr.addColorStop(1, `rgba(${col},0)`)
-      ctx.fillStyle = gr
-      ctx.fillRect(X - r, Y - r, r * 2, r * 2)
-    }
-  }
+  // thruster gas — same particle model as the 3D shots, seen side-on
+  const rz = vJ * tj
+  const gp = jumpGas(tj)
+  const sideProj = (x: number, y: number, z: number) => ({ x: toX(z - rz), y: gy - y * k, k, z: 20 - x })
+  drawGas(ctx, gp.filter((p) => p.x < 0), sideProj, W * 0.3)
   carSide(ctx, 'rival', toX(0), gy, 4.5 * k, 0, { spin: -(scroll / 0.5), head: 1, brake: 0.1, t, look: st.look })
   const hx = toX(st.dx)
   const hy = gy - st.y * k + st.compress * k
@@ -1081,6 +1095,7 @@ function sideJumpRoadster(s: SceneCtx, tj: number) {
   ctx.ellipse(hx, gy + 2, k * 2, k * 0.15, 0, 0, Math.PI * 2)
   ctx.fill()
   roadsterSide(ctx, hx, hy, 4.3 * k, st.pitch, { spin: -(st.dist / 0.45), head: 1, t, nozzle: 1 })
+  drawGas(ctx, gp.filter((p) => p.x >= 0), sideProj, W * 0.3)
 
 }
 
@@ -1114,17 +1129,22 @@ export function sJump(s: SceneCtx) {
     // straight behind his car: thrusters fire down, the Roadster lifts off the road
     const c = makeCam(s, 0, 1.6, w.hz - 7, 0, 0.0, 1, shake * 0.5, 0.03)
     drawHighway(s, c)
-    fogFx(s, c, tj)
-    drawActors(s, c, acts)
+    const gp = jumpGas(tj)
+    drawActors(s, c, acts.filter((x) => x.kind === 'rival'))
+    gas3D(s, c, gp, w.hz, 'far')
+    drawActors(s, c, acts.filter((x) => x.kind === 'roadster'))
+    gas3D(s, c, gp, w.hz, 'near')
     return
   }
   if (bar === 4) {
     // low on the shoulder, looking up: it sails over the red car on a column of gas
     const c = makeCam(s, 8.5, 0.5, w.rz - 0.5, -1.45, 0, 0.9, 0, -0.26)
     drawHighway(s, c)
+    const gp = jumpGas(tj)
     drawActors(s, c, acts.filter((x) => x.kind === 'rival'))
-    fogFx(s, c, tj)
+    gas3D(s, c, gp, w.hz, 'far')
     drawActors(s, c, acts.filter((x) => x.kind === 'roadster'))
+    gas3D(s, c, gp, w.hz, 'near')
     return
   }
   if (bar === 5) {
@@ -1136,16 +1156,20 @@ export function sJump(s: SceneCtx) {
     const g = Math.max(0, tj - 12 * BEAT)
     const c = makeCam(s, 0.9, 1.5, w.hz - 8 - 3 * g * g, -0.04, 0.03, 1, shake)
     drawHighway(s, c)
+    const gp = jumpGas(tj)
+    gas3D(s, c, gp, w.hz, 'far')
     drawActors(s, c, [roadsterActor(tj)])
-    fogFx(s, c, tj)
+    gas3D(s, c, gp, w.hz, 'near')
     if (g > 0) speedLines(ctx, W / 2, H / 2, Math.max(W, H) * 0.9, t, 100, '#ffffff', 0.08 + g * 0.08, 0.35)
     return
   }
   // the rival's POV: the Roadster disappears into its own cloud
   const c = makeCam(s, -0.35, 1.1, w.rz + 0.2, 0, 0.02, 1, shake)
   drawHighway(s, c)
+  const gp = jumpGas(tj)
+  gas3D(s, c, gp, w.hz, 'far')
   drawActors(s, c, [roadsterActor(tj)])
-  fogFx(s, c, tj)
+  gas3D(s, c, gp, w.hz, 'near')
   windshield(s, true)
   void H
 }

src/mv/fonts.ts

@@ -27,3 +27,20 @@ export function loadFonts(): Promise<void> {
 }
 
 export const AUDIO_URL = asset('heijie.mp3')
+
+let lyricFont: Promise<void> | null = null
+/** the full common-character set (GB2312, ~950 KB) is only fetched when lyrics are used */
+export function ensureLyricFont(): Promise<void> {
+  if (lyricFont) return lyricFont
+  lyricFont = (async () => {
+    try {
+      const f = new FontFace('MV Lyric', `url(${asset('mvfonts/lyric.woff2')}) format("woff2")`)
+      await f.load()
+      document.fonts.add(f)
+      window.dispatchEvent(new Event('mv-lyrics'))
+    } catch (e) {
+      console.warn('lyric font failed', e)
+    }
+  })()
+  return lyricFont
+}

src/mv/playerBus.ts

@@ -0,0 +1,7 @@
+// tiny bridge so other panels (e.g. lyric timing) can read/drive the player
+export const bus = {
+  time: () => 0,
+  seek: (_t: number) => {},
+  play: () => {},
+  pause: () => {},
+}

src/mv/styles.css

@@ -822,3 +822,50 @@
   border-radius: 999px;
   padding: 4px 10px;
 }
+
+.mv-lyrics {
+  display: grid;
+  gap: 12px;
+}
+.mv-lyrics-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+.mv-lyrics-offset {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--muted);
+}
+.mv-lyrics-offset b {
+  color: var(--fg);
+  font-variant-numeric: tabular-nums;
+  min-width: 44px;
+  text-align: center;
+}
+.mv-tap {
+  display: grid;
+  gap: 12px;
+  text-align: center;
+  padding: 10px 0;
+}
+.mv-tap-prog {
+  color: var(--muted);
+  font-size: 13px;
+}
+.mv-tap-now {
+  font-family: 'MV Black', 'PingFang SC', sans-serif;
+  font-size: clamp(22px, 4vw, 40px);
+  color: #fff;
+  text-shadow: 0 0 18px rgba(255, 45, 85, 0.7);
+}
+.mv-tap-next {
+  color: var(--muted);
+  font-size: 16px;
+}
+.mv-tap .mv-lyrics-bar {
+  justify-content: center;
+}