kasaframe 0.1.1 → 0.1.4

package/themes/conveyor-factory/effects.ts

@@ -0,0 +1,744 @@
+// 테마 conveyor-factory 전용 효과 — 요청이 토큰 상자로 컨베이어를 타고 흐르고, 프레스(모델)가 찍어 낸다. 처리량 = 벨트 속도.
+// 입체 테마: factoryStage 가 무대를 만들고 나머지(rig)는 stage.add(…) 로 얹는다. 카메라·빛·물체 자리는 전부 t 로 — 앞 프레임 상태를 쌓지 않는다.
+import { clamp, ease, rand, randRange, toEase, type EaseName, type SceneCtx } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { roundRectShape, stage3d, textPlane, THREE, type Stage3D } from "@kasaframe/themes/stage3d";
+
+export type { SceneCtx };
+
+type V3 = [number, number, number];
+
+const col = (ctx: SceneCtx, k: string) => new THREE.Color(ctx.style.colors[k] ?? k);
+const mat = (ctx: SceneCtx, k: string, rough = 0.7, metal = 0) => new THREE.MeshStandardMaterial({ color: col(ctx, k), roughness: rough, metalness: metal });
+const shade = <T extends THREE.Mesh>(m: T): T => {
+  m.castShadow = true;
+  m.receiveShadow = true;
+  return m;
+};
+const boxGeo = (w: number, h: number, d: number) => {
+  const g = new THREE.BoxGeometry(w, h, d);
+  g.translate(0, h / 2, 0);
+  return g;
+};
+// 기계가 바닥에서 솟아 서는 한 손 — 살짝 넘쳤다 앉는다
+const rise = (t: number, at: number, dur = 0.3) => (t < at ? 0 : ease.outBack(clamp((t - at) / dur)));
+
+/**
+ * 글이 t 로 바뀌는 판 — 나올 글을 지을 때 다 모아 한 번씩 그려 두고 t 마다 하나만 켠다.
+ * 바뀔 때마다 캔버스에 다시 그리면 같은 t 라도 거쳐 온 시각에 따라 그리기가 달라진다(검사가 같은 프레임을 두 번 찍어 본다)
+ */
+function textSet(text: string | ((t: number) => string), make: (s: string) => THREE.Mesh): { all: Map<string, THREE.Mesh>; at(t: number): string } {
+  const fn = typeof text === "function" ? text : () => text;
+  const all = new Map<string, THREE.Mesh>();
+  for (let t = -1; t <= 120; t += 0.02) {
+    const s = fn(t);
+    if (!all.has(s)) all.set(s, make(s));
+  }
+  return { all, at: fn };
+}
+
+export interface FactoryKey {
+  t: number;
+  pos: V3;
+  look: V3;
+  fov?: number;
+  /** 앞 키에서 이 키로 오는 이징. 기본 inOutCubic */
+  ease?: EaseName;
+}
+
+export interface FactoryShot {
+  from: number;
+  to: number;
+  /** 키 사이는 움직이고 키에서 선다 — 쉬지 않는 몫은 벨트·상자·프레스가 진다 */
+  keys: FactoryKey[];
+}
+
+function keyAt(t: number, keys: FactoryKey[]): { pos: V3; look: V3; fov: number } {
+  const ks = [...keys].sort((a, b) => a.t - b.t);
+  const at = (k: FactoryKey) => ({ pos: k.pos, look: k.look, fov: k.fov ?? 42 });
+  if (t <= ks[0].t) return at(ks[0]);
+  for (let i = 1; i < ks.length; i++) {
+    if (t >= ks[i].t) continue;
+    const [a, b] = [at(ks[i - 1]), at(ks[i])];
+    const u = toEase(ks[i].ease ?? "inOutCubic")((t - ks[i - 1].t) / Math.max(1e-6, ks[i].t - ks[i - 1].t));
+    const mix = (p: V3, q: V3) => [0, 1, 2].map((j) => p[j] + (q[j] - p[j]) * u) as V3;
+    return { pos: mix(a.pos, b.pos), look: mix(a.look, b.look), fov: a.fov + (b.fov - a.fov) * u };
+  }
+  return at(ks[ks.length - 1]);
+}
+
+/**
+ * 공장 무대 — 원근 3/4 시점, 머리 위 조명 하나의 선명한 그림자, 먼 곳은 어둠으로 빠진다. 바닥은 그늘진 콘크리트.
+ * 컷마다 다른 라인을 보고(라인은 서로 멀리 떨어뜨려 둔다), 카메라는 키로만 움직인다
+ */
+export function factoryStage(el: HTMLElement, o: { ctx: SceneCtx; shots: FactoryShot[]; fog?: [number, number] }): ((t: number) => void) & Stage3D {
+  const { ctx } = o;
+  const shots = [...o.shots].sort((a, b) => a.from - b.from);
+  const shotAt = (t: number) => shots.find((x) => t >= x.from && t < x.to) ?? shots[shots.length - 1];
+  const stage = stage3d(el, {
+    ctx,
+    camera: "perspective",
+    fov: 42,
+    background: ctx.style.colors.bg,
+    fog: o.fog ?? [26, 70],
+    env: true,
+    exposure: 1.05,
+    shot(t, cam) {
+      const k = keyAt(t, shotAt(t).keys);
+      const c = cam as THREE.PerspectiveCamera;
+      c.position.set(...k.pos);
+      c.lookAt(new THREE.Vector3(...k.look));
+      if (c.fov !== k.fov) {
+        c.fov = k.fov;
+        c.updateProjectionMatrix();
+      }
+    },
+  });
+  stage.scene.environmentIntensity = 0.35;
+  stage.scene.add(new THREE.HemisphereLight(0xc9d3e0, 0x24201c, 0.85));
+  const key = new THREE.DirectionalLight(0xfff0d8, 2.4);
+  key.castShadow = true;
+  key.shadow.mapSize.set(1024, 1024);
+  const sc = key.shadow.camera as THREE.OrthographicCamera;
+  Object.assign(sc, { left: -22, right: 22, top: 22, bottom: -22, near: 1, far: 90 });
+  key.shadow.bias = -0.0006;
+  stage.scene.add(key, key.target);
+  const floor = new THREE.Mesh(new THREE.PlaneGeometry(600, 600), mat(ctx, "floor", 0.92));
+  floor.rotation.x = -Math.PI / 2;
+  floor.receiveShadow = true;
+  stage.scene.add(floor);
+  // 조명과 그림자 상자가 지금 컷의 라인을 따라간다 — 라인이 멀리 떨어져 있어도 그림자가 선다
+  const follow = (t: number) => {
+    const [x, y, z] = shotAt(t).keys[0].look;
+    key.position.set(x - 8, y + 26, z + 12);
+    key.target.position.set(x, y, z);
+    key.target.updateMatrixWorld();
+  };
+  return Object.assign((t: number) => {
+    follow(t);
+    stage.paint(t);
+  }, stage);
+}
+
+/** 빠르기(초당 세계 단위) — 수거나 from→to 로 오르는 경사(처리량이 오른다) */
+export type Speed = number | { from: number; to: number; at: number; dur: number };
+
+/** t 까지 벨트가 간 거리 — 경사도 닫힌 식으로 적분한다(같은 t 면 같은 자리) */
+function travel(t: number, s: Speed, start = 0): number {
+  const u = Math.max(0, t - start);
+  if (typeof s === "number") return s * u;
+  const a = Math.max(0, s.at - start);
+  const b = a + s.dur;
+  if (u <= a) return s.from * u;
+  if (u <= b) {
+    const k = (u - a) / s.dur;
+    return s.from * a + s.from * (u - a) + ((s.to - s.from) * s.dur * k * k) / 2;
+  }
+  return s.from * a + ((s.from + s.to) / 2) * s.dur + s.to * (u - b);
+}
+
+export interface ConveyorOpts {
+  ctx: SceneCtx;
+  from: V3;
+  to: V3;
+  width?: number;
+  /** 벨트 윗면 높이 */
+  height?: number;
+  speed?: Speed;
+  /** 바닥에서 솟아 서는 시각 */
+  at?: number;
+  /** 벨트가 돌기 시작하는 시각(그 전엔 서 있다) */
+  run?: number;
+  /** 옆 바닥에 노란 차선 */
+  lanes?: boolean;
+}
+
+/** 컨베이어 — 강철 레일·다리·양끝 롤러와 가로 골이 난 고무 벨트. 골이 speed 로 흐른다(처리량 = 벨트 속도). 옆 바닥엔 노란 차선 */
+export function conveyor(stage: Stage3D, o: ConveyorOpts): (t: number) => void {
+  const { ctx } = o;
+  const W = o.width ?? 1.4;
+  const H = o.height ?? 0.9;
+  const a = new THREE.Vector3(...o.from);
+  const b = new THREE.Vector3(...o.to);
+  const L = a.distanceTo(b);
+  const group = new THREE.Group();
+  group.position.copy(a);
+  group.rotation.y = -Math.atan2(b.z - a.z, b.x - a.x);
+  const steel = mat(ctx, "steel", 0.45, 0.8);
+  const belt = shade(new THREE.Mesh(boxGeo(L, 0.08, W), mat(ctx, "belt", 0.95)));
+  belt.position.set(L / 2, H - 0.08, 0);
+  const railGeo = boxGeo(L + 0.3, 0.22, 0.1);
+  for (const s of [-1, 1]) {
+    const rail = shade(new THREE.Mesh(railGeo, steel));
+    rail.position.set(L / 2, H - 0.14, s * (W / 2 + 0.05));
+    group.add(rail);
+  }
+  const legN = Math.max(2, Math.round(L / 2.2) + 1);
+  const legs = new THREE.InstancedMesh(boxGeo(0.1, H - 0.14, 0.1), steel, legN * 2);
+  legs.castShadow = true;
+  const m4 = new THREE.Matrix4();
+  for (let i = 0; i < legN; i++) {
+    for (const [j, s] of [[0, -1], [1, 1]] as const) {
+      m4.makeTranslation((L * i) / (legN - 1), 0, s * (W / 2 - 0.05));
+      legs.setMatrixAt(i * 2 + j, m4);
+    }
+  }
+  const rollerGeo = new THREE.CylinderGeometry(0.16, 0.16, W + 0.06, 14);
+  rollerGeo.rotateX(Math.PI / 2);
+  const rollers = [0, L].map((x) => {
+    const r = shade(new THREE.Mesh(rollerGeo, steel));
+    r.position.set(x, H - 0.16, 0);
+    group.add(r);
+    return r;
+  });
+  // 가로 골 — 벨트가 도는 빠르기를 보인다. 골 간격 0.45
+  const gap = 0.45;
+  const ribN = Math.floor(L / gap);
+  const ribs = new THREE.InstancedMesh(new THREE.BoxGeometry(0.07, 0.025, W * 0.92), mat(ctx, "line", 0.8), ribN);
+  group.add(belt, legs, ribs);
+  if (o.lanes !== false) {
+    const lane = new THREE.MeshStandardMaterial({ color: col(ctx, "accent"), roughness: 0.8, emissive: col(ctx, "accent"), emissiveIntensity: 0.12 });
+    for (const s of [-1, 1]) {
+      const m = new THREE.Mesh(new THREE.PlaneGeometry(L + 1.2, 0.12), lane);
+      m.rotation.x = -Math.PI / 2;
+      m.position.set(L / 2, 0.012, s * (W / 2 + 0.75));
+      m.receiveShadow = true;
+      group.add(m);
+    }
+  }
+  stage.scene.add(group);
+  const speed = o.speed ?? 1.6;
+  const at = o.at ?? -1;
+  const run = o.run ?? at;
+  return (t) => {
+    const k = rise(t, at, 0.35);
+    group.visible = k > 0.001;
+    group.scale.set(1, Math.max(0.001, k), 1);
+    const d = travel(t, speed, run);
+    const off = d % gap;
+    for (let i = 0; i < ribN; i++) {
+      m4.makeTranslation(i * gap + off, H - 0.0, 0);
+      ribs.setMatrixAt(i, m4);
+    }
+    ribs.instanceMatrix.needsUpdate = true;
+    for (const r of rollers) r.rotation.z = -d / 0.16;
+  };
+}
+
+export interface TokenFlowOpts {
+  ctx: SceneCtx;
+  /** 상자가 지나는 꺾은선(세계 좌표, 벨트 윗면 높이) — 여럿이면 route 로 고른다 */
+  paths: V3[][];
+  /** 상자가 첫 점에 오르는 시각들 */
+  spawn: number[];
+  route?: (i: number) => number;
+  speed?: Speed;
+  size?: number;
+  /** 상자 앞면 라벨 — 찍히기 전(labelAt 거리 앞)엔 비어 있다 */
+  label?: (i: number) => string | null;
+  /** 이 거리(길 위)를 지나면 라벨이 찍혀 있다 — 프레스 자리 */
+  labelAt?: number;
+  /** 찍히기 전 라벨 — 프레스를 지나며 label 로 바뀐다(정가 → 밤 값처럼) */
+  pre?: (i: number) => string | null;
+  /** 라벨 칠 — accent 면 노란 띠 */
+  tone?: "plain" | "accent";
+  /** 이 시각 전엔 상자를 감춘다(벨트가 솟아 서는 동안) — 벨트에 미리 실려 있던 상자가 벨트와 함께 나타난다 */
+  from?: number;
+}
+
+/** 토큰 상자 — 요청 하나가 크라프트 상자 하나. 길을 따라 벨트 빠르기로 흐르고, 프레스 자리를 지나면 앞면에 라벨(모델 ID·값)이 찍혀 있다 */
+export function tokenFlow(stage: Stage3D, o: TokenFlowOpts): ((t: number) => void) & { arrive(d: number): number[] } {
+  const { ctx } = o;
+  const S = o.size ?? 0.8;
+  const speed = o.speed ?? 1.6;
+  const route = o.route ?? (() => 0);
+  const kraft = mat(ctx, "kraft", 0.85);
+  const tape = mat(ctx, "tape", 0.7);
+  const bodyGeo = boxGeo(S, S * 0.72, S);
+  const tapeGeo = boxGeo(S * 0.22, 0.02, S * 1.01);
+  const lines = o.paths.map((p) => {
+    const seg = p.slice(1).map((q, i) => Math.hypot(q[0] - p[i][0], q[1] - p[i][1], q[2] - p[i][2]));
+    return { p, seg, len: seg.reduce((x, y) => x + y, 0) };
+  });
+  const posAt = (line: (typeof lines)[number], d: number): { x: number; y: number; z: number; ang: number } => {
+    let left = d;
+    for (let i = 0; i < line.seg.length; i++) {
+      if (left <= line.seg[i] || i === line.seg.length - 1) {
+        const [p, q] = [line.p[i], line.p[i + 1]];
+        const k = clamp(left / (line.seg[i] || 1));
+        return { x: p[0] + (q[0] - p[0]) * k, y: p[1] + (q[1] - p[1]) * k, z: p[2] + (q[2] - p[2]) * k, ang: -Math.atan2(q[2] - p[2], q[0] - p[0]) };
+      }
+      left -= line.seg[i];
+    }
+    const e = line.p[line.p.length - 1];
+    return { x: e[0], y: e[1], z: e[2], ang: 0 };
+  };
+  const boxes = o.spawn.map((s, i) => {
+    const g = new THREE.Group();
+    g.add(shade(new THREE.Mesh(bodyGeo, kraft)));
+    const tp = new THREE.Mesh(tapeGeo, tape);
+    tp.position.y = S * 0.72;
+    g.add(tp);
+    const sticker = (text: string | null, accent: boolean): THREE.Object3D | null => {
+      if (!text) return null;
+      const tp2 = textPlane({ text, family: ctx.style.fonts.mono, weight: 600, color: ctx.style.colors.onAccent, height: S * 0.2, px: 96, plate: accent ? ctx.style.colors.accent : ctx.style.colors.ink, pad: 18 });
+      // 라벨이 상자보다 길면 상자 앞면 폭에 맞춰 줄인다
+      const k = Math.min(1, (S * 0.94) / tp2.geometry.parameters.width);
+      tp2.scale.set(k, k, 1);
+      tp2.position.set(0, S * 0.36, S / 2 + 0.006);
+      g.add(tp2);
+      return tp2;
+    };
+    const tag = sticker(o.label?.(i) ?? null, o.tone === "accent");
+    const before = sticker(o.pre?.(i) ?? null, false);
+    stage.scene.add(g);
+    return { g, s, line: lines[Math.min(lines.length - 1, route(i))], tag, before };
+  });
+  const labelAt = o.labelAt ?? -1;
+  const from = o.from ?? -1e9;
+  const paint = (t: number) => {
+    for (const bx of boxes) {
+      const d = travel(t, speed, bx.s);
+      const on = t >= bx.s && t >= from && d <= bx.line.len;
+      bx.g.visible = on;
+      if (!on) continue;
+      const p = posAt(bx.line, d);
+      // 처음 오를 때 위에서 툭 떨어져 앉는다
+      const drop = Math.max(0, 1 - (t - bx.s) / 0.18);
+      bx.g.position.set(p.x, p.y + drop * drop * 0.9, p.z);
+      bx.g.rotation.y = p.ang;
+      if (bx.tag) bx.tag.visible = d >= labelAt;
+      if (bx.before) bx.before.visible = d < labelAt;
+    }
+  };
+  // 상자가 길 위 거리 d 에 닿는 시각들 — 프레스가 그 박에 내려찍게
+  const arrive = (d: number) =>
+    boxes.map((bx) => {
+      let lo = bx.s;
+      let hi = bx.s + 60;
+      for (let k = 0; k < 40; k++) {
+        const mid = (lo + hi) / 2;
+        if (travel(mid, speed, bx.s) < d) lo = mid;
+        else hi = mid;
+      }
+      return hi;
+    });
+  return Object.assign(paint, { arrive });
+}
+
+export interface BoxStackOpts {
+  ctx: SceneCtx;
+  pos: V3;
+  /** 상자 수 = 숫자 */
+  count: number;
+  at: number;
+  /** 상자 하나가 내려앉는 간격 */
+  every?: number;
+  /** 한 층에 놓는 상자 [가로, 세로] */
+  grid?: [number, number];
+  size?: number;
+  /** 더미 위 간판 글(숫자) */
+  label?: string;
+  seed?: string;
+}
+
+/** 상자 더미 — 팔레트 위에 상자가 하나씩 내려앉아 쌓인다. 높이가 곧 숫자. 다 쌓이면 위에 스텐실 숫자판 */
+export function boxStack(stage: Stage3D, o: BoxStackOpts): (t: number) => void {
+  const { ctx } = o;
+  const S = o.size ?? 0.42;
+  const [gx, gz] = o.grid ?? [2, 2];
+  const per = gx * gz;
+  const every = o.every ?? 0.02;
+  const pallet = shade(new THREE.Mesh(boxGeo(gx * S + 0.2, 0.14, gz * S + 0.2), mat(ctx, "tape", 0.9)));
+  pallet.position.set(...o.pos);
+  stage.scene.add(pallet);
+  const boxes = new THREE.InstancedMesh(boxGeo(S * 0.94, S * 0.9, S * 0.94), mat(ctx, "kraft", 0.85), o.count);
+  boxes.castShadow = true;
+  boxes.receiveShadow = true;
+  stage.scene.add(boxes);
+  const seed = o.seed ?? `stack:${o.pos.join(",")}`;
+  const cells = Array.from({ length: o.count }, (_, i) => {
+    const layer = Math.floor(i / per);
+    const c = i % per;
+    return {
+      x: o.pos[0] + ((c % gx) - (gx - 1) / 2) * S + randRange(seed, i, -0.02, 0.02),
+      y: o.pos[1] + 0.14 + layer * S * 0.9,
+      z: o.pos[2] + (Math.floor(c / gx) - (gz - 1) / 2) * S + randRange(seed, i + 500, -0.02, 0.02),
+      r: randRange(seed, i + 900, -0.06, 0.06),
+    };
+  });
+  const topY = o.pos[1] + 0.14 + Math.ceil(o.count / per) * S * 0.9;
+  let sign: THREE.Mesh | null = null;
+  if (o.label) {
+    sign = textPlane({ text: o.label, family: ctx.style.fonts.display, weight: 400, color: ctx.style.colors.onAccent, height: 0.5, px: 140, plate: ctx.style.colors.accent, pad: 22 });
+    sign.position.set(o.pos[0], topY + 0.55, o.pos[2] + (gz * S) / 2);
+    stage.scene.add(sign);
+  }
+  const m4 = new THREE.Matrix4();
+  const q = new THREE.Quaternion();
+  const one = new THREE.Vector3(1, 1, 1);
+  const zero = new THREE.Vector3(0, 0, 0);
+  return (t) => {
+    pallet.visible = t >= o.at - 0.1;
+    for (let i = 0; i < o.count; i++) {
+      const born = o.at + i * every;
+      const c = cells[i];
+      if (t < born) {
+        m4.compose(new THREE.Vector3(c.x, c.y, c.z), q, zero);
+      } else {
+        const k = clamp((t - born) / 0.16);
+        const fall = (1 - k) ** 2 * 1.2;
+        q.setFromAxisAngle(new THREE.Vector3(0, 1, 0), c.r);
+        m4.compose(new THREE.Vector3(c.x, c.y + fall, c.z), q, one);
+      }
+      boxes.setMatrixAt(i, m4);
+    }
+    boxes.instanceMatrix.needsUpdate = true;
+    if (sign) {
+      const done = o.at + o.count * every;
+      const k = rise(t, done, 0.3);
+      sign.visible = k > 0.001;
+      sign.scale.setScalar(Math.max(0.001, k));
+    }
+  };
+}
+
+export interface StampPressOpts {
+  ctx: SceneCtx;
+  /** 벨트 위 자리(프레스 가운데 바닥) */
+  pos: V3;
+  /** 벨트 방향을 세로축으로 돈 각 */
+  rotation?: number;
+  width?: number;
+  /** 내려찍는 시각들 — tokenFlow.arrive(거리) 를 주면 상자가 닿는 박에 찍는다 */
+  hits: number[];
+  at?: number;
+  /** 머리판 이름(모델 ID·주소) — 함수면 바뀔 때만 다시 그린다 */
+  name?: string | ((t: number) => string);
+  /** 벨트 윗면 높이 */
+  height?: number;
+}
+
+/** 프레스 — 벨트를 가로지른 문 꼴 기계. 상자가 닿는 박에 0.07초 만에 내려찍고 천천히 올라가며, 찍는 순간 머리 램프가 켜진다. 모델 하나 = 프레스 하나 */
+export function stampPress(stage: Stage3D, o: StampPressOpts): (t: number) => void {
+  const { ctx } = o;
+  const W = o.width ?? 2.2;
+  const H = (o.height ?? 0.9) + 2.4;
+  const group = new THREE.Group();
+  group.position.set(...o.pos);
+  group.rotation.y = o.rotation ?? 0;
+  const steel = mat(ctx, "steel", 0.45, 0.8);
+  const body = mat(ctx, "raised", 0.55, 0.3);
+  for (const s of [-1, 1]) {
+    const p = shade(new THREE.Mesh(boxGeo(0.34, H, 0.5), body));
+    p.position.set(0, 0, (s * W) / 2);
+    group.add(p);
+    // 기둥에 노랑·검정 경고 띠
+    for (let k = 0; k < 4; k++) {
+      const band = new THREE.Mesh(boxGeo(0.36, 0.14, 0.52), mat(ctx, k % 2 ? "belt" : "accent", 0.7));
+      band.position.set(0, 0.25 + k * 0.14, (s * W) / 2);
+      group.add(band);
+    }
+  }
+  const crown = shade(new THREE.Mesh(boxGeo(0.7, 0.55, W + 0.5), body));
+  crown.position.y = H;
+  group.add(crown);
+  const ram = shade(new THREE.Mesh(boxGeo(0.62, 0.9, W * 0.6), steel));
+  group.add(ram);
+  const lamp = new THREE.Mesh(new THREE.CylinderGeometry(0.13, 0.13, 0.14, 16), new THREE.MeshStandardMaterial({ color: col(ctx, "success"), emissive: col(ctx, "success"), emissiveIntensity: 0.2 }));
+  lamp.position.set(0, H + 0.62, 0);
+  group.add(lamp);
+  const names = o.name
+    ? textSet(o.name, (text) => {
+        const m = textPlane({ text, family: ctx.style.fonts.mono, weight: 600, color: ctx.style.colors.ink, height: 0.3, px: 96, plate: ctx.style.colors.surface, pad: 20, emissive: true });
+        const k = Math.min(1, (W + 1.6) / m.geometry.parameters.width);
+        m.scale.set(k, k, 1);
+        // 들어오는 상자 쪽(−x) 머리면에 — 벨트를 따라 보는 눈에 읽힌다
+        m.rotation.y = -Math.PI / 2;
+        m.position.set(-0.37, H + 0.28, 0);
+        m.visible = false;
+        group.add(m);
+        return m;
+      })
+    : null;
+  stage.scene.add(group);
+  const bed = o.height ?? 0.9;
+  const top = H - 0.9;
+  const low = bed + 0.58;
+  const at = o.at ?? -1;
+  const hits = [...o.hits].sort((a, b) => a - b);
+  return (t) => {
+    const k = rise(t, at, 0.35);
+    group.visible = k > 0.001;
+    group.scale.set(1, Math.max(0.001, k), 1);
+    let h = -1;
+    for (const x of hits) if (x <= t) h = x;
+    const dt = h < 0 ? 9 : t - h;
+    // 0.07초 쾅 → 0.05초 눌러 멈춤 → 0.28초 올라감
+    const down = dt < 0.07 ? dt / 0.07 : dt < 0.12 ? 1 : dt < 0.4 ? 1 - ease.inOutCubic((dt - 0.12) / 0.28) : 0;
+    ram.position.y = top - (top - low) * down;
+    (lamp.material as THREE.MeshStandardMaterial).emissiveIntensity = dt < 0.3 ? 2.6 * (1 - dt / 0.3) + 0.2 : 0.2;
+    if (names) {
+      const now = names.at(t);
+      for (const [k, m] of names.all) m.visible = k === now;
+    }
+  };
+}
+
+export interface SignBoardOpts {
+  ctx: SceneCtx;
+  text: string | ((t: number) => string);
+  pos: V3;
+  /** 글 높이(세계 단위) */
+  height?: number;
+  rotation?: number;
+  at?: number;
+  until?: number;
+  font?: "sans" | "display" | "mono";
+  /** accent 면 노란 판에 검은 글, 아니면 짙은 판에 밝은 글 */
+  tone?: "plain" | "accent";
+  /** 천장에서 내려온 줄 */
+  hang?: boolean;
+}
+
+/** 간판 — 천장 줄에 매달린 판이 내려와 흔들리다 서고 글이 켜진다. text 가 함수면 바뀔 때만 다시 그린다 */
+export function signBoard(stage: Stage3D, o: SignBoardOpts): (t: number) => void {
+  const { ctx } = o;
+  const group = new THREE.Group();
+  group.position.set(...o.pos);
+  group.rotation.y = o.rotation ?? 0;
+  const accent = o.tone === "accent";
+  const h = o.height ?? 0.5;
+  let widest = 0;
+  const texts = textSet(o.text, (text) => {
+    const m = textPlane({ text, family: ctx.style.fonts[o.font ?? "sans"], weight: o.font === "display" ? 400 : 700, color: accent ? ctx.style.colors.onAccent : ctx.style.colors.ink, height: h, px: 120, plate: accent ? ctx.style.colors.accent : "#101215", pad: 30, emissive: true });
+    widest = Math.max(widest, m.geometry.parameters.width);
+    m.visible = false;
+    group.add(m);
+    return m;
+  });
+  if (o.hang !== false) {
+    for (const s of [-1, 1]) {
+      const c = new THREE.Mesh(new THREE.CylinderGeometry(0.015, 0.015, 6, 4), mat(ctx, "steel", 0.5, 0.8));
+      c.position.set((s * widest) / 2.6, 3 + h * 0.6, 0);
+      group.add(c);
+    }
+  }
+  stage.scene.add(group);
+  const at = o.at ?? -1;
+  return (t) => {
+    const on = t >= at && (o.until === undefined || t < o.until);
+    group.visible = on;
+    if (!on) return;
+    const now = texts.at(t);
+    for (const [k, m] of texts.all) m.visible = k === now;
+    // 내려와 줄에 걸려 흔들리다 선다
+    const k = clamp((t - at) / 0.32);
+    const drop = (1 - ease.outBack(k)) * 2.2;
+    group.position.y = o.pos[1] + drop;
+    group.rotation.z = Math.sin((t - at) * 14) * 0.05 * Math.max(0, 1 - (t - at) / 0.6);
+  };
+}
+
+/** 경광등 — 노란 회전등. 켜진 동안 빛 날개가 돌며 둘레를 쓸고, 장애·결정타에 빨갛게. 처리량이 한계에 닿았다는 신호 */
+export function beacon(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; on: number; off?: number; red?: number; speed?: number }): (t: number) => void {
+  const { ctx } = o;
+  const group = new THREE.Group();
+  group.position.set(...o.pos);
+  const pole = shade(new THREE.Mesh(boxGeo(0.12, 2.2, 0.12), mat(ctx, "steel", 0.5, 0.8)));
+  group.add(pole);
+  const domeMat = new THREE.MeshStandardMaterial({ color: col(ctx, "accent"), emissive: col(ctx, "accent"), emissiveIntensity: 0.3, roughness: 0.3 });
+  const dome = new THREE.Mesh(new THREE.CylinderGeometry(0.22, 0.26, 0.4, 16), domeMat);
+  dome.position.y = 2.4;
+  group.add(dome);
+  const wingMat = new THREE.MeshBasicMaterial({ color: col(ctx, "accent"), transparent: true, opacity: 0.16, depthWrite: false, side: THREE.DoubleSide, blending: THREE.AdditiveBlending });
+  const wing = new THREE.Mesh(new THREE.ConeGeometry(0.7, 2.6, 16, 1, true), wingMat);
+  wing.geometry.translate(0, -1.3, 0);
+  wing.rotation.z = Math.PI / 2;
+  const spin = new THREE.Group();
+  spin.position.y = 2.4;
+  spin.add(wing);
+  group.add(spin);
+  stage.scene.add(group);
+  const red = col(ctx, "danger");
+  const amber = col(ctx, "accent");
+  return (t) => {
+    const lit = t >= o.on && (o.off === undefined || t < o.off);
+    spin.visible = lit;
+    const isRed = o.red !== undefined && t >= o.red;
+    domeMat.emissive.copy(isRed ? red : amber);
+    wingMat.color.copy(isRed ? red : amber);
+    domeMat.emissiveIntensity = lit ? 2.2 : 0.3;
+    spin.rotation.y = (t - o.on) * (o.speed ?? 7);
+  };
+}
+
+/** 계기판 — 벽에 선 둥근 24칸 시계판. 정한 창(00–10시)의 칸이 차례로 켜지고 바늘이 하루를 돈다. 가격 스케줄·가동 시간에 */
+export function gauge(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; radius?: number; at: number; window: [number, number]; litAt: number; rotation?: number }): (t: number) => void {
+  const { ctx } = o;
+  const R = o.radius ?? 2.4;
+  const group = new THREE.Group();
+  group.position.set(...o.pos);
+  group.rotation.y = o.rotation ?? 0;
+  const face = shade(new THREE.Mesh(new THREE.CylinderGeometry(R, R, 0.2, 48), mat(ctx, "surface", 0.6)));
+  face.rotation.x = Math.PI / 2;
+  group.add(face);
+  const rim = new THREE.Mesh(new THREE.TorusGeometry(R, 0.09, 8, 48), mat(ctx, "steel", 0.4, 0.8));
+  rim.position.z = 0.1;
+  group.add(rim);
+  const cells: THREE.Mesh[] = [];
+  const off = mat(ctx, "raised", 0.7);
+  for (let h = 0; h < 24; h++) {
+    const a0 = Math.PI / 2 - (h / 24) * Math.PI * 2;
+    const g = new THREE.RingGeometry(R * 0.62, R * 0.9, 4, 1, a0 - (Math.PI * 2) / 24 + 0.02, (Math.PI * 2) / 24 - 0.04);
+    const m = new THREE.Mesh(g, off.clone());
+    m.position.z = 0.11;
+    group.add(m);
+    cells.push(m);
+  }
+  const needle = new THREE.Mesh(boxGeo(0.08, R * 0.82, 0.04), mat(ctx, "ink", 0.4));
+  needle.position.z = 0.16;
+  group.add(needle);
+  for (const h of [0, 6, 12, 18]) {
+    const lab = textPlane({ text: String(h).padStart(2, "0"), family: ctx.style.fonts.mono, weight: 600, color: ctx.style.colors.ink, height: 0.36, px: 90, emissive: true });
+    const a = Math.PI / 2 - (h / 24) * Math.PI * 2;
+    lab.position.set(Math.cos(a) * R * 0.42, Math.sin(a) * R * 0.42, 0.13);
+    group.add(lab);
+  }
+  stage.scene.add(group);
+  const [w0, w1] = o.window;
+  return (t) => {
+    const k = rise(t, o.at, 0.35);
+    group.visible = k > 0.001;
+    group.scale.setScalar(Math.max(0.001, k));
+    cells.forEach((m, h) => {
+      const inWin = h >= w0 && h < w1;
+      const born = o.litAt + ((h - w0) / Math.max(1, w1 - w0)) * 0.3;
+      const lit = inWin && t >= born;
+      const mm = m.material as THREE.MeshStandardMaterial;
+      mm.color.copy(lit ? col(ctx, "accent") : col(ctx, "raised"));
+      mm.emissive.copy(lit ? col(ctx, "accent") : new THREE.Color(0));
+      mm.emissiveIntensity = lit ? 0.9 : 0;
+    });
+    // 바늘이 하루(24시간)를 한 바퀴 돌고 창 끝에 선다
+    const u = clamp((t - o.at) / Math.max(0.1, o.litAt + 0.6 - o.at));
+    const hours = (24 + w1) * (1 - (1 - u) ** 2);
+    needle.rotation.z = -(hours / 24) * Math.PI * 2;
+  };
+}
+
+/**
+ * 드롭 프레스 — 결정타에 큰 프레스가 화면을 울리며 내려찍고 불똥이 튄다. 카메라가 그 순간 흔들리고(dropBurst) 머리 위 조명이 번쩍.
+ * 무대 rig 중 맨 끝에 얹는다(카메라 흔들림을 그 프레임 자리에 더한다)
+ */
+export function pressDrop(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; drop?: number; width?: number; seed?: string }): (t: number) => void {
+  const { ctx } = o;
+  const drop = o.drop ?? 0;
+  const at = ctx.beats.drop(drop);
+  const W = o.width ?? 4.6;
+  const group = new THREE.Group();
+  group.position.set(...o.pos);
+  const body = mat(ctx, "raised", 0.5, 0.35);
+  const steel = mat(ctx, "steel", 0.4, 0.85);
+  for (const s of [-1, 1]) {
+    const p = shade(new THREE.Mesh(boxGeo(0.6, 5.2, 0.8), body));
+    p.position.set((s * W) / 2, 0, 0);
+    group.add(p);
+    for (let k = 0; k < 6; k++) {
+      const band = new THREE.Mesh(boxGeo(0.62, 0.2, 0.82), mat(ctx, k % 2 ? "belt" : "accent", 0.7));
+      band.position.set((s * W) / 2, 0.3 + k * 0.2, 0);
+      group.add(band);
+    }
+  }
+  const crown = shade(new THREE.Mesh(boxGeo(W + 1.2, 0.9, 1.1), body));
+  crown.position.y = 5.2;
+  group.add(crown);
+  const ram = shade(new THREE.Mesh(boxGeo(W - 0.9, 1.3, 0.9), steel));
+  group.add(ram);
+  const seed = o.seed ?? "press-drop";
+  const N = 60;
+  const sparks = new THREE.InstancedMesh(new THREE.BoxGeometry(0.06, 0.06, 0.18), new THREE.MeshBasicMaterial({ color: col(ctx, "accent") }), N);
+  const dirs = Array.from({ length: N }, (_, i) => {
+    const a = rand(seed, i) * Math.PI * 2;
+    const v = randRange(seed, i + 100, 3, 8);
+    return new THREE.Vector3(Math.cos(a) * v, randRange(seed, i + 200, 2, 6), Math.sin(a) * v * 0.6);
+  });
+  group.add(sparks);
+  const flash = new THREE.PointLight(col(ctx, "accent"), 0, 30, 1.6);
+  flash.position.set(0, 2.2, 2.5);
+  group.add(flash);
+  stage.scene.add(group);
+  const m4 = new THREE.Matrix4();
+  const q = new THREE.Quaternion();
+  const one = new THREE.Vector3(1, 1, 1);
+  const zero = new THREE.Vector3();
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "pressDrop" });
+    const local = t - at;
+    // 드롭 0.25초 전 램이 들려 있다가 드롭에 쾅 — 그 뒤 천천히 올라간다
+    const top = 3.6;
+    const low = 0.9;
+    const down = local < -0.25 ? 0 : local < 0 ? -0.15 * ease.outCubic((local + 0.25) / 0.25) : local < 0.06 ? local / 0.06 : local < 0.3 ? 1 : 1 - ease.inOutCubic(clamp((local - 0.3) / 0.6));
+    ram.position.y = top - (top - low) * down;
+    flash.intensity = local >= 0 ? 60 * s.flash : 0;
+    for (let i = 0; i < N; i++) {
+      if (local < 0 || local > 0.9) {
+        m4.compose(zero, q, zero);
+      } else {
+        const d = dirs[i];
+        const p = new THREE.Vector3(d.x * local, low + 0.4 + d.y * local - 4.9 * local * local, d.z * local + 0.6);
+        q.setFromUnitVectors(new THREE.Vector3(0, 0, 1), new THREE.Vector3(d.x, d.y - 9.8 * local, d.z).normalize());
+        m4.compose(p, q, one);
+      }
+      sparks.setMatrixAt(i, m4);
+    }
+    sparks.instanceMatrix.needsUpdate = true;
+    // 카메라 흔들림 — 이 rig 는 무대의 마지막 차례라 그 프레임 카메라 자리에 바로 더한다
+    const cam = stage.camera;
+    cam.position.x += (s.shake.x ?? 0) * 0.012;
+    cam.position.y += (s.shake.y ?? 0) * 0.012;
+  };
+}
+
+/** OG 로고 기계 — 로고의 두 칸(둥근 사각 테)과 화살이 강철로 솟아 서고, 화살 칸 안으로 상자가 들어간다. 끝 카드에 */
+export function logoGate(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; scale?: number; at: number; glow?: number[] }): (t: number) => void {
+  const { ctx } = o;
+  const k0 = o.scale ?? 1;
+  const group = new THREE.Group();
+  group.position.set(...o.pos);
+  const steel = mat(ctx, "ink", 0.35, 0.6);
+  const glowMat = new THREE.MeshStandardMaterial({ color: col(ctx, "accent"), emissive: col(ctx, "accent"), emissiveIntensity: 0.4, roughness: 0.5 });
+  const ext = { depth: 0.5, bevelEnabled: true, bevelSize: 0.04, bevelThickness: 0.04, bevelSegments: 1 };
+  // logo.svg(viewBox 1140×650) 그대로 — 두 칸은 굵기 72 의 둥근 테, 입구 막대와 화살은 노랑으로 빛난다. 가운데(570, 325)가 원점
+  const S = 3.6 / 650;
+  const X = (x: number) => (x - 570) * S;
+  const frame = () => new THREE.ExtrudeGeometry(roundRectShape(492 * S, 650 * S, 125 * S, 72 * S), ext);
+  const left = new THREE.Mesh(frame(), steel);
+  left.position.x = X(246);
+  const right = new THREE.Mesh(frame(), steel);
+  right.position.x = X(894);
+  const barIn = new THREE.Mesh(new THREE.BoxGeometry(277 * S, 106 * S, 0.5), glowMat);
+  barIn.position.set(X(210.5), 0, 0.25);
+  const shaft = new THREE.Mesh(new THREE.BoxGeometry(394 * S, 106 * S, 0.5), glowMat);
+  shaft.position.set(X(617), 0, 0.25);
+  const tri = new THREE.Shape();
+  tri.moveTo(X(820), 125 * S);
+  tri.lineTo(X(995), 0);
+  tri.lineTo(X(820), -125 * S);
+  tri.closePath();
+  const head = new THREE.Mesh(new THREE.ExtrudeGeometry(tri, ext), glowMat);
+  for (const m of [left, right, barIn, shaft, head]) {
+    shade(m);
+    group.add(m);
+  }
+  group.scale.setScalar(k0);
+  stage.scene.add(group);
+  return (t) => {
+    const k = rise(t, o.at, 0.4);
+    group.visible = k > 0.001;
+    group.scale.set(k0, k0 * Math.max(0.001, k), k0);
+    let g = 0.4;
+    for (const x of o.glow ?? []) if (t >= x && t < x + 0.35) g = 0.4 + 2.2 * (1 - (t - x) / 0.35);
+    glowMat.emissiveIntensity = g;
+  };
+}