kasaframe 0.1.1 → 0.1.4

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;
+  };
+}

package/themes/server-hall/kit.ts

@@ -0,0 +1,138 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { THREE } from "@kasaframe/themes/stage3d";
+
+// effects.ts 의 이름 있는 내보내기는 theme.json 효과 목록과 같아야 해서, 효과가 아닌 3D 도구(색·빛 번짐 판·글 판)는 여기 둔다
+
+export type V3 = [number, number, number];
+
+export const hex = (ctx: SceneCtx, k: string): string => ctx.style.colors[k] ?? k;
+export const col = (ctx: SceneCtx, k: string): THREE.Color => new THREE.Color(hex(ctx, k));
+
+let glow: THREE.Texture | null = null;
+/** 빛 번짐 한 점 — 가운데가 밝고 둘레로 사라지는 원. 가산 혼합 점·판에 쓴다(후처리 블룸 대신 — SwiftShader 가 버틴다) */
+export function glowTexture(): THREE.Texture {
+  if (glow) return glow;
+  const c = document.createElement("canvas");
+  c.width = c.height = 64;
+  const g = c.getContext("2d")!;
+  const r = g.createRadialGradient(32, 32, 0, 32, 32, 32);
+  r.addColorStop(0, "rgba(255,255,255,1)");
+  r.addColorStop(0.25, "rgba(255,255,255,0.55)");
+  r.addColorStop(1, "rgba(255,255,255,0)");
+  g.fillStyle = r;
+  g.fillRect(0, 0, 64, 64);
+  glow = new THREE.CanvasTexture(c);
+  return glow;
+}
+
+/** 타공 바닥 타일 한 장(60cm) — 모서리 줄과 구멍 격자. repeat 으로 바닥 전체에 깐다 */
+export function tileTexture(ctx: SceneCtx): THREE.Texture {
+  const c = document.createElement("canvas");
+  c.width = c.height = 128;
+  const g = c.getContext("2d")!;
+  g.fillStyle = hex(ctx, "floor");
+  g.fillRect(0, 0, 128, 128);
+  g.fillStyle = hex(ctx, "tile");
+  for (let y = 16; y < 112; y += 8) for (let x = 16; x < 112; x += 8) g.fillRect(x, y, 4, 4);
+  g.strokeStyle = hex(ctx, "line");
+  g.lineWidth = 3;
+  g.strokeRect(1.5, 1.5, 125, 125);
+  const tex = new THREE.CanvasTexture(c);
+  tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = 4;
+  return tex;
+}
+
+export interface Plate {
+  mesh: THREE.Mesh;
+  /** 글을 다시 그린다 — 같은 글이면 건너뛴다. force 면 늘 그린다(시각마다 바뀌는 글 — 검사는 같은 시각을 두 번 그려 fillText 까지 견준다) */
+  draw(text: string, force?: boolean): void;
+}
+
+/**
+ * 뒤에서 빛나는 글 판 — 어두운 판에 가는 테, 글은 빛(톤 매핑 안 받음). 장면 build 에서 만든다(글꼴을 다 받은 뒤라 치수가 맞다).
+ * 판 크기는 가장 긴 글(sample)로 정해 두고 글만 바꿔 그린다
+ */
+export function plate(ctx: SceneCtx, o: { sample: string; height: number; font?: "sans" | "display" | "mono"; tone?: string; edge?: string | null; fill?: string | null; align?: "left" | "center" }): Plate {
+  const px = 128;
+  const family = ctx.style.fonts[o.font ?? "display"];
+  const weight = o.font === "mono" ? 700 : 600;
+  const font = `${weight} ${px}px ${family}`;
+  const probe = document.createElement("canvas").getContext("2d")!;
+  probe.font = font;
+  const pad = px * 0.35;
+  const cw = Math.ceil(probe.measureText(o.sample).width + pad * 2);
+  const ch = Math.ceil(px * 1.45);
+  const c = document.createElement("canvas");
+  c.width = cw;
+  c.height = ch;
+  const tex = new THREE.CanvasTexture(c);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = 4;
+  const w = (o.height * cw) / ch;
+  const mesh = new THREE.Mesh(new THREE.PlaneGeometry(w, o.height), new THREE.MeshBasicMaterial({ map: tex, transparent: true, toneMapped: false, depthWrite: false, side: THREE.DoubleSide }));
+  let last: string | null = null;
+  return {
+    mesh,
+    draw(text, force = false) {
+      if (text === last && !force) return;
+      last = text;
+      const g = c.getContext("2d")!;
+      g.clearRect(0, 0, cw, ch);
+      if (o.fill !== null) {
+        g.fillStyle = hex(ctx, o.fill ?? "surface");
+        g.globalAlpha = 0.92;
+        g.fillRect(0, 0, cw, ch);
+        g.globalAlpha = 1;
+      }
+      if (o.edge !== null) {
+        g.strokeStyle = hex(ctx, o.edge ?? "line");
+        g.lineWidth = px * 0.05;
+        g.strokeRect(px * 0.04, px * 0.04, cw - px * 0.08, ch - px * 0.08);
+      }
+      g.font = font;
+      g.fillStyle = hex(ctx, o.tone ?? "ink");
+      g.textBaseline = "middle";
+      g.textAlign = o.align === "left" ? "left" : "center";
+      // 판은 가장 긴 글로 지었다 — 그래도 넘치면 판 안으로 가로만 줄여 그린다(끝 글자가 잘리지 않게)
+      const room = cw - pad * 2;
+      const tw = g.measureText(text).width;
+      g.save();
+      if (tw > room) {
+        const k = room / tw;
+        g.translate(o.align === "left" ? pad : cw / 2, 0);
+        g.scale(k, 1);
+        g.fillText(text, 0, ch / 2 + px * 0.04);
+      } else g.fillText(text, o.align === "left" ? pad : cw / 2, ch / 2 + px * 0.04);
+      g.restore();
+      tex.needsUpdate = true;
+    },
+  };
+}
+
+/** 꺾은선 위 비율 p(0..1)의 점 */
+export function along(path: readonly V3[], p: number): THREE.Vector3 {
+  const v = path.map((q) => new THREE.Vector3(...q));
+  const seg = v.slice(1).map((q, i) => q.distanceTo(v[i]));
+  const total = seg.reduce((a, b) => a + b, 0) || 1;
+  let left = Math.max(0, Math.min(1, p)) * total;
+  for (let i = 0; i < seg.length; i++) {
+    if (left <= seg[i] || i === seg.length - 1) return v[i].clone().lerp(v[i + 1], seg[i] ? Math.min(1, left / seg[i]) : 0);
+    left -= seg[i];
+  }
+  return v[v.length - 1].clone();
+}
+
+export const pathLength = (path: readonly V3[]): number => path.slice(1).reduce((a, q, i) => a + new THREE.Vector3(...q).distanceTo(new THREE.Vector3(...path[i])), 0);
+
+/** 전원이 들어오는 판 — 형광등처럼 두 번 깜빡이고 켜진다. 켜진 뒤엔 1 */
+export const powerOn = (t: number, at: number): number => {
+  const k = t - at;
+  if (k < 0) return 0;
+  if (k < 0.03) return 1;
+  if (k < 0.07) return 0.15;
+  if (k < 0.1) return 1;
+  if (k < 0.13) return 0.4;
+  return 1;
+};

package/themes/server-hall/sample/assets/og/logo.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140 650" width="1140" height="650" fill="none" role="img" aria-label="OpenGateway">
+  <title>OpenGateway</title>
+  <g id="logo" stroke="currentColor" fill="currentColor">
+    <rect id="node-in" x="36" y="36" width="420" height="578" rx="89" fill="none" stroke-width="72"/>
+    <rect id="bar-in" x="72" y="272" width="277" height="106" stroke="none"/>
+    <path id="node-out" d="M684 213 L684 125 A89 89 0 0 1 773 36 L1015 36 A89 89 0 0 1 1104 125 L1104 525 A89 89 0 0 1 1015 614 L773 614 A89 89 0 0 1 684 525 L684 436" fill="none" stroke-width="72" stroke-linecap="butt"/>
+    <g id="arrow">
+      <rect id="arrow-shaft" x="420" y="272" width="394" height="106" stroke="none"/>
+      <path id="arrow-head" d="M833 220 L970 325 L833 430 Z" stroke-width="38" stroke-linejoin="round"/>
+    </g>
+  </g>
+</svg>