Step 3-4: 3D 解剖模型与分镜时间轴

README.md

@@ -58,8 +58,8 @@ pinned: false
 
 1. ✅ 编写本计划 README，初始化 Space（static）。
 2. ✅ 生成中文旁白逐句音频 + 时间轴清单（`timeline.json`）。
-3. ⏳ 程序化 3D 手部解剖模型：皮肤 / 骨骼 / 肌腱 / 腱鞘 / 关节骨架绑定 / 疼痛发光 / 器械与道具。
-4. ⏳ 分镜时间轴：11 镜头 + 结尾的相机运动、姿态、图层、字幕、HUD。
+3. ✅ 程序化 3D 手部解剖模型：皮肤 / 骨骼 / 肌腱 / 腱鞘 / 关节骨架绑定 / 疼痛发光 / 器械与道具。
+4. ✅ 分镜时间轴：11 镜头 + 结尾的相机运动、姿态、图层、字幕、HUD。
 5. ⏳ 程序化音乐与音效、旁白混音、ducking。
 6. ⏳ 播放器 UI（手机竖屏适配、全屏、进度条）+ MP4 本地导出（24/30/60fps）。
 7. ⏳ 四平台文案（标题 / 话题 / 正文，严格字数校验）+ 封面生成与下载。
@@ -78,3 +78,4 @@ README.md                  ← 本文件（计划 + 进度）
 
 - [x] Step 1：计划与大纲完成
 - [x] Step 2：旁白 46 句逐句生成（zh-CN 神经网络语音，语速 +38%），自动裁剪静音并对齐时间轴，全片总长 **88.2 秒**（12 段）
+- [x] Step 3-4：程序化 3D 手部解剖模型（皮肤透视 / 骨骼 / 肌腱 / 腱鞘、疼痛红光、原创器械与生活道具）+ 12 段分镜时间轴（镜头运动、分屏、字幕、HUD、超声示意、截面图），全时间轴逐帧验证无运行错误

scripts/gen_tts.py

@@ -60,3 +60,8 @@ async def main():
     print("TOTAL", round(t, 2))
 
 asyncio.run(main())
+
+# also emit TS module for the frontend bundle
+ts = os.path.join(os.path.dirname(OUT), "..", "src", "video", "timelineData.ts")
+with open(ts, "w", encoding="utf-8") as f:
+    f.write("// generated from public/audio/timeline.json by scripts/gen_tts.py\nexport const TL = " + json.dumps(data, ensure_ascii=False, indent=1) + " as const\n")

scripts/shot.py

@@ -0,0 +1,25 @@
+"""Screenshot helper: python3 scripts/shot.py out.png '<query string>' [w h]"""
+import sys, asyncio
+from playwright.async_api import async_playwright
+
+async def main():
+    out, qs = sys.argv[1], sys.argv[2]
+    w = int(sys.argv[3]) if len(sys.argv) > 3 else 540
+    h = int(sys.argv[4]) if len(sys.argv) > 4 else 960
+    async with async_playwright() as p:
+        b = await p.chromium.launch(args=["--use-gl=angle", "--use-angle=swiftshader", "--enable-unsafe-swiftshader", "--autoplay-policy=no-user-gesture-required"])
+        pg = await b.new_page(viewport={"width": w, "height": h})
+        logs = []
+        pg.on("console", lambda m: logs.append(m.type + ": " + m.text))
+        pg.on("pageerror", lambda e: logs.append("PAGEERROR: " + str(e)))
+        await pg.goto("http://localhost:5173/preview/production/ed5ba841-ed53-4eec-a8c5-93237d26b7ab/?" + qs)
+        try:
+            await pg.wait_for_function("window.__done === true", timeout=90000)
+        except Exception as e:
+            logs.append("TIMEOUT " + str(e)[:100])
+        await pg.screenshot(path=out)
+        for l in logs:
+            if "error" in l.lower() or "TIMEOUT" in l or "INFO" in l: print(l[:900])
+        await b.close()
+
+asyncio.run(main())

scripts/stat.py

@@ -0,0 +1,10 @@
+import sys
+from PIL import Image; import numpy as np
+for f in sys.argv[1:]:
+  a=np.array(Image.open(f).convert('RGB')).astype(int)
+  skin=(a[:,:,0]>150)&(a[:,:,0]>a[:,:,2]+40)
+  bone=(a[:,:,0]>190)&(a[:,:,1]>180)&(a[:,:,2]>150)
+  red=(a[:,:,0]>200)&(a[:,:,1]<90)
+  def bb(m):
+    ys,xs=np.where(m); return (int(m.sum()), (xs.min(),xs.max(),ys.min(),ys.max())) if len(xs) else (0,None)
+  print(f, 'mean',a.mean(axis=(0,1)).round(1),'skin',bb(skin),'bright',bb(bone),'red',bb(red))

src/App.tsx

@@ -1,24 +1,11 @@
-const SURF_LOGO_PATH = "M14.6875 13.333C15.0977 13.333 15.4859 13.5196 15.7422 13.8398L17.8721 16.502C17.9009 16.538 17.9308 16.5721 17.9619 16.6035C18.3091 16.9542 18.7529 17.3405 18.7529 17.834C18.7528 18.3399 18.3428 18.75 17.8369 18.75H17.5713C17.2123 18.75 16.8727 18.5869 16.6484 18.3066L15.4678 16.8311C14.761 15.9479 13.3369 16.4478 13.3369 17.5791V18.6494C13.3369 18.7062 13.2882 18.75 13.2314 18.75H11.3584C10.7127 18.75 10.1016 18.4564 9.69824 17.9521L8.80176 16.8311C8.09497 15.9477 6.66993 16.4478 6.66992 17.5791V18.6494C6.66991 18.7062 6.62124 18.75 6.56445 18.75H4.69141C4.04589 18.75 3.43548 18.4562 3.03223 17.9521L2.13477 16.8311C1.77885 16.3862 1.25293 15.931 1.25293 15.3613V13.4395C1.253 13.3822 1.29729 13.3331 1.35449 13.333C1.7646 13.3332 2.15295 13.5196 2.40918 13.8398L4.53809 16.502C5.24478 17.3853 6.66962 16.886 6.66992 15.7549V14.6836C6.67018 13.9379 7.27483 13.3332 8.02051 13.333C8.43065 13.333 8.81884 13.5197 9.0752 13.8398L11.2051 16.502C11.9097 17.3827 13.3282 16.8887 13.3369 15.7646V14.6836C13.3372 13.9378 13.9417 13.3331 14.6875 13.333ZM14.6875 6.66699C15.0978 6.66702 15.4859 6.85347 15.7422 7.17383L17.8721 9.83594C18.2276 10.2801 18.7526 10.7339 18.7529 11.3027V13.2266C18.7528 13.2833 18.7091 13.333 18.6523 13.333C18.2421 13.3329 17.8539 13.1465 17.5977 12.8262L15.4678 10.1641C14.7609 9.28113 13.3369 9.78089 13.3369 10.9121V11.9824C13.3369 12.7282 12.7321 13.3328 11.9863 13.333C11.5761 13.3329 11.187 13.1465 10.9307 12.8262L8.80176 10.1641C8.09497 9.28072 6.66993 9.78076 6.66992 10.9121V11.9824C6.66992 12.7284 6.06525 13.3329 5.31934 13.333C4.90908 13.3329 4.52094 13.1465 4.26465 12.8262L2.13477 10.1641C1.7788 9.71925 1.25293 9.26403 1.25293 8.69434V6.77344C1.253 6.71621 1.29728 6.6671 1.35449 6.66699C1.76461 6.66714 2.15295 6.85359 2.40918 7.17383L4.53809 9.83594C5.24487 10.7193 6.66989 10.2192 6.66992 9.08789V8.01758C6.66992 7.27168 7.27467 6.66722 8.02051 6.66699C8.43082 6.66699 8.81885 6.85345 9.0752 7.17383L11.2051 9.83594C11.9097 10.7163 13.3279 10.2223 13.3369 9.09863V8.01758C13.3369 7.27161 13.9416 6.6671 14.6875 6.66699ZM2.43555 1.25C2.79488 1.25 3.13499 1.41367 3.35938 1.69434L4.53809 3.16895C5.24485 4.05241 6.66991 3.55228 6.66992 2.4209V1.35059C6.66993 1.29391 6.71874 1.25017 6.77539 1.25H8.64844C9.29394 1.25 9.90438 1.5438 10.3076 2.04785L11.2051 3.16895C11.9097 4.04967 13.3282 3.55564 13.3369 2.43164V1.35059C13.3369 1.29391 13.3857 1.25017 13.4424 1.25H15.3154C15.9609 1.25 16.5714 1.5438 16.9746 2.04785L17.8721 3.16895C18.2275 3.61314 18.7526 4.06689 18.7529 4.63574V6.56055C18.7528 6.61728 18.7091 6.66699 18.6523 6.66699C18.2421 6.66688 17.8539 6.4795 17.5977 6.15918L15.4678 3.49805C14.761 2.61474 13.3371 3.11388 13.3369 4.24512V5.31543C13.3369 6.06126 12.7321 6.66673 11.9863 6.66699C11.5761 6.66693 11.187 6.47955 10.9307 6.15918L8.80176 3.49805C8.095 2.61474 6.67006 3.11388 6.66992 4.24512V5.31543C6.66992 6.06137 6.06525 6.66691 5.31934 6.66699C4.90908 6.66693 4.52094 6.47955 4.26465 6.15918L2.13477 3.49805C2.10558 3.46158 2.07543 3.42725 2.04395 3.39551C1.6966 3.04528 1.25293 2.6583 1.25293 2.16504C1.25317 1.65963 1.66348 1.25 2.16895 1.25H2.43555Z"
+import { lazy, Suspense } from 'react'
 
-function SurfLogo() {
-  return (
-    <svg width="40" height="40" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d={SURF_LOGO_PATH} fill="var(--fg-base, #212121)" />
-    </svg>
-  )
-}
+const Debug = lazy(() => import('./video/Debug'))
+const TDebug = lazy(() => import('./video/TDebug'))
 
-// Frontend API calls should use `src/lib/api.ts`, not absolute `/api/...` URLs.
 export default function App() {
-  return (
-    <div data-surf-placeholder className="min-h-screen flex flex-col items-center justify-center gap-4 rounded-[14px]" style={{ background: 'var(--bg-chat-nav, #f4f4f4)', border: '1px solid var(--border-strong, rgba(42,42,42,0.08))' }}>
-      <SurfLogo />
-      <h1 className="font-black text-[36px] leading-[44px] text-[var(--fg-base,#212121)]">
-        GM, Builder<span style={{ color: 'var(--brand-100, #ff2882)' }}>.</span>
-      </h1>
-      <p className="text-xl leading-7 text-[var(--fg-subtle,#7a7a7a)]">
-        Start your crypto project here!
-      </p>
-    </div>
-  )
+  const q = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null
+  if (q?.has('debug')) return <Suspense fallback={null}><Debug /></Suspense>
+  if (q?.has('tdebug')) return <Suspense fallback={null}><TDebug /></Suspense>
+  return <div style={{ color: '#fff' }}>loading</div>
 }

src/video/Debug.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react'
+import { Engine } from './engine'
+import { baseState, orbit } from './state'
+import { POSE } from './model'
+import type { V3 } from './math'
+
+/** Debug still renderer: ?debug=<json> */
+export default function Debug() {
+  const ref = useRef<HTMLCanvasElement>(null)
+  useEffect(() => {
+    const q = JSON.parse(decodeURIComponent(new URLSearchParams(location.search).get('debug') || '{}'))
+    const eng = new Engine(); eng.setSize(540, 960)
+    const c = ref.current!; c.width = 540; c.height = 960
+    const target: V3 = q.target ?? [0, 0.2, 0]
+    const s = baseState({
+      cam: { pos: orbit(target, q.dist ?? 5, q.yaw ?? 0, q.pitch ?? 0.1), target, fov: 35 },
+      arm: { pos: [0, 0, 0], rot: q.rot ?? [0, 0.6, 0] },
+      pose: q.poseArr ?? [...(POSE as Record<string, number[]>)[q.pose ?? 'rest']],
+      xray: q.xray ?? 0, bone: q.bone ?? 1, tendon: q.tendon ?? 1, sheath: q.sheath ?? 1, thick: q.thick ?? 0, pain: q.pain ?? 0, friction: q.friction ?? 0,
+      props: Object.fromEntries((q.props ?? []).map((p: string) => [p, { vis: 1, depth: 0.3 }])),
+      time: 1,
+    })
+    eng.render({ views: [{ rect: [0, 0, 1, 1], state: s }] }, c.getContext('2d')!, 1, { w: 540, h: 960 })
+    const m = eng.model, cam = eng.cams[0]
+    const pr = (o: import('three').Object3D, y: number) => { const v = o.localToWorld(new (m.anchors.pain.constructor as any)(0, y, 0)); const q = m.project(v, cam); return [Math.round(q.x * 540), Math.round(q.y * 960), +v.x.toFixed(2), +v.y.toFixed(2), +v.z.toFixed(2)] }
+    const info: Record<string, unknown> = {
+      thumbTip: pr(m.thumbJoints[2], 0.27), idxTip: pr(m.fingerJoints[0][2], 0.2), midTip: pr(m.fingerJoints[1][2], 0.21), litTip: pr(m.fingerJoints[3][2], 0.18),
+      wrist: pr(m.wrist, 0), elbow: pr(m.forearm, -2.6), pain: (() => { const q = m.project(m.anchors.pain, cam); return [Math.round(q.x * 540), Math.round(q.y * 960)] })(),
+    }
+    for (const [k, o] of Object.entries(m.props)) if (o.visible) { const v = o.getWorldPosition(new (m.anchors.pain.constructor as any)()); const q = m.project(v, cam); info['prop_' + k] = [Math.round(q.x * 540), Math.round(q.y * 960), +v.x.toFixed(2), +v.y.toFixed(2), +v.z.toFixed(2)] }
+    console.log('INFO ' + JSON.stringify(info))
+    ;(window as unknown as { __done: boolean }).__done = true
+  }, [])
+  return <canvas ref={ref} style={{ width: 540, height: 960 }} />
+}

src/video/TDebug.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react'
+import { Engine } from './engine'
+import { frameAt } from './scenes'
+
+/** ?tdebug=3,10,17 renders frames, logs pixel stats; last one stays on screen */
+export default function TDebug() {
+  const ref = useRef<HTMLCanvasElement>(null)
+  useEffect(() => {
+    const ts = (new URLSearchParams(location.search).get('tdebug') || '3').split(',').map(Number)
+    const eng = new Engine(); eng.setSize(540, 960)
+    const c = ref.current!; c.width = 540; c.height = 960
+    const ctx = c.getContext('2d')!
+    const out: string[] = []
+    for (const t of ts) {
+      try {
+        const t0 = performance.now()
+        eng.render(frameAt(t), ctx, t, { w: 540, h: 960 })
+        const ms = performance.now() - t0
+        const d = ctx.getImageData(0, 0, 540, 960).data
+        let sum = 0, red = 0, skin = 0
+        for (let i = 0; i < d.length; i += 16) {
+          const r = d[i], g = d[i + 1], b = d[i + 2]
+          sum += (r + g + b) / 3
+          if (r > 170 && g < 90 && b < 90) red++
+          if (r > 150 && g > 100 && b > 70 && r > g && g > b && r - b > 40) skin++
+        }
+        const n = d.length / 16
+        out.push(`t=${t} ms=${ms.toFixed(0)} lum=${(sum / n).toFixed(1)} red=${(red / n * 100).toFixed(1)}% skin=${(skin / n * 100).toFixed(1)}%`)
+      } catch (e) {
+        out.push(`t=${t} ERROR ${(e as Error).message} ${(e as Error).stack?.split('\n').slice(0, 3).join(' | ')}`)
+      }
+    }
+    console.log('INFO ' + out.join(' ;; '))
+    ;(window as unknown as { __done: boolean }).__done = true
+  }, [])
+  return <canvas ref={ref} style={{ width: 540, height: 960 }} />
+}

src/video/engine.ts

@@ -0,0 +1,154 @@
+import * as THREE from 'three'
+import { HandModel, type SceneState } from './model'
+
+export interface View { rect: [number, number, number, number]; state: SceneState; bg?: string }
+export interface OverlayApi {
+  W: number; H: number; t: number
+  /** project anchor/world point of view i → logical coords (1080 x 1920 space scaled by view rect) */
+  anchor: (name: string, view?: number) => { x: number; y: number; z: number }
+  world: (p: THREE.Vector3, view?: number) => { x: number; y: number; z: number }
+  model: HandModel
+}
+export interface Frame {
+  views: View[]
+  overlay?: (ctx: CanvasRenderingContext2D, api: OverlayApi) => void
+  fade?: number // 0..1 black
+}
+
+export const LW = 1080, LH = 1920
+
+const BG_CACHE: Record<string, THREE.Texture> = {}
+function bgTexture(kind: string) {
+  if (BG_CACHE[kind]) return BG_CACHE[kind]
+  const c = document.createElement('canvas'); c.width = 540; c.height = 960
+  const g = c.getContext('2d')!
+  const pal: Record<string, [string, string, string]> = {
+    lab: ['#123257', '#081a33', '#020711'],
+    warm: ['#3a2a3f', '#1b1426', '#07050c'],
+    red: ['#4a1626', '#1e0b19', '#06030a'],
+    clean: ['#1d4a6e', '#0b2441', '#030b18'],
+  }
+  const [a, b, d] = pal[kind] ?? pal.lab
+  const gr = g.createRadialGradient(270, 400, 20, 270, 480, 620)
+  gr.addColorStop(0, a); gr.addColorStop(0.5, b); gr.addColorStop(1, d)
+  g.fillStyle = gr; g.fillRect(0, 0, 540, 960)
+  // subtle grid
+  g.strokeStyle = 'rgba(120,190,255,0.05)'; g.lineWidth = 1
+  for (let x = 0; x <= 540; x += 30) { g.beginPath(); g.moveTo(x, 0); g.lineTo(x, 960); g.stroke() }
+  for (let y = 0; y <= 960; y += 30) { g.beginPath(); g.moveTo(0, y); g.lineTo(540, y); g.stroke() }
+  const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace
+  BG_CACHE[kind] = t
+  return t
+}
+
+export class Engine {
+  gl: HTMLCanvasElement
+  renderer: THREE.WebGLRenderer
+  model: HandModel
+  camera = new THREE.PerspectiveCamera(35, 9 / 16, 0.05, 100)
+  cams: THREE.PerspectiveCamera[] = []
+  W = 1080; H = 1920
+
+  constructor() {
+    this.gl = document.createElement('canvas')
+    this.renderer = new THREE.WebGLRenderer({ canvas: this.gl, antialias: true, preserveDrawingBuffer: true, alpha: false, powerPreference: 'high-performance' })
+    this.renderer.outputColorSpace = THREE.SRGBColorSpace
+    this.renderer.toneMapping = THREE.ACESFilmicToneMapping
+    this.renderer.toneMappingExposure = 1.05
+    this.renderer.setPixelRatio(1)
+    this.model = new HandModel(this.renderer)
+    this.setSize(1080, 1920)
+  }
+
+  setSize(w: number, h: number) {
+    this.W = w; this.H = h
+    this.renderer.setSize(w, h, false)
+  }
+
+  private setupCam(cam: THREE.PerspectiveCamera, s: SceneState, aspect: number) {
+    cam.aspect = aspect
+    cam.fov = s.cam.fov
+    cam.position.set(...s.cam.pos)
+    const target = new THREE.Vector3(...s.cam.target)
+    const follow = (s.cam as { follow?: number }).follow ?? 0
+    if (follow > 0) {
+      const d = this.model.anchors.pain.clone().sub(target).multiplyScalar(follow)
+      cam.position.add(d); target.add(d)
+    }
+    cam.up.set(0, 1, 0)
+    if (s.cam.roll) cam.up.applyAxisAngle(new THREE.Vector3(0, 0, 1), s.cam.roll)
+    cam.lookAt(target)
+    cam.updateProjectionMatrix()
+    cam.updateMatrixWorld()
+  }
+
+  /** Render a frame onto a 2D context sized W x H (logical layout uses LW x LH scaled). */
+  render(frame: Frame, ctx: CanvasRenderingContext2D, t: number, logical: { w: number; h: number } = { w: LW, h: LH }) {
+    const { W, H, renderer } = this
+    renderer.setScissorTest(true)
+    renderer.autoClear = false
+    renderer.setClearColor('#02060d', 1)
+    renderer.setViewport(0, 0, W, H); renderer.setScissor(0, 0, W, H); renderer.clear()
+    while (this.cams.length < frame.views.length) this.cams.push(new THREE.PerspectiveCamera())
+    const anchorsPerView: Record<string, THREE.Vector3>[] = []
+    frame.views.forEach((v, i) => {
+      const [rx, ry, rw, rh] = v.rect
+      const x = Math.round(rx * W), y = Math.round(ry * H), w = Math.round(rw * W), h = Math.round(rh * H)
+      this.model.apply(v.state)
+      this.model.scene.background = bgTexture(v.bg ?? 'lab')
+      const cam = this.cams[i]
+      this.setupCam(cam, v.state, w / h)
+      renderer.setViewport(x, H - y - h, w, h); renderer.setScissor(x, H - y - h, w, h)
+      renderer.render(this.model.scene, cam)
+      const snap: Record<string, THREE.Vector3> = {}
+      for (const [k, p] of Object.entries(this.model.anchors)) snap[k] = p.clone()
+      anchorsPerView.push(snap)
+    })
+    renderer.setScissorTest(false)
+
+    ctx.save()
+    ctx.setTransform(1, 0, 0, 1, 0, 0)
+    ctx.clearRect(0, 0, W, H)
+    ctx.drawImage(this.gl, 0, 0, W, H)
+    // logical transform
+    const sx = W / logical.w, sy = H / logical.h
+    ctx.setTransform(sx, 0, 0, sy, 0, 0)
+    // particles + vignette
+    drawAtmosphere(ctx, t, logical.w, logical.h)
+    if (frame.overlay) {
+      const api: OverlayApi = {
+        W: logical.w, H: logical.h, t, model: this.model,
+        world: (p, vi = 0) => {
+          const v = frame.views[vi]; const cam = this.cams[vi]
+          const q = p.clone().project(cam)
+          const [rx, ry, rw, rh] = v.rect
+          return { x: (rx + ((q.x + 1) / 2) * rw) * logical.w, y: (ry + ((1 - q.y) / 2) * rh) * logical.h, z: q.z }
+        },
+        anchor: (name, vi = 0) => api.world(anchorsPerView[vi]?.[name] ?? new THREE.Vector3(), vi),
+      }
+      frame.overlay(ctx, api)
+    }
+    if (frame.fade && frame.fade > 0) {
+      ctx.fillStyle = `rgba(0,0,0,${Math.min(1, frame.fade)})`; ctx.fillRect(0, 0, logical.w, logical.h)
+    }
+    ctx.restore()
+  }
+}
+
+function drawAtmosphere(ctx: CanvasRenderingContext2D, t: number, w: number, h: number) {
+  // floating micro particles (deterministic)
+  ctx.save()
+  ctx.globalCompositeOperation = 'lighter'
+  for (let i = 0; i < 40; i++) {
+    const s1 = Math.sin(i * 91.7) * 0.5 + 0.5, s2 = Math.sin(i * 37.3 + 1) * 0.5 + 0.5, s3 = Math.sin(i * 13.1 + 2) * 0.5 + 0.5
+    const x = (s1 * w + Math.sin(t * 0.2 + i) * 30) % w
+    const y = ((s2 * h - t * (8 + s3 * 18)) % h + h) % h
+    const r = 1.2 + s3 * 2.4
+    ctx.fillStyle = `rgba(120,200,255,${0.05 + s3 * 0.12})`
+    ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill()
+  }
+  ctx.restore()
+  const g = ctx.createRadialGradient(w / 2, h * 0.45, h * 0.3, w / 2, h * 0.5, h * 0.78)
+  g.addColorStop(0, 'rgba(0,0,0,0)'); g.addColorStop(1, 'rgba(0,0,0,0.55)')
+  ctx.fillStyle = g; ctx.fillRect(0, 0, w, h)
+}

src/video/math.ts

@@ -0,0 +1,37 @@
+export type V3 = [number, number, number]
+
+export const clamp = (x: number, a = 0, b = 1) => Math.min(b, Math.max(a, x))
+export const lerp = (a: number, b: number, t: number) => a + (b - a) * t
+export const smooth = (t: number) => { t = clamp(t); return t * t * (3 - 2 * t) }
+export const smoother = (t: number) => { t = clamp(t); return t * t * t * (t * (t * 6 - 15) + 10) }
+export const easeOut = (t: number) => 1 - Math.pow(1 - clamp(t), 3)
+export const easeIn = (t: number) => Math.pow(clamp(t), 3)
+export const easeInOut = (t: number) => smoother(t)
+export const backOut = (t: number) => { t = clamp(t); const c1 = 1.70158, c3 = c1 + 1; return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2) }
+
+/** 0→1 ramp between a and b */
+export const ramp = (x: number, a: number, b: number) => clamp((x - a) / (b - a))
+/** fade in over [a,a+fi], hold, fade out over [b-fo,b] */
+export const win = (x: number, a: number, b: number, fi = 0.3, fo = 0.3) =>
+  Math.min(smooth(ramp(x, a, a + fi)), 1 - smooth(ramp(x, b - fo, b)))
+
+export const lerpV = (a: V3, b: V3, t: number): V3 => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)]
+export const lerpArr = (a: number[], b: number[], t: number) => a.map((v, i) => lerp(v, b[i], t))
+
+/** Keyframe interpolation for numbers / arrays. keys: [time, value] sorted. */
+export function kf<T extends number | number[]>(x: number, keys: [number, T][], ease: (t: number) => number = smoother): T {
+  if (x <= keys[0][0]) return keys[0][1]
+  for (let i = 0; i < keys.length - 1; i++) {
+    const [t0, v0] = keys[i], [t1, v1] = keys[i + 1]
+    if (x <= t1) {
+      const k = ease((x - t0) / Math.max(1e-6, t1 - t0))
+      if (typeof v0 === 'number') return lerp(v0, v1 as number, k) as T
+      return lerpArr(v0 as number[], v1 as number[], k) as T
+    }
+  }
+  return keys[keys.length - 1][1]
+}
+
+/** deterministic hash noise */
+export const hash = (n: number) => { const s = Math.sin(n * 127.1 + 311.7) * 43758.5453; return s - Math.floor(s) }
+export const noise1 = (x: number) => { const i = Math.floor(x), f = x - i; const u = f * f * (3 - 2 * f); return lerp(hash(i), hash(i + 1), u) * 2 - 1 }

src/video/model.ts

@@ -0,0 +1,826 @@
+import * as THREE from 'three'
+import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js'
+import type { V3 } from './math'
+
+/* ------------------------------------------------------------------ */
+/*  Pose                                                               */
+/* ------------------------------------------------------------------ */
+// [wristFlex, wristDev(+ulnar), pron, spread,
+//  idx mcp,pip,dip, mid.., ring.., little..,
+//  tAbd, tFlex, tOpp, tMcp, tIp]
+export type Pose = number[]
+export const POSE = {
+  rest: [0.05, 0, 0, 0.05, 0.18, 0.22, 0.1, 0.22, 0.28, 0.12, 0.28, 0.32, 0.15, 0.34, 0.36, 0.18, 0.05, 0.1, 0, 0.12, 0.12],
+  open: [-0.1, 0, 0, 0.18, 0.02, 0.04, 0.02, 0.02, 0.04, 0.02, 0.04, 0.05, 0.03, 0.06, 0.06, 0.04, 0.35, -0.05, 0, 0.0, 0.0],
+  fist: [0.05, 0, 0, 0, 1.45, 1.6, 0.9, 1.5, 1.65, 0.9, 1.5, 1.65, 0.9, 1.45, 1.6, 0.9, -0.1, 0.55, 0.3, 0.6, 0.6],
+  // Finkelstein-like: thumb tucked + ulnar deviation (provokes pain)
+  tuck: [0.0, 0.42, 0, 0, 1.25, 1.5, 0.9, 1.35, 1.55, 0.9, 1.35, 1.55, 0.9, 1.3, 1.5, 0.9, -0.1, 0.6, -0.35, 1.1, 0.8],
+  grip: [0.0, 0.05, 0, 0.02, 1.05, 1.15, 0.55, 1.12, 1.2, 0.55, 1.15, 1.2, 0.55, 1.1, 1.15, 0.55, -0.05, 0.5, 0.35, 0.35, 0.35],
+  gripBall: [-0.05, 0.05, 0, 0.12, 0.75, 0.85, 0.45, 0.78, 0.9, 0.45, 0.78, 0.9, 0.45, 0.72, 0.85, 0.45, 0.05, 0.45, 0.35, 0.2, 0.3],
+  pinch: [0.0, 0.12, 0, 0.04, 0.85, 0.95, 0.45, 0.9, 1.0, 0.5, 0.95, 1.05, 0.55, 1.0, 1.1, 0.6, 0.1, 0.4, 0.3, 0.25, 0.15],
+  mouse: [-0.25, 0.1, 0, 0.08, 0.3, 0.35, 0.18, 0.32, 0.38, 0.2, 0.36, 0.42, 0.22, 0.42, 0.45, 0.25, 0.25, 0.2, 0.15, 0.12, 0.1],
+  baby: [-0.2, 0.0, 0, 0.12, 0.35, 0.3, 0.12, 0.38, 0.32, 0.12, 0.42, 0.34, 0.14, 0.45, 0.36, 0.15, 0.62, -0.25, 0.05, -0.05, 0.0],
+  phone: [-0.1, 0.05, 0, 0.0, 0.9, 0.7, 0.3, 0.95, 0.75, 0.3, 1.0, 0.8, 0.35, 1.05, 0.85, 0.4, 0.3, 0.15, 0.2, 0.15, 0.1],
+  cup: [0.0, 0.0, 0, 0.0, 1.3, 0.75, 0.35, 1.35, 0.8, 0.35, 1.38, 0.85, 0.4, 1.4, 0.9, 0.45, 0.05, 0.4, 0.35, 0.25, 0.25],
+} satisfies Record<string, Pose>
+
+/* ------------------------------------------------------------------ */
+/*  Scene state                                                        */
+/* ------------------------------------------------------------------ */
+export interface PropState { vis: number; [k: string]: number }
+export interface SceneState {
+  cam: { pos: V3; target: V3; fov: number; roll?: number; follow?: number }
+  arm: { pos: V3; rot: V3; twist?: { pivot: V3; axis: V3; angle: number } }
+  pose: Pose
+  skin: number          // overall skin visibility 0..1
+  xray: number          // 0 opaque skin → 1 transparent x-ray skin
+  bone: number          // reveal 0..1
+  tendon: number
+  sheath: number
+  thick: number         // sheath thickening 0..1
+  friction: number      // tendon hot-spot 0..1
+  pain: number          // red glow 0..1
+  slide?: number        // extra tendon slide offset
+  focus?: number        // highlight the 1st compartment (dims others)
+  props: Record<string, PropState | undefined>
+  shake?: V3
+  time: number
+}
+
+export const PAIN_LOCAL: V3 = [-0.3, -0.17, 0.06] // in forearm space (1st dorsal compartment)
+
+/* ------------------------------------------------------------------ */
+/*  Shaders                                                            */
+/* ------------------------------------------------------------------ */
+const VS = /* glsl */ `
+varying vec3 vN; varying vec3 vV; varying vec3 vW; varying vec2 vUv;
+void main(){
+  vec4 w = modelMatrix * vec4(position,1.0); vW = w.xyz;
+  vec4 mv = viewMatrix * w; vV = mv.xyz;
+  vN = normalize(normalMatrix * normal); vUv = uv;
+  gl_Position = projectionMatrix * mv;
+}`
+const LIGHT = /* glsl */ `
+vec3 shade(vec3 base, vec3 N, vec3 V, float shin, float specAmt, float wrapAmt){
+  vec3 L1 = normalize(vec3(0.45,0.75,0.55));
+  vec3 L2 = normalize(vec3(-0.75,0.15,0.35));
+  vec3 L3 = normalize(vec3(0.15,-0.5,-0.85));
+  float d1 = max((dot(N,L1)+wrapAmt)/(1.0+wrapAmt),0.0);
+  float d2 = max(dot(N,L2),0.0);
+  float d3 = max(dot(N,L3),0.0);
+  vec3 c = base*(0.2 + 0.82*d1) + base*d2*0.28*vec3(0.75,0.88,1.0);
+  float s = pow(max(dot(N,normalize(L1+V)),0.0),shin)*specAmt;
+  float fr = pow(1.0-max(dot(N,V),0.0),3.0);
+  c += vec3(s) + fr*vec3(0.35,0.62,1.0)*0.32 + d3*0.12*vec3(0.4,0.65,1.0);
+  return c;
+}
+uniform vec3 uRC; uniform float uRR;
+float reveal(){ float d = distance(vW,uRC); if(d>uRR) discard; return 1.0-smoothstep(0.0,0.07,uRR-d); }
+`
+
+function revealUniforms() {
+  return { uRC: { value: new THREE.Vector3() }, uRR: { value: 100 } }
+}
+
+function makeOrganic(color: string, shin = 30, spec = 0.25, wrap = 0.3) {
+  return new THREE.ShaderMaterial({
+    uniforms: { uColor: { value: new THREE.Color(color) }, uAlpha: { value: 1 }, uDim: { value: 0 }, ...revealUniforms() },
+    vertexShader: VS,
+    fragmentShader: /* glsl */ `
+      varying vec3 vN; varying vec3 vV; varying vec3 vW; varying vec2 vUv;
+      uniform vec3 uColor; uniform float uAlpha; uniform float uDim;
+      ${LIGHT}
+      void main(){
+        float e = reveal();
+        vec3 N = normalize(vN); if(!gl_FrontFacing) N = -N; vec3 V = normalize(-vV);
+        vec3 c = shade(uColor, N, V, ${shin.toFixed(1)}, ${spec.toFixed(3)}, ${wrap.toFixed(2)});
+        c = mix(c, c*0.35 + vec3(0.02,0.05,0.1), uDim);
+        c += vec3(0.3,0.9,1.0)*e*1.6;
+        gl_FragColor = vec4(c, uAlpha);
+      }`,
+    transparent: false,
+  })
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tube builder (dynamic)                                             */
+/* ------------------------------------------------------------------ */
+class DynTube {
+  geo = new THREE.BufferGeometry()
+  pos: Float32Array; nor: Float32Array; uv: Float32Array
+  curve = new THREE.CatmullRomCurve3([new THREE.Vector3(), new THREE.Vector3(0, 1, 0)], false, 'centripetal')
+  constructor(public segs: number, public radial: number) {
+    const n = (segs + 1) * (radial + 1)
+    this.pos = new Float32Array(n * 3); this.nor = new Float32Array(n * 3); this.uv = new Float32Array(n * 2)
+    const idx: number[] = []
+    for (let i = 0; i < segs; i++) for (let j = 0; j < radial; j++) {
+      const a = i * (radial + 1) + j, b = (i + 1) * (radial + 1) + j
+      idx.push(a, b, a + 1, b, b + 1, a + 1)
+    }
+    this.geo.setIndex(idx)
+    this.geo.setAttribute('position', new THREE.BufferAttribute(this.pos, 3))
+    this.geo.setAttribute('normal', new THREE.BufferAttribute(this.nor, 3))
+    this.geo.setAttribute('uv', new THREE.BufferAttribute(this.uv, 2))
+  }
+  update(points: THREE.Vector3[], radius: (u: number) => number) {
+    this.curve.points = points
+    const { segs, radial } = this
+    const frames = this.curve.computeFrenetFrames(segs, false)
+    const len = this.curve.getLength()
+    const p = new THREE.Vector3(), n = new THREE.Vector3()
+    for (let i = 0; i <= segs; i++) {
+      const u = i / segs
+      this.curve.getPointAt(u, p)
+      const N = frames.normals[i], B = frames.binormals[i]
+      const r = radius(u)
+      for (let j = 0; j <= radial; j++) {
+        const v = (j / radial) * Math.PI * 2
+        const s = Math.sin(v), c = -Math.cos(v)
+        n.set(c * N.x + s * B.x, c * N.y + s * B.y, c * N.z + s * B.z).normalize()
+        const k = i * (radial + 1) + j
+        this.pos[k * 3] = p.x + r * n.x; this.pos[k * 3 + 1] = p.y + r * n.y; this.pos[k * 3 + 2] = p.z + r * n.z
+        this.nor[k * 3] = n.x; this.nor[k * 3 + 1] = n.y; this.nor[k * 3 + 2] = n.z
+        this.uv[k * 2] = u * len; this.uv[k * 2 + 1] = j / radial
+      }
+    }
+    this.geo.attributes.position.needsUpdate = true
+    this.geo.attributes.normal.needsUpdate = true
+    this.geo.attributes.uv.needsUpdate = true
+    this.geo.computeBoundingSphere()
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Hand model                                                         */
+/* ------------------------------------------------------------------ */
+const FINGERS = [
+  { base: [-0.165, 0.27, 0.02], head: [-0.27, 0.97, 0.035], len: [0.42, 0.25, 0.2], r: 0.086, splay: -0.09 },
+  { base: [-0.055, 0.27, 0.025], head: [-0.09, 1.0, 0.04], len: [0.47, 0.29, 0.21], r: 0.09, splay: -0.02 },
+  { base: [0.06, 0.27, 0.02], head: [0.09, 0.96, 0.035], len: [0.44, 0.27, 0.2], r: 0.085, splay: 0.05 },
+  { base: [0.165, 0.26, 0.01], head: [0.255, 0.88, 0.02], len: [0.34, 0.21, 0.18], r: 0.075, splay: 0.13 },
+] as const
+
+export class HandModel {
+  scene = new THREE.Scene()
+  armRoot = new THREE.Group()
+  forearm = new THREE.Group()
+  wrist = new THREE.Group()
+  fingerJoints: THREE.Group[][] = []
+  thumbJoints: THREE.Group[] = []
+  thumbBase = new THREE.Quaternion()
+  skinMat: THREE.ShaderMaterial
+  skinDepth: THREE.MeshBasicMaterial
+  boneMat = makeOrganic('#efe5cf', 24, 0.22, 0.35)
+  cartMat = makeOrganic('#cfe3f0', 40, 0.35, 0.3)
+  muscleMat = makeOrganic('#b8463f', 20, 0.18, 0.4)
+  tendonMat: THREE.ShaderMaterial
+  extTendonMat: THREE.ShaderMaterial
+  sheathMat: THREE.ShaderMaterial
+  tendons: { tube: DynTube; mesh: THREE.Mesh; kind: 'apl' | 'epb' | 'ext' | 'epl'; idx?: number }[] = []
+  sheathTube = new DynTube(60, 28)
+  sheathMesh!: THREE.Mesh
+  painCore: THREE.Sprite
+  painHalo: THREE.Sprite
+  locator: THREE.Sprite
+  props: Record<string, THREE.Object3D> = {}
+  anchors: Record<string, THREE.Vector3> = {}
+  envTex: THREE.Texture | null = null
+  private boneMats: THREE.ShaderMaterial[] = []
+
+  constructor(renderer: THREE.WebGLRenderer) {
+    const pm = new THREE.PMREMGenerator(renderer)
+    this.envTex = pm.fromScene(new RoomEnvironment(), 0.04).texture
+    this.scene.environment = this.envTex
+    const dl = new THREE.DirectionalLight('#ffffff', 1.6); dl.position.set(2, 4, 3); this.scene.add(dl)
+    const fl = new THREE.DirectionalLight('#8fc6ff', 0.6); fl.position.set(-3, 1, 2); this.scene.add(fl)
+    this.scene.add(new THREE.AmbientLight('#6688aa', 0.35))
+
+    /* --- skin material (custom subsurface-ish + x-ray) --- */
+    this.skinMat = new THREE.ShaderMaterial({
+      uniforms: { uColor: { value: new THREE.Color('#e2a284') }, uOpacity: { value: 1 }, uXray: { value: 0 }, uPainPos: { value: new THREE.Vector3() }, uPain: { value: 0 }, uTime: { value: 0 } },
+      vertexShader: VS,
+      fragmentShader: /* glsl */ `
+        varying vec3 vN; varying vec3 vV; varying vec3 vW; varying vec2 vUv;
+        uniform vec3 uColor; uniform float uOpacity; uniform float uXray; uniform vec3 uPainPos; uniform float uPain; uniform float uTime;
+        uniform vec3 uRC; uniform float uRR;
+        void main(){
+          vec3 N = normalize(vN); vec3 V = normalize(-vV);
+          vec3 L1 = normalize(vec3(0.45,0.75,0.55)); vec3 L2 = normalize(vec3(-0.75,0.15,0.35));
+          float ndl = dot(N,L1);
+          float wrap = clamp((ndl+0.45)/1.45,0.0,1.0);
+          float term = smoothstep(0.0,0.45,wrap) - smoothstep(0.35,0.9,wrap);
+          vec3 c = uColor*(0.24 + 0.78*wrap) + uColor*max(dot(N,L2),0.0)*0.22*vec3(0.8,0.9,1.0);
+          c += vec3(0.55,0.08,0.04)*term*0.35;                       // subsurface red terminator
+          float fr = pow(1.0-max(dot(N,V),0.0),2.6);
+          c += vec3(1.0,0.82,0.72)*fr*0.18;
+          c += vec3(pow(max(dot(N,normalize(L1+V)),0.0),36.0)*0.16);
+          // pain glow on skin
+          float pd = distance(vW,uPainPos);
+          float pg = uPain*exp(-pd*pd/0.022)*(0.75+0.25*sin(uTime*7.0));
+          c = mix(c, vec3(1.0,0.12,0.08), clamp(pg*0.75,0.0,0.8)); c += vec3(0.6,0.05,0.02)*pg*0.6;
+          // x-ray
+          vec3 xc = vec3(0.42,0.82,1.0)*(0.1+fr*1.25) + vec3(1.0,0.15,0.1)*pg*0.6;
+          c = mix(c, xc, uXray);
+          float a = mix(1.0, 0.05 + fr*0.55 + pg*0.25, uXray) * uOpacity;
+          gl_FragColor = vec4(c, a);
+        }`,
+      transparent: true, depthWrite: false, depthFunc: THREE.LessEqualDepth,
+    })
+    this.skinDepth = new THREE.MeshBasicMaterial({ colorWrite: false, transparent: true })
+
+    /* --- tendon materials --- */
+    const tendonFrag = (base: string) => /* glsl */ `
+      varying vec3 vN; varying vec3 vV; varying vec3 vW; varying vec2 vUv;
+      uniform float uSlide; uniform vec3 uHotPos; uniform float uHot; uniform float uDim; uniform float uTime; uniform float uAlpha;
+      ${LIGHT}
+      void main(){
+        float e = reveal();
+        vec3 N = normalize(vN); vec3 V = normalize(-vV);
+        float x = vUv.x - uSlide;
+        float fib = 0.9 + 0.1*sin(vUv.y*6.2832*7.0 + sin(vUv.x*40.0)*0.6);
+        float band = smoothstep(0.35,0.5,abs(fract(x*7.0)-0.5));
+        vec3 base = ${base} * fib * (1.0 - band*0.16);
+        vec3 c = shade(base, N, V, 48.0, 0.45, 0.35);
+        float d = distance(vW,uHotPos);
+        float h = uHot*exp(-d*d/0.012);
+        vec3 hot = mix(vec3(1.0,0.82,0.15), vec3(1.0,0.12,0.06), smoothstep(0.35,0.85,uHot));
+        c = mix(c, hot*(0.8+0.25*sin(uTime*9.0)), clamp(h*1.1,0.0,0.92));
+        c += hot*h*0.35;
+        c = mix(c, c*0.3+vec3(0.02,0.05,0.1), uDim);
+        c += vec3(0.3,0.9,1.0)*e*1.6;
+        gl_FragColor = vec4(c, uAlpha);
+      }`
+    const tUniforms = () => ({ uSlide: { value: 0 }, uHotPos: { value: new THREE.Vector3() }, uHot: { value: 0 }, uDim: { value: 0 }, uTime: { value: 0 }, uAlpha: { value: 1 }, ...revealUniforms() })
+    this.tendonMat = new THREE.ShaderMaterial({ uniforms: tUniforms(), vertexShader: VS, fragmentShader: tendonFrag('vec3(0.96,0.93,0.86)') })
+    this.extTendonMat = new THREE.ShaderMaterial({ uniforms: tUniforms(), vertexShader: VS, fragmentShader: tendonFrag('vec3(0.9,0.88,0.84)') })
+
+    this.sheathMat = new THREE.ShaderMaterial({
+      uniforms: { uThick: { value: 0 }, uAlpha: { value: 1 }, uTime: { value: 0 }, ...revealUniforms() },
+      vertexShader: VS,
+      fragmentShader: /* glsl */ `
+        varying vec3 vN; varying vec3 vV; varying vec3 vW; varying vec2 vUv;
+        uniform float uThick; uniform float uAlpha; uniform float uTime;
+        ${LIGHT}
+        void main(){
+          float e = reveal();
+          vec3 N = normalize(vN); vec3 V = normalize(-vV);
+          vec3 base = mix(vec3(0.55,0.78,1.0), vec3(1.0,0.36,0.3), uThick);
+          vec3 c = shade(base, N, V, 30.0, 0.35, 0.4);
+          float fr = pow(1.0-max(dot(N,V),0.0),2.0);
+          float ring = 0.5+0.5*sin(vUv.x*95.0);
+          c += base*fr*0.9 + ring*0.06;
+          c += vec3(1.0,0.2,0.1)*uThick*(0.25+0.2*sin(uTime*6.0))*fr;
+          c += vec3(0.3,0.9,1.0)*e*1.6;
+          gl_FragColor = vec4(c, (0.28 + fr*0.5 + ring*0.05 + uThick*0.15)*uAlpha);
+        }`,
+      transparent: true, depthWrite: false, side: THREE.DoubleSide,
+    })
+
+    this.boneMats = [this.boneMat, this.cartMat]
+    this.build()
+
+    /* --- pain sprites --- */
+    const glowTex = (inner: string, outer: string) => {
+      const c = document.createElement('canvas'); c.width = c.height = 128
+      const g = c.getContext('2d')!; const gr = g.createRadialGradient(64, 64, 0, 64, 64, 64)
+      gr.addColorStop(0, inner); gr.addColorStop(0.35, outer); gr.addColorStop(1, 'rgba(0,0,0,0)')
+      g.fillStyle = gr; g.fillRect(0, 0, 128, 128)
+      const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; return t
+    }
+    const mk = (tex: THREE.Texture) => {
+      const s = new THREE.Sprite(new THREE.SpriteMaterial({ map: tex, blending: THREE.AdditiveBlending, depthTest: false, depthWrite: false, transparent: true }))
+      s.renderOrder = 40; return s
+    }
+    this.painCore = mk(glowTex('rgba(255,235,220,1)', 'rgba(255,40,30,0.85)'))
+    this.painHalo = mk(glowTex('rgba(255,60,40,0.9)', 'rgba(255,20,20,0.35)'))
+    this.locator = mk(glowTex('rgba(255,255,255,1)', 'rgba(200,240,255,0.6)'))
+    this.forearm.add(this.painCore, this.painHalo, this.locator)
+    this.painCore.position.set(...PAIN_LOCAL); this.painHalo.position.set(...PAIN_LOCAL); this.locator.position.set(...PAIN_LOCAL)
+  }
+
+  /* ---------------- construction ---------------- */
+  private skinPart(parent: THREE.Object3D, geo: THREE.BufferGeometry, pos: V3, scale: V3 = [1, 1, 1], rot: V3 = [0, 0, 0]) {
+    const a = new THREE.Mesh(geo, this.skinDepth); const b = new THREE.Mesh(geo, this.skinMat)
+    for (const m of [a, b]) { m.position.set(...pos); m.scale.set(...scale); m.rotation.set(...rot); parent.add(m) }
+    a.renderOrder = 10; b.renderOrder = 11
+    return b
+  }
+  private bonePart(parent: THREE.Object3D, geo: THREE.BufferGeometry, pos: V3, scale: V3 = [1, 1, 1], rot: V3 = [0, 0, 0], mat = this.boneMat) {
+    const m = new THREE.Mesh(geo, mat); m.position.set(...pos); m.scale.set(...scale); m.rotation.set(...rot); parent.add(m); return m
+  }
+  private boneBetween(parent: THREE.Object3D, a: THREE.Vector3, b: THREE.Vector3, r: number) {
+    const L = a.distanceTo(b)
+    const g = new THREE.CapsuleGeometry(r, Math.max(0.001, L - r * 2), 6, 14)
+    const m = new THREE.Mesh(g, this.boneMat)
+    m.position.copy(a).add(b).multiplyScalar(0.5)
+    m.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), b.clone().sub(a).normalize())
+    parent.add(m)
+    // condyles
+    const s = new THREE.SphereGeometry(r * 1.45, 16, 12)
+    const h = new THREE.Mesh(s, this.boneMat); h.position.copy(b); h.scale.set(1, 0.8, 0.9); parent.add(h)
+    const t = new THREE.Mesh(s, this.boneMat); t.position.copy(a); t.scale.set(1.05, 0.75, 0.9); parent.add(t)
+    return m
+  }
+
+  private build() {
+    const S = this.scene
+    S.add(this.armRoot); this.armRoot.add(this.forearm); this.forearm.add(this.wrist)
+    const sph = new THREE.SphereGeometry(1, 48, 32)
+
+    /* forearm skin */
+    const fa = new THREE.CylinderGeometry(0.315, 0.42, 3.2, 48, 12, true)
+    this.skinPart(this.forearm, fa, [0, -1.6, 0], [1.24, 1, 0.74])
+    this.skinPart(this.forearm, sph, [0, 0.0, 0], [0.39, 0.24, 0.233])
+
+    /* forearm bones */
+    const v = (x: number, y: number, z: number) => new THREE.Vector3(x, y, z)
+    this.boneBetween(this.forearm, v(-0.13, -3.1, 0), v(-0.16, -0.22, 0.0), 0.055)
+    this.bonePart(this.forearm, sph, [-0.14, -0.13, 0.0], [0.15, 0.1, 0.105])
+    this.bonePart(this.forearm, sph, [-0.255, -0.075, 0.0], [0.055, 0.075, 0.06])   // radial styloid
+    this.bonePart(this.forearm, sph, [-0.1, -0.15, 0.09], [0.035, 0.05, 0.03])      // Lister tubercle
+    this.boneBetween(this.forearm, v(0.17, -3.1, -0.02), v(0.19, -0.2, -0.01), 0.048)
+    this.bonePart(this.forearm, sph, [0.19, -0.12, -0.01], [0.075, 0.075, 0.075])
+    this.bonePart(this.forearm, sph, [0.25, -0.07, -0.03], [0.035, 0.05, 0.035])     // ulnar styloid
+
+    /* forearm muscles (deep, dim) */
+    const mus = new THREE.Mesh(sph, this.muscleMat)
+    mus.position.set(-0.12, -1.6, 0.13); mus.scale.set(0.11, 0.75, 0.07); this.forearm.add(mus)
+    const mus2 = mus.clone(); mus2.position.set(0.05, -1.75, 0.15); mus2.scale.set(0.12, 0.8, 0.07); this.forearm.add(mus2)
+    this.props.muscles = new THREE.Group(); this.props.muscles.add(mus, mus2); this.forearm.add(this.props.muscles)
+
+    /* wrist / palm */
+    const W = this.wrist
+    // carpals
+    const carp: V3[] = [[-0.2, 0.07, 0.0], [-0.07, 0.075, 0.01], [0.06, 0.07, 0.0], [0.17, 0.065, -0.01], [-0.2, 0.2, 0.02], [-0.075, 0.205, 0.02], [0.05, 0.205, 0.02], [0.165, 0.195, 0.01]]
+    carp.forEach((p, i) => this.bonePart(W, sph, p, [0.065 + (i % 3) * 0.006, 0.062, 0.07]))
+    // palm skin
+    this.skinPart(W, sph, [0.0, 0.57, 0.0], [0.455, 0.52, 0.165])
+    this.skinPart(W, sph, [0.0, 0.17, -0.005], [0.37, 0.28, 0.19])
+    this.skinPart(W, sph, [0.19, 0.5, -0.03], [0.2, 0.42, 0.16])   // hypothenar
+    // metacarpals + fingers
+    FINGERS.forEach((f, i) => {
+      const a = v(...(f.base as unknown as V3)), b = v(...(f.head as unknown as V3))
+      this.boneBetween(W, a, b, 0.032)
+      const mcp = new THREE.Group(); mcp.position.copy(b)
+      const dir = b.clone().sub(a).normalize()
+      mcp.userData.base = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir)
+      W.add(mcp)
+      const joints = [mcp]
+      let parent: THREE.Group = mcp
+      f.len.forEach((L, k) => {
+        const r = f.r * (1 - k * 0.09)
+        const seg = new THREE.Group(); parent.add(seg)
+        const start = k === 0 ? -0.06 : 0
+        // skin capsule
+        this.skinPart(seg, new THREE.CapsuleGeometry(r, L - start, 10, 24), [0, (L + start) / 2, 0], [1, 1, 0.88])
+        // bone
+        this.boneBetween(seg, v(0, 0.035, 0), v(0, L - 0.03, 0), r * 0.36)
+        if (k === 2) {
+          // nail
+          const nail = new THREE.Mesh(sph, new THREE.MeshPhysicalMaterial({ color: '#f2c1b0', roughness: 0.25, clearcoat: 1, transparent: true }))
+          nail.position.set(0, L * 0.62, r * 0.66); nail.scale.set(r * 0.72, L * 0.36, r * 0.26)
+          nail.renderOrder = 12; seg.add(nail); nail.userData.nail = true
+        }
+        if (k < 2) { const j = new THREE.Group(); j.position.set(0, L, 0); seg.add(j); joints.push(j); parent = j }
+      })
+      this.fingerJoints.push(joints)
+    })
+
+    /* thumb */
+    const cmc = new THREE.Group(); cmc.position.set(-0.235, 0.2, 0.04); W.add(cmc)
+    const y = new THREE.Vector3(-0.44, 0.84, -0.32).normalize()
+    let z = new THREE.Vector3(-0.9, 0.0, 0.42); z.sub(y.clone().multiplyScalar(z.dot(y))).normalize()
+    const x = new THREE.Vector3().crossVectors(y, z)
+    this.thumbBase.setFromRotationMatrix(new THREE.Matrix4().makeBasis(x, y, z))
+    const tl = [0.46, 0.33, 0.27], tr = [0.122, 0.104, 0.095]
+    this.thumbJoints.push(cmc)
+    let tp: THREE.Group = cmc
+    tl.forEach((L, k) => {
+      const seg = new THREE.Group(); tp.add(seg)
+      if (k === 0) {
+        this.skinPart(seg, new THREE.CapsuleGeometry(tr[0], L * 0.75, 10, 24), [0.02, L * 0.5, -0.02], [1.15, 1, 0.95])
+        this.skinPart(seg, sph, [0.11, 0.22, -0.06], [0.15, 0.27, 0.12]) // thenar
+      } else {
+        this.skinPart(seg, new THREE.CapsuleGeometry(tr[k], L, 10, 24), [0, L / 2, 0], [1, 1, 0.9])
+      }
+      this.boneBetween(seg, v(0, 0.04, 0), v(0, L - 0.03, 0), k === 0 ? 0.036 : tr[k] * 0.36)
+      if (k === 2) {
+        const nail = new THREE.Mesh(sph, new THREE.MeshPhysicalMaterial({ color: '#f2c1b0', roughness: 0.25, clearcoat: 1, transparent: true }))
+        nail.position.set(0, L * 0.6, tr[k] * 0.7); nail.scale.set(tr[k] * 0.75, L * 0.38, tr[k] * 0.26); nail.renderOrder = 12; nail.userData.nail = true; seg.add(nail)
+      }
+      if (k < 2) { const j = new THREE.Group(); j.position.set(0, L, 0); seg.add(j); this.thumbJoints.push(j); tp = j }
+    })
+
+    /* tendons */
+    const addT = (kind: 'apl' | 'epb' | 'ext' | 'epl', idx?: number) => {
+      const tube = new DynTube(kind === 'ext' ? 70 : 110, 12)
+      const mesh = new THREE.Mesh(tube.geo, kind === 'apl' || kind === 'epb' ? this.tendonMat : this.extTendonMat)
+      mesh.frustumCulled = false
+      S.add(mesh); this.tendons.push({ tube, mesh, kind, idx })
+    }
+    addT('apl'); addT('epb'); addT('epl'); for (let i = 0; i < 4; i++) addT('ext', i)
+    this.sheathMesh = new THREE.Mesh(this.sheathTube.geo, this.sheathMat)
+    this.sheathMesh.renderOrder = 5; this.sheathMesh.frustumCulled = false
+    S.add(this.sheathMesh)
+
+    this.buildProps(sph)
+  }
+
+  /* ---------------- props ---------------- */
+  private buildProps(sph: THREE.SphereGeometry) {
+    const std = (color: string, o: Partial<THREE.MeshPhysicalMaterialParameters> = {}) => new THREE.MeshPhysicalMaterial({ color, roughness: 0.45, metalness: 0, ...o })
+    const add = (name: string, obj: THREE.Object3D, parent: THREE.Object3D) => { obj.visible = false; parent.add(obj); this.props[name] = obj; return obj }
+
+    // ball (soft grip ball) – palm
+    const ball = new THREE.Mesh(sph, std('#3fb6a8', { roughness: 0.6, sheen: 1, sheenColor: new THREE.Color('#9ff') }))
+    ball.scale.setScalar(0.33); ball.position.set(-0.02, 0.7, -0.5)
+    add('ball', ball, this.wrist)
+
+    // coin / bead for pinch
+    const bead = new THREE.Mesh(new THREE.CylinderGeometry(0.08, 0.08, 0.025, 32), std('#d9b44a', { metalness: 0.9, roughness: 0.25 }))
+    add('bead', bead, this.wrist)
+
+    // bottle + cap (cap in hand space)
+    const bottle = new THREE.Group()
+    const body = new THREE.Mesh(new THREE.CylinderGeometry(0.34, 0.36, 1.6, 48), std('#7fc8ff', { transmission: 0.6, roughness: 0.15, thickness: 0.3, transparent: true, opacity: 0.85 }))
+    body.position.y = -0.95
+    const label = new THREE.Mesh(new THREE.CylinderGeometry(0.352, 0.362, 0.5, 48, 1, true), std('#1f6fd1'))
+    label.position.y = -1.0
+    const neck = new THREE.Mesh(new THREE.CylinderGeometry(0.17, 0.33, 0.25, 40), body.material); neck.position.y = -0.05
+    const cap = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.2, 0.18, 40), std('#f4f4f4', { roughness: 0.35 }))
+    cap.position.y = 0.12
+    const ribs = new THREE.Group(); for (let i = 0; i < 24; i++) { const r = new THREE.Mesh(new THREE.BoxGeometry(0.02, 0.16, 0.02), std('#ddd')); const a = i / 24 * Math.PI * 2; r.position.set(Math.cos(a) * 0.205, 0.12, Math.sin(a) * 0.205); r.rotation.y = -a; ribs.add(r) }
+    bottle.add(body, label, neck, cap, ribs)
+    const bottleWrap = new THREE.Group(); bottleWrap.add(bottle)
+    bottleWrap.position.set(-0.02, 0.6, -0.3); bottleWrap.rotation.x = Math.PI / 2 // axis along -Z (palmar)
+    bottle.rotation.y = 0
+    add('bottle', bottleWrap, this.wrist); bottleWrap.userData.inner = bottle
+
+    // keyboard & mouse (hand space; palm-down usage)
+    const kb = new THREE.Group()
+    const deck = new THREE.Mesh(new THREE.BoxGeometry(2.6, 0.06, 1.0), std('#2a3240', { roughness: 0.5 }))
+    kb.add(deck)
+    for (let r = 0; r < 4; r++) for (let c = 0; c < 13; c++) {
+      const k = new THREE.Mesh(new THREE.BoxGeometry(0.16, 0.05, 0.16), std('#d9dee6', { roughness: 0.6 }))
+      k.position.set(-1.15 + c * 0.19 + (r % 2) * 0.05, 0.05, -0.33 + r * 0.21); kb.add(k)
+    }
+    const mouse = new THREE.Mesh(sph, std('#e8ecf2', { roughness: 0.3, clearcoat: 0.6 }))
+    mouse.scale.set(0.28, 0.13, 0.42); mouse.position.set(1.75, 0.08, 0.15)
+    const desk = new THREE.Mesh(new THREE.BoxGeometry(6, 0.05, 3), std('#5b4a3c', { roughness: 0.8 })); desk.position.y = -0.06
+    kb.add(mouse, desk)
+    add('keyboard', kb, this.armRoot)
+
+    // hammer (tool) – handle across palm (hand-space X axis)
+    const ham = new THREE.Group()
+    const handle = new THREE.Mesh(new THREE.CylinderGeometry(0.115, 0.13, 1.7, 32), std('#d0763a', { roughness: 0.5 }))
+    handle.rotation.z = Math.PI / 2
+    const grip = new THREE.Mesh(new THREE.CylinderGeometry(0.135, 0.14, 0.75, 32), std('#22262c', { roughness: 0.9 }))
+    grip.rotation.z = Math.PI / 2; grip.position.x = 0.05
+    const head = new THREE.Mesh(new THREE.BoxGeometry(0.28, 0.9, 0.28), std('#9aa4b0', { metalness: 0.9, roughness: 0.3 }))
+    head.position.x = -0.9
+    ham.add(handle, grip, head)
+    ham.position.set(0.02, 0.85, -0.37)
+    add('hammer', ham, this.wrist)
+
+    // towel (wringing) – twisted cloth across grip
+    const towelGeo = new THREE.CylinderGeometry(0.16, 0.16, 3.2, 24, 60, true)
+    const pos = towelGeo.attributes.position as THREE.BufferAttribute
+    for (let i = 0; i < pos.count; i++) {
+      const px = pos.getX(i), py = pos.getY(i), pz = pos.getZ(i)
+      const a = py * 4.0, bulge = 1 + 0.25 * Math.sin(Math.atan2(pz, px) * 3 + a)
+      pos.setXYZ(i, (px * Math.cos(a) - pz * Math.sin(a)) * bulge, py, (px * Math.sin(a) + pz * Math.cos(a)) * bulge * 0.8)
+    }
+    towelGeo.computeVertexNormals()
+    const towel = new THREE.Mesh(towelGeo, std('#f0c6d6', { roughness: 0.95, sheen: 1, sheenColor: new THREE.Color('#fff'), side: THREE.DoubleSide }))
+    towel.rotation.z = Math.PI / 2; towel.position.set(0.3, 0.85, -0.37)
+    add('towel', towel, this.wrist)
+
+    // baby (swaddled bundle) – supported on palm with thumb abducted
+    const baby = new THREE.Group()
+    const wrap = new THREE.Mesh(new THREE.CapsuleGeometry(0.62, 1.3, 12, 32), std('#bfe0ff', { roughness: 0.9, sheen: 1, sheenColor: new THREE.Color('#fff') }))
+    wrap.rotation.z = Math.PI / 2.2
+    const bhead = new THREE.Mesh(sph, std('#f1c4a6', { roughness: 0.6, sheen: 0.5 })); bhead.scale.setScalar(0.5); bhead.position.set(-1.25, 0.55, 0.05)
+    const hat = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2), std('#ffd27f', { roughness: 0.9 })); hat.scale.setScalar(0.53); hat.position.set(-1.3, 0.62, 0.05); hat.rotation.z = 0.7
+    const fold = new THREE.Mesh(new THREE.TorusGeometry(0.55, 0.08, 12, 40), std('#9cc9f5', { roughness: 0.9 })); fold.position.set(-0.75, 0.32, 0.0); fold.rotation.y = Math.PI / 2; fold.rotation.x = 0.4
+    baby.add(wrap, bhead, hat, fold)
+    baby.position.set(0.5, 0.75, -0.95); baby.rotation.set(0.1, 0.3, 0.2)
+    add('baby', baby, this.wrist)
+
+    // cup
+    const cup = new THREE.Group()
+    const cb = new THREE.Mesh(new THREE.CylinderGeometry(0.33, 0.28, 0.85, 40, 1, false), std('#ffffff', { roughness: 0.2, clearcoat: 1 }))
+    const coffee = new THREE.Mesh(new THREE.CircleGeometry(0.31, 40), std('#6b3f22')); coffee.rotation.x = -Math.PI / 2; coffee.position.y = 0.36
+    const hd = new THREE.Mesh(new THREE.TorusGeometry(0.17, 0.045, 12, 30, Math.PI * 1.2), std('#ffffff', { clearcoat: 1 })); hd.position.set(0.38, 0, 0); hd.rotation.z = -Math.PI * 0.6
+    const band = new THREE.Mesh(new THREE.CylinderGeometry(0.335, 0.32, 0.12, 40, 1, true), std('#2bb3a3')); band.position.y = 0.1
+    cup.add(cb, coffee, hd, band)
+    cup.position.set(0.0, 0.74, -0.44); cup.rotation.set(0, 0, Math.PI / 2); cup.scale.setScalar(0.8)
+    add('cup', cup, this.wrist)
+
+    // phone
+    const phone = new THREE.Group()
+    const pb = new THREE.Mesh(new THREE.BoxGeometry(0.72, 1.48, 0.07), std('#1b1f27', { metalness: 0.6, roughness: 0.3 }))
+    const scr = new THREE.Mesh(new THREE.PlaneGeometry(0.66, 1.4), new THREE.MeshBasicMaterial({ color: '#3a8bff' }))
+    scr.position.z = 0.037
+    const sc2 = new THREE.Mesh(new THREE.PlaneGeometry(0.56, 0.3), new THREE.MeshBasicMaterial({ color: '#bfe3ff' })); sc2.position.set(0, 0.35, 0.038)
+    const sc3 = new THREE.Mesh(new THREE.PlaneGeometry(0.56, 0.5), new THREE.MeshBasicMaterial({ color: '#7fb8ff' })); sc3.position.set(0, -0.15, 0.038)
+    phone.add(pb, scr, sc2, sc3)
+    phone.position.set(0.05, 0.85, -0.42); phone.rotation.set(-0.35, 0.0, 0.15)
+    add('phone', phone, this.wrist)
+
+    // thumb spica splint
+    const spl = new THREE.Group()
+    const splMat = std('#5aa9e6', { roughness: 0.7, transparent: true, opacity: 0.88, sheen: 1, sheenColor: new THREE.Color('#cde') })
+    const sleeve = new THREE.Mesh(new THREE.CylinderGeometry(0.43, 0.47, 1.25, 40, 1, true), splMat); sleeve.position.set(0, -0.55, 0); sleeve.scale.set(1.1, 1, 0.72)
+    const strap1 = new THREE.Mesh(new THREE.CylinderGeometry(0.445, 0.46, 0.12, 40, 1, true), std('#e9eef5')); strap1.position.set(0, -0.85, 0); strap1.scale.set(1.12, 1, 0.74)
+    const strap2 = strap1.clone(); strap2.position.y = -0.35
+    spl.add(sleeve, strap1, strap2)
+    add('splint', spl, this.forearm)
+    const splThumb = new THREE.Mesh(new THREE.CylinderGeometry(0.145, 0.175, 0.62, 32, 1, true), splMat); splThumb.position.set(0.02, 0.28, -0.01)
+    add('splintThumb', splThumb, this.thumbJoints[0])
+    const splPalm = new THREE.Mesh(sph, splMat); splPalm.scale.set(0.48, 0.3, 0.2); splPalm.position.set(0, 0.25, 0)
+    add('splintPalm', splPalm, this.wrist)
+
+    // needle-knife (original design): handle + guard + shaft + flat micro blade. Tip at origin, body along +Y
+    const knife = new THREE.Group()
+    const steel = std('#d8dee6', { metalness: 1, roughness: 0.18 })
+    const shaft = new THREE.Mesh(new THREE.CylinderGeometry(0.008, 0.008, 0.62, 12), steel); shaft.position.y = 0.33
+    const blade = new THREE.Mesh(new THREE.BoxGeometry(0.03, 0.04, 0.004), steel); blade.position.y = 0.02
+    const neck2 = new THREE.Mesh(new THREE.CylinderGeometry(0.02, 0.008, 0.06, 16), steel); neck2.position.y = 0.66
+    const hand = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.045, 0.5, 6), std('#e8f3f7', { roughness: 0.35 })); hand.position.y = 0.94
+    const grip2 = new THREE.Group(); for (let i = 0; i < 6; i++) { const r = new THREE.Mesh(new THREE.TorusGeometry(0.05, 0.007, 8, 24), std('#21b3a5')); r.rotation.x = Math.PI / 2; r.position.y = 0.8 + i * 0.045; grip2.add(r) }
+    const capk = new THREE.Mesh(new THREE.SphereGeometry(0.05, 16, 10, 0, Math.PI * 2, 0, Math.PI / 2), std('#21b3a5')); capk.position.y = 1.19
+    const fin = new THREE.Mesh(new THREE.BoxGeometry(0.16, 0.08, 0.012), std('#21b3a5')); fin.position.y = 0.72 // orientation marker parallel to blade
+    knife.add(shaft, blade, neck2, hand, grip2, capk, fin)
+    add('knife', knife, this.forearm)
+
+    // syringe (generic, unbranded)
+    const syr = new THREE.Group()
+    const barrel = new THREE.Mesh(new THREE.CylinderGeometry(0.06, 0.06, 0.55, 24, 1, true), std('#ffffff', { transmission: 0.9, roughness: 0.05, transparent: true, opacity: 0.5, side: THREE.DoubleSide }))
+    barrel.position.y = 0.6
+    const liquid = new THREE.Mesh(new THREE.CylinderGeometry(0.052, 0.052, 0.3, 24), std('#8fd8ff', { transparent: true, opacity: 0.6 })); liquid.position.y = 0.48
+    const needle = new THREE.Mesh(new THREE.CylinderGeometry(0.005, 0.005, 0.32, 8), steel); needle.position.y = 0.16
+    const hub = new THREE.Mesh(new THREE.CylinderGeometry(0.025, 0.035, 0.05, 16), std('#2bb3a3')); hub.position.y = 0.33
+    const plunger = new THREE.Mesh(new THREE.CylinderGeometry(0.012, 0.012, 0.5, 8), std('#eeeeee')); plunger.position.y = 0.95
+    const pcap = new THREE.Mesh(new THREE.CylinderGeometry(0.07, 0.07, 0.02, 24), std('#eeeeee')); pcap.position.y = 1.2
+    syr.add(barrel, liquid, needle, hub, plunger, pcap)
+    add('syringe', syr, this.forearm)
+
+    // swab
+    const swab = new THREE.Group()
+    const stick = new THREE.Mesh(new THREE.CylinderGeometry(0.012, 0.012, 0.8, 8), std('#f3f3f3')); stick.position.y = 0.45
+    const cot = new THREE.Mesh(sph, std('#c47a2c', { roughness: 1 })); cot.scale.set(0.04, 0.07, 0.04); cot.position.y = 0.04
+    swab.add(stick, cot)
+    add('swab', swab, this.forearm)
+
+    // iodine disc (decal on skin)
+    const iod = new THREE.Mesh(new THREE.CircleGeometry(1, 48), new THREE.MeshBasicMaterial({ color: '#c7731f', transparent: true, opacity: 0.55, depthWrite: false }))
+    iod.renderOrder = 13
+    add('iodine', iod, this.forearm)
+
+    // anesthesia cloud
+    const cloud = new THREE.Mesh(sph, new THREE.MeshBasicMaterial({ color: '#59c8ff', transparent: true, opacity: 0.35, depthWrite: false, blending: THREE.AdditiveBlending }))
+    cloud.renderOrder = 14
+    add('cloud', cloud, this.forearm)
+
+    // release sparks ring
+    const ring = new THREE.Mesh(new THREE.TorusGeometry(0.1, 0.006, 8, 48), new THREE.MeshBasicMaterial({ color: '#ffffff', transparent: true, blending: THREE.AdditiveBlending, depthTest: false }))
+    ring.renderOrder = 41
+    add('ring', ring, this.forearm)
+
+    // probe (ultrasound transducer, original)
+    const probe = new THREE.Group()
+    const ph = new THREE.Mesh(new THREE.BoxGeometry(0.42, 0.12, 0.16), std('#eef3f8', { roughness: 0.3 })); ph.position.y = 0.06
+    const pg = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.07, 0.55, 20), std('#eef3f8', { roughness: 0.3 })); pg.position.y = 0.38
+    const lens = new THREE.Mesh(new THREE.BoxGeometry(0.4, 0.02, 0.13), std('#2bb3a3')); lens.position.y = 0.0
+    const cable = new THREE.Mesh(new THREE.CylinderGeometry(0.02, 0.02, 0.6, 8), std('#3b4250')); cable.position.y = 0.9
+    probe.add(ph, pg, lens, cable)
+    add('probe', probe, this.forearm)
+  }
+
+  /* ---------------- per-frame ---------------- */
+  private v = new THREE.Vector3()
+  private pt(obj: THREE.Object3D, x: number, y: number, z: number) { return obj.localToWorld(new THREE.Vector3(x, y, z)) }
+
+  apply(s: SceneState) {
+    const t = s.time
+    const p = s.pose
+    /* arm placement */
+    this.armRoot.position.set(...s.arm.pos)
+    this.armRoot.rotation.set(s.arm.rot[0], s.arm.rot[1], s.arm.rot[2], 'YXZ')
+    this.armRoot.quaternion.setFromEuler(this.armRoot.rotation)
+    if (s.shake) this.armRoot.position.add(new THREE.Vector3(...s.shake))
+    this.forearm.rotation.set(0, p[2], 0)
+    this.wrist.rotation.set(-p[0], 0, -p[1], 'XZY')
+    if (s.arm.twist) {
+      this.armRoot.updateMatrixWorld(true)
+      const piv = this.wrist.localToWorld(new THREE.Vector3(...s.arm.twist.pivot))
+      const ax = new THREE.Vector3(...s.arm.twist.axis).transformDirection(this.wrist.matrixWorld)
+      const q = new THREE.Quaternion().setFromAxisAngle(ax, s.arm.twist.angle)
+      this.armRoot.position.sub(piv).applyQuaternion(q).add(piv)
+      this.armRoot.quaternion.premultiply(q)
+    }
+    /* fingers */
+    this.fingerJoints.forEach((js, i) => {
+      const f = FINGERS[i]
+      const base = js[0].userData.base as THREE.Quaternion
+      const spread = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), -f.splay * (1 + p[3] * 4) + f.splay)
+      const flex = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), -p[4 + i * 3])
+      js[0].quaternion.copy(base).multiply(spread).multiply(flex)
+      js[1].rotation.set(-p[5 + i * 3], 0, 0)
+      js[2].rotation.set(-p[6 + i * 3], 0, 0)
+    })
+    /* thumb */
+    const [ab, fl, op, mcp, ip] = [p[16], p[17], p[18], p[19], p[20]]
+    const tq = this.thumbBase.clone()
+      .multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler(-fl * 0.8, op, ab, 'ZXY')))
+    this.thumbJoints[0].quaternion.copy(tq)
+    this.thumbJoints[1].rotation.set(-mcp, 0, 0)
+    this.thumbJoints[2].rotation.set(-ip, 0, 0)
+
+    this.scene.updateMatrixWorld(true)
+
+    /* tendon paths */
+    const F = this.forearm, Wr = this.wrist, T = this.thumbJoints
+    const excursion = fl * 0.12 + mcp * 0.05 + ip * 0.03 + p[1] * 0.16 - ab * 0.05 + (s.slide ?? 0)
+    const sheathPts = [this.pt(F, -0.26, -0.62, 0.1), this.pt(F, -0.29, -0.42, 0.075), this.pt(F, -0.3, -0.2, 0.06), this.pt(F, -0.303, 0.0, 0.055), this.pt(F, -0.295, 0.14, 0.055)]
+    for (const td of this.tendons) {
+      let pts: THREE.Vector3[]
+      let rad = (u: number) => 0.02
+      if (td.kind === 'apl' || td.kind === 'epb') {
+        const o = td.kind === 'apl' ? -0.022 : 0.022
+        pts = [
+          this.pt(F, -0.08 + o, -1.75, 0.2), this.pt(F, -0.2 + o, -1.05, 0.17), this.pt(F, -0.26 + o * 0.6, -0.62, 0.1 + o * 0.6),
+          this.pt(F, -0.29 + o * 0.5, -0.42, 0.075 + o * 0.5), this.pt(F, -0.3 + o * 0.5, -0.2, 0.06 + o * 0.6), this.pt(F, -0.303 + o * 0.5, 0.0, 0.055 + o * 0.6),
+          this.pt(Wr, -0.29 + o * 0.4, 0.13, 0.06 + o * 0.5),
+          this.pt(T[0], 0.0 + o * 0.5, -0.02, 0.07),
+        ]
+        if (td.kind === 'apl') pts.push(this.pt(T[0], -0.005, 0.07, 0.075))
+        else pts.push(this.pt(T[0], 0.01, 0.2, 0.09), this.pt(T[0], 0.01, 0.42, 0.085), this.pt(T[1], 0.0, 0.06, 0.08))
+        const r0 = 0.021
+        rad = (u: number) => r0 * (u < 0.15 ? 1.6 - u * 4 : 1) * (u > 0.94 ? (1 - (u - 0.94) * 8) : 1)
+      } else if (td.kind === 'epl') {
+        pts = [this.pt(F, 0.0, -1.7, 0.2), this.pt(F, -0.06, -0.8, 0.2), this.pt(F, -0.08, -0.2, 0.17), this.pt(F, -0.13, -0.05, 0.16),
+          this.pt(Wr, -0.22, 0.12, 0.14), this.pt(T[0], -0.045, 0.1, 0.1), this.pt(T[0], -0.04, 0.4, 0.1), this.pt(T[1], -0.02, 0.15, 0.09), this.pt(T[2], 0, 0.05, 0.08)]
+        rad = (u) => 0.016 * (u > 0.95 ? 0.6 : 1)
+      } else {
+        const i = td.idx!, f = FINGERS[i], J = this.fingerJoints[i]
+        const hx = f.head[0], bx = f.base[0]
+        pts = [this.pt(F, -0.02 + i * 0.07, -1.7, 0.21), this.pt(F, -0.05 + i * 0.075, -0.6, 0.2), this.pt(F, -0.07 + i * 0.09, -0.1, 0.18),
+          this.pt(Wr, bx * 0.9, 0.2, 0.15), this.pt(Wr, (bx + hx) / 2, 0.6, 0.12), this.pt(J[0], 0, 0.0, f.r * 0.85),
+          this.pt(J[0], 0, f.len[0] * 0.55, f.r * 0.7), this.pt(J[1], 0, 0, f.r * 0.72), this.pt(J[1], 0, f.len[1] * 0.7, f.r * 0.6), this.pt(J[2], 0, 0.04, f.r * 0.55)]
+        rad = (u) => 0.016 * (u > 0.9 ? 0.75 : 1)
+      }
+      td.tube.update(pts, rad)
+      ;(td.mesh.material as THREE.ShaderMaterial).uniforms.uSlide.value = td.kind === 'ext' ? 0 : excursion * (td.kind === 'epb' ? 1.15 : 1)
+    }
+    // sheath
+    const th = s.thick
+    this.sheathTube.update(sheathPts, (u) => {
+      const bell = Math.exp(-Math.pow((u - 0.5) / 0.2, 2))
+      const ends = Math.min(1, u * 9, (1 - u) * 9)
+      return (0.05 + 0.012 * ends + th * 0.026 * bell) * (0.75 + 0.25 * ends)
+    })
+
+    /* materials */
+    const painW = this.pt(F, ...PAIN_LOCAL)
+    this.anchors.pain = painW
+    this.anchors.sheath = this.pt(F, -0.33, -0.3, 0.1)
+    this.anchors.tendon = this.pt(F, -0.22, -0.95, 0.17)
+    this.anchors.bone = this.pt(F, -0.14, -1.2, 0)
+    this.anchors.thumb = this.pt(T[2], 0, 0.2, 0)
+    this.anchors.thumbBase = this.pt(T[0], 0, 0.1, 0)
+    this.anchors.wrist = this.pt(Wr, 0, 0.1, 0)
+    this.anchors.palm = this.pt(Wr, 0, 0.6, 0)
+    this.anchors.narrow = this.pt(F, -0.31, -0.17, 0.08)
+
+    const su = this.skinMat.uniforms
+    su.uOpacity.value = s.skin; su.uXray.value = s.xray; su.uPainPos.value.copy(painW); su.uPain.value = s.pain * (1 - s.xray * 0.6); su.uTime.value = t
+    const skinVisible = s.skin > 0.003
+    this.scene.traverse((o) => {
+      const m = o as THREE.Mesh
+      if (m.material === this.skinMat || m.material === this.skinDepth) m.visible = skinVisible
+      if (o.userData.nail) { const mm = (o as THREE.Mesh).material as THREE.MeshPhysicalMaterial; mm.opacity = s.skin * (1 - s.xray * 0.85); o.visible = skinVisible }
+    })
+
+    const setReveal = (mat: THREE.ShaderMaterial, r: number, maxR: number) => {
+      mat.uniforms.uRC.value.copy(painW)
+      mat.uniforms.uRR.value = r >= 0.999 ? 100 : r * maxR
+    }
+    for (const m of this.boneMats) setReveal(m, s.bone, 3.4)
+    setReveal(this.muscleMat, s.bone, 3.4)
+    setReveal(this.tendonMat, s.tendon, 3.4)
+    setReveal(this.extTendonMat, s.tendon, 3.4)
+    setReveal(this.sheathMat, s.sheath, 1.2)
+    const showIn = s.xray > 0.01 || s.skin < 0.99
+    this.boneMats.forEach((m) => { m.visible = showIn && s.bone > 0.001 })
+    this.muscleMat.visible = showIn && s.bone > 0.001
+    this.tendonMat.visible = this.extTendonMat.visible = showIn && s.tendon > 0.001
+    this.sheathMat.visible = showIn && s.sheath > 0.001
+    const focus = s.focus ?? 0
+    this.boneMat.uniforms.uDim.value = focus * 0.75; this.cartMat.uniforms.uDim.value = focus * 0.75
+    this.muscleMat.uniforms.uDim.value = 0.55 + focus * 0.3
+    this.extTendonMat.uniforms.uDim.value = focus * 0.8
+    this.tendonMat.uniforms.uDim.value = 0
+    for (const m of [this.tendonMat, this.extTendonMat]) { m.uniforms.uTime.value = t }
+    const tu = this.tendonMat.uniforms
+    tu.uHot.value = s.friction; tu.uHotPos.value.copy(this.pt(F, -0.303, -0.17, 0.06))
+    this.sheathMat.uniforms.uThick.value = th; this.sheathMat.uniforms.uTime.value = t
+
+    /* pain sprites */
+    const pulse = 0.78 + 0.22 * Math.sin(t * 7.0)
+    const pv = s.pain
+    this.painCore.visible = this.painHalo.visible = pv > 0.01
+    ;(this.painCore.material as THREE.SpriteMaterial).opacity = pv * pulse
+    ;(this.painHalo.material as THREE.SpriteMaterial).opacity = pv * 0.55 * (0.8 + 0.2 * Math.sin(t * 7 + 1))
+    this.painCore.scale.setScalar(0.22 + 0.06 * pv * pulse)
+    this.painHalo.scale.setScalar(0.55 + 0.25 * pv * pulse)
+
+    /* props */
+    for (const [name, obj] of Object.entries(this.props)) {
+      if (name === 'muscles') continue
+      const ps = s.props[name]
+      obj.visible = !!ps && ps.vis > 0.01
+      if (!ps || !obj.visible) continue
+      obj.traverse((o) => {
+        const mm = (o as THREE.Mesh).material as THREE.Material & { opacity: number; userData: { baseOp?: number } }
+        if (!mm || !('opacity' in mm)) return
+        if (mm.userData.baseOp === undefined) mm.userData.baseOp = mm.opacity
+        mm.transparent = true
+        mm.opacity = mm.userData.baseOp * ps.vis
+      })
+      this.applyProp(name, obj, ps, t)
+    }
+    this.scene.updateMatrixWorld(true)
+    const kn = this.props.knife
+    this.anchors.knife = kn.localToWorld(new THREE.Vector3(0, 0.95, 0))
+    this.anchors.knifeTip = kn.localToWorld(new THREE.Vector3(0, 0.0, 0))
+    this.anchors.syringe = this.props.syringe.localToWorld(new THREE.Vector3(0, 0.6, 0))
+    this.anchors.probe = this.props.probe.localToWorld(new THREE.Vector3(0, 0.3, 0))
+    this.anchors.splint = this.props.splint.localToWorld(new THREE.Vector3(0, -0.5, 0.3))
+    const loc = s.props.locator
+    this.locator.visible = !!loc && loc.vis > 0.01
+    if (loc) { (this.locator.material as THREE.SpriteMaterial).opacity = loc.vis; this.locator.scale.setScalar(0.12 + 0.03 * Math.sin(t * 8)) }
+  }
+
+  private applyProp(name: string, obj: THREE.Object3D, ps: PropState, t: number) {
+    const P = new THREE.Vector3(...PAIN_LOCAL)
+    const out = new THREE.Vector3(-0.72, 0.22, 0.66).normalize()
+    if (name === 'knife') {
+      const d = ps.depth ?? 0.8 // distance of tip from target along out dir
+      const wig = (ps.release ?? 0) * Math.sin(t * 22) * 0.025
+      const along = new THREE.Vector3(0, 1, 0)
+      obj.position.copy(P).addScaledVector(out, d).addScaledVector(along, wig).add(new THREE.Vector3(-0.005, 0.0, 0.02))
+      obj.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), out)
+      obj.rotateY(Math.PI / 2)
+    } else if (name === 'syringe') {
+      const d = ps.depth ?? 0.8
+      const dir = new THREE.Vector3(-0.6, 0.35, 0.72).normalize()
+      obj.position.copy(P).addScaledVector(dir, d + 0.06)
+      obj.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir)
+      const pl = obj.children[4], pc = obj.children[5], lq = obj.children[1]
+      const push = ps.push ?? 0
+      pl.position.y = 0.95 - push * 0.22; pc.position.y = 1.2 - push * 0.22
+      lq.scale.y = 1 - push * 0.8; lq.position.y = 0.48 - push * 0.12
+    } else if (name === 'swab') {
+      const a = t * 5
+      const r = (ps.r ?? 0.1)
+      const n = out
+      const tx = new THREE.Vector3(0, 1, 0).cross(n).normalize(), ty = n.clone().cross(tx)
+      obj.position.copy(P).addScaledVector(n, 0.11).addScaledVector(tx, Math.cos(a) * r).addScaledVector(ty, Math.sin(a) * r)
+      obj.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), n.clone().add(new THREE.Vector3(0, 0.3, 0)).normalize())
+    } else if (name === 'iodine') {
+      obj.position.copy(P).addScaledVector(out, 0.105)
+      obj.quaternion.setFromUnitVectors(new THREE.Vector3(0, 0, 1), out)
+      obj.scale.setScalar(Math.max(0.001, ps.r ?? 0.2))
+    } else if (name === 'cloud') {
+      obj.position.copy(P).addScaledVector(out, 0.04)
+      obj.scale.setScalar(Math.max(0.001, ps.r ?? 0.1))
+    } else if (name === 'ring') {
+      obj.position.copy(P)
+      obj.rotation.set(Math.PI / 2, 0, 0)
+      obj.scale.setScalar(1 + (ps.r ?? 0) * 0.8)
+    } else if (name === 'probe') {
+      obj.position.copy(P).addScaledVector(out, 0.12 + (ps.lift ?? 0)).add(new THREE.Vector3(0, ps.slideY ?? 0, 0))
+      obj.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), out)
+    } else if (name === 'bottle') {
+      const inner = obj.userData.inner as THREE.Object3D
+      inner.rotation.y = -(ps.twist ?? 0)
+    } else if (name === 'bead') {
+      // between thumb tip & index tip
+      const a = this.thumbJoints[2].children[0]?.parent ? this.pt(this.thumbJoints[2], 0, 0.3, 0) : new THREE.Vector3()
+      const b = this.pt(this.fingerJoints[0][2], 0, 0.22, 0)
+      const mid = a.add(b).multiplyScalar(0.5)
+      obj.position.copy(this.wrist.worldToLocal(mid))
+      obj.rotation.set(0.3, 0, 1.2)
+    } else if (name === 'keyboard') {
+      obj.position.set(ps.x ?? 0, ps.y ?? 0, ps.z ?? 0)
+      obj.rotation.set(ps.rx ?? 0, ps.ry ?? 0, ps.rz ?? 0)
+    }
+  }
+
+  /** project world point → normalized screen (0..1) */
+  project(p: THREE.Vector3, cam: THREE.Camera) {
+    const v = p.clone().project(cam)
+    return { x: (v.x + 1) / 2, y: (1 - v.y) / 2, z: v.z }
+  }
+}

src/video/overlay.ts

@@ -0,0 +1,386 @@
+import { clamp, smooth, backOut, hash } from './math'
+
+export const FONT = '"PingFang SC","Noto Sans SC","Source Han Sans SC","Microsoft YaHei","Hiragino Sans GB",sans-serif'
+type C = CanvasRenderingContext2D
+
+export const COL = {
+  cyan: '#5fd4ff', teal: '#2fe0c0', red: '#ff3b3b', yellow: '#ffd23f', white: '#ffffff', green: '#3ee08f',
+}
+
+function rr(ctx: C, x: number, y: number, w: number, h: number, r: number) {
+  ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r)
+  ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath()
+}
+
+/* ---------------- subtitle ---------------- */
+export function subtitle(ctx: C, text: string, alpha: number, y = 1555) {
+  if (alpha <= 0.01 || !text) return
+  ctx.save()
+  ctx.globalAlpha = alpha
+  ctx.font = `800 58px ${FONT}`
+  ctx.textAlign = 'center'; ctx.textBaseline = 'middle'
+  const lines = wrap(ctx, text, 940)
+  const lh = 80
+  lines.forEach((l, i) => {
+    const yy = y + (i - (lines.length - 1) / 2) * lh + (1 - alpha) * 10
+    ctx.lineJoin = 'round'; ctx.lineWidth = 12; ctx.strokeStyle = 'rgba(0,8,20,0.85)'; ctx.strokeText(l, 540, yy)
+    ctx.fillStyle = '#ffffff'; ctx.fillText(l, 540, yy)
+  })
+  ctx.restore()
+}
+export function wrap(ctx: C, text: string, maxW: number) {
+  if (ctx.measureText(text).width <= maxW) return [text]
+  // split at punctuation near the middle when possible
+  const chars = [...text]; const lines: string[] = []; let cur = ''
+  for (const ch of chars) {
+    if (ctx.measureText(cur + ch).width > maxW) { lines.push(cur); cur = ch } else cur += ch
+  }
+  if (cur) lines.push(cur)
+  if (lines.length === 2) {
+    const mid = Math.floor(chars.length / 2)
+    let best = -1
+    for (let d = 0; d < 6; d++) for (const k of [mid + d, mid - d]) if (best < 0 && '，、：；'.includes(chars[k] ?? '')) best = k
+    if (best > 0) return [chars.slice(0, best + 1).join(''), chars.slice(best + 1).join('')]
+  }
+  return lines
+}
+
+/* ---------------- chips / keywords ---------------- */
+export interface ChipOpt { alpha?: number; scale?: number; color?: string; size?: number; icon?: 'check' | 'cross' | 'warn' | 'dot' | 'num'; num?: number; fill?: boolean; strike?: number }
+export function chip(ctx: C, x: number, y: number, text: string, o: ChipOpt = {}) {
+  const a = o.alpha ?? 1; if (a <= 0.01) return
+  const size = o.size ?? 46, color = o.color ?? COL.cyan
+  ctx.save()
+  ctx.globalAlpha = a
+  ctx.translate(x, y); const sc = o.scale ?? 1; ctx.scale(sc, sc)
+  ctx.font = `800 ${size}px ${FONT}`
+  const tw = ctx.measureText(text).width
+  const iconW = o.icon ? size * 1.05 : 0
+  const w = tw + iconW + size * 1.1, h = size * 1.7
+  ctx.shadowColor = color; ctx.shadowBlur = 24
+  rr(ctx, -w / 2, -h / 2, w, h, h / 2)
+  ctx.fillStyle = o.fill ? color : 'rgba(6,18,36,0.78)'; ctx.fill()
+  ctx.shadowBlur = 0
+  ctx.lineWidth = 3; ctx.strokeStyle = color; ctx.stroke()
+  const tx = -w / 2 + size * 0.55 + iconW
+  if (o.icon) icon(ctx, o.icon, -w / 2 + size * 0.55 + size * 0.42, 0, size * 0.8, o.fill ? '#061224' : color, o.num)
+  ctx.fillStyle = o.fill ? '#061224' : '#fff'; ctx.textBaseline = 'middle'; ctx.textAlign = 'left'
+  ctx.fillText(text, tx, 2)
+  if (o.strike) {
+    ctx.strokeStyle = COL.red; ctx.lineWidth = 7; ctx.lineCap = 'round'
+    ctx.beginPath(); ctx.moveTo(-w / 2 + 10, 0); ctx.lineTo(-w / 2 + 10 + (w - 20) * clamp(o.strike), 0); ctx.stroke()
+  }
+  ctx.restore()
+}
+
+export function icon(ctx: C, kind: string, x: number, y: number, s: number, color: string, num?: number) {
+  ctx.save(); ctx.translate(x, y); ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = s * 0.13; ctx.lineCap = 'round'; ctx.lineJoin = 'round'
+  if (kind === 'check') { ctx.beginPath(); ctx.moveTo(-s * 0.35, 0); ctx.lineTo(-s * 0.08, s * 0.28); ctx.lineTo(s * 0.4, -s * 0.3); ctx.stroke() }
+  else if (kind === 'cross') { ctx.beginPath(); ctx.moveTo(-s * 0.3, -s * 0.3); ctx.lineTo(s * 0.3, s * 0.3); ctx.moveTo(s * 0.3, -s * 0.3); ctx.lineTo(-s * 0.3, s * 0.3); ctx.stroke() }
+  else if (kind === 'warn') { ctx.beginPath(); ctx.moveTo(0, -s * 0.42); ctx.lineTo(s * 0.45, s * 0.38); ctx.lineTo(-s * 0.45, s * 0.38); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(0, -s * 0.1); ctx.lineTo(0, s * 0.12); ctx.stroke(); ctx.beginPath(); ctx.arc(0, s * 0.25, s * 0.04, 0, 7); ctx.fill() }
+  else if (kind === 'dot') { ctx.beginPath(); ctx.arc(0, 0, s * 0.22, 0, 7); ctx.fill() }
+  else if (kind === 'num') { ctx.beginPath(); ctx.arc(0, 0, s * 0.45, 0, 7); ctx.fill(); ctx.fillStyle = '#061224'; ctx.font = `900 ${s * 0.6}px ${FONT}`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(String(num ?? 1), 0, s * 0.03) }
+  ctx.restore()
+}
+
+/** big centered keyword with pop-in */
+export function bigWord(ctx: C, text: string, x: number, y: number, p: number, color = COL.red, size = 92) {
+  if (p <= 0.01) return
+  ctx.save()
+  const sc = 0.6 + 0.4 * backOut(Math.min(1, p * 1.6))
+  ctx.globalAlpha = clamp(p * 2)
+  ctx.translate(x, y); ctx.scale(sc, sc)
+  ctx.font = `900 ${size}px ${FONT}`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'
+  ctx.shadowColor = color; ctx.shadowBlur = 40
+  ctx.lineWidth = 14; ctx.strokeStyle = 'rgba(0,6,16,0.9)'; ctx.lineJoin = 'round'; ctx.strokeText(text, 0, 0)
+  ctx.fillStyle = color; ctx.fillText(text, 0, 0)
+  ctx.shadowBlur = 0; ctx.fillStyle = '#fff'; ctx.globalAlpha *= 0.25; ctx.fillText(text, 0, -3)
+  ctx.restore()
+}
+
+/* ---------------- labels with leader lines ---------------- */
+export function label(ctx: C, ax: number, ay: number, tx: number, ty: number, text: string, alpha: number, color = COL.cyan, size = 40) {
+  if (alpha <= 0.01) return
+  ctx.save(); ctx.globalAlpha = alpha
+  const p = smooth(alpha)
+  const ex = ax + (tx - ax) * p, ey = ay + (ty - ay) * p
+  ctx.strokeStyle = color; ctx.lineWidth = 3; ctx.shadowColor = color; ctx.shadowBlur = 10
+  ctx.beginPath(); ctx.moveTo(ax, ay); ctx.lineTo(ex, ey); ctx.stroke()
+  ctx.fillStyle = color; ctx.beginPath(); ctx.arc(ax, ay, 8, 0, 7); ctx.fill()
+  ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(ax, ay, 14 + Math.sin(alpha * 6) * 2, 0, 7); ctx.stroke()
+  ctx.shadowBlur = 0
+  ctx.font = `800 ${size}px ${FONT}`
+  const w = ctx.measureText(text).width + 36, h = size * 1.5
+  const left = tx < ax
+  const bx = left ? ex - w : ex
+  rr(ctx, bx, ey - h / 2, w, h, 12); ctx.fillStyle = 'rgba(4,14,30,0.85)'; ctx.fill(); ctx.strokeStyle = color; ctx.lineWidth = 2.5; ctx.stroke()
+  ctx.fillStyle = '#fff'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; ctx.fillText(text, bx + 18, ey + 2)
+  ctx.restore()
+}
+
+/* ---------------- reticle ---------------- */
+export function reticle(ctx: C, x: number, y: number, r: number, alpha: number, t: number, color = COL.red, lock = 1) {
+  if (alpha <= 0.01) return
+  ctx.save(); ctx.globalAlpha = alpha; ctx.translate(x, y)
+  const R = r * (1 + (1 - lock) * 1.4)
+  ctx.rotate((1 - lock) * 1.2 + t * 0.3)
+  ctx.strokeStyle = color; ctx.lineWidth = 5; ctx.shadowColor = color; ctx.shadowBlur = 16
+  for (let i = 0; i < 4; i++) {
+    ctx.rotate(Math.PI / 2)
+    ctx.beginPath(); ctx.moveTo(R, R * 0.45); ctx.lineTo(R, R); ctx.lineTo(R * 0.45, R); ctx.stroke()
+  }
+  ctx.rotate(-t * 0.3 - (1 - lock) * 1.2)
+  ctx.lineWidth = 2; ctx.setLineDash([8, 10]); ctx.beginPath(); ctx.arc(0, 0, R * 0.72, t, t + Math.PI * 2); ctx.stroke(); ctx.setLineDash([])
+  ctx.lineWidth = 2.5; ctx.beginPath(); ctx.moveTo(-14, 0); ctx.lineTo(14, 0); ctx.moveTo(0, -14); ctx.lineTo(0, 14); ctx.stroke()
+  ctx.restore()
+}
+
+/* ---------------- pain burst ---------------- */
+export function painBurst(ctx: C, x: number, y: number, p: number, t: number) {
+  if (p <= 0.01) return
+  ctx.save(); ctx.translate(x, y); ctx.globalCompositeOperation = 'lighter'
+  for (let k = 0; k < 3; k++) {
+    const ph = ((t * 1.3 + k / 3) % 1)
+    ctx.strokeStyle = `rgba(255,60,50,${(1 - ph) * 0.6 * p})`; ctx.lineWidth = 6 * (1 - ph) + 1
+    ctx.beginPath(); ctx.arc(0, 0, 40 + ph * 170, 0, Math.PI * 2); ctx.stroke()
+  }
+  ctx.strokeStyle = `rgba(255,90,70,${0.9 * p})`; ctx.lineWidth = 7; ctx.lineCap = 'round'
+  for (let i = 0; i < 9; i++) {
+    const a = i / 9 * Math.PI * 2 + 0.3, j = 0.6 + 0.4 * Math.sin(t * 20 + i * 3)
+    const r1 = 70 + 20 * j, r2 = r1 + 50 * p * j
+    ctx.beginPath(); ctx.moveTo(Math.cos(a) * r1, Math.sin(a) * r1); ctx.lineTo(Math.cos(a) * r2, Math.sin(a) * r2); ctx.stroke()
+  }
+  ctx.restore()
+}
+
+/* ---------------- cross-section inset (sheath + tendons) ---------------- */
+export function crossSection(ctx: C, cx: number, cy: number, R: number, thick: number, friction: number, alpha: number, t: number, title = '横截面示意') {
+  if (alpha <= 0.01) return
+  ctx.save(); ctx.globalAlpha = alpha; ctx.translate(cx, cy)
+  const box = R * 1.5
+  rr(ctx, -box, -box - 50, box * 2, box * 2 + 70, 26); ctx.fillStyle = 'rgba(4,14,30,0.82)'; ctx.fill()
+  ctx.strokeStyle = 'rgba(95,212,255,0.7)'; ctx.lineWidth = 2.5; ctx.stroke()
+  ctx.font = `800 30px ${FONT}`; ctx.fillStyle = COL.cyan; ctx.textAlign = 'center'; ctx.fillText(title, 0, -box - 12)
+  // sheath ring
+  const outer = R * (1 + thick * 0.22), inner = R * (0.82 - thick * 0.3)
+  const sc = `rgb(${Math.round(140 + 115 * thick)},${Math.round(200 - 120 * thick)},${Math.round(255 - 170 * thick)})`
+  ctx.fillStyle = sc; ctx.globalAlpha = alpha * 0.85
+  ctx.beginPath(); ctx.arc(0, 10, outer, 0, Math.PI * 2); ctx.arc(0, 10, inner, 0, Math.PI * 2, true); ctx.fill('evenodd')
+  ctx.globalAlpha = alpha
+  ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(0, 10, inner, 0, 7); ctx.stroke()
+  // space (synovial fluid) – shrinking
+  ctx.fillStyle = 'rgba(70,170,255,0.25)'; ctx.beginPath(); ctx.arc(0, 10, inner - 2, 0, 7); ctx.fill()
+  // two tendons
+  const tr = R * 0.3, wob = Math.sin(t * 5) * 2
+  const hot = friction
+  for (const dx of [-tr * 1.05, tr * 1.05]) {
+    const g = ctx.createRadialGradient(dx - 6, 4 + wob, 2, dx, 10 + wob, tr)
+    g.addColorStop(0, '#ffffff'); g.addColorStop(1, hot > 0.1 ? `rgb(255,${Math.round(230 - 170 * hot)},${Math.round(200 - 170 * hot)})` : '#e6dfcf')
+    ctx.fillStyle = g; ctx.beginPath(); ctx.arc(dx, 10 + wob, tr, 0, 7); ctx.fill()
+    ctx.strokeStyle = 'rgba(0,0,0,0.25)'; ctx.lineWidth = 1.5
+    for (let k = -2; k <= 2; k++) { ctx.beginPath(); ctx.arc(dx + k * 6, 10 + wob, tr * 0.18, 0, 7); ctx.stroke() }
+  }
+  if (hot > 0.05) {
+    ctx.globalCompositeOperation = 'lighter'
+    const g = ctx.createRadialGradient(0, 10, inner * 0.5, 0, 10, outer)
+    g.addColorStop(0, 'rgba(255,40,30,0)'); g.addColorStop(0.7, `rgba(255,60,40,${0.5 * hot})`); g.addColorStop(1, 'rgba(255,40,30,0)')
+    ctx.fillStyle = g; ctx.beginPath(); ctx.arc(0, 10, outer * 1.1, 0, 7); ctx.fill()
+    ctx.globalCompositeOperation = 'source-over'
+  }
+  // gap arrows
+  const gap = inner - tr * 2.05
+  ctx.font = `700 24px ${FONT}`; ctx.fillStyle = '#cfefff'; ctx.textAlign = 'center'
+  ctx.fillText(gap > R * 0.12 ? '间隙充足' : '间隙变窄', 0, R * 1.45)
+  ctx.restore()
+}
+
+/* ---------------- ultrasound ---------------- */
+let speckle: HTMLCanvasElement | null = null
+function getSpeckle() {
+  if (speckle) return speckle
+  const c = document.createElement('canvas'); c.width = 360; c.height = 300
+  const g = c.getContext('2d')!; const im = g.createImageData(360, 300)
+  for (let i = 0; i < 360 * 300; i++) {
+    const v = Math.pow(hash(i * 1.37 + 0.5), 2.2) * 120
+    im.data[i * 4] = im.data[i * 4 + 1] = im.data[i * 4 + 2] = v; im.data[i * 4 + 3] = 255
+  }
+  g.putImageData(im, 0, 0)
+  speckle = c; return c
+}
+export interface USOpt { alpha: number; thick: number; locator?: number; labels?: number; knife?: number; release?: number; narrowMark?: number; title?: string }
+export function ultrasound(ctx: C, x: number, y: number, w: number, h: number, t: number, o: USOpt) {
+  if (o.alpha <= 0.01) return
+  ctx.save(); ctx.globalAlpha = o.alpha
+  rr(ctx, x - 14, y - 64, w + 28, h + 84, 24); ctx.fillStyle = 'rgba(2,8,16,0.94)'; ctx.fill()
+  ctx.strokeStyle = 'rgba(95,212,255,0.6)'; ctx.lineWidth = 2.5; ctx.stroke()
+  ctx.font = `800 30px ${FONT}`; ctx.fillStyle = COL.cyan; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'
+  ctx.fillText(o.title ?? '超声检查 · 示意', x + 6, y - 32)
+  ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.font = `600 22px ${FONT}`; ctx.textAlign = 'right'
+  ctx.fillText(`B-MODE  12MHz  ${(t % 60).toFixed(1)}s`, x + w - 6, y - 32)
+  // field
+  ctx.save(); rr(ctx, x, y, w, h, 10); ctx.clip()
+  ctx.fillStyle = '#000'; ctx.fillRect(x, y, w, h)
+  const sp = getSpeckle()
+  ctx.globalAlpha = o.alpha * 0.9
+  ctx.drawImage(sp, (t * 7) % 40, 0, 320, 300, x, y, w, h)
+  ctx.globalAlpha = o.alpha
+  // layers: skin (bright line), subcut, sheath (hypoechoic halo), tendons (fibrillar bright), bone (bright line + shadow)
+  const cy = y + h * 0.48, cx = x + w * 0.5
+  ctx.fillStyle = 'rgba(230,230,230,0.55)'; ctx.fillRect(x, y + h * 0.06, w, 5)
+  // sheath halo (dark) thickness grows with thick
+  const sh = h * (0.12 + o.thick * 0.1)
+  const narrowW = w * 0.32
+  ctx.fillStyle = 'rgba(0,0,0,0.75)'
+  ctx.beginPath(); ctx.ellipse(cx, cy, w * 0.46, h * 0.1 + sh * 0.6, 0, 0, 7); ctx.fill()
+  // tendon fibrillar pattern (narrowed in the middle)
+  for (let i = 0; i < 9; i++) {
+    const yy = cy - h * 0.07 + i * h * 0.0175
+    ctx.strokeStyle = `rgba(240,240,240,${0.35 + 0.35 * hash(i)})`; ctx.lineWidth = 2.2
+    ctx.beginPath()
+    for (let k = 0; k <= 40; k++) {
+      const xx = x + w * 0.06 + (w * 0.88) * k / 40
+      const dn = Math.exp(-Math.pow((xx - cx) / (narrowW * 0.5), 2)) * o.thick * (o.release ? 1 - o.release * 0.7 : 1)
+      const yv = cy + (yy - cy) * (1 - dn * 0.35) + Math.sin(k * 1.7 + i) * 1.2
+      if (k === 0) ctx.moveTo(xx, yv); else ctx.lineTo(xx, yv)
+    }
+    ctx.stroke()
+  }
+  // bone
+  ctx.strokeStyle = 'rgba(255,255,255,0.9)'; ctx.lineWidth = 8
+  ctx.beginPath(); ctx.moveTo(x, y + h * 0.8); ctx.quadraticCurveTo(cx, y + h * 0.7, x + w, y + h * 0.82); ctx.stroke()
+  const gsh = ctx.createLinearGradient(0, y + h * 0.8, 0, y + h); gsh.addColorStop(0, 'rgba(0,0,0,0.6)'); gsh.addColorStop(1, 'rgba(0,0,0,0.95)')
+  ctx.fillStyle = gsh; ctx.fillRect(x, y + h * 0.8, w, h * 0.2)
+  // knife echo line
+  if (o.knife && o.knife > 0) {
+    const kx0 = x + w * 0.1, ky0 = y + h * 0.04
+    const kx1 = kx0 + (cx - kx0) * o.knife, ky1 = ky0 + (cy - h * 0.05 - ky0) * o.knife
+    ctx.strokeStyle = 'rgba(255,255,255,0.95)'; ctx.lineWidth = 5; ctx.shadowColor = '#fff'; ctx.shadowBlur = 12
+    ctx.beginPath(); ctx.moveTo(kx0, ky0); ctx.lineTo(kx1, ky1); ctx.stroke(); ctx.shadowBlur = 0
+  }
+  if (o.narrowMark && o.narrowMark > 0) {
+    ctx.globalAlpha = o.alpha * o.narrowMark
+    ctx.strokeStyle = COL.red; ctx.lineWidth = 4; ctx.setLineDash([12, 8])
+    ctx.beginPath(); ctx.ellipse(cx, cy, narrowW * 0.62, h * 0.2, 0, 0, 7); ctx.stroke(); ctx.setLineDash([])
+    ctx.globalAlpha = o.alpha
+  }
+  if (o.locator && o.locator > 0) {
+    ctx.globalAlpha = o.alpha * o.locator
+    const r = 10 + Math.sin(t * 8) * 3
+    ctx.fillStyle = '#fff'; ctx.shadowColor = '#fff'; ctx.shadowBlur = 25
+    ctx.beginPath(); ctx.arc(cx, cy - h * 0.05, r, 0, 7); ctx.fill(); ctx.shadowBlur = 0
+    ctx.strokeStyle = '#fff'; ctx.lineWidth = 2
+    ctx.beginPath(); ctx.arc(cx, cy - h * 0.05, r + 18, 0, 7); ctx.stroke()
+    ctx.globalAlpha = o.alpha
+  }
+  // depth ruler
+  ctx.fillStyle = 'rgba(255,255,255,0.6)'
+  for (let i = 0; i < 8; i++) ctx.fillRect(x + w - 16, y + 10 + i * (h - 20) / 7, i % 2 ? 6 : 12, 2)
+  ctx.restore()
+  // labels
+  const L = o.labels ?? 0
+  if (L > 0) {
+    const ls = [
+      { t: '肌腱', ax: x + w * 0.2, ay: cy, tx: x + w * 0.08, ty: y + h + 50, c: COL.white, d: 0 },
+      { t: '腱鞘', ax: x + w * 0.78, ay: cy - h * 0.13, tx: x + w * 0.66, ty: y + h + 50, c: COL.cyan, d: 0.25 },
+      { t: '狭窄位置', ax: cx, ay: cy + h * 0.08, tx: x + w * 0.36, ty: y + h + 50, c: COL.red, d: 0.5 },
+    ]
+    for (const l of ls) {
+      const a = clamp((L - l.d) * 2.5)
+      if (a <= 0) continue
+      ctx.save(); ctx.globalAlpha = o.alpha * a
+      ctx.strokeStyle = l.c; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(l.ax, l.ay); ctx.lineTo(l.ax, l.ty - 26); ctx.stroke()
+      ctx.fillStyle = l.c; ctx.beginPath(); ctx.arc(l.ax, l.ay, 7, 0, 7); ctx.fill()
+      ctx.font = `800 34px ${FONT}`; ctx.textAlign = 'center'; ctx.fillStyle = l.c; ctx.fillText(l.t, l.ax, l.ty)
+      ctx.restore()
+    }
+  }
+  ctx.restore()
+}
+
+/* ---------------- step bar ---------------- */
+export function steps(ctx: C, list: string[], active: number, alpha: number, y = 260) {
+  if (alpha <= 0.01) return
+  ctx.save(); ctx.globalAlpha = alpha
+  const n = list.length, gap = 230, x0 = 540 - (gap * (n - 1)) / 2
+  ctx.strokeStyle = 'rgba(95,212,255,0.35)'; ctx.lineWidth = 4
+  ctx.beginPath(); ctx.moveTo(x0, y); ctx.lineTo(x0 + gap * (n - 1), y); ctx.stroke()
+  const prog = clamp(active / (n - 1))
+  ctx.strokeStyle = COL.teal; ctx.beginPath(); ctx.moveTo(x0, y); ctx.lineTo(x0 + gap * (n - 1) * prog, y); ctx.stroke()
+  list.forEach((s, i) => {
+    const x = x0 + i * gap
+    const on = active >= i - 0.01, cur = Math.abs(active - i) < 0.5
+    ctx.fillStyle = on ? COL.teal : '#0b2238'; ctx.strokeStyle = on ? COL.teal : 'rgba(95,212,255,0.5)'; ctx.lineWidth = 3
+    ctx.beginPath(); ctx.arc(x, y, cur ? 30 : 24, 0, 7); ctx.fill(); ctx.stroke()
+    ctx.fillStyle = on ? '#04121f' : '#9fd8ff'; ctx.font = `900 28px ${FONT}`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'
+    ctx.fillText(String(i + 1), x, y + 1)
+    ctx.fillStyle = cur ? '#fff' : 'rgba(255,255,255,0.65)'; ctx.font = `800 ${cur ? 36 : 30}px ${FONT}`
+    ctx.fillText(s, x, y + 62)
+  })
+  ctx.restore()
+}
+
+/* ---------------- header / footer ---------------- */
+export function header(ctx: C, idx: number, title: string, alpha: number) {
+  ctx.save()
+  // persistent brandless series tag
+  ctx.globalAlpha = 0.9
+  ctx.font = `800 30px ${FONT}`; ctx.textBaseline = 'middle'; ctx.textAlign = 'left'
+  rr(ctx, 48, 120, 300, 54, 27); ctx.fillStyle = 'rgba(4,14,30,0.6)'; ctx.fill(); ctx.strokeStyle = 'rgba(95,212,255,0.45)'; ctx.lineWidth = 2; ctx.stroke()
+  ctx.fillStyle = COL.red; ctx.beginPath(); ctx.arc(76, 147, 8, 0, 7); ctx.fill()
+  ctx.fillStyle = '#dff4ff'; ctx.fillText('腱鞘炎 · 3D 解剖', 96, 148)
+  if (alpha > 0.01) {
+    ctx.globalAlpha = alpha
+    ctx.font = `900 40px ${FONT}`
+    const tw = ctx.measureText(title).width
+    const x = 48 - (1 - alpha) * 40
+    rr(ctx, x, 190, tw + 120, 66, 14); ctx.fillStyle = 'rgba(95,212,255,0.14)'; ctx.fill()
+    ctx.fillStyle = COL.cyan; ctx.fillRect(x, 190, 8, 66)
+    ctx.fillStyle = COL.cyan; ctx.font = `900 34px ${FONT}`; ctx.fillText(String(idx).padStart(2, '0'), x + 26, 224)
+    ctx.fillStyle = '#fff'; ctx.font = `900 40px ${FONT}`; ctx.fillText(title, x + 84, 224)
+  }
+  ctx.restore()
+}
+export function footer(ctx: C) {
+  ctx.save(); ctx.globalAlpha = 0.55
+  ctx.font = `600 24px ${FONT}`; ctx.fillStyle = '#cfe6ff'; ctx.textAlign = 'center'
+  ctx.fillText('原创3D医学示意动画 · 仅供科普，不替代面诊', 540, 1870)
+  ctx.restore()
+}
+
+/* ---------------- panel frame ---------------- */
+export function panel(ctx: C, x: number, y: number, w: number, h: number, title: string, num: number, active: number, dim: number) {
+  ctx.save()
+  if (dim > 0.01) { ctx.fillStyle = `rgba(2,6,14,${dim * 0.6})`; ctx.fillRect(x, y, w, h) }
+  const c = active > 0.5 ? COL.teal : 'rgba(95,212,255,0.4)'
+  ctx.strokeStyle = c; ctx.lineWidth = active > 0.5 ? 6 : 2
+  if (active > 0.5) { ctx.shadowColor = COL.teal; ctx.shadowBlur = 20 }
+  rr(ctx, x + 6, y + 6, w - 12, h - 12, 22); ctx.stroke(); ctx.shadowBlur = 0
+  ctx.font = `900 40px ${FONT}`
+  const tw = ctx.measureText(title).width
+  rr(ctx, x + 22, y + h - 100, tw + 100, 70, 35); ctx.fillStyle = active > 0.5 ? COL.teal : 'rgba(4,14,30,0.85)'; ctx.fill()
+  icon(ctx, 'num', x + 62, y + h - 65, 46, active > 0.5 ? '#04121f' : COL.cyan, num)
+  ctx.fillStyle = active > 0.5 ? '#04121f' : '#fff'; ctx.textBaseline = 'middle'; ctx.textAlign = 'left'
+  ctx.fillText(title, x + 98, y + h - 63)
+  ctx.restore()
+}
+
+export function flash(ctx: C, a: number, color = '255,255,255') {
+  if (a <= 0.01) return
+  ctx.save(); ctx.fillStyle = `rgba(${color},${a})`; ctx.fillRect(0, 0, 1080, 1920); ctx.restore()
+}
+
+/** simple line icons for actions */
+export function actionIcon(ctx: C, kind: 'grab' | 'pinch' | 'twist' | 'baby' | 'keyboard' | 'tool' | 'home' | 'comment', x: number, y: number, s: number, color: string, alpha = 1) {
+  if (alpha <= 0.01) return
+  ctx.save(); ctx.globalAlpha = alpha; ctx.translate(x, y); ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = s * 0.07; ctx.lineCap = 'round'; ctx.lineJoin = 'round'
+  const S = s / 2
+  if (kind === 'grab') { ctx.beginPath(); ctx.arc(0, 0, S * 0.55, 0, 7); ctx.stroke(); for (let i = 0; i < 4; i++) { const a = -2.4 + i * 0.45; ctx.beginPath(); ctx.arc(Math.cos(a) * S * 0.55, Math.sin(a) * S * 0.55, S * 0.16, 0, 7); ctx.fill() } }
+  else if (kind === 'pinch') { ctx.beginPath(); ctx.moveTo(-S * 0.7, -S * 0.5); ctx.quadraticCurveTo(0, -S * 0.2, -S * 0.05, -S * 0.05); ctx.moveTo(-S * 0.7, S * 0.5); ctx.quadraticCurveTo(0, S * 0.2, -S * 0.05, S * 0.05); ctx.stroke(); ctx.beginPath(); ctx.arc(S * 0.15, 0, S * 0.15, 0, 7); ctx.fill() }
+  else if (kind === 'twist') { ctx.beginPath(); ctx.arc(0, 0, S * 0.6, -2.6, 1.2); ctx.stroke(); ctx.beginPath(); ctx.moveTo(S * 0.21, S * 0.56); ctx.lineTo(S * 0.5, S * 0.75); ctx.lineTo(S * 0.4, S * 0.4); ctx.stroke(); ctx.strokeRect(-S * 0.25, -S * 0.25, S * 0.5, S * 0.5) }
+  else if (kind === 'baby') { ctx.beginPath(); ctx.arc(-S * 0.35, -S * 0.15, S * 0.28, 0, 7); ctx.stroke(); ctx.beginPath(); ctx.ellipse(S * 0.2, S * 0.15, S * 0.55, S * 0.32, -0.3, 0, 7); ctx.stroke() }
+  else if (kind === 'keyboard') { ctx.strokeRect(-S * 0.75, -S * 0.35, S * 1.5, S * 0.7); for (let i = 0; i < 5; i++) ctx.fillRect(-S * 0.6 + i * S * 0.27, -S * 0.15, S * 0.12, S * 0.1) }
+  else if (kind === 'tool') { ctx.beginPath(); ctx.moveTo(-S * 0.6, S * 0.6); ctx.lineTo(S * 0.25, -S * 0.25); ctx.stroke(); ctx.fillRect(S * 0.05, -S * 0.7, S * 0.6, S * 0.35) }
+  else if (kind === 'home') { ctx.beginPath(); ctx.moveTo(-S * 0.6, 0); ctx.lineTo(0, -S * 0.6); ctx.lineTo(S * 0.6, 0); ctx.moveTo(-S * 0.45, -S * 0.1); ctx.lineTo(-S * 0.45, S * 0.55); ctx.lineTo(S * 0.45, S * 0.55); ctx.lineTo(S * 0.45, -S * 0.1); ctx.stroke() }
+  else if (kind === 'comment') { rr(ctx, -S * 0.7, -S * 0.55, S * 1.4, S * 0.95, S * 0.25); ctx.stroke(); ctx.beginPath(); ctx.moveTo(-S * 0.3, S * 0.4); ctx.lineTo(-S * 0.45, S * 0.75); ctx.lineTo(0, S * 0.4); ctx.stroke(); for (let i = -1; i <= 1; i++) { ctx.beginPath(); ctx.arc(i * S * 0.32, -S * 0.08, S * 0.08, 0, 7); ctx.fill() } }
+  ctx.restore()
+}

src/video/scenes.ts

@@ -0,0 +1,672 @@
+import { TL } from './timelineData'
+import type { Frame, View, OverlayApi } from './engine'
+import { POSE, type SceneState, type Pose } from './model'
+import { baseState, orbit } from './state'
+import { clamp, kf, lerp, lerpArr, ramp, smooth, win, easeOut, noise1, type V3 } from './math'
+import * as O from './overlay'
+
+export const DURATION = TL.total
+export const SHOTS = TL.shots
+export const LINES = TL.lines
+type C = CanvasRenderingContext2D
+
+/* ---------------- helpers ---------------- */
+const shotLines = (i: number) => LINES.filter((l) => l.shot === i).map((l) => ({ ...l, s: l.start - SHOTS[i].start, e: l.start - SHOTS[i].start + l.dur }))
+const SL = SHOTS.map((_, i) => shotLines(i))
+
+const withThumb = (p: Pose, th: number[]) => { const q = [...p]; for (let i = 0; i < 5; i++) q[16 + i] = th[i]; return q }
+const THUMB_FLEX = [-0.08, 0.75, 0.1, 0.9, 0.65]
+const THUMB_EXT = [0.35, -0.1, 0.0, -0.05, -0.05]
+/** thumb flex/extension cycle on top of a base pose */
+function thumbCycle(base: Pose, u: number, hz: number, amp: number, jerky = 0): Pose {
+  let k = 0.5 - 0.5 * Math.cos(u * hz * Math.PI * 2)
+  if (jerky > 0) {
+    // stick–slip: hold then jump
+    const stepK = Math.round(k * 4) / 4
+    k = lerp(k, stepK, jerky) + noise1(u * 13) * 0.04 * jerky
+  }
+  const ext = withThumb(base, THUMB_EXT)
+  const flx = withThumb(base, THUMB_FLEX)
+  return lerpArr(ext, flx, clamp(k * amp + (1 - amp) * 0.35))
+}
+const mixPose = (a: Pose, b: Pose, k: number) => lerpArr(a, b, clamp(k))
+const setW = (p: Pose, flex: number, dev: number, pron = p[2]) => { const q = [...p]; q[0] = flex; q[1] = dev; q[2] = pron; return q }
+const full = (state: SceneState, bg = 'lab'): View[] => [{ rect: [0, 0, 1, 1], state, bg }]
+const painCam = (dist: number, yaw: number, pitch: number, fov = 35) => ({ pos: orbit([0, 0, 0], dist, yaw, pitch), target: [0, 0, 0] as V3, fov, follow: 1 })
+
+/* =========================================================================
+   SHOT 1 · 疼痛开始
+   ========================================================================= */
+function shot1(u: number, d: number, t: number): Frame {
+  const L = SL[0]
+  const a = L[0].s, b = L[1].s
+  // pose
+  let pose: Pose
+  if (u < a - 0.2) pose = thumbCycle(POSE.rest, u, 0.85, 0.9)
+  else pose = mixPose(mixPose(POSE.rest, POSE.fist, smooth(ramp(u, a - 0.2, a + 0.6))), POSE.tuck, smooth(ramp(u, a + 0.55, a + 1.15)))
+  const hit = a + 1.05
+  const painK = smooth(ramp(u, hit, hit + 0.35))
+  // relax after the hit, back to near rest when going inside
+  pose = mixPose(pose, mixPose(POSE.rest, POSE.tuck, 0.25), smooth(ramp(u, b + 0.9, b + 1.6)))
+  const shakeA = Math.max(0, 1 - Math.abs(u - hit - 0.15) / 0.35) * 0.035
+  const shake: V3 = [noise1(u * 40) * shakeA, noise1(u * 37 + 5) * shakeA, 0]
+  const push = smooth(ramp(u, b - 0.25, b + 1.0))
+  const xr = smooth(ramp(u, b + 0.7, b + 1.3))
+  const camWide = { pos: orbit([0, 0.45, 0], lerp(5.6, 4.8, smooth(u / a)), 0.25 - 0.15 * smooth(u / d), 0.08), target: [0, 0.45, 0] as V3, fov: 35 }
+  const state = baseState({
+    time: t, pose, shake,
+    arm: { pos: [0, 0, 0], rot: [0.0, lerp(0.45, 0.95, push), 0.04] },
+    cam: push < 0.001 ? camWide : (() => {
+      const pc = painCam(lerp(4.8, 1.75, push), lerp(0.1, 0.05, push), lerp(0.08, 0.12, push))
+      // blend from hand-centered to pain-follow
+      return { ...pc, follow: push, pos: lerpVec(camWide.pos, pc.pos, push), target: lerpVec(camWide.target, pc.target, push) }
+    })(),
+    pain: painK * (1 - 0.2 * xr),
+    xray: xr, skin: 1,
+    bone: smooth(ramp(u, b + 1.0, b + 1.7)),
+    tendon: smooth(ramp(u, b + 1.25, b + 1.95)),
+    sheath: smooth(ramp(u, b + 1.5, d + 0.4)),
+    friction: 0.0,
+  })
+  return {
+    views: full(state),
+    fade: 1 - smooth(u / 0.8),
+    overlay: (ctx, api) => {
+      const p = api.anchor('pain')
+      O.painBurst(ctx, p.x, p.y, Math.max(0, 1 - Math.abs(u - hit - 0.4) / 1.2) * painK, t)
+      O.reticle(ctx, p.x, p.y, 70, win(u, b, d, 0.3, 0.4) * (1 - xr * 0.5), t, O.COL.red, smooth(ramp(u, b, b + 0.6)))
+      O.bigWord(ctx, '？', p.x + 150, p.y - 150, ramp(u, b + 0.2, b + 0.6) * (1 - ramp(u, b + 1.3, b + 1.6)), O.COL.red, 150)
+      // layer labels
+      const lb = api.anchor('bone'), lt = api.anchor('tendon'), ls = api.anchor('sheath')
+      O.label(ctx, lb.x, lb.y, lb.x + 230, lb.y + 120, '骨骼', ramp(u, b + 1.2, b + 1.5), '#f2e7cf')
+      O.label(ctx, lt.x, lt.y, lt.x + 260, lt.y - 60, '肌腱', ramp(u, b + 1.45, b + 1.75), O.COL.white)
+      O.label(ctx, ls.x, ls.y, ls.x - 230, ls.y - 170, '腱鞘', ramp(u, b + 1.7, b + 2.0), O.COL.cyan)
+    },
+  }
+}
+const lerpVec = (a: V3 | number[], b: V3 | number[], k: number): V3 => [lerp(a[0], b[0], k), lerp(a[1], b[1], k), lerp(a[2], b[2], k)]
+
+/* =========================================================================
+   SHOT 2 · 腱鞘炎到底发生了什么
+   ========================================================================= */
+function shot2(u: number, d: number, t: number): Frame {
+  const L = SL[1]
+  const thick = smooth(ramp(u, L[2].s, L[3].e))
+  const fr = Math.max(0.45 * smooth(ramp(u, L[2].s, L[3].s)), 0.95 * smooth(ramp(u, L[4].s, L[5].s + 0.6)))
+  const jerk = smooth(ramp(u, L[3].s, L[5].s))
+  const pose = thumbCycle(POSE.rest, u, lerp(0.9, 1.1, jerk), lerp(1, 0.7, jerk), jerk)
+  const state = baseState({
+    time: t, pose,
+    arm: { pos: [0, 0, 0], rot: [0.0, lerp(0.95, 0.75, smooth(u / d)), 0.04] },
+    cam: painCam(lerp(1.75, 1.08, easeOut(u / 3)), lerp(0.05, -0.12, smooth(u / d)), 0.12),
+    skin: 0.75, xray: 1, bone: 1, tendon: 1, sheath: 1,
+    focus: smooth(ramp(u, 0, 1.0)), thick, friction: fr,
+    pain: 0.85 * smooth(ramp(u, L[5].s, L[5].s + 0.6)),
+  })
+  return {
+    views: full(state),
+    overlay: (ctx, api) => {
+      const s = api.anchor('sheath'), tn = api.anchor('tendon')
+      O.label(ctx, s.x, s.y, s.x - 200, s.y - 260, '腱鞘 ＝ 小通道', win(u, L[0].s, L[2].s + 0.3), O.COL.cyan)
+      O.label(ctx, tn.x, tn.y, tn.x + 150, tn.y + 200, '肌腱', win(u, L[0].s + 0.4, L[2].s + 0.3), O.COL.white)
+      O.chip(ctx, 540, 1300, '正常：顺畅滑动', { icon: 'check', color: O.COL.green, alpha: win(u, L[1].s, L[2].s + 0.2) })
+      O.crossSection(ctx, 830, 560, 105, thick, fr, smooth(ramp(u, 0.5, 1.0)), t)
+      const k = (i: number) => ramp(u, L[i].s + 0.1, L[i].s + 0.5)
+      O.chip(ctx, 540, 1150, '腱鞘增厚', { icon: 'warn', color: O.COL.yellow, alpha: k(3), scale: 0.8 + 0.2 * easeOut(k(3)) })
+      O.chip(ctx, 540, 1268, '空间变窄', { icon: 'warn', color: '#ff9a3c', alpha: k(4), scale: 0.8 + 0.2 * easeOut(k(4)) })
+      O.chip(ctx, 540, 1386, '活动疼痛', { icon: 'warn', color: O.COL.red, alpha: k(5), scale: 0.8 + 0.2 * easeOut(k(5)) })
+    },
+  }
+}
+
+/* =========================================================================
+   SHOT 3 · 为什么一动就疼  (抓 / 捏 / 拧)
+   ========================================================================= */
+function shot3(u: number, d: number, t: number): Frame {
+  const seg = d / 3
+  const i = Math.min(2, Math.floor(u / seg)), v = u - i * seg
+  const squeeze = 0.5 - 0.5 * Math.cos(v * Math.PI * 2 * 1.3)
+  let pose: Pose, props: SceneState['props'] = {}
+  let twist: { pivot: V3; axis: V3; angle: number } | undefined
+  if (i === 0) { pose = mixPose(POSE.open, POSE.gripBall, smooth(ramp(v, 0, 0.35)) * (0.8 + 0.2 * squeeze)); props = { ball: { vis: smooth(ramp(v, 0, 0.2)) } } }
+  else if (i === 1) { pose = mixPose(POSE.open, POSE.pinch, smooth(ramp(v, 0, 0.35)) * (0.9 + 0.1 * squeeze)); props = { bead: { vis: smooth(ramp(v, 0.25, 0.4)) } } }
+  else {
+    pose = mixPose(POSE.open, POSE.gripBall, smooth(ramp(v, 0, 0.3)))
+    pose = setW(pose, pose[0], pose[1] + 0.25 * squeeze)
+    const ang = -0.8 * squeeze
+    twist = { pivot: [-0.02, 0.6, -0.3], axis: [0, 0, 1], angle: ang }
+    props = { bottle: { vis: smooth(ramp(v, 0, 0.2)), twist: ang } }
+  }
+  const lvl = [0.4, 0.7, 1.0][i]
+  const state = baseState({
+    time: t, pose, props,
+    arm: { pos: [0, 0, 0], rot: [0.05, 0.85, 0.05], twist },
+    cam: { ...painCam(2.5, 0.25, 0.18), pos: orbit([0, 0, 0], 2.5, 0.25, 0.18) },
+    skin: 1, xray: 0.62, bone: 1, tendon: 1, sheath: 1, focus: 0.25,
+    thick: 1, friction: lvl * (0.7 + 0.3 * squeeze), pain: lvl * (0.75 + 0.25 * squeeze),
+  })
+  // camera looks slightly above the pain point so the hand & prop are visible
+  state.cam.target = [0, 0.35, 0]; state.cam.pos = [state.cam.pos[0], state.cam.pos[1] + 0.35, state.cam.pos[2]]
+  return {
+    views: full(state),
+    overlay: (ctx, api) => {
+      const names = ['抓', '捏', '拧'] as const
+      const kinds = ['grab', 'pinch', 'twist'] as const
+      names.forEach((n, k) => {
+        const on = k === i ? 1 : k < i ? 0.55 : 0.3
+        const x = 250 + k * 290, y = 1230
+        ctx.save(); ctx.globalAlpha = on
+        ctx.fillStyle = k === i ? 'rgba(255,59,59,0.22)' : 'rgba(4,14,30,0.7)'
+        ctx.strokeStyle = k === i ? O.COL.red : 'rgba(95,212,255,0.5)'; ctx.lineWidth = k === i ? 5 : 2
+        ctx.beginPath(); ctx.arc(x, y, 92 * (k === i ? 1 + 0.06 * squeeze : 1), 0, 7); ctx.fill(); ctx.stroke()
+        ctx.restore()
+        O.actionIcon(ctx, kinds[k], x, y - 22, 90, k === i ? '#fff' : O.COL.cyan, on)
+        ctx.save(); ctx.globalAlpha = on; ctx.font = `900 46px ${O.FONT}`; ctx.fillStyle = '#fff'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(n, x, y + 48); ctx.restore()
+      })
+      // pain meter
+      const p = api.anchor('pain')
+      O.painBurst(ctx, p.x, p.y, lvl * 0.5 * squeeze, t)
+      const mx = 975, my0 = 520, mh = 480
+      ctx.save()
+      ctx.fillStyle = 'rgba(4,14,30,0.75)'; ctx.fillRect(mx - 20, my0, 40, mh)
+      const fillH = mh * lvl * (0.85 + 0.15 * squeeze)
+      const g = ctx.createLinearGradient(0, my0 + mh, 0, my0); g.addColorStop(0, O.COL.yellow); g.addColorStop(1, O.COL.red)
+      ctx.fillStyle = g; ctx.fillRect(mx - 20, my0 + mh - fillH, 40, fillH)
+      ctx.strokeStyle = 'rgba(255,255,255,0.6)'; ctx.lineWidth = 2; ctx.strokeRect(mx - 20, my0, 40, mh)
+      ctx.font = `800 30px ${O.FONT}`; ctx.fillStyle = '#fff'; ctx.textAlign = 'center'; ctx.fillText('疼痛', mx, my0 + mh + 40)
+      ctx.restore()
+    },
+  }
+}
+
+/* =========================================================================
+   SHOT 4 · 哪些人更容易出现
+   ========================================================================= */
+function shot4(u: number, d: number, t: number): Frame {
+  const L = SL[3]
+  const s0 = L[1].s - 0.05
+  const segD = (d - s0) / 4
+  const intro = u < s0
+  const i = intro ? -1 : Math.min(3, Math.floor((u - s0) / segD))
+  const v = intro ? u : u - s0 - i * segD
+  const words = ['重复用手', '长期抓握', '频繁捏拧', '抱孩子']
+  const icons = ['keyboard', 'tool', 'home', 'baby'] as const
+  let state: SceneState
+  const painFlash = intro ? 0 : smooth(ramp(v, 0.35, 0.6)) * (0.75 + 0.25 * Math.sin(t * 9))
+  if (intro) {
+    state = baseState({
+      time: t, pose: mixPose(POSE.rest, POSE.open, 0.5 + 0.5 * Math.sin(u * 3)),
+      arm: { pos: [0, 0, 0], rot: [0, -0.4 + u * 0.9, 0] },
+      cam: { pos: orbit([0, 0.4, 0], 5.4, 0, 0.1), target: [0, 0.4, 0], fov: 35 },
+    })
+  } else if (i === 0) {
+    const tap = Math.max(0, Math.sin(v * 18))
+    const pose = setW(POSE.mouse, -0.25, 0.1 + 0.18 * Math.sin(v * 5))
+    pose[4] += tap * 0.18
+    state = baseState({
+      time: t, pose,
+      arm: { pos: [0, 0, 0], rot: [-1.25, 0, 0] },
+      props: { keyboard: { vis: 1, x: -1.75, y: 0.7, z: -0.38, rx: Math.PI / 2 } },
+      cam: { pos: [-1.0, 2.4, 2.6], target: [-0.35, 0.15, -0.6], fov: 38 },
+      pain: painFlash,
+    })
+  } else if (i === 1) {
+    const hamK = Math.pow(0.5 + 0.5 * Math.sin(v * 9), 2)
+    state = baseState({
+      time: t, pose: setW(POSE.grip, 0.05, -0.15 + 0.5 * hamK),
+      arm: { pos: [0, 0, 0], rot: [0, 0.85, 0.15] },
+      props: { hammer: { vis: 1 } },
+      cam: { pos: orbit([-0.2, 0.55, 0], 4.2, 0.05, 0.12), target: [-0.2, 0.55, 0], fov: 35 },
+      pain: painFlash,
+    })
+  } else if (i === 2) {
+    const w = Math.sin(v * 6)
+    state = baseState({
+      time: t, pose: setW(POSE.grip, 0.1, 0.15 + 0.15 * w, 0.55 * w),
+      arm: { pos: [0, 0, 0], rot: [0, 0.75, -0.2] },
+      props: { towel: { vis: 1 } },
+      cam: { pos: orbit([0.1, 0.5, 0], 4.4, 0.1, 0.15), target: [0.1, 0.5, 0], fov: 35 },
+      pain: painFlash,
+    })
+  } else {
+    state = baseState({
+      time: t, pose: setW(POSE.baby, -0.25, 0.05 * Math.sin(v * 4)),
+      arm: { pos: [0, -0.1 * Math.sin(v * 3), 0], rot: [1.25, 0.7, 0] },
+      props: { baby: { vis: 1 } },
+      cam: { pos: [1.6, 3.0, 3.6], target: [0.0, 0.35, 0.3], fov: 38 },
+      pain: painFlash,
+    })
+  }
+  return {
+    views: full(state, intro ? 'lab' : 'warm'),
+    overlay: (ctx, api) => {
+      if (!intro && v < 0.14) O.flash(ctx, 0.35 * (1 - v / 0.14))
+      if (intro) {
+        icons.forEach((ic, k) => {
+          const a = ramp(u, 0.2 + k * 0.12, 0.45 + k * 0.12)
+          const x = 195 + k * 230, y = 1230
+          ctx.save(); ctx.globalAlpha = a; ctx.fillStyle = 'rgba(4,14,30,0.75)'; ctx.strokeStyle = O.COL.cyan; ctx.lineWidth = 3
+          ctx.beginPath(); ctx.arc(x, y, 80, 0, 7); ctx.fill(); ctx.stroke(); ctx.restore()
+          O.actionIcon(ctx, ic, x, y, 80, O.COL.cyan, a)
+        })
+        O.bigWord(ctx, '哪些人更容易出现？', 540, 1050, ramp(u, 0.1, 0.5), '#ffffff', 74)
+        return
+      }
+      const p = api.anchor('pain')
+      O.painBurst(ctx, p.x, p.y, painFlash * 0.6, t)
+      // scene counter + keyword
+      ctx.save(); ctx.font = `900 34px ${O.FONT}`; ctx.fillStyle = 'rgba(255,255,255,0.75)'; ctx.textAlign = 'right'
+      ctx.fillText(`0${i + 1} / 04`, 1030, 330); ctx.restore()
+      O.chip(ctx, 540, 1290, words[i], { color: O.COL.red, size: 60, alpha: ramp(v, 0.05, 0.25), scale: 0.85 + 0.15 * easeOut(ramp(v, 0.05, 0.35)), icon: 'dot' })
+      O.actionIcon(ctx, icons[i], 120, 330, 90, O.COL.yellow, 0.9)
+    },
+  }
+}
+
+/* =========================================================================
+   SHOT 5 · 不要一上来就直接治疗
+   ========================================================================= */
+function shot5(u: number, d: number, t: number): Frame {
+  const L = SL[4]
+  const lock = smooth(ramp(u, L[1].s - 0.2, L[1].s + 0.6))
+  const motion = ramp(u, L[2].s, L[2].s + 0.2)
+  const probeK = smooth(ramp(u, L[3].s - 0.1, L[3].s + 0.4))
+  const usK = smooth(ramp(u, L[3].s + 0.5, L[3].s + 1.0))
+  const pose = motion > 0 ? thumbCycle(POSE.rest, u, 1.1, 0.9) : POSE.rest
+  const rotY = lerp(-0.7, 0.9, smooth(ramp(u, 0, L[1].s)))
+  const wide = { pos: orbit([0, 0.35, 0], 4.9, 0, 0.1), target: [0, 0.35, 0] as V3, fov: 35 }
+  const pc = painCam(lerp(4.9, 1.6, lock), 0.05, 0.12)
+  const state = baseState({
+    time: t, pose,
+    arm: { pos: [0, 0, 0], rot: [0.03, rotY, 0.04] },
+    cam: { ...pc, follow: lock, pos: lerpVec(wide.pos, pc.pos, lock), target: lerpVec(wide.target, pc.target, lock) },
+    skin: 1, xray: 0.75, bone: 1, tendon: 1, sheath: 1, thick: 0.8,
+    focus: smooth(ramp(u, L[2].s, L[2].s + 0.5)) * 0.9,
+    friction: 0.6 * motion, pain: 0.55 + 0.3 * lock,
+    props: { probe: { vis: probeK, lift: (1 - probeK) * 0.6 } },
+  })
+  return {
+    views: full(state),
+    overlay: (ctx, api) => {
+      O.chip(ctx, 540, 1180, '直接治疗', { icon: 'cross', color: O.COL.red, alpha: win(u, 0.2, L[1].s + 0.2), strike: ramp(u, 0.9, 1.5) })
+      O.chip(ctx, 540, 1300, '先判断，再治疗', { icon: 'check', color: O.COL.teal, alpha: win(u, 1.2, L[2].s + 0.1) })
+      const p = api.anchor('pain')
+      O.reticle(ctx, p.x, p.y, 90, win(u, L[1].s - 0.1, L[3].s + 0.4), t, O.COL.red, lock)
+      O.label(ctx, p.x, p.y, p.x - 240, p.y - 250, '疼痛位置', win(u, L[1].s + 0.4, L[3].s + 0.4), O.COL.red)
+      // tendon trajectory (animated dashes along tendon path)
+      const tr = win(u, L[2].s, L[3].s + 0.5)
+      if (tr > 0.01) {
+        const a1 = api.anchor('tendon'), a2 = api.anchor('pain'), a3 = api.anchor('thumbBase')
+        ctx.save(); ctx.globalAlpha = tr; ctx.strokeStyle = O.COL.yellow; ctx.lineWidth = 7; ctx.setLineDash([22, 18]); ctx.lineDashOffset = -t * 120
+        ctx.shadowColor = O.COL.yellow; ctx.shadowBlur = 14
+        ctx.beginPath(); ctx.moveTo(a1.x, a1.y); ctx.quadraticCurveTo(a2.x, a2.y, a3.x, a3.y); ctx.stroke(); ctx.restore()
+        O.chip(ctx, 540, 1300, '肌腱活动轨迹', { color: O.COL.yellow, alpha: tr, icon: 'dot' })
+      }
+      O.ultrasound(ctx, 110, 470, 860, 620, t, { alpha: usK, thick: 0.85, labels: ramp(u, L[4].s, L[4].s + 1.2), narrowMark: ramp(u, L[4].s + 0.6, L[4].s + 1.0) })
+    },
+  }
+}
+
+/* =========================================================================
+   SHOT 6 · 常见治疗方法 (四宫格)
+   ========================================================================= */
+function shot6(u: number, d: number, t: number): Frame {
+  const L = SL[5]
+  const act = (k: number) => (u >= L[k].s - 0.1 && (k === 3 || u < L[k + 1].s - 0.1) ? 1 : 0)
+  const prog = (k: number) => clamp((u - L[k].s) / (k === 3 ? d - L[k].s : L[k + 1].s - L[k].s))
+  const y0 = 0.16, ph = 0.3
+  const rects: [number, number, number, number][] = [[0, y0, 0.5, ph], [0.5, y0, 0.5, ph], [0, y0 + ph, 0.5, ph], [0.5, y0 + ph, 0.5, ph]]
+  const cam = (dist: number, tgt: V3, yaw = 0, pitch = 0.1) => ({ pos: orbit(tgt, dist, yaw, pitch), target: tgt, fov: 35 })
+  // 1 减少抓握
+  const p0 = prog(0)
+  const v0 = baseState({ time: t, pose: mixPose(POSE.grip, POSE.open, smooth(ramp(p0, 0.1, 0.5))), arm: { pos: [0, 0, 0], rot: [0, 0.5, 0] }, cam: cam(3.3, [0, 0.55, 0]), pain: 0.5 * (1 - p0) })
+  // 2 支具
+  const p1 = prog(1)
+  const v1 = baseState({ time: t, pose: POSE.rest, arm: { pos: [0, 0, 0], rot: [0, 0.75 + 0.2 * Math.sin(t * 0.8), 0] }, cam: cam(3.5, [0, 0.2, 0]), props: { splint: { vis: smooth(ramp(p1, 0.05, 0.3)) }, splintThumb: { vis: smooth(ramp(p1, 0.05, 0.3)) }, splintPalm: { vis: smooth(ramp(p1, 0.05, 0.3)) } }, pain: 0.4 })
+  // 3 局部治疗示意
+  const p2 = prog(2)
+  const v2 = baseState({ time: t, pose: POSE.rest, arm: { pos: [0, 0, 0], rot: [0, -0.35, 0] }, cam: painCam(1.5, 0.0, 0.1), skin: 1, xray: 0.9, bone: 1, tendon: 1, sheath: 1, thick: 0.9, focus: 0.7, pain: 0.8 * (1 - smooth(ramp(p2, 0.6, 1)) * 0.6), props: { syringe: { vis: smooth(ramp(p2, 0, 0.15)), depth: lerp(0.8, 0.12, smooth(ramp(p2, 0.05, 0.45))), push: smooth(ramp(p2, 0.5, 0.85)) }, cloud: { vis: smooth(ramp(p2, 0.5, 0.7)) * 0.8, r: 0.04 + 0.1 * smooth(ramp(p2, 0.5, 0.9)) } } })
+  // 4 手术松解示意
+  const p3 = prog(3)
+  const rel = smooth(ramp(p3, 0.35, 0.75))
+  const v3 = baseState({ time: t, pose: thumbCycle(POSE.rest, t, 0.8, lerp(0.3, 1, rel)), arm: { pos: [0, 0, 0], rot: [0, 0.85, 0] }, cam: painCam(1.25, 0.05, 0.1), skin: 0.7, xray: 1, bone: 1, tendon: 1, sheath: 1, thick: 1 - 0.8 * rel, friction: 0.8 * (1 - rel), focus: 1, pain: 0.9 * (1 - rel * 0.8), props: { ring: { vis: win(p3, 0.35, 0.8, 0.05, 0.2), r: rel } } })
+  const states = [v0, v1, v2, v3]
+  const titles = ['减少抓握', '支具固定', '局部治疗示意', '手术松解示意']
+  return {
+    views: states.map((s, k) => ({ rect: rects[k], state: s, bg: 'lab' })),
+    overlay: (ctx, api) => {
+      ctx.save(); ctx.fillStyle = '#02060d'; ctx.fillRect(0, 0, 1080, y0 * 1920); ctx.fillRect(0, (y0 + 2 * ph) * 1920, 1080, 1920 - (y0 + 2 * ph) * 1920); ctx.restore()
+      states.forEach((_, k) => {
+        const [rx, ry, rw, rh] = rects[k]
+        O.panel(ctx, rx * 1080, ry * 1920, rw * 1080, rh * 1920, titles[k], k + 1, act(k), act(k) ? 0 : (u >= L[k].s ? 0.35 : 0.7))
+      })
+      // panel 1: no-grip icon
+      const a0 = act(0) ? 1 : 0.5
+      ctx.save(); ctx.globalAlpha = a0; ctx.translate(430, 420); ctx.strokeStyle = O.COL.red; ctx.lineWidth = 7
+      ctx.beginPath(); ctx.arc(0, 0, 52, 0, 7); ctx.stroke(); ctx.beginPath(); ctx.moveTo(-36, -36); ctx.lineTo(36, 36); ctx.stroke(); ctx.restore()
+      O.actionIcon(ctx, 'grab', 430, 420, 60, '#fff', a0)
+      // panel 4 incision dashed line (on sheath)
+      if (act(3)) {
+        const s = api.anchor('pain', 3)
+        ctx.save(); ctx.strokeStyle = '#fff'; ctx.globalAlpha = win(p3, 0.15, 0.6, 0.1, 0.1); ctx.lineWidth = 4; ctx.setLineDash([12, 10])
+        ctx.beginPath(); ctx.moveTo(s.x - 10, s.y - 120); ctx.lineTo(s.x + 10, s.y + 120); ctx.stroke(); ctx.restore()
+      }
+      O.chip(ctx, 540, 1528 - 1528 + 245, '常见处理方式 · 需医生评估', { size: 36, color: O.COL.cyan, alpha: ramp(u, 0, 0.4) })
+    },
+  }
+}
+
+/* =========================================================================
+   SHOT 7 · 重点进入小针刀
+   ========================================================================= */
+function shot7(u: number, d: number, t: number): Frame {
+  const L = SL[6]
+  const depth = u < L[3].s ? lerp(1.7, 0.72, smooth(ramp(u, 0.2, L[1].e))) : lerp(0.72, 0.1, smooth(ramp(u, L[3].s, d - 0.2)))
+  const state = baseState({
+    time: t, pose: POSE.rest,
+    arm: { pos: [0, 0, 0], rot: [0.12, -0.3, 0.0] },
+    cam: painCam(lerp(2.6, 1.35, smooth(ramp(u, 0, L[2].s))), 0.1, 0.06),
+    skin: 1, xray: lerp(0.55, 1, smooth(ramp(u, L[2].s - 0.4, L[2].s + 0.3))), bone: 1, tendon: 1, sheath: 1,
+    thick: 1, friction: 0.5, pain: 0.85, focus: lerp(0.2, 0.8, smooth(ramp(u, L[2].s, L[2].s + 0.5))),
+    props: { knife: { vis: smooth(ramp(u, 0.1, 0.5)), depth } },
+  })
+  return {
+    views: full(state),
+    overlay: (ctx, api) => {
+      O.bigWord(ctx, '小针刀在做什么？', 540, 380, win(u, 0.2, L[1].s, 0.3, 0.3), '#ffffff', 70)
+      O.chip(ctx, 540, 1250, '扎一下就结束', { icon: 'cross', color: O.COL.red, alpha: win(u, L[1].s, L[2].s + 0.2), strike: ramp(u, L[1].s + 0.4, L[1].e) })
+      const n = api.anchor('narrow')
+      O.reticle(ctx, n.x, n.y, 80, win(u, L[2].s, d + 1, 0.3, 0.3), t, O.COL.red, smooth(ramp(u, L[2].s, L[2].s + 0.6)))
+      O.label(ctx, n.x, n.y, n.x + 210, n.y + 230, '狭窄位置', ramp(u, L[2].s + 0.6, L[2].s + 1.0), O.COL.red)
+      const k = api.anchor('knife')
+      O.label(ctx, k.x, k.y, k.x - 40, k.y - 170, '原创器械示意', win(u, 0.8, L[2].s), O.COL.teal, 34)
+      O.chip(ctx, 540, 1300, '精准松解', { icon: 'check', color: O.COL.teal, alpha: ramp(u, L[3].s + 0.8, L[3].s + 1.2), size: 52 })
+    },
+  }
+}
+
+/* =========================================================================
+   SHOT 8 · 小针刀治疗过程
+   ========================================================================= */
+function shot8(u: number, d: number, t: number): Frame {
+  const L = SL[7]
+  const step = u < L[1].s - 0.1 ? 0 : u < L[2].s - 0.1 ? 1 : u < L[3].s - 0.1 ? 2 : 3
+  const sL = [L[0].s, L[1].s, L[2].s, L[3].s]
+  const loc = win(u, 0, L[1].s - 0.05, 0.2, 0.25)
+  const dis = win(u, L[1].s - 0.1, L[2].s, 0.2, 0.25)
+  const ane = win(u, L[2].s - 0.1, L[3].s, 0.2, 0.3)
+  const fin = smooth(ramp(u, L[3].s - 0.2, L[3].s + 0.4))
+  const relK = smooth(ramp(u, L[5].s, L[5].s + 0.9))
+  const xray = step === 0 ? 0.6 : step === 1 ? lerp(0.6, 0.12, smooth(ramp(u, L[1].s - 0.1, L[1].s + 0.3))) : step === 2 ? lerp(0.12, 0.5, smooth(ramp(u, L[2].s, L[2].s + 0.4))) : lerp(0.5, 1, fin)
+  const kDepth = lerp(0.9, 0.0, smooth(ramp(u, L[3].s + 0.3, L[4].e)))
+  const state = baseState({
+    time: t, pose: POSE.rest,
+    arm: { pos: [0, 0, 0], rot: [0.12, -0.3, 0.0] },
+    cam: painCam(step === 3 ? lerp(1.6, 1.2, fin) : 1.6, 0.1, 0.06),
+    skin: 1, xray, bone: 1, tendon: 1, sheath: 1,
+    thick: 1 - 0.7 * relK, friction: 0.5 * (1 - relK), pain: 0.85 - 0.6 * relK, focus: 0.75,
+    slide: relK * Math.sin(t * 5) * 0.03,
+    props: {
+      probe: { vis: Math.max(loc, 0), lift: 0 },
+      locator: { vis: Math.max(loc, step === 3 ? win(u, L[3].s, L[4].e, 0.2, 0.3) * 0.8 : 0) },
+      swab: { vis: dis, r: 0.03 + 0.12 * smooth(ramp(u, L[1].s, L[2].s - 0.2)) },
+      iodine: { vis: Math.max(dis, step >= 2 ? 0.55 * (1 - fin) : 0), r: 0.04 + 0.26 * smooth(ramp(u, L[1].s, L[2].s - 0.2)) },
+      syringe: { vis: ane, depth: lerp(0.7, 0.13, smooth(ramp(u, L[2].s, L[2].s + 0.7))), push: smooth(ramp(u, L[2].s + 0.7, L[3].s - 0.3)) },
+      cloud: { vis: ane * smooth(ramp(u, L[2].s + 0.7, L[2].s + 1.1)) * 0.8, r: 0.03 + 0.1 * smooth(ramp(u, L[2].s + 0.7, L[3].s - 0.2)) },
+      knife: { vis: fin, depth: kDepth, release: relK * (1 - ramp(u, d - 0.3, d)) },
+      ring: { vis: relK > 0.01 ? (0.5 + 0.5 * Math.sin(t * 14)) * win(u, L[5].s, d, 0.1, 0.3) : 0, r: relK },
+    },
+  })
+  return {
+    views: full(state),
+    overlay: (ctx, api) => {
+      const active = step + (step < 3 ? smooth(ramp(u, sL[step + 1] - 0.4, sL[step + 1])) * 0 : 0)
+      O.steps(ctx, ['定位', '消毒', '麻醉', '松解'], active, 1, 330)
+      O.ultrasound(ctx, 190, 520, 700, 400, t, { alpha: loc, thick: 1, locator: ramp(u, 0.2, 0.5), title: '超声定位 · 示意' })
+      const us2 = win(u, L[3].s + 0.3, d, 0.3, 0.3)
+      O.ultrasound(ctx, 620, 520, 400, 240, t, { alpha: us2, thick: 1 - 0.7 * relK, knife: smooth(ramp(u, L[3].s + 0.3, L[4].e)), release: relK, title: '影像引导' })
+      const p = api.anchor('pain')
+      if (step === 0) O.label(ctx, p.x, p.y, p.x - 250, p.y + 230, '目标区域', ramp(u, 0.4, 0.8), '#ffffff')
+      if (step === 1) O.chip(ctx, 540, 1300, '皮肤消毒', { icon: 'check', color: '#e0a050', alpha: dis })
+      if (step === 2) O.chip(ctx, 540, 1300, '局部麻醉（必要时）', { icon: 'dot', color: '#59c8ff', alpha: ane })
+      if (step === 3) {
+        const k = api.anchor('knife'), tn = api.anchor('tendon'), sh = api.anchor('sheath')
+        const la = win(u, L[3].s + 0.6, L[5].s + 0.2, 0.3, 0.3)
+        O.label(ctx, k.x, k.y, k.x - 60, k.y - 150, '器械位置', la, O.COL.teal, 36)
+        O.label(ctx, tn.x, tn.y, tn.x + 200, tn.y + 150, '肌腱位置', la, '#ffffff', 36)
+        O.label(ctx, sh.x, sh.y, sh.x - 200, sh.y + 300, '腱鞘位置', la, O.COL.cyan, 36)
+        const ws = ['精准', '有限', '局部']
+        ws.forEach((w, i) => O.chip(ctx, 290 + i * 250, 1330, w, { color: O.COL.teal, fill: true, size: 50, alpha: ramp(u, L[5].s + 0.1 + i * 0.25, L[5].s + 0.35 + i * 0.25), scale: 0.8 + 0.2 * easeOut(ramp(u, L[5].s + i * 0.25, L[5].s + 0.4 + i * 0.25)) }))
+        if (relK > 0) O.flash(ctx, 0.25 * win(u, L[5].s, L[5].s + 0.3, 0.05, 0.25), '200,255,240')
+      }
+    },
+  }
+}
+
+/* =========================================================================
+   SHOT 9 · 松解前后对比
+   ========================================================================= */
+function shot9(u: number, d: number, t: number): Frame {
+  const L = SL[8]
+  const after = smooth(ramp(u, L[1].s, L[2].e))
+  const base = { arm: { pos: [0, 0, 0] as V3, rot: [0, 0.85, 0.04] as V3 }, cam: painCam(1.35, 0.05, 0.1, 40), skin: 0.7, xray: 1, bone: 1, tendon: 1, sheath: 1, focus: 1, time: t }
+  const left = baseState({ ...base, pose: thumbCycle(POSE.rest, u, 1.0, 0.45, 1), thick: 1, friction: 0.95, pain: 0.95 })
+  const right = baseState({ ...base, pose: thumbCycle(POSE.rest, u, 1.0, lerp(0.45, 1, after), 1 - after), thick: lerp(1, 0.12, after), friction: lerp(0.95, 0, after), pain: lerp(0.95, 0.08, after) })
+  const y0 = 0.15, h = 0.62
+  return {
+    views: [{ rect: [0, y0, 0.5, h], state: left, bg: 'red' }, { rect: [0.5, y0, 0.5, h], state: right, bg: after > 0.5 ? 'clean' : 'lab' }],
+    overlay: (ctx) => {
+      ctx.save(); ctx.fillStyle = '#02060d'; ctx.fillRect(0, 0, 1080, y0 * 1920); ctx.fillRect(0, (y0 + h) * 1920, 1080, 1920); ctx.restore()
+      const yT = y0 * 1920 + 60
+      const lOn = u < L[1].s ? 1 : 0.55, rOn = u >= L[1].s - 0.1 ? 1 : 0.5
+      O.chip(ctx, 270, yT, '治疗前', { color: O.COL.red, size: 48, alpha: lOn, fill: lOn > 0.9 })
+      O.chip(ctx, 810, yT, '治疗后示意', { color: O.COL.teal, size: 48, alpha: rOn, fill: rOn > 0.9 })
+      ctx.save(); const g = ctx.createLinearGradient(0, y0 * 1920, 0, (y0 + h) * 1920); g.addColorStop(0, 'rgba(95,212,255,0)'); g.addColorStop(0.5, 'rgba(95,212,255,0.9)'); g.addColorStop(1, 'rgba(95,212,255,0)')
+      ctx.fillStyle = g; ctx.fillRect(538, y0 * 1920, 4, h * 1920); ctx.restore()
+      const yb = (y0 + h) * 1920 - 70
+      O.chip(ctx, 160, yb, '受限', { color: O.COL.red, size: 38, icon: 'cross', alpha: ramp(u, 0.6, 1.0) })
+      O.chip(ctx, 390, yb, '摩擦', { color: O.COL.red, size: 38, icon: 'warn', alpha: ramp(u, 1.0, 1.4) })
+      O.chip(ctx, 690, yb, '空间改善', { color: O.COL.teal, size: 38, icon: 'check', alpha: ramp(u, L[1].s + 0.3, L[1].s + 0.7) })
+      O.chip(ctx, 940, yb, '更顺畅', { color: O.COL.teal, size: 38, icon: 'check', alpha: ramp(u, L[2].s, L[2].s + 0.4) })
+      O.crossSection(ctx, 270, 1330, 80, 1, 0.95, 0.9, t, '狭窄')
+      O.crossSection(ctx, 810, 1330, 80, lerp(1, 0.12, after), lerp(0.95, 0, after), 0.9, t, '改善')
+    },
+  }
+}
+
+/* =========================================================================
+   SHOT 10 · 从疼痛到恢复
+   ========================================================================= */
+function shot10(u: number, d: number, t: number): Frame {
+  const n = 6, seg = d / n
+  const i = Math.min(n - 1, Math.floor(u / seg)), v = u - i * seg
+  const labels = ['治疗前：活动困难', '早期：轻微活动', '正常抓握', '正常拿杯子', '正常使用手机', '自然活动']
+  const pains = [1, 0.7, 0.45, 0.25, 0.1, 0]
+  const pain = lerp(pains[i], pains[Math.min(n - 1, i + 1)], smooth(ramp(v, seg * 0.6, seg)))
+  let pose: Pose, props: SceneState['props'] = {}
+  let rot: V3 = [0, 0.6, 0.04]
+  let cam = { pos: orbit([0, 0.5, 0], 4.3, 0.05, 0.1), target: [0, 0.5, 0] as V3, fov: 35 }
+  const blendIn = smooth(ramp(v, 0, 0.35))
+  if (i === 0) pose = thumbCycle(POSE.rest, v, 1.4, 0.3, 1)
+  else if (i === 1) pose = thumbCycle(POSE.rest, v, 0.7, 0.6)
+  else if (i === 2) { pose = mixPose(POSE.open, POSE.gripBall, blendIn * (0.85 + 0.15 * Math.sin(v * 6))); props = { ball: { vis: blendIn } } }
+  else if (i === 3) { pose = mixPose(POSE.open, POSE.cup, blendIn); props = { cup: { vis: blendIn } }; rot = [0, 0.5, 0.04 + 0.15 * smooth(ramp(v, 0.4, 1))] }
+  else if (i === 4) { pose = mixPose(POSE.open, POSE.phone, blendIn); pose[17] += 0.25 * Math.max(0, Math.sin(v * 12)); pose[19] += 0.15 * Math.max(0, Math.sin(v * 12)); props = { phone: { vis: blendIn } }; rot = [0.1, -0.25, 0]; cam = { pos: orbit([0, 0.6, 0], 4.1, 0.0, 0.12), target: [0, 0.6, 0], fov: 35 } }
+  else { pose = mixPose(POSE.open, POSE.rest, 0.5 + 0.5 * Math.sin(v * 5)); rot = [0, 0.4 + 0.3 * Math.sin(v * 2), 0.04] }
+  const state = baseState({ time: t, pose, props, arm: { pos: [0, 0, 0], rot }, cam, pain, skin: 1 })
+  return {
+    views: full(state, i >= 3 ? 'clean' : 'lab'),
+    overlay: (ctx, api) => {
+      if (v < 0.12 && i > 0) O.flash(ctx, 0.18 * (1 - v / 0.12))
+      // progress track
+      const y = 1300, x0 = 140, x1 = 940
+      ctx.save()
+      const g = ctx.createLinearGradient(x0, 0, x1, 0); g.addColorStop(0, O.COL.red); g.addColorStop(0.5, O.COL.yellow); g.addColorStop(1, O.COL.green)
+      ctx.strokeStyle = 'rgba(255,255,255,0.18)'; ctx.lineWidth = 10; ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(x0, y); ctx.lineTo(x1, y); ctx.stroke()
+      ctx.strokeStyle = g; ctx.beginPath(); ctx.moveTo(x0, y); ctx.lineTo(x0 + (x1 - x0) * clamp(u / d), y); ctx.stroke()
+      for (let k = 0; k < n; k++) {
+        const x = x0 + (x1 - x0) * k / (n - 1)
+        ctx.fillStyle = k <= i ? '#fff' : 'rgba(255,255,255,0.3)'; ctx.beginPath(); ctx.arc(x, y, k === i ? 16 : 10, 0, 7); ctx.fill()
+      }
+      ctx.restore()
+      O.chip(ctx, 540, 1200, labels[i], { color: i === 0 ? O.COL.red : i < 2 ? O.COL.yellow : O.COL.green, size: 50, alpha: smooth(ramp(v, 0, 0.2)), icon: i === 0 ? 'warn' : 'check' })
+      if (pain > 0.3) { const p = api.anchor('pain'); O.painBurst(ctx, p.x, p.y, (pain - 0.3) * 0.6, t) }
+      ctx.save(); ctx.font = `800 30px ${O.FONT}`; ctx.fillStyle = 'rgba(255,255,255,0.7)'; ctx.textAlign = 'left'; ctx.fillText('疼痛', x0 - 10, y - 34); ctx.textAlign = 'right'; ctx.fillText('功能恢复', x1 + 10, y - 34); ctx.restore()
+    },
+  }
+}
+
+/* =========================================================================
+   SHOT 11 · 最后的记忆点
+   ========================================================================= */
+function shot11(u: number, d: number, t: number): Frame {
+  const L = SL[10]
+  const out = smooth(ramp(u, L[1].s + 0.6, d - 0.3))
+  const pc = painCam(lerp(1.4, 5.4, out), lerp(0.05, 0.0, out), 0.1)
+  const wide = { pos: orbit([0, 0.45, 0], 5.4, 0.0, 0.1), target: [0, 0.45, 0] as V3, fov: 35 }
+  const fol = 1 - out
+  const state = baseState({
+    time: t, pose: mixPose(POSE.rest, POSE.open, out * 0.5),
+    arm: { pos: [0, 0, 0], rot: [0, lerp(0.85, 0.35, out), 0.04] },
+    cam: { ...pc, follow: fol, pos: lerpVec(wide.pos, pc.pos, fol), target: lerpVec(wide.target, pc.target, fol) },
+    skin: 1, xray: 1 - smooth(ramp(u, L[2].s, d - 0.5)), bone: 1, tendon: 1, sheath: 1,
+    thick: lerp(0.7, 0.1, smooth(ramp(u, L[1].s, L[2].s))), pain: 0.75 * (1 - smooth(ramp(u, L[1].s, L[3].s))), focus: 0.4 * (1 - out),
+  })
+  return {
+    views: full(state, u > L[2].s ? 'clean' : 'lab'),
+    overlay: (ctx) => {
+      O.chip(ctx, 540, 1180, '忍住疼', { icon: 'cross', color: O.COL.red, size: 54, alpha: win(u, 0.3, L[1].s + 0.1), strike: ramp(u, L[0].s + 1.4, L[0].e) })
+      O.chip(ctx, 540, 1110, '找到疼痛原因', { icon: 'check', color: O.COL.teal, size: 50, alpha: win(u, L[1].s + 0.1, L[2].s + 0.1) })
+      O.chip(ctx, 540, 1240, '选择合适方式', { icon: 'check', color: O.COL.teal, size: 50, alpha: win(u, L[1].s + 1.1, L[2].s + 0.1) })
+      // slogan
+      const sA = ramp(u, L[3].s - 0.1, L[3].s + 0.4)
+      if (sA > 0) {
+        ctx.save()
+        ctx.globalAlpha = sA * 0.75; ctx.fillStyle = 'rgba(2,8,18,0.7)'; ctx.fillRect(0, 1000, 1080, 330); ctx.restore()
+        O.bigWord(ctx, '手越疼，', 540, 1090, sA, '#ffffff', 96)
+        O.bigWord(ctx, '越不能只靠硬扛。', 540, 1230, ramp(u, L[3].s + 0.35, L[3].s + 0.8), O.COL.yellow, 96)
+      }
+      O.chip(ctx, 540, 960, '记住一句话', { size: 40, color: O.COL.cyan, alpha: win(u, L[2].s, d + 1, 0.2, 0.2) })
+    },
+  }
+}
+
+/* =========================================================================
+   SHOT 12 · 评论区互动
+   ========================================================================= */
+function shot12(u: number, d: number, t: number): Frame {
+  const state = baseState({
+    time: t, pose: mixPose(POSE.open, POSE.rest, 0.5 + 0.5 * Math.sin(u * 2.4)),
+    arm: { pos: [0, 0.15, 0], rot: [0, 0.35 + 0.2 * Math.sin(u * 1.5), 0.04 + 0.08 * Math.sin(u * 3)] },
+    cam: { pos: orbit([0, 0.7, 0], 6.2, 0, 0.1), target: [0, 0.2, 0], fov: 35 },
+  })
+  const items = [['grab', '抓'], ['pinch', '捏'], ['twist', '拧'], ['baby', '抱孩子']] as const
+  return {
+    views: full(state, 'clean'),
+    fade: smooth(ramp(u, d - 0.5, d)),
+    overlay: (ctx) => {
+      const a = smooth(ramp(u, 0.1, 0.5))
+      ctx.save(); ctx.globalAlpha = a
+      ctx.fillStyle = 'rgba(3,12,26,0.86)'; ctx.strokeStyle = O.COL.cyan; ctx.lineWidth = 3
+      ctx.beginPath(); ctx.roundRect(70, 980, 940, 430, 36); ctx.fill(); ctx.stroke()
+      ctx.font = `900 50px ${O.FONT}`; ctx.fillStyle = '#fff'; ctx.textAlign = 'center'
+      ctx.fillText('评论区告诉我', 540, 1060)
+      ctx.font = `800 40px ${O.FONT}`; ctx.fillStyle = '#bfe9ff'
+      ctx.fillText('是抓、捏、拧，还是抱孩子？', 540, 1125)
+      ctx.restore()
+      items.forEach(([ic, w], k) => {
+        const p = ramp(u, 0.6 + k * 0.25, 1.0 + k * 0.25)
+        const x = 200 + k * 227, y = 1265
+        const bob = Math.sin(t * 4 + k) * 6
+        ctx.save(); ctx.globalAlpha = p; ctx.translate(x, y + bob); const sc = 0.6 + 0.4 * easeOut(p); ctx.scale(sc, sc)
+        ctx.fillStyle = 'rgba(95,212,255,0.12)'; ctx.strokeStyle = O.COL.cyan; ctx.lineWidth = 3
+        ctx.beginPath(); ctx.arc(0, 0, 82, 0, 7); ctx.fill(); ctx.stroke(); ctx.restore()
+        O.actionIcon(ctx, ic, x, y - 16 + bob, 70, '#fff', p)
+        ctx.save(); ctx.globalAlpha = p; ctx.font = `900 34px ${O.FONT}`; ctx.fillStyle = '#fff'; ctx.textAlign = 'center'; ctx.fillText(w, x, y + 50 + bob); ctx.restore()
+      })
+      O.actionIcon(ctx, 'comment', 540, 880, 120 * (1 + 0.06 * Math.sin(t * 6)), O.COL.yellow, a)
+    },
+  }
+}
+
+const SHOT_FNS = [shot1, shot2, shot3, shot4, shot5, shot6, shot7, shot8, shot9, shot10, shot11, shot12]
+
+export function shotAt(t: number) {
+  let i = SHOTS.length - 1
+  for (let k = 0; k < SHOTS.length; k++) if (t < SHOTS[k].end) { i = k; break }
+  return i
+}
+
+export function subtitleAt(t: number) {
+  let cur: (typeof LINES)[number] | null = null
+  for (let k = 0; k < LINES.length; k++) {
+    const l = LINES[k]
+    const next = LINES[k + 1]
+    const hold = next ? Math.min(next.start, l.start + l.dur + 0.5) : l.start + l.dur + 0.8
+    if (t >= l.start - 0.05 && t < hold) cur = l
+  }
+  return cur
+}
+
+/** The whole film: pure function of time */
+export function frameAt(t: number): Frame {
+  t = clamp(t, 0, DURATION - 1e-4)
+  const i = shotAt(t)
+  const sh = SHOTS[i]
+  const u = t - sh.start, d = sh.end - sh.start
+  const f = SHOT_FNS[i](u, d, t)
+  const inner = f.overlay
+  const sub = subtitleAt(t)
+  f.overlay = (ctx: C, api: OverlayApi) => {
+    inner?.(ctx, api)
+    // transition flash at shot start
+    if (i > 0 && u < 0.2) O.flash(ctx, 0.22 * (1 - u / 0.2), '180,230,255')
+    O.header(ctx, i + 1, sh.title, i === 0 ? win(u, 0.8, 3.2, 0.4, 0.5) : win(u, 0.05, 2.4, 0.3, 0.5))
+    if (sub) {
+      const a = Math.min(smooth(ramp(t, sub.start - 0.05, sub.start + 0.12)), 1)
+      O.subtitle(ctx, sub.text, a)
+    }
+    O.footer(ctx)
+  }
+  return f
+}
+
+/* ---------------- sound cue list (for the procedural mix) ---------------- */
+export type CueKind = 'whoosh' | 'pain' | 'tick' | 'scan' | 'pop' | 'release' | 'chime' | 'thud' | 'click' | 'swipe'
+export function soundCues(): { t: number; k: CueKind; v?: number }[] {
+  const c: { t: number; k: CueKind; v?: number }[] = []
+  const S = (i: number) => SHOTS[i].start
+  const Ls = (i: number, j: number) => S(i) + SL[i][j].s
+  SHOTS.forEach((s, i) => { if (i > 0) c.push({ t: s.start - 0.15, k: 'whoosh', v: 0.6 }) })
+  // shot 1
+  c.push({ t: Ls(0, 0) + 1.05, k: 'pain', v: 1 }, { t: Ls(0, 1) - 0.2, k: 'whoosh', v: 0.5 }, { t: Ls(0, 1) + 0.7, k: 'scan', v: 0.6 })
+  c.push({ t: Ls(0, 1) + 1.2, k: 'tick' }, { t: Ls(0, 1) + 1.45, k: 'tick' }, { t: Ls(0, 1) + 1.7, k: 'tick' })
+  // shot 2
+  for (const j of [3, 4, 5]) c.push({ t: Ls(1, j) + 0.1, k: 'pop', v: 0.7 })
+  c.push({ t: Ls(1, 5) + 0.1, k: 'pain', v: 0.6 })
+  // shot 3
+  const d3 = SHOTS[2].end - S(2)
+  for (let k = 0; k < 3; k++) { c.push({ t: S(2) + k * d3 / 3 + 0.05, k: 'thud', v: 0.6 + k * 0.2 }); c.push({ t: S(2) + k * d3 / 3 + 0.35, k: 'pain', v: 0.4 + k * 0.25 }) }
+  // shot 4
+  const s0 = S(3) + SL[3][1].s - 0.05, seg4 = (SHOTS[3].end - s0) / 4
+  for (let k = 0; k < 4; k++) { c.push({ t: s0 + k * seg4, k: 'swipe', v: 0.7 }); c.push({ t: s0 + k * seg4 + 0.45, k: 'pain', v: 0.35 }) }
+  // shot 5
+  c.push({ t: Ls(4, 1), k: 'click', v: 0.8 }, { t: Ls(4, 3) + 0.5, k: 'scan', v: 0.8 }, { t: Ls(4, 4), k: 'tick' }, { t: Ls(4, 4) + 0.3, k: 'tick' }, { t: Ls(4, 4) + 0.6, k: 'tick' })
+  // shot 6
+  for (let j = 0; j < 4; j++) c.push({ t: Ls(5, j) - 0.1, k: 'click', v: 0.7 })
+  // shot 7
+  c.push({ t: Ls(6, 1) + 0.4, k: 'pop', v: 0.6 }, { t: Ls(6, 2), k: 'click', v: 0.8 }, { t: Ls(6, 3) + 0.9, k: 'chime', v: 0.5 })
+  // shot 8
+  for (let j = 0; j < 4; j++) c.push({ t: S(7) + SL[7][[0, 1, 2, 3][j]].s, k: 'click', v: 0.9 })
+  c.push({ t: Ls(7, 0) + 0.2, k: 'scan', v: 0.7 }, { t: Ls(7, 5), k: 'release', v: 1 })
+  // shot 9
+  c.push({ t: Ls(8, 1) + 0.3, k: 'release', v: 0.6 })
+  // shot 10
+  const d10 = SHOTS[9].end - S(9)
+  for (let k = 1; k < 6; k++) c.push({ t: S(9) + k * d10 / 6, k: 'tick', v: 0.8 })
+  // shot 11
+  c.push({ t: Ls(10, 0) + 1.4, k: 'pop', v: 0.6 }, { t: Ls(10, 3), k: 'chime', v: 1 })
+  // ending
+  for (let k = 0; k < 4; k++) c.push({ t: S(11) + 0.6 + k * 0.25, k: 'pop', v: 0.5 })
+  return c.sort((a, b) => a.t - b.t)
+}

src/video/state.ts

@@ -0,0 +1,19 @@
+import { POSE, type SceneState } from './model'
+import type { V3 } from './math'
+
+export function baseState(over: Partial<SceneState> = {}): SceneState {
+  return {
+    cam: { pos: [0, 0.2, 5], target: [0, 0.2, 0], fov: 35 },
+    arm: { pos: [0, 0, 0], rot: [0, 0.6, 0] },
+    pose: [...POSE.rest],
+    skin: 1, xray: 0, bone: 0, tendon: 0, sheath: 0, thick: 0, friction: 0, pain: 0,
+    props: {},
+    time: 0,
+    ...over,
+  }
+}
+
+/** camera orbiting helper: spherical around target */
+export function orbit(target: V3, dist: number, yaw: number, pitch: number): V3 {
+  return [target[0] + dist * Math.sin(yaw) * Math.cos(pitch), target[1] + dist * Math.sin(pitch), target[2] + dist * Math.cos(yaw) * Math.cos(pitch)]
+}

src/video/timelineData.ts

@@ -0,0 +1,450 @@
+// generated from public/audio/timeline.json by scripts/gen_tts.py
+export const TL = {
+ "voice": "zh-CN-YunyangNeural",
+ "rate": "+38%",
+ "total": 88.234,
+ "shots": [
+  {
+   "index": 0,
+   "title": "疼痛开始",
+   "start": 0.0,
+   "end": 6.237
+  },
+  {
+   "index": 1,
+   "title": "腱鞘炎到底发生了什么",
+   "start": 6.237,
+   "end": 15.339
+  },
+  {
+   "index": 2,
+   "title": "为什么一动就疼",
+   "start": 15.339,
+   "end": 20.421
+  },
+  {
+   "index": 3,
+   "title": "哪些人更容易出现",
+   "start": 20.421,
+   "end": 26.929
+  },
+  {
+   "index": 4,
+   "title": "不要一上来就直接治疗",
+   "start": 26.929,
+   "end": 34.295
+  },
+  {
+   "index": 5,
+   "title": "常见治疗方法",
+   "start": 34.295,
+   "end": 44.102
+  },
+  {
+   "index": 6,
+   "title": "重点进入小针刀",
+   "start": 44.102,
+   "end": 51.138
+  },
+  {
+   "index": 7,
+   "title": "小针刀治疗过程",
+   "start": 51.138,
+   "end": 61.586
+  },
+  {
+   "index": 8,
+   "title": "松解前后对比",
+   "start": 61.586,
+   "end": 67.382
+  },
+  {
+   "index": 9,
+   "title": "从疼痛到恢复",
+   "start": 67.382,
+   "end": 74.663
+  },
+  {
+   "index": 10,
+   "title": "最后的记忆点",
+   "start": 74.663,
+   "end": 83.494
+  },
+  {
+   "index": 11,
+   "title": "评论区互动",
+   "start": 83.494,
+   "end": 88.234
+  }
+ ],
+ "lines": [
+  {
+   "shot": 0,
+   "text": "手指一弯，手腕一动，",
+   "file": "s01_01.mp3",
+   "start": 2.3,
+   "off": 0.128,
+   "dur": 1.186
+  },
+  {
+   "shot": 0,
+   "text": "这里为什么突然疼？",
+   "file": "s01_02.mp3",
+   "start": 3.586,
+   "off": 0.155,
+   "dur": 0.952
+  },
+  {
+   "shot": 1,
+   "text": "腱鞘，本来像一条小通道，",
+   "file": "s02_01.mp3",
+   "start": 6.387,
+   "off": 0.136,
+   "dur": 1.386
+  },
+  {
+   "shot": 1,
+   "text": "让肌腱顺畅滑动。",
+   "file": "s02_02.mp3",
+   "start": 7.873,
+   "off": 0.156,
+   "dur": 1.098
+  },
+  {
+   "shot": 1,
+   "text": "但长期反复摩擦，",
+   "file": "s02_03.mp3",
+   "start": 9.272,
+   "off": 0.135,
+   "dur": 1.079
+  },
+  {
+   "shot": 1,
+   "text": "腱鞘可能出现肿胀、增厚。",
+   "file": "s02_04.mp3",
+   "start": 10.451,
+   "off": 0.143,
+   "dur": 1.61
+  },
+  {
+   "shot": 1,
+   "text": "通道变得更紧。",
+   "file": "s02_05.mp3",
+   "start": 12.161,
+   "off": 0.172,
+   "dur": 0.914
+  },
+  {
+   "shot": 1,
+   "text": "肌腱经过这里，就会越来越不顺。",
+   "file": "s02_06.mp3",
+   "start": 13.174,
+   "off": 0.159,
+   "dur": 1.765
+  },
+  {
+   "shot": 2,
+   "text": "这时候，你越抓、越捏、越拧，",
+   "file": "s03_01.mp3",
+   "start": 15.489,
+   "off": 0.153,
+   "dur": 1.82
+  },
+  {
+   "shot": 2,
+   "text": "肌腱移动越明显。",
+   "file": "s03_02.mp3",
+   "start": 17.409,
+   "off": 0.135,
+   "dur": 1.013
+  },
+  {
+   "shot": 2,
+   "text": "疼痛，也可能越来越明显。",
+   "file": "s03_03.mp3",
+   "start": 18.522,
+   "off": 0.155,
+   "dur": 1.4
+  },
+  {
+   "shot": 3,
+   "text": "哪些人更容易出现？",
+   "file": "s04_01.mp3",
+   "start": 20.571,
+   "off": 0.168,
+   "dur": 0.993
+  },
+  {
+   "shot": 3,
+   "text": "长期重复用手的人。",
+   "file": "s04_02.mp3",
+   "start": 21.664,
+   "off": 0.147,
+   "dur": 1.19
+  },
+  {
+   "shot": 3,
+   "text": "经常抓握、捏、拧的人。",
+   "file": "s04_03.mp3",
+   "start": 22.954,
+   "off": 0.144,
+   "dur": 1.53
+  },
+  {
+   "shot": 3,
+   "text": "还有部分需要频繁抱孩子的新手妈妈。",
+   "file": "s04_04.mp3",
+   "start": 24.584,
+   "off": 0.141,
+   "dur": 2.046
+  },
+  {
+   "shot": 4,
+   "text": "出现疼痛，不是马上做一种治疗。",
+   "file": "s05_01.mp3",
+   "start": 27.079,
+   "off": 0.142,
+   "dur": 1.873
+  },
+  {
+   "shot": 4,
+   "text": "先判断位置。",
+   "file": "s05_02.mp3",
+   "start": 29.052,
+   "off": 0.133,
+   "dur": 0.747
+  },
+  {
+   "shot": 4,
+   "text": "看活动时哪里疼。",
+   "file": "s05_03.mp3",
+   "start": 29.899,
+   "off": 0.144,
+   "dur": 1.053
+  },
+  {
+   "shot": 4,
+   "text": "必要时结合检查，",
+   "file": "s05_04.mp3",
+   "start": 31.052,
+   "off": 0.145,
+   "dur": 0.988
+  },
+  {
+   "shot": 4,
+   "text": "判断到底是哪一种腱鞘问题。",
+   "file": "s05_05.mp3",
+   "start": 32.14,
+   "off": 0.163,
+   "dur": 1.754
+  },
+  {
+   "shot": 5,
+   "text": "症状比较轻，可以先减少诱发动作。",
+   "file": "s06_01.mp3",
+   "start": 34.445,
+   "off": 0.155,
+   "dur": 1.964
+  },
+  {
+   "shot": 5,
+   "text": "必要时使用支具，配合止痛、抗炎等处理。",
+   "file": "s06_02.mp3",
+   "start": 36.509,
+   "off": 0.146,
+   "dur": 2.465
+  },
+  {
+   "shot": 5,
+   "text": "症状持续，还可以考虑局部注射等方法。",
+   "file": "s06_03.mp3",
+   "start": 39.073,
+   "off": 0.155,
+   "dur": 2.213
+  },
+  {
+   "shot": 5,
+   "text": "少数长���不缓解的情况，可能需要手术松解。",
+   "file": "s06_04.mp3",
+   "start": 41.386,
+   "off": 0.141,
+   "dur": 2.415
+  },
+  {
+   "shot": 6,
+   "text": "那小针刀，到底是在做什么？",
+   "file": "s07_01.mp3",
+   "start": 44.252,
+   "off": 0.163,
+   "dur": 1.581
+  },
+  {
+   "shot": 6,
+   "text": "不是“扎一下就结束”。",
+   "file": "s07_02.mp3",
+   "start": 45.933,
+   "off": 0.148,
+   "dur": 1.022
+  },
+  {
+   "shot": 6,
+   "text": "核心是：找到狭窄的位置，",
+   "file": "s07_03.mp3",
+   "start": 47.055,
+   "off": 0.168,
+   "dur": 1.418
+  },
+  {
+   "shot": 6,
+   "text": "对增厚、卡压的区域进行精准松解。",
+   "file": "s07_04.mp3",
+   "start": 48.573,
+   "off": 0.153,
+   "dur": 2.165
+  },
+  {
+   "shot": 7,
+   "text": "先定位。",
+   "file": "s08_01.mp3",
+   "start": 51.238,
+   "off": 0.132,
+   "dur": 0.427
+  },
+  {
+   "shot": 7,
+   "text": "再进行消毒。",
+   "file": "s08_02.mp3",
+   "start": 52.465,
+   "off": 0.141,
+   "dur": 0.764
+  },
+  {
+   "shot": 7,
+   "text": "必要时进行局部麻醉。",
+   "file": "s08_03.mp3",
+   "start": 54.129,
+   "off": 0.147,
+   "dur": 1.419
+  },
+  {
+   "shot": 7,
+   "text": "随后在影像或规范定位辅助下，",
+   "file": "s08_04.mp3",
+   "start": 56.248,
+   "off": 0.134,
+   "dur": 1.828
+  },
+  {
+   "shot": 7,
+   "text": "让器械到达目标区域。",
+   "file": "s08_05.mp3",
+   "start": 58.176,
+   "off": 0.152,
+   "dur": 1.206
+  },
+  {
+   "shot": 7,
+   "text": "进行松解。",
+   "file": "s08_06.mp3",
+   "start": 59.882,
+   "off": 0.142,
+   "dur": 0.604
+  },
+  {
+   "shot": 8,
+   "text": "松解前，肌腱经过狭窄区域时，明显受限。",
+   "file": "s09_01.mp3",
+   "start": 61.736,
+   "off": 0.136,
+   "dur": 2.51
+  },
+  {
+   "shot": 8,
+   "text": "松解后，通道空间改善。",
+   "file": "s09_02.mp3",
+   "start": 64.346,
+   "off": 0.145,
+   "dur": 1.359
+  },
+  {
+   "shot": 8,
+   "text": "肌腱活动更顺畅。",
+   "file": "s09_03.mp3",
+   "start": 65.805,
+   "off": 0.139,
+   "dur": 1.077
+  },
+  {
+   "shot": 9,
+   "text": "疼痛改善，不代表马上就能过度使用。",
+   "file": "s10_01.mp3",
+   "start": 67.532,
+   "off": 0.146,
+   "dur": 2.072
+  },
+  {
+   "shot": 9,
+   "text": "治疗之后，还要根据情况逐步恢复活动。",
+   "file": "s10_02.mp3",
+   "start": 69.703,
+   "off": 0.146,
+   "dur": 2.27
+  },
+  {
+   "shot": 9,
+   "text": "减少再次刺激。",
+   "file": "s10_03.mp3",
+   "start": 72.074,
+   "off": 0.129,
+   "dur": 0.928
+  },
+  {
+   "shot": 9,
+   "text": "让手部功能慢慢回来。",
+   "file": "s10_04.mp3",
+   "start": 73.102,
+   "off": 0.139,
+   "dur": 1.261
+  },
+  {
+   "shot": 10,
+   "text": "所以腱鞘炎，真正要解决的不是“忍住疼”。",
+   "file": "s11_01.mp3",
+   "start": 74.813,
+   "off": 0.151,
+   "dur": 2.365
+  },
+  {
+   "shot": 10,
+   "text": "而是找到疼痛的原因，选择合适的治疗方式。",
+   "file": "s11_02.mp3",
+   "start": 77.278,
+   "off": 0.268,
+   "dur": 2.484
+  },
+  {
+   "shot": 10,
+   "text": "记住一句话：",
+   "file": "s11_03.mp3",
+   "start": 79.862,
+   "off": 0.147,
+   "dur": 0.576
+  },
+  {
+   "shot": 10,
+   "text": "手越疼，越不能只靠硬扛。",
+   "file": "s11_04.mp3",
+   "start": 80.788,
+   "off": 0.148,
+   "dur": 1.606
+  },
+  {
+   "shot": 11,
+   "text": "你是哪个动作一做，手腕或者手指就开始疼？",
+   "file": "s12_01.mp3",
+   "start": 83.644,
+   "off": 0.147,
+   "dur": 2.29
+  }
+ ]
+} as const