kasaframe 0.1.3 → 0.1.4

package/themes/riso-zine/variants/sand-plum.json

@@ -0,0 +1,113 @@
+{
+  "id": "sand-plum",
+  "world": "riso-zine",
+  "name": "Sand Plum",
+  "desc": "모래빛 바탕에 자두색 강조 · 획이 꽉 들어찬 초굵은 제목",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9031,
+    "tint": {
+      "h": 57.6811,
+      "c": 0.027
+    },
+    "inkL": 0.1921,
+    "hue": 321.4686,
+    "chroma": 1.1118,
+    "fonts": "gasoek",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 0.83,
+    "radius": null,
+    "tempo": 1,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#EEDBCE",
+      "surface": "#FAEADF",
+      "raised": "#DFCBBA",
+      "line": "#B6A28E",
+      "ink": "#001724",
+      "inkSoft": "#001724",
+      "dim": "#003C59",
+      "accent": "#A700BE",
+      "accentSoft": "#CF99DE",
+      "accentText": "#001724",
+      "onAccent": "#EEDBCE",
+      "success": "#001724",
+      "danger": "#A700BE",
+      "warning": "#A700BE",
+      "blue": "#001724",
+      "pink": "#A700BE",
+      "paper": "#EEDBCE"
+    },
+    "fonts": {
+      "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"Gasoek One\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"Geist Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Gasoek One",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/gasoekone/GasoekOne-Regular.ttf",
+          "weight": "400"
+        },
+        {
+          "family": "Pretendard Variable",
+          "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+          "weight": "45 920"
+        },
+        {
+          "family": "Geist Mono",
+          "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2",
+          "weight": "100 900"
+        }
+      ]
+    },
+    "type": {
+      "weightDisplay": 400,
+      "weightBody": 500,
+      "tracking": "-0.01em"
+    },
+    "look": {
+      "stroke": 0.83
+    }
+  },
+  "tags": {
+    "mood": [
+      "아날로그",
+      "인쇄",
+      "개성",
+      "힙한",
+      "레트로",
+      "밝은"
+    ],
+    "light": "light",
+    "use": [
+      "홍보",
+      "행사",
+      "포스터",
+      "문화",
+      "출판",
+      "소개"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-11",
+    "colors": {
+      "ink": 13.66,
+      "dim": 8.73,
+      "accent": 4.61,
+      "onAccent": 4.61,
+      "success~danger": 0.318,
+      "success~warning": 0.318,
+      "accent~ink": 0.318
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}

package/themes/server-hall/THEME.md

@@ -0,0 +1,58 @@
+# 데이터센터 통로 `server-hall`
+
+**비유: 요청이 빛으로 데이터센터 통로를 지나 랙에 닿으며 화면이 찍힌다 — 랙 한 대가 회사, 켜진 서버 칸 하나가 모델, 통로 끝 코어 스위치 하나가 한 주소.** 어두운 홀에서 빛은 일을 하는 것에서만 난다 — 켜진 칸의 LED, 머리 위 트레이를 흐르는 요청, 켜진 조명줄. 카메라는 통로를 따라 요청을 좇거나 랙·스위치 앞에 다가갈 때만 움직이고 마디마다 다른 자리에 선다.
+
+| 기술 개념 | 이 세계에서 |
+|---|---|
+| 요청 | 빛 펄스 — 트레이를 따라 흐르고 꼬리를 끈다(`requestPulse`) |
+| 공급자(회사) | 랙 한 대 — 위에 줄 표지 |
+| 모델 | 켜진 서버 칸(1U) 하나 — 42U 중 켜진 칸 수가 모델 수(`rackRow` fill) |
+| 게이트웨이 한 주소 | 통로 끝 코어 스위치 하나, 위에 주소 판 — 모든 트레이가 여기로 모인다 |
+| 형식 | 스위치로 들어오는 두 갈래 트레이(청록·호박) |
+| 지연 | 빛이 길을 지나는 시간 — 실측 ms 그대로 달린다 |
+| 비용 | 계량기 판(PDU 화면)의 숫자와 막대(`meterPanel`) |
+| 시간대 가격 | 통로 조명 — 00–10 시는 불이 꺼진 시간(`hallLights`·`hourBoard`) |
+| 캐시 | 가까운 랙에서 바로 돌아오는 짧은 빛(스위치에서 한 칸 거리) |
+| 폴백 | 빛이 다른 랙 갈래로 꺾인다(`toRack` 길 바꾸기) |
+| 한도 | 랙의 42U — 더 켤 칸이 없다 |
+| 드롭·결과 | 서지 — 스위치에서 바깥으로 홀 전체 칸이 물결처럼 번쩍인다(`rackRow` wave + `surge`) |
+
+## 맞는 내용·용도
+
+- 인프라·API·게이트웨이·라우팅·지연·용량·트래픽처럼 「어디로 흘러가 어디에 닿는가」가 요점인 내용 — 개발자 도구 공개·홍보·설명.
+- 용도: 홍보(promo)·공개(launch)·설명(explainer)·쇼츠(shorts). 마디마다 다른 자리의 컷, 드롭에 서지.
+- 화면 글은 랙 줄 표지(회사 이름)·주소·모델 ID·숫자·짧은 낱말. 표지·숫자는 Barlow Condensed, 주소·ID 는 JetBrains Mono, 한글은 Pretendard.
+
+## 금지
+
+- 밝은 홀·흰 조명 아래의 랙 — 어둠이 바탕이다. 빛은 LED·요청·조명줄만.
+- 뜻 없는 깜빡임 — LED 는 칸이 켜질 때·요청이 닿을 때·서지에만 바뀐다. 무작위로 반짝이는 LED 금지.
+- 이유 없는 카메라 떠돌기·돌기. 카메라는 통로를 따라 다가가거나 요청을 좇을 때만, 키 사이로 움직인다.
+- 무거운 후처리(블룸·피사계 심도)·그림자 — 헤드리스 SwiftShader 가 버티게 빛 번짐은 가산 혼합 점으로.
+- 카메라가 등 뒤에서 보는 줄 표지(글이 뒤집힌다) — 그 컷엔 표지를 끈다(`names: false`).
+- 슬로건·감성 문장.
+
+## 움직임
+
+- 쉬지 않는다: 요청 빛이 트레이를 끊이지 않고 흐르고(초당 10개 안팎), 칸이 켜지고, 카메라가 키 사이를 천천히 다가간다.
+- 구도는 마디마다 바꾼다: 통로 입구 → 통로 안 → 스위치 정면 → 스위치 화면 → 두 갈래 트레이 → 스위치 앞에서 돌아본 홀 → 시간 판 → 계량기 → 옆에서 본 경주 트레이 → 끝 카드.
+- 박마다 큰 사건 하나: 랙 줄 표지와 수가 켜지고, 모델 ID 가 바뀌며 빛이 그 랙으로 나가고, 형식 빛이 두 배로 늘고, 시간 판이 밤을 지나고, 계량기가 값을 깎는다.
+
+## 효과
+
+같은 레포 안에서는 `effects.ts` 를 바로, 프로젝트에서는 `fx("server-hall")`. `hallStage` 로 무대를 짓고 나머지 rig 를 `stage.add(…)` 로 얹는다. 빛 번짐 판·글 판·길 위의 점은 `kit.ts`(`plate`·`along`·`powerOn`).
+
+| 효과 | 꼴 | 하는 일 |
+|---|---|---|
+| `hallStage` | layer | 원근 카메라·안개로 깊어지는 어두운 통로·타공 바닥. 컷마다 키(자리·보는 곳·화각) 사이로만 움직인다 |
+| `rackRow` | rig | 랙 줄 — 캐비닛마다 42U 칸, fill 대로 아래부터 LED 가 켜지고(켜지는 순간 희게), wave 면 드롭에 홀 전체가 물결처럼 번쩍인다 |
+| `cableTray` | rig | 머리 위 노란 트레이 — 요청 빛이 다니는 길. at·until 로 컷마다 켜고 끈다 |
+| `requestPulse` | rig | 요청 빛 — 시각마다 꺾은선을 따라 dur 초에 지나가며 꼬리를 끈다. 길·색·시간을 펄스마다 |
+| `coreSwitch` | rig | 통로 끝 코어 스위치 — 포트 LED 격자, 위에 주소 판, 정면 화면에 모델 ID, 요청이 닿으면 포트가 가운데부터 켜진다 |
+| `labelPlate` | rig | 뒤에서 빛나는 글 판이 형광등처럼 두 번 깜빡이며 켜진다. 글이 함수면 시각마다 바뀐다 |
+| `hallLights` | rig | 천장 조명줄 — 줄마다 밝기를 t 로, 홀 전체 밝기도 따라간다(밤 시간대 = 불 꺼진 통로) |
+| `hourBoard` | rig | 벽의 24칸 시간 판 — 한 시간씩 켜지고 밤 창은 다른 색, 지금 칸 아래 막대 |
+| `surge` | rig | 드롭 — 빛 고리가 퍼지고 화면이 한 번 차갑게 번쩍인다(흔들림은 카메라에 조금) |
+| `meterPanel` | rig | 계량기 판 — 큰 숫자가 from → to 로 구르고 아래 막대가 같은 비율로 준다 |
+
+견본: `sample/` — 공통 주제 「OpenGateway 소개 15초」, kawaii-friends 4.0–19.0초(드롭 7.34초). 통로 입구에서 회사 랙 아홉이 모델 수만큼 칸을 켜고(OpenAI 41칸) → 통로 안, 랙 위에 수가 켜지고 첫 요청이 스위치로 → 끊이지 않는 요청이 코어 스위치 하나(apis.opengateway.ai/v1)로 → 스위치 화면의 모델 ID 가 박마다 바뀌며 빛이 그 랙으로 → OpenAI·Anthropic 두 갈래 트레이 → 드롭 서지, 홀 전체 LED 물결과 102 → 24칸 시간 판과 꺼지는 조명, 밤 -90% → 계량기 deepseek 값 → 실측 시간 그대로 달리는 세 줄기 빛(612.5·693.0·760.5ms)과 18번 호출 → 통로 위 OG 로고와 opengateway.ai.

package/themes/server-hall/effects.ts

@@ -0,0 +1,455 @@
+import { clamp, toEase, type EaseName, type SceneCtx } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { stage3d, THREE, type Stage3D } from "@kasaframe/themes/stage3d";
+import { along, col, glowTexture, hex, pathLength, plate, powerOn, tileTexture, type V3 } from "./kit.ts";
+
+// 데이터센터는 어둡고, 빛은 일을 하는 것에서만 난다 — 켜진 서버 칸의 LED, 트레이를 지나는 요청, 켜진 조명줄. 그래서 화면의 움직임도
+// 빛이 켜지고 흐르는 것으로만 낸다. 카메라는 통로를 따라 요청을 좇거나 랙 앞에 다가갈 때만, 마디마다 다른 자리에 선다
+
+export interface HallKey {
+  t: number;
+  pos: V3;
+  look: V3;
+  fov?: number;
+  /** 앞 키에서 이 키로 오는 이징 */
+  ease?: EaseName;
+}
+
+export interface HallShot {
+  from: number;
+  to: number;
+  keys: HallKey[];
+}
+
+function keyAt(t: number, keys: HallKey[]): { pos: V3; look: V3; fov: number } {
+  const ks = [...keys].sort((a, b) => a.t - b.t);
+  const at = (k: HallKey) => ({ pos: k.pos, look: k.look, fov: k.fov ?? 50 });
+  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) => p.map((v, j) => v + (q[j] - v) * 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]);
+}
+
+/**
+ * 홀 무대 — 원근 카메라, 안개로 깊어지는 어두운 통로, 타공 바닥·천장. 컷마다 다른 자리(키)에 서고, 키 사이로만 움직인다.
+ * 바탕 자체는 서 있다 — 쉬지 않는 몫은 요청 빛·켜지는 LED 가 진다
+ */
+export function hallStage(el: HTMLElement, o: { ctx: SceneCtx; shots: HallShot[]; fog?: [number, number]; length?: number }): ((t: number) => void) & Stage3D {
+  const { ctx } = o;
+  const shots = [...o.shots].sort((a, b) => a.from - b.from);
+  const stage = stage3d(el, {
+    ctx,
+    camera: "perspective",
+    fov: 50,
+    background: hex(ctx, "bg"),
+    fog: o.fog ?? [5, 26],
+    shot(t, cam) {
+      const s = shots.find((x) => t >= x.from && t < x.to) ?? shots[shots.length - 1];
+      const k = keyAt(t, s.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();
+      }
+    },
+  });
+  const L = o.length ?? 40;
+  const tex = tileTexture(ctx);
+  tex.repeat.set(24 / 0.6, L / 0.6);
+  const floor = new THREE.Mesh(new THREE.PlaneGeometry(24, L), new THREE.MeshStandardMaterial({ map: tex, roughness: 0.55, metalness: 0.2 }));
+  floor.rotation.x = -Math.PI / 2;
+  floor.position.set(0, 0, 4 - L / 2);
+  const ceil = new THREE.Mesh(new THREE.PlaneGeometry(24, L), new THREE.MeshStandardMaterial({ color: col(ctx, "surface"), roughness: 0.9 }));
+  ceil.rotation.x = Math.PI / 2;
+  ceil.position.set(0, 3.4, 4 - L / 2);
+  stage.scene.add(floor, ceil);
+  // 바닥에 비친 초록·파랑 — 핫 아일의 결. 빛은 위에서 차갑게
+  stage.scene.add(new THREE.HemisphereLight(col(ctx, "lamp"), col(ctx, "bg"), 0.6));
+  const key = new THREE.DirectionalLight(col(ctx, "lamp"), 0.5);
+  key.position.set(2, 6, 4);
+  stage.scene.add(key);
+  return Object.assign((t: number) => stage.paint(t), stage);
+}
+
+export interface RackSpec {
+  /** 랙 밑면 가운데 */
+  pos: V3;
+  /** 정면이 보는 쪽 — +1 이면 +x(통로 왼쪽 줄), -1 이면 -x(오른쪽 줄) */
+  face: 1 | -1;
+  name?: string;
+  /** [시각, 켤 칸 수, 걸리는 초] — 아래 칸부터 차례로 켜진다(켜진 칸 하나 = 모델 하나) */
+  fill?: [number, number, number][];
+}
+
+const U = 42;
+const UH = 0.045;
+
+/**
+ * 랙 줄 — 캐비닛마다 42U 칸, 켜진 칸은 초록 LED 줄이 들어온다. 칸이 켜지는 순간 한 번 희게 번쩍인다.
+ * wave 를 주면 그 시각에 origin 에서 바깥으로 홀 전체 칸이 물결처럼 번쩍인다(드롭)
+ */
+export function rackRow(stage: Stage3D, o: { ctx: SceneCtx; racks: RackSpec[]; wave?: { at: number; origin: V3; speed?: number }; at?: number; names?: boolean }): (t: number) => void {
+  const { ctx } = o;
+  const n = o.racks.length;
+  const cab = new THREE.InstancedMesh(new THREE.BoxGeometry(1, 2.12, 0.62), new THREE.MeshStandardMaterial({ color: col(ctx, "rack"), roughness: 0.6, metalness: 0.4 }), n);
+  const slabGeo = new THREE.BoxGeometry(0.03, UH * 0.82, 0.54);
+  const slabs = new THREE.InstancedMesh(slabGeo, new THREE.MeshStandardMaterial({ color: col(ctx, "unit"), roughness: 0.5, metalness: 0.5 }), n * U);
+  const ledGeo = new THREE.BoxGeometry(0.012, UH * 0.22, 0.4);
+  const leds = new THREE.InstancedMesh(ledGeo, new THREE.MeshBasicMaterial({ color: 0xffffff, toneMapped: false }), n * U);
+  const m = new THREE.Matrix4();
+  const off = col(ctx, "ledOff");
+  o.racks.forEach((r, i) => {
+    m.makeTranslation(r.pos[0], r.pos[1] + 1.06, r.pos[2]);
+    cab.setMatrixAt(i, m);
+    for (let u = 0; u < U; u++) {
+      const y = r.pos[1] + 0.1 + u * UH + UH / 2;
+      m.makeTranslation(r.pos[0] + r.face * 0.5, y, r.pos[2]);
+      slabs.setMatrixAt(i * U + u, m);
+      m.makeTranslation(r.pos[0] + r.face * 0.517, y, r.pos[2] + 0.02);
+      leds.setMatrixAt(i * U + u, m);
+      leds.setColorAt(i * U + u, off);
+    }
+  });
+  stage.scene.add(cab, slabs, leds);
+  // 이름표는 데이터센터 줄 표지처럼 랙 위에 통로 입구 쪽(+z)을 보고 매단다 — 통로를 내려다보는 카메라에 줄줄이 읽힌다
+  const plates = o.racks.map((r) => {
+    if (!r.name || o.names === false) return null;
+    const p = plate(ctx, { sample: r.name, height: 0.22, tone: "ink", edge: "line" });
+    p.draw(r.name);
+    p.mesh.position.set(r.pos[0], r.pos[1] + 2.36, r.pos[2] + 0.32);
+    stage.scene.add(p.mesh);
+    return p;
+  });
+  const on = col(ctx, "led");
+  const flash = col(ctx, "glow");
+  const c = new THREE.Color();
+  const speed = o.wave?.speed ?? 9;
+  const origin = o.wave ? new THREE.Vector3(...o.wave.origin) : null;
+  const dist = o.racks.map((r) => (origin ? origin.distanceTo(new THREE.Vector3(...r.pos)) : 0));
+  let key = "";
+  return (t) => {
+    const lit = o.racks.map((r) => {
+      let k = 0;
+      let since = Infinity;
+      for (const [at, cnt, dur] of r.fill ?? []) {
+        if (t < at) continue;
+        const p = clamp((t - at) / Math.max(1e-3, dur));
+        const now = Math.floor(p * cnt + 1e-6);
+        k = Math.max(k, now);
+        if (now > 0) since = Math.min(since, t - (at + (now / cnt) * dur));
+      }
+      return { k, since };
+    });
+    const w = o.wave ? t - o.wave.at : -1;
+    const sig = lit.map((l) => `${l.k}:${l.since < 0.08 ? 1 : 0}`).join(",") + (w >= 0 && w < 2 ? `:${Math.floor(w * 60)}` : "");
+    if (sig !== key) {
+      key = sig;
+      o.racks.forEach((_, i) => {
+        // 물결이 지나가는 0.2초 동안 그 랙의 모든 칸이 희게 — 켜지지 않은 칸까지
+        const hit = w >= 0 && Math.abs(w - dist[i] / speed) < 0.1;
+        for (let u = 0; u < U; u++) {
+          const isOn = u < lit[i].k;
+          const fresh = isOn && u === lit[i].k - 1 && lit[i].since < 0.08;
+          if (hit || fresh) c.copy(flash);
+          else c.copy(isOn ? on : off);
+          leds.setColorAt(i * U + u, c);
+        }
+      });
+      leds.instanceColor!.needsUpdate = true;
+    }
+    for (const p of plates) if (p) p.mesh.visible = t >= (o.at ?? -Infinity);
+  };
+}
+
+/** 머리 위 케이블 트레이 — 노란 사다리꼴 선반이 꺾은선을 따라 걸린다. 요청 빛이 이 위로 다닌다 */
+export function cableTray(stage: Stage3D, o: { ctx: SceneCtx; paths: V3[][]; width?: number; at?: number; until?: number }): (t: number) => void {
+  const { ctx } = o;
+  const segs: [THREE.Vector3, THREE.Vector3][] = [];
+  for (const p of o.paths) for (let i = 1; i < p.length; i++) segs.push([new THREE.Vector3(...p[i - 1]), new THREE.Vector3(...p[i])]);
+  const geo = new THREE.BoxGeometry(o.width ?? 0.1, 0.03, 1);
+  const tray = new THREE.InstancedMesh(geo, new THREE.MeshStandardMaterial({ color: col(ctx, "tray"), roughness: 0.5, metalness: 0.3, emissive: col(ctx, "tray"), emissiveIntensity: 0.2 }), segs.length);
+  const m = new THREE.Matrix4();
+  const q = new THREE.Quaternion();
+  const s = new THREE.Vector3();
+  segs.forEach(([a, b], i) => {
+    const d = b.clone().sub(a);
+    const len = d.length() + (o.width ?? 0.1);
+    q.setFromUnitVectors(new THREE.Vector3(0, 0, 1), d.clone().normalize());
+    s.set(1, 1, len);
+    m.compose(a.clone().add(b).multiplyScalar(0.5), q, s);
+    tray.setMatrixAt(i, m);
+  });
+  stage.scene.add(tray);
+  return (t) => {
+    tray.visible = t >= (o.at ?? -Infinity) && t < (o.until ?? Infinity);
+  };
+}
+
+/**
+ * 요청 빛 — 펄스 하나가 요청 하나. 시각마다 꺾은선을 따라 dur 초에 지나가고 꼬리를 끈다. 닿으면 사라진다.
+ * path 를 함수로 주면 펄스마다 다른 길(랙마다 다른 갈래)
+ */
+export function requestPulse(stage: Stage3D, o: { ctx: SceneCtx; path: V3[] | ((i: number) => V3[]); times: number[]; dur?: number | ((i: number) => number); tone?: string | ((i: number) => string); size?: number; trail?: number }): (t: number) => void {
+  const { ctx } = o;
+  const n = o.times.length;
+  const trail = o.trail ?? 6;
+  const per = trail + 1;
+  const pos = new Float32Array(n * per * 3);
+  const colr = new Float32Array(n * per * 3);
+  const geo = new THREE.BufferGeometry();
+  geo.setAttribute("position", new THREE.BufferAttribute(pos, 3));
+  geo.setAttribute("color", new THREE.BufferAttribute(colr, 3));
+  const size = o.size ?? 0.55;
+  const mat = new THREE.PointsMaterial({ size, map: glowTexture(), vertexColors: true, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, toneMapped: false, sizeAttenuation: true });
+  const glow = new THREE.Points(geo, mat);
+  glow.frustumCulled = false;
+  const coreGeo = new THREE.BufferGeometry();
+  const corePos = new Float32Array(n * 3);
+  coreGeo.setAttribute("position", new THREE.BufferAttribute(corePos, 3));
+  const core = new THREE.Points(coreGeo, new THREE.PointsMaterial({ size: size * 0.28, color: col(ctx, "glow"), map: glowTexture(), transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, toneMapped: false }));
+  core.frustumCulled = false;
+  stage.scene.add(glow, core);
+  const paths = o.times.map((_, i) => (typeof o.path === "function" ? o.path(i) : o.path));
+  const durs = o.times.map((_, i) => (typeof o.dur === "function" ? o.dur(i) : (o.dur ?? 0.6)));
+  const tones = o.times.map((_, i) => col(ctx, typeof o.tone === "function" ? o.tone(i) : (o.tone ?? "accent")));
+  const far = new THREE.Vector3(0, -100, 0);
+  return (t) => {
+    for (let i = 0; i < n; i++) {
+      const p = (t - o.times[i]) / durs[i];
+      const live = p >= 0 && p <= 1;
+      const head = live ? along(paths[i], p) : far;
+      head.toArray(corePos, i * 3);
+      for (let k = 0; k < per; k++) {
+        const q = p - (k * 0.035) / Math.max(0.2, durs[i]);
+        const v = live && q >= 0 ? along(paths[i], q) : far;
+        v.toArray(pos, (i * per + k) * 3);
+        const fade = (1 - k / per) ** 1.6;
+        colr[(i * per + k) * 3] = tones[i].r * fade;
+        colr[(i * per + k) * 3 + 1] = tones[i].g * fade;
+        colr[(i * per + k) * 3 + 2] = tones[i].b * fade;
+      }
+    }
+    geo.attributes.position.needsUpdate = true;
+    geo.attributes.color.needsUpdate = true;
+    coreGeo.attributes.position.needsUpdate = true;
+  };
+}
+
+/**
+ * 코어 스위치 — 통로 끝 하나뿐인 관문(게이트웨이 한 주소). 포트 LED 격자, 위에 주소 판, 정면 화면에 지금 고른 모델 ID.
+ * hits 시각마다 포트가 가운데에서 바깥으로 한 번 켜진다(요청이 들어왔다)
+ */
+export function coreSwitch(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; url: string; screen?: string[] | ((t: number) => string); hits?: number[]; at?: number }): (t: number) => void {
+  const { ctx } = o;
+  const [x, y, z] = o.pos;
+  const body = new THREE.Mesh(new THREE.BoxGeometry(2.4, 2.4, 0.9), new THREE.MeshStandardMaterial({ color: col(ctx, "rack"), roughness: 0.5, metalness: 0.5 }));
+  body.position.set(x, y + 1.2, z);
+  const cols = 24;
+  const rows = 8;
+  const ports = new THREE.InstancedMesh(new THREE.BoxGeometry(0.06, 0.04, 0.02), new THREE.MeshBasicMaterial({ color: 0xffffff, toneMapped: false }), cols * rows);
+  const m = new THREE.Matrix4();
+  const off = col(ctx, "ledOff");
+  for (let j = 0; j < rows; j++)
+    for (let i = 0; i < cols; i++) {
+      m.makeTranslation(x - 1.0 + (i * 2.0) / (cols - 1), y + 0.5 + j * 0.11, z + 0.46);
+      ports.setMatrixAt(j * cols + i, m);
+      ports.setColorAt(j * cols + i, off);
+    }
+  stage.scene.add(body, ports);
+  const sign = plate(ctx, { sample: o.url, height: 0.32, font: "mono", tone: "accentText", edge: "accent" });
+  sign.draw(o.url);
+  sign.mesh.position.set(x, y + 2.78, z + 0.46);
+  stage.scene.add(sign.mesh);
+  const sample = typeof o.screen === "function" ? "deepseek/deepseek-v4.1-flash-ultrafast" : (o.screen ?? [""]).reduce((a, b) => (b.length > a.length ? b : a), "");
+  const scr = o.screen ? plate(ctx, { sample, height: 0.2, font: "mono", tone: "success", edge: "line", fill: "bg" }) : null;
+  if (scr) {
+    scr.mesh.position.set(x, y + 1.85, z + 0.47);
+    stage.scene.add(scr.mesh);
+    if (typeof o.screen !== "function") scr.draw((o.screen ?? [""])[0] ?? "");
+  }
+  const lit = col(ctx, "success");
+  const hot = col(ctx, "glow");
+  const c = new THREE.Color();
+  let key = "";
+  return (t) => {
+    const on = t >= (o.at ?? -Infinity);
+    for (const mm of [body, ports, sign.mesh]) mm.visible = on;
+    if (scr) {
+      scr.mesh.visible = on;
+      if (typeof o.screen === "function") scr.draw(o.screen(t), true);
+    }
+    const done = (o.hits ?? []).filter((h) => h <= t);
+    const last = done.at(-1);
+    const k = last === undefined ? -1 : t - last;
+    // 켜진 포트 수는 들어온 요청 수를 따른다 — 그것까지 키에 넣어야 다른 시각에서 돌아왔을 때 색이 맞는다
+    const sig = `${Math.min(7, done.length)}:${k < 0 || k > 0.5 ? "idle" : Math.floor(k * 60)}`;
+    if (sig === key) return;
+    key = sig;
+    for (let j = 0; j < rows; j++)
+      for (let i = 0; i < cols; i++) {
+        const d = Math.hypot((i - cols / 2) / cols, (j - rows / 2) / rows);
+        const front = k >= 0 && k < 0.5 && Math.abs(k * 2.4 - d) < 0.12;
+        c.copy(front ? hot : (j * cols + i) % 7 < Math.min(7, done.length) ? lit : off);
+        ports.setColorAt(j * cols + i, c);
+      }
+    ports.instanceColor!.needsUpdate = true;
+  };
+}
+
+/** 글 판 — 뒤에서 빛나는 판이 at 에 형광등처럼 두 번 깜빡이며 켜진다. text 가 함수면 시각마다 바뀐다(모델 ID·숫자) */
+export function labelPlate(stage: Stage3D, o: { ctx: SceneCtx; text: string | ((t: number) => string); pos: V3; rotY?: number; height?: number; at?: number; until?: number; tone?: string; font?: "sans" | "display" | "mono"; sample?: string; frame?: boolean }): (t: number) => void {
+  const { ctx } = o;
+  const sample = o.sample ?? (typeof o.text === "function" ? o.text(1e9) : o.text);
+  const p = plate(ctx, { sample, height: o.height ?? 0.4, font: o.font, tone: o.tone ?? "ink", edge: o.frame === false ? null : "line", fill: o.frame === false ? null : "surface" });
+  p.mesh.position.set(...o.pos);
+  p.mesh.rotation.y = o.rotY ?? 0;
+  stage.scene.add(p.mesh);
+  if (typeof o.text === "string") p.draw(o.text);
+  const mat = p.mesh.material as THREE.MeshBasicMaterial;
+  return (t) => {
+    const k = powerOn(t, o.at ?? -1);
+    const on = k > 0 && t < (o.until ?? Infinity);
+    p.mesh.visible = on;
+    if (!on) return;
+    mat.opacity = k;
+    if (typeof o.text === "function") p.draw(o.text(t), true);
+  };
+}
+
+/**
+ * 통로 조명 — 천장 조명줄이 줄마다 켜지고 꺼진다(level(t, i) 0..1). 홀 전체 밝기도 따라 오르내린다.
+ * 밤 시간대(싼 창)엔 불이 꺼지고 LED 만 남는 식으로 쓴다
+ */
+export function hallLights(stage: Stage3D, o: { ctx: SceneCtx; rows: number; z0: number; z1: number; y?: number; level(t: number, i: number): number }): (t: number) => void {
+  const { ctx } = o;
+  const lamps = Array.from({ length: o.rows }, (_, i) => {
+    const mat = new THREE.MeshBasicMaterial({ color: col(ctx, "lamp"), toneMapped: false });
+    const mesh = new THREE.Mesh(new THREE.BoxGeometry(1.6, 0.04, 0.18), mat);
+    mesh.position.set(0, o.y ?? 3.36, o.z0 + ((o.z1 - o.z0) * i) / Math.max(1, o.rows - 1));
+    stage.scene.add(mesh);
+    return mat;
+  });
+  const fill = new THREE.HemisphereLight(col(ctx, "lamp"), col(ctx, "bg"), 0);
+  stage.scene.add(fill);
+  const bright = col(ctx, "lamp");
+  const dark = col(ctx, "raised");
+  return (t) => {
+    let sum = 0;
+    lamps.forEach((mat, i) => {
+      const v = clamp(o.level(t, i));
+      sum += v;
+      mat.color.copy(dark).lerp(bright, v);
+    });
+    fill.intensity = (sum / Math.max(1, o.rows)) * 0.9;
+  };
+}
+
+/**
+ * 시간 판 — 벽의 24칸 LED 판. 칸이 한 시간씩 차례로 켜지고(rate 칸/초), 밤 창(night) 칸은 다른 색. 지금 칸 아래 흰 막대가 따라간다
+ */
+export function hourBoard(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; width?: number; at?: number; until?: number; rate?: number; night?: [number, number]; tone?: string; nightTone?: string }): (t: number) => void {
+  const { ctx } = o;
+  const W = o.width ?? 6;
+  const cw = W / 24;
+  const cells = new THREE.InstancedMesh(new THREE.BoxGeometry(cw * 0.86, 0.42, 0.04), new THREE.MeshBasicMaterial({ color: 0xffffff, toneMapped: false }), 24);
+  const m = new THREE.Matrix4();
+  const [x, y, z] = o.pos;
+  for (let h = 0; h < 24; h++) {
+    m.makeTranslation(x - W / 2 + cw * (h + 0.5), y, z);
+    cells.setMatrixAt(h, m);
+    cells.setColorAt(h, col(ctx, "ledOff"));
+  }
+  const back = new THREE.Mesh(new THREE.BoxGeometry(W + 0.2, 0.7, 0.03), new THREE.MeshStandardMaterial({ color: col(ctx, "surface"), roughness: 0.8 }));
+  back.position.set(x, y, z - 0.03);
+  const mark = new THREE.Mesh(new THREE.BoxGeometry(cw * 0.86, 0.05, 0.05), new THREE.MeshBasicMaterial({ color: col(ctx, "ink"), toneMapped: false }));
+  stage.scene.add(back, cells, mark);
+  const labels = [0, 6, 10, 12, 18, 24].map((h) => {
+    const p = plate(ctx, { sample: "00", height: 0.2, font: "mono", tone: h === (o.night ?? [0, 10])[1] || h === 0 ? "accentText" : "dim", edge: null, fill: null });
+    p.draw(String(h).padStart(2, "0"));
+    p.mesh.position.set(x - W / 2 + cw * h, y - 0.42, z);
+    stage.scene.add(p.mesh);
+    return p.mesh;
+  });
+  const [n0, n1] = o.night ?? [0, 10];
+  const at = o.at ?? 0;
+  const rate = o.rate ?? 24;
+  let last = -1;
+  return (t) => {
+    const on = t >= at && t < (o.until ?? Infinity);
+    for (const v of [back, cells, mark, ...labels]) v.visible = on;
+    const k = on ? Math.min(24, Math.floor((t - at) * rate + 1e-6) + 1) : 0;
+    mark.position.set(x - W / 2 + cw * (Math.max(1, k) - 0.5), y - 0.27, z + 0.02);
+    if (k === last) return;
+    last = k;
+    for (let h = 0; h < 24; h++) cells.setColorAt(h, col(ctx, h >= k ? "ledOff" : h >= n0 && h < n1 ? (o.nightTone ?? "accent") : (o.tone ?? "amber")));
+    cells.instanceColor!.needsUpdate = true;
+  };
+}
+
+/**
+ * 드롭 — 서지. origin 에서 빛 고리가 퍼지고 화면이 한 번 차갑게 번쩍인다. 홀 LED 물결은 rackRow 의 wave 가 같은 시각에 낸다.
+ * 흔들림은 카메라에 아주 조금만(통로가 기울지 않게)
+ */
+export function surge(stage: Stage3D, o: { ctx: SceneCtx; drop?: number; origin: V3; radius?: number }): (t: number) => void {
+  const { ctx } = o;
+  const ring = new THREE.Mesh(new THREE.RingGeometry(0.9, 1, 48), new THREE.MeshBasicMaterial({ color: col(ctx, "glow"), transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, toneMapped: false }));
+  ring.position.set(...o.origin);
+  stage.scene.add(ring);
+  const flash = document.createElement("div");
+  flash.style.cssText = `position:absolute;inset:0;background:${hex(ctx, "accent")};mix-blend-mode:screen;opacity:0;pointer-events:none;`;
+  stage.el.append(flash);
+  const R = o.radius ?? 14;
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "surge" });
+    flash.style.opacity = String(Math.round(s.flash * 45) / 100);
+    const local = t - ctx.beats.drop(o.drop ?? 0);
+    ring.visible = local >= 0 && local < 0.9;
+    if (ring.visible) {
+      const k = local / 0.9;
+      ring.scale.setScalar(0.2 + R * (1 - (1 - k) ** 3));
+      (ring.material as THREE.MeshBasicMaterial).opacity = (1 - k) * 0.9;
+      ring.lookAt(stage.camera.position);
+    }
+    stage.camera.position.x += (s.shake.x ?? 0) * 0.004;
+    stage.camera.position.y += (s.shake.y ?? 0) * 0.004;
+  };
+}
+
+/** 계량기 판 — PDU 화면처럼 큰 숫자가 from 에서 to 로 굴러가고 아래 막대가 같은 비율로 준다(비용·전력) */
+export function meterPanel(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; rotY?: number; label: string; from: number; to: number; at: number; dur?: number; format?(v: number): string; height?: number; tone?: string }): (t: number) => void {
+  const { ctx } = o;
+  const h = o.height ?? 0.5;
+  const fmt = o.format ?? ((v: number) => v.toFixed(2));
+  const sample = [fmt(o.from), fmt(o.to)].reduce((a, b) => (b.length > a.length ? b : a), "");
+  const num = plate(ctx, { sample: `${o.label} ${sample}`, height: h, font: "mono", tone: o.tone ?? "success", edge: "line", fill: "bg", align: "left" });
+  const g = new THREE.Group();
+  g.add(num.mesh);
+  const w = (num.mesh.geometry as THREE.PlaneGeometry).parameters.width;
+  const barBack = new THREE.Mesh(new THREE.PlaneGeometry(w, h * 0.12), new THREE.MeshBasicMaterial({ color: col(ctx, "ledOff"), toneMapped: false }));
+  barBack.position.set(0, -h * 0.68, 0);
+  const bar = new THREE.Mesh(new THREE.PlaneGeometry(w, h * 0.12), new THREE.MeshBasicMaterial({ color: col(ctx, o.tone ?? "success"), toneMapped: false }));
+  bar.position.set(0, -h * 0.68, 0.002);
+  g.add(barBack, bar);
+  g.position.set(...o.pos);
+  g.rotation.y = o.rotY ?? 0;
+  stage.scene.add(g);
+  const max = Math.max(Math.abs(o.from), Math.abs(o.to)) || 1;
+  return (t) => {
+    const k = powerOn(t, o.at);
+    g.visible = k > 0;
+    if (!g.visible) return;
+    const p = clamp((Math.floor((t - o.at) * 30) / 30 - 0.15) / Math.max(1e-3, o.dur ?? 0.4));
+    const v = o.from + (o.to - o.from) * p;
+    num.draw(`${o.label} ${fmt(v)}`, true);
+    const r = Math.max(0.001, Math.abs(v) / max);
+    bar.scale.x = r;
+    bar.position.x = (-w * (1 - r)) / 2;
+  };
+}