kasaframe 0.1.3 → 0.1.5

package/themes/server-hall/sample/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <title>server-hall 견본</title>
+  </head>
+  <body>
+    <div id="stage"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/themes/server-hall/sample/kf.json

@@ -0,0 +1,59 @@
+{
+  "template": "promo",
+  "title": "server-hall · OpenGateway 소개 15초",
+  "theme": "server-hall",
+  "fps": 60,
+  "width": 1920,
+  "height": 1080,
+  "duration": 15,
+  "mode": "seek",
+  "style": "style.json",
+  "music": "assets/music/kawaii-friends-0400.mp3",
+  "beats": "beats.json",
+  "captions": "none",
+  "safeArea": {
+    "top": 60,
+    "bottom": 60,
+    "left": 80,
+    "right": 80
+  },
+  "text": {
+    "policy": "terms-only",
+    "maxOnScreen": 0,
+    "minPx": 0
+  },
+  "scenes": [
+    {
+      "id": "gather",
+      "from": 0,
+      "dur": 3.1169,
+      "file": "scenes/gather.ts",
+      "role": "hook",
+      "idea": "여러 회사 모델이 흩어져 있다 → 회사별 모델 수"
+    },
+    {
+      "id": "models",
+      "from": 3.1169,
+      "dur": 4.2191,
+      "file": "scenes/models.ts",
+      "role": "explain",
+      "idea": "한 주소(https://apis.opengateway.ai/v1) → 박마다 바뀌는 모델 ID 가 같은 주소로 → 드롭 앞 모아 올리기"
+    },
+    {
+      "id": "price",
+      "from": 7.336,
+      "dur": 4.2388,
+      "file": "scenes/price.ts",
+      "role": "drop",
+      "idea": "드롭에 가장 크게 102 · 한 주소 → 하루 시계에서 00–10시 창이 -90% → deepseek 가격"
+    },
+    {
+      "id": "end",
+      "from": 11.5748,
+      "dur": 3.4252,
+      "file": "scenes/end.ts",
+      "role": "end",
+      "idea": "첫 토큰 실측 셋 → 끝 카드(OG 로고 · opengateway.ai)"
+    }
+  ]
+}

package/themes/server-hall/sample/lib/facts.ts

@@ -0,0 +1,29 @@
+// OpenGateway 사실 — docs/briefs/og-intro-15s.md 에 적힌 것만. 숫자를 여기서 새로 만들지 않는다
+export const OG = {
+  url: "https://apis.opengateway.ai/v1",
+  host: "apis.opengateway.ai/v1",
+  site: "opengateway.ai",
+  models: 102,
+  endpoints: ["/chat/completions", "/responses", "/messages", "/images/generations"],
+  providers: [
+    ["OpenAI", 41],
+    ["Anthropic", 15],
+    ["Google", 15],
+    ["Z.ai", 7],
+    ["xAI", 6],
+    ["Qwen", 5],
+    ["Moonshot", 4],
+    ["DeepSeek", 4],
+    ["MiniMax", 3],
+  ] as [string, number][],
+  ids: ["openai/gpt-6.1-sol", "anthropic/claude-opus-5-5", "google/gemini-3.5-flash-lite", "deepseek/deepseek-v4.1-flash-ultrafast", "z-ai/glm-5.3-flash-ultrafast"],
+  night: { from: 0, to: 10, tz: "KST" },
+  deepseek: { id: "deepseek-v4.1-flash-ultrafast", input: ["$0.30", "$0.03"], output: ["$1.20", "$0.12"], off: "-90%" },
+  glm: { id: "glm-5.3-flash-ultrafast", off: "-70%" },
+  ttft: [
+    ["gpt-5.4-nano", "612.5ms", 612.5],
+    ["gemini-3.5-flash-lite", "693.0ms", 693.0],
+    ["claude-haiku-5-5", "760.5ms", 760.5],
+  ] as [string, string, number][],
+  calls: "18번 합 $0.0004",
+};

package/themes/server-hall/sample/lib/hall.ts

@@ -0,0 +1,81 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { THREE } from "@kasaframe/themes/stage3d";
+import { cableTray, coreSwitch, hallStage, rackRow, type HallShot, type RackSpec } from "../../effects.ts";
+import { hex, type V3 } from "../../kit.ts";
+import { OG } from "./facts.ts";
+
+// 홀 한 칸 — 통로는 -z 로 뻗고, 왼쪽 줄 랙은 +x 를, 오른쪽 줄은 -x 를 본다. 끝(z = SWITCH_Z)에 코어 스위치 하나
+export const X = 1.7;
+export const TRAY_Y = 3.0;
+export const SWITCH_Z = -12;
+export const SLOTS = 15;
+export const zOf = (k: number): number => -1 - k * 0.66;
+
+/** 회사 랙 자리 — 왼쪽·오른쪽 번갈아, 입구에서 두 칸 들어간 자리부터(통로 안에 선 카메라 앞에 오게) */
+export const VENDOR_SLOT = OG.providers.map(([name], i) => ({ name, side: (i % 2 === 0 ? -1 : 1) as -1 | 1, k: 2 + Math.floor(i / 2) }));
+
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+export const cutsAt = (ctx: SceneCtx): number[] => [0, ...ctx.beats.bars.filter((b) => b > 0.6 && b < ctx.dur - 1e-6)];
+
+export function rackSpecs(fill: (i: number, name: string) => RackSpec["fill"]): RackSpec[] {
+  const out: RackSpec[] = [];
+  for (const side of [-1, 1] as const)
+    for (let k = 0; k < SLOTS; k++) {
+      const v = VENDOR_SLOT.findIndex((s) => s.side === side && s.k === k);
+      const name = v >= 0 ? VENDOR_SLOT[v].name : undefined;
+      out.push({ pos: [side * X, 0, zOf(k)], face: side === -1 ? 1 : -1, name, fill: v >= 0 ? fill(v, name!) : undefined });
+    }
+  return out;
+}
+
+/** 스위치 윗면 — 트레이가 주소 판 뒤로 내려와 꽂힌다(판을 가로지르지 않게) */
+const PORT: V3 = [0, 2.45, SWITCH_Z - 0.1];
+const DROP_Z = SWITCH_Z + 0.2;
+
+/** 요청 길 — 스위치에서 트레이를 따라 그 회사 랙 위까지, 랙 안으로 */
+export const toRack = (v: number): V3[] => {
+  const s = VENDOR_SLOT[v];
+  const z = zOf(s.k);
+  return [PORT, [0, TRAY_Y, DROP_Z], [0, TRAY_Y, z], [s.side * X, TRAY_Y, z], [s.side * X, 2.2, z]];
+};
+
+/** 들어오는 요청 — from 에서 트레이를 따라 스위치로. 펄스 하나가 요청 하나 */
+export const inbound = (x = 0, from = -0.8): V3[] => [[x, TRAY_Y, from], [x, TRAY_Y, DROP_Z], [x * 0.4, 2.45, SWITCH_Z - 0.1]];
+
+/** 일정 간격의 시각 — from 부터 to 전까지 every 초마다 */
+export const every = (from: number, to: number, step: number): number[] => Array.from({ length: Math.max(0, Math.ceil((to - from) / step)) }, (_, i) => from + i * step);
+
+export const trays = (): V3[][] => [inbound(), ...VENDOR_SLOT.map((s) => [[0, TRAY_Y, zOf(s.k)], [s.side * X, TRAY_Y, zOf(s.k)]] as V3[])];
+
+/** 홀 한 벌 — 무대·랙 줄·트레이·스위치. 장면마다 하나씩 짓는다(렌더러는 돌려 쓴다) */
+export function hall(root: HTMLElement, ctx: SceneCtx, o: { shots: HallShot[]; fill: (i: number, name: string) => RackSpec["fill"]; wave?: { at: number; origin: V3 }; screen?: (t: number) => string; hits?: number[]; url?: string; names?: boolean; namesAt?: number; traysAt?: number }) {
+  const stage = hallStage(root, { ctx, shots: o.shots });
+  stage.add(rackRow(stage, { ctx, racks: rackSpecs(o.fill), wave: o.wave, names: o.names, at: o.namesAt }));
+  stage.add(cableTray(stage, { ctx, paths: trays(), at: o.traysAt }));
+  stage.add(coreSwitch(stage, { ctx, pos: [0, 0, SWITCH_Z], url: o.url ?? OG.url, screen: o.screen, hits: o.hits }));
+  return stage;
+}
+
+/** OG 로고를 캔버스에 — logo.svg 와 같은 도형(viewBox 1140×650). 그림을 불러오지 않아 첫 프레임부터 선다 */
+export function logoTexture(ctx: SceneCtx, tone = "ink"): THREE.CanvasTexture {
+  const c = document.createElement("canvas");
+  c.width = 1140;
+  c.height = 650;
+  const g = c.getContext("2d")!;
+  g.strokeStyle = g.fillStyle = hex(ctx, tone);
+  g.lineWidth = 72;
+  g.beginPath();
+  g.roundRect(36, 36, 420, 578, 89);
+  g.stroke();
+  g.fillRect(72, 272, 277, 106);
+  g.stroke(new Path2D("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"));
+  g.fillRect(420, 272, 394, 106);
+  const head = new Path2D("M833 220 L970 325 L833 430 Z");
+  g.lineWidth = 38;
+  g.lineJoin = "round";
+  g.fill(head);
+  g.stroke(head);
+  const tex = new THREE.CanvasTexture(c);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  return tex;
+}

package/themes/server-hall/sample/main.ts

@@ -0,0 +1,9 @@
+import { mountProject } from "@kasaframe/adapters";
+import kf from "./kf.json";
+import style from "./style.json";
+
+// 장면 파일을 늘리거나 빼도 이 파일은 그대로 — 시간표는 kf.json 한 곳. 글꼴·색 변수는 mountProject 가 건다
+const scenes = import.meta.glob("./scenes/*.ts", { eager: true });
+const beats = Object.values(import.meta.glob("./beats.json", { eager: true, import: "default" }))[0] ?? null;
+
+mountProject({ kf, scenes, beats, style, stage: document.getElementById("stage")! });

package/themes/server-hall/sample/scenes/end.ts

@@ -0,0 +1,57 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { THREE } from "@kasaframe/themes/stage3d";
+import { cableTray, labelPlate, requestPulse } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cutsAt, every, hall, inbound, logoTexture } from "../lib/hall.ts";
+
+// 지연 = 빛이 길을 지나는 시간. 첫 마디: 통로 옆에서 — 세 갈래 트레이를 모델 셋의 첫 요청이 실측 시간 그대로(612.5ms·693.0ms·760.5ms) 지나가고,
+// 닿는 순간 시간이 켜진다. 18번 호출은 빛 열여덟. 둘째 마디: 끝 카드 — 통로 위 OG 로고와 주소, 요청 빛은 끝까지 스위치로 들어간다
+const LANE_Y = [2.75, 2.3, 1.85];
+const Z0 = -3.0;
+const Z1 = -5.9;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, bar2] = cutsAt(ctx);
+    // 첫 박을 기다리지 않는다 — 세 줄기가 장면 처음부터 실측 시간 그대로 달린다
+    const go = 0.05;
+    const lanes = LANE_Y.map((y): [number, number, number][] => [[-0.3, y, Z0], [-0.3, y, Z1]]);
+    const flow = every(bar2 - 0.05, ctx.dur, 0.08);
+    const stage = hall(root, ctx, {
+      shots: [
+        { from: 0, to: bar2, keys: [{ t: 0, pos: [1.15, 2.2, -4.35], look: [-1.6, 2.25, -4.45], fov: 64 }, { t: bar2, pos: [1.15, 2.2, -4.55], look: [-1.6, 2.25, -4.45], fov: 64 }] },
+        { from: bar2, to: ctx.dur + 1, keys: [{ t: bar2, pos: [0, 1.7, 0.8], look: [0, 1.85, -5.5] }, { t: ctx.dur, pos: [0, 1.7, 0.0], look: [0, 1.85, -5.5] }] },
+      ],
+      fill: (i) => [[-10, OG.providers[i][1], 0.01]],
+      hits: flow.map((t) => t + 0.9),
+      // 옆에서 보는 경주 컷엔 줄 표지·천장 트레이가 화면을 가로지른다 — 끝 카드부터
+      namesAt: bar2,
+      traysAt: bar2,
+    });
+    stage.add(cableTray(stage, { ctx, paths: lanes.map((l) => l.map(([x, y, z]) => [x, y - 0.05, z] as [number, number, number])), until: bar2 }));
+    // 경주 — 세 갈래를 실측 시간 그대로
+    stage.add(requestPulse(stage, { ctx, path: (i) => lanes[i], times: [go, go, go], dur: (i) => OG.ttft[i][2] / 1000, tone: (i) => (i === 0 ? "success" : "accent"), size: 0.7 }));
+    OG.ttft.forEach(([id, ms, v], i) => {
+      stage.add(labelPlate(stage, { ctx, text: id, pos: [-0.3, LANE_Y[i] + 0.2, Z0 - 0.6], rotY: Math.PI / 2, height: 0.13, font: "mono", tone: "dim", at: 0, until: bar2, frame: false }));
+      stage.add(labelPlate(stage, { ctx, text: ms, pos: [-0.3, LANE_Y[i] + 0.22, Z1 + 0.45], rotY: Math.PI / 2, height: 0.24, tone: i === 0 ? "success" : "ink", at: go + v / 1000, until: bar2 }));
+    });
+    // 18번 호출 — 빛 열여덟이 가운데 갈래로
+    stage.add(requestPulse(stage, { ctx, path: lanes[2], times: Array.from({ length: 18 }, (_, i) => b(2) + i * 0.03), dur: 0.35, tone: "amber", size: 0.4, trail: 3 }));
+    stage.add(labelPlate(stage, { ctx, text: "OG 18번 · $0.0004", pos: [-0.3, 1.64, (Z0 + Z1) / 2], rotY: Math.PI / 2, height: 0.22, font: "mono", tone: "amber", at: b(3), until: bar2 }));
+
+    // 끝 카드 — 통로 위에 매단 로고와 주소
+    const logo = new THREE.Mesh(new THREE.PlaneGeometry(2.8, (2.8 * 650) / 1140), new THREE.MeshBasicMaterial({ map: logoTexture(ctx), transparent: true, toneMapped: false, depthWrite: false }));
+    logo.position.set(0, 2.15, -5.5);
+    // 빛 번짐(가산 점)보다 나중에 그린다 — 안 그러면 뒤의 요청 빛이 로고 위로 비친다
+    logo.renderOrder = 10;
+    stage.scene.add(logo);
+    stage.add((t) => {
+      logo.visible = t >= bar2;
+    });
+    stage.add(labelPlate(stage, { ctx, text: OG.site, pos: [0, 1.12, -5.5], height: 0.36, tone: "accentText", at: b(5), frame: false }));
+    stage.add(requestPulse(stage, { ctx, path: inbound(), times: flow, dur: 0.9 }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/server-hall/sample/scenes/gather.ts

@@ -0,0 +1,38 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { labelPlate, requestPulse } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cutsAt, hall, inbound, VENDOR_SLOT, X, zOf } from "../lib/hall.ts";
+
+// 회사 = 랙 한 대, 모델 = 켜진 서버 칸 하나. 첫 마디: 통로 입구에서 — 회사 랙이 하나씩 전원을 받아 모델 수만큼 칸이 아래부터 켜진다
+// (OpenAI 랙은 42U 중 41칸). 둘째 마디: 통로 안으로 다가가 랙 위에 수가 켜지고, 넷째 박에 첫 요청 빛이 통로를 지나 끝의 스위치로
+const RATE = 70;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, bar2] = cutsAt(ctx);
+    // 회사마다 앞 회사가 다 켜진 뒤 이어서 — 늘 어느 랙의 칸이 켜지는 중
+    const starts: number[] = [];
+    let acc = 0;
+    for (const [, n] of OG.providers) {
+      starts.push(acc);
+      acc += n / RATE + 0.03;
+    }
+    const stage = hall(root, ctx, {
+      shots: [
+        { from: 0, to: bar2, keys: [{ t: 0, pos: [0, 1.6, 1.9], look: [0, 1.3, -8], fov: 56 }, { t: bar2, pos: [0, 1.55, 0.5], look: [0, 1.3, -8], fov: 56, ease: "linear" }] },
+        { from: bar2, to: ctx.dur + 1, keys: [{ t: bar2, pos: [0.2, 1.45, -0.6], look: [0, 1.5, -8] }, { t: ctx.dur, pos: [0.2, 1.5, -1.4], look: [0, 1.5, -8] }] },
+      ],
+      fill: (i) => [[starts[i], OG.providers[i][1], OG.providers[i][1] / RATE]],
+      hits: [b(7) + 0.6],
+    });
+    OG.providers.forEach(([, n], i) => {
+      const s = VENDOR_SLOT[i];
+      stage.add(labelPlate(stage, { ctx, text: String(n), pos: [s.side * (X - 0.78), 2.36, zOf(s.k) + 0.32], height: 0.24, tone: "success", font: "display", at: b(4 + Math.floor(i / 3)) }));
+    });
+    // 첫 요청 — 입구에서 통로 위 트레이를 따라 끝의 스위치까지
+    stage.add(requestPulse(stage, { ctx, path: inbound(), times: [b(7)], dur: 0.6, size: 0.9 }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/server-hall/sample/scenes/models.ts

@@ -0,0 +1,49 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { cableTray, labelPlate, requestPulse } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cutsAt, every, hall, inbound, toRack } from "../lib/hall.ts";
+
+// 한 주소 = 통로 끝 코어 스위치 하나. 첫 마디: 요청 빛이 끊이지 않고 트레이를 따라 스위치로 들어가고, 들어올 때마다 포트가 켜진다.
+// 둘째 마디: 스위치 화면의 모델 ID 가 박마다 바뀌고, 그때마다 빛 하나가 같은 스위치에서 그 회사 랙으로 나간다.
+// 셋째 마디: OpenAI·Anthropic 두 형식이 두 트레이로 같은 스위치에 — 박마다 더 촘촘히(드롭 앞 모아 올리기)
+const VENDOR: Record<string, number> = { openai: 0, anthropic: 1, google: 2, "z-ai": 3, deepseek: 7 };
+const FLOW = 0.9;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, barB, barC] = cutsAt(ctx);
+    const picks = [b(4), b(5), b(6), b(7), (b(7) + b(8)) / 2];
+    const idAt = (t: number) => OG.ids[Math.max(0, picks.filter((x) => x <= t).length - 1)];
+    // 두 형식 — 박마다 펄스가 2·4·6·8 개씩
+    const wave = (k: number, side: number) => Array.from({ length: 2 + 2 * k }, (_, i) => (b(8 + k) ?? barC) + (i * 0.33) / (2 + 2 * k) + side * 0.04);
+    const fmtTimes = [0, 1, 2, 3].flatMap((k) => [...wave(k, 0).map((t) => [t, 0]), ...wave(k, 1).map((t) => [t, 1])]) as [number, number][];
+    const inTimes = every(-0.6, barB, 0.09);
+    const hits = [...inTimes.map((t) => t + FLOW), ...picks, ...fmtTimes.map(([t]) => t + 0.7)];
+    const stage = hall(root, ctx, {
+      shots: [
+        { from: 0, to: barB, keys: [{ t: 0, pos: [0, 1.65, -5.6], look: [0, 1.9, -12] }, { t: barB, pos: [0, 1.6, -7.2], look: [0, 1.9, -12] }] },
+        { from: barB, to: barC, keys: [{ t: barB, pos: [0.6, 2.05, -9.0], look: [0, 2.15, -12] }, { t: barC, pos: [0.45, 2.0, -9.6], look: [0, 2.15, -12] }] },
+        { from: barC, to: ctx.dur + 1, keys: [{ t: barC, pos: [0, 1.75, -3.0], look: [0, 1.9, -12] }, { t: ctx.dur, pos: [0, 1.75, -4.2], look: [0, 1.9, -12] }] },
+      ],
+      fill: (i) => [[-10, OG.providers[i][1], 0.01]],
+      screen: idAt,
+      hits,
+    });
+    // 요청이 끊이지 않고 들어온다(첫 마디)
+    stage.add(requestPulse(stage, { ctx, path: inbound(), times: inTimes, dur: FLOW }));
+    // 고른 모델의 회사 랙으로 — 같은 스위치에서 나간다
+    stage.add(requestPulse(stage, { ctx, path: (i) => toRack(VENDOR[OG.ids[i].split("/")[0]]), times: picks, dur: 0.55, tone: "success", size: 0.7 }));
+    // 두 형식 — 왼쪽 트레이는 OpenAI(청록), 오른쪽은 Anthropic(호박)
+    const fmtPath = (side: number) => inbound(side ? 0.45 : -0.45, -5.4);
+    stage.add(cableTray(stage, { ctx, paths: [fmtPath(0), fmtPath(1)], at: barC }));
+    stage.add(requestPulse(stage, { ctx, path: (i) => fmtPath(fmtTimes[i][1]), times: fmtTimes.map(([t]) => t - 0.2), dur: 0.6, tone: (i) => (fmtTimes[i][1] ? "amber" : "accent") }));
+    const z = -5.8;
+    stage.add(labelPlate(stage, { ctx, text: "OpenAI", pos: [-0.6, 2.1, z], height: 0.3, tone: "accentText", at: barC }));
+    ["/chat/completions", "/responses", "/images/generations"].forEach((e, i) => stage.add(labelPlate(stage, { ctx, text: e, pos: [-0.6, 1.78 - i * 0.2, z], height: 0.15, font: "mono", at: b(8) + 0.08 * (i + 1) })));
+    stage.add(labelPlate(stage, { ctx, text: "Anthropic", pos: [0.6, 2.1, z], height: 0.3, tone: "amber", at: b(9) }));
+    stage.add(labelPlate(stage, { ctx, text: "/messages", pos: [0.6, 1.78, z], height: 0.15, font: "mono", at: b(9) + 0.08 }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/server-hall/sample/scenes/price.ts

@@ -0,0 +1,65 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { hallLights, hourBoard, labelPlate, meterPanel, requestPulse, surge } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cutsAt, every, hall, inbound, SWITCH_Z, toRack } from "../lib/hall.ts";
+
+// 드롭 = 서지. 스위치 앞에서 통로를 돌아보면 홀 전체 칸이 스위치에서 바깥으로 물결처럼 번쩍이고, 102 · 한 주소, 요청이 스위치에서 아홉 랙으로 나간다.
+// 둘째 마디: 벽의 24칸 시간 판이 한 시간씩 켜지는 동안 통로 조명이 따라간다 — 00–10 시는 불이 꺼진 시간, 그 창이 -90%.
+// 셋째 마디: 통로에 매단 계량기 — deepseek 값이 정가에서 밤값으로 굴러 내려간다
+const RATE = 24 / 1.25;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, bar2, bar3] = cutsAt(ctx);
+    const out = every(0.05, bar2, 0.06);
+    const flow = every(bar2 - 0.6, ctx.dur, 0.12);
+    const stage = hall(root, ctx, {
+      shots: [
+        { from: 0, to: bar2, keys: [{ t: 0, pos: [0, 1.85, -10.2], look: [0, 1.4, 2], fov: 56 }, { t: bar2, pos: [0, 1.8, -9.6], look: [0, 1.4, 2], fov: 56 }] },
+        { from: bar2, to: bar3, keys: [{ t: bar2, pos: [0, 1.75, -1.7], look: [0, 2.15, -5.2] }, { t: bar3, pos: [0, 1.8, -2.4], look: [0, 2.15, -5.2] }] },
+        { from: bar3, to: ctx.dur + 1, keys: [{ t: bar3, pos: [0, 1.6, -0.6], look: [0, 1.5, -4] }, { t: ctx.dur, pos: [0, 1.6, -1.4], look: [0, 1.5, -4] }] },
+      ],
+      fill: (i) => [[-10, OG.providers[i][1], 0.01]],
+      wave: { at: 0, origin: [0, 1.2, SWITCH_Z] },
+      hits: flow.map((t) => t + 0.9),
+      // 스위치 앞에서 입구 쪽을 본다 — 랙 이름표는 등을 보여 뒤집혀 읽히니 이 장면엔 달지 않는다
+      names: false,
+    });
+    stage.add(surge(stage, { ctx, drop: 0, origin: [0, 1.4, SWITCH_Z + 0.6] }));
+    stage.add(requestPulse(stage, { ctx, path: (i) => toRack(i % 9), times: out, dur: 0.5, tone: "success", size: 0.6 }));
+    stage.add(labelPlate(stage, { ctx, text: String(OG.models), pos: [0, 2.05, -6.6], rotY: Math.PI, height: 0.95, tone: "accentText", at: 0, until: bar2, frame: false }));
+    stage.add(labelPlate(stage, { ctx, text: OG.host, pos: [0, 1.38, -6.6], rotY: Math.PI, height: 0.2, font: "mono", at: b(1), until: bar2 }));
+
+    // 하루 — 시간 판과 조명이 같은 시계를 따른다
+    const hourNow = (t: number) => Math.floor((t - bar2) * RATE + 1e-6);
+    stage.add(hourBoard(stage, { ctx, pos: [0, 2.35, -5.2], width: 2.0, at: bar2, until: bar3, rate: RATE, night: [OG.night.from, OG.night.to] }));
+    stage.add(
+      hallLights(stage, {
+        ctx,
+        rows: 10,
+        z0: -0.5,
+        z1: -11,
+        level: (t, i) => {
+          if (t < bar2 || t >= bar3) return 1;
+          const h = hourNow(t);
+          // 밤 창 동안 조명이 입구 쪽부터 한 줄씩 꺼졌다가 10시에 한꺼번에 켜진다
+          return h < OG.night.to ? (i <= h ? 0.08 : 1) : 1;
+        },
+      }),
+    );
+    stage.add(labelPlate(stage, { ctx, text: "KST 00:00–10:00", pos: [-0.6, 2.8, -5.2], height: 0.16, font: "mono", tone: "accentText", at: b(5), until: bar3 }));
+    stage.add(labelPlate(stage, { ctx, text: OG.deepseek.off, pos: [-0.6, 1.72, -5.2], height: 0.46, tone: "accentText", at: b(6), until: bar3, frame: false }));
+
+    // 계량기 — 정가 → 밤값
+    const money = (v: number) => `$${v.toFixed(2)}`;
+    stage.add(labelPlate(stage, { ctx, text: OG.deepseek.id, pos: [0, 2.32, -4], height: 0.2, font: "mono", tone: "ink", at: bar3 }));
+    stage.add(meterPanel(stage, { ctx, label: "입력", pos: [0, 1.84, -4], from: 0.3, to: 0.03, at: b(9), dur: 0.35, format: money, height: 0.34 }));
+    stage.add(meterPanel(stage, { ctx, label: "출력", pos: [0, 1.22, -4], from: 1.2, to: 0.12, at: b(10), dur: 0.35, format: money, height: 0.34 }));
+    stage.add(labelPlate(stage, { ctx, text: `${OG.deepseek.off} · ${OG.glm.id} ${OG.glm.off}`, pos: [0, 0.72, -4], height: 0.14, font: "mono", tone: "accentText", at: b(11) }));
+    // 들어오는 요청은 끊이지 않는다
+    stage.add(requestPulse(stage, { ctx, path: inbound(), times: flow, dur: 0.9 }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/server-hall/sample/style.json

@@ -0,0 +1,107 @@
+{
+  "name": "server-hall",
+  "label": "데이터센터 통로 — 요청이 빛으로 랙 사이를 지난다",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#05070B",
+    "surface": "#0D1117",
+    "raised": "#161C25",
+    "line": "#2A3340",
+    "ink": "#E6F1FF",
+    "inkSoft": "#B8C6D8",
+    "dim": "#7C8A9C",
+    "accent": "#4FD1FF",
+    "accentSoft": "#14455A",
+    "accentText": "#7FDFFF",
+    "onAccent": "#05070B",
+    "success": "#3CFF8F",
+    "danger": "#FF5A4F",
+    "warning": "#FFB547",
+    "rack": "#1A2029",
+    "unit": "#1C222B",
+    "led": "#3CFF8F",
+    "ledOff": "#142019",
+    "tray": "#E3B21F",
+    "floor": "#161B22",
+    "tile": "#262D37",
+    "glow": "#CFF6FF",
+    "amber": "#FFB547",
+    "lamp": "#DDEBFF"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Barlow Condensed\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Barlow Condensed",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/barlowcondensed/BarlowCondensed-SemiBold.ttf",
+        "weight": "400 900"
+      },
+      {
+        "family": "JetBrains Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/files/jetbrains-mono-latin-wght-normal.woff2",
+        "weight": "100 800"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      }
+    ]
+  },
+  "type": {
+    "hero": 200,
+    "title": 88,
+    "body": 40,
+    "caption": 30,
+    "weightDisplay": 600,
+    "weightBody": 500,
+    "tracking": "0.01em"
+  },
+  "radius": {
+    "sm": 2,
+    "md": 4,
+    "lg": 6,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "0 0 0 1px #2A3340",
+    "lift": "0 0 0 1px #2A3340, 0 0 24px #4FD1FF33"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "once-per-phrase",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "inOutCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.3,
+      "slow": 0.6
+    }
+  },
+  "theme": {
+    "inks": [
+      "#05070B 어두운 홀 · #11151B 랙 · #161B22 타공 바닥",
+      "#3CFF8F 서버 LED(켜진 칸 = 모델) · #4FD1FF 요청 빛 · #FFB547 경고·두 번째 갈래",
+      "#E3B21F 머리 위 케이블 트레이 · #DDEBFF 통로 조명"
+    ],
+    "texture": "어둠 속 랙 정면의 1U 칸과 LED 점, 타공 바닥 타일, 안개로 깊어지는 통로. 빛은 LED·요청 펄스·조명줄만 내고 나머지는 어둡다",
+    "movement": "요청은 빛 펄스로 트레이를 따라 흘러 랙에 떨어지고, 닿으면 그 칸 LED 가 켜진다. 카메라는 통로를 따라 펄스를 좇거나 랙 앞에 다가갈 때만 움직이고 마디마다 다른 자리에 선다. 드롭은 홀 전체 LED 가 스위치에서 바깥으로 물결처럼 켜진다"
+  },
+  "notes": [
+    "랙 한 대 = 회사(공급자), 42U 중 켜진 칸 하나 = 모델 하나 — OpenAI 랙은 41칸이 켜진다.",
+    "통로 끝 코어 스위치 하나가 한 주소(게이트웨이) — 모든 트레이가 여기로 모인다.",
+    "구글 데이터센터 핫 아일(초록 LED·끝의 파랑)과 노란 광섬유 트레이에서.",
+    "헤드리스 SwiftShader — 랙 칸·LED 는 InstancedMesh, 그림자 없음, 빛 번짐은 가산 혼합 판으로."
+  ]
+}

package/themes/server-hall/slots.ts

@@ -0,0 +1,106 @@
+import { clamp, rand, type Style } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { stillStage } from "@kasaframe/themes/stage3d";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { cssVar, layer, letters, partial, shownCount, traceCanvas } from "@kasaframe/themes/slotkit";
+import { hallStage, rackRow, type RackSpec } from "./effects.ts";
+import { powerOn } from "./kit.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 데이터센터 통로의 결로. 3D 는 surface 하나(서 있는 통로를 한 번 그려 둔다), 나머지는 DOM·캔버스 2D
+export const slots: ThemeSlots = {
+  // 어두운 통로를 정면에서 — 양쪽 랙의 칸이 드문드문 켜져 있다. 한 번 그리고 서 있다
+  surface(el, { ctx, seed }) {
+    const vertical = ctx.meta.height > ctx.meta.width;
+    const stage = hallStage(el, { ctx, shots: [{ from: -1, to: 1e9, keys: [{ t: 0, pos: [0, 1.5, vertical ? 3.4 : 2.2], look: [0, 1.35, -9], fov: vertical ? 62 : 50 }] }] });
+    const racks: RackSpec[] = [];
+    for (const side of [-1, 1] as const)
+      for (let k = 0; k < 15; k++) racks.push({ pos: [side * 1.7, 0, -1 - k * 0.66], face: side === -1 ? 1 : -1, fill: [[-10, Math.floor(rand(seed, k * 2 + (side + 1)) * 30), 0.01]] });
+    stage.add(rackRow(stage, { ctx, racks }));
+    return stillStage(stage, stage);
+  },
+
+  // 랙 문짝 판 — 어두운 면, 가는 테, 왼쪽 세로 LED 줄이 형광등처럼 깜빡이며 들어온다. 강조 판은 청록 테
+  panel(el, { at, tone }) {
+    const box = layer(el, `inset:0;background:var(--kf-surface);box-shadow:inset 0 0 0 2px ${tone === "accent" ? "var(--kf-accent)" : "var(--kf-line)"}`, true);
+    const strip = layer(box, "left:10px;top:12px;bottom:12px;width:6px;background:repeating-linear-gradient(to bottom, var(--kf-success) 0 6px, transparent 6px 14px)");
+    return (t) => {
+      const k = powerOn(t, at);
+      box.style.visibility = k > 0 ? "visible" : "hidden";
+      box.style.opacity = String(k);
+      strip.style.opacity = String(k >= 1 ? 1 : 0.3);
+    };
+  },
+
+  // 전원이 들어오듯 — 두 번 깜빡이고 켜진다
+  land(_el, { at }) {
+    return (t): Style => (t < at ? {} : { opacity: powerOn(t, at) });
+  },
+
+  // 글이 빛을 받아 한 자씩 켜진다 — 막 켜진 몇 자는 청록으로 번지고 곧 흰 글로 가라앉는다
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    return (t) => {
+      const n = shownCount(spans.length, t, at, dur);
+      const done = t >= at + dur;
+      spans.forEach((s, i) => {
+        s.style.visibility = i < n ? "visible" : "hidden";
+        const hot = !done && i >= n - 3 && i < n;
+        s.style.textShadow = hot ? "0 0 14px var(--kf-accent)" : "";
+        s.style.color = hot ? "var(--kf-accent-text)" : "";
+      });
+    };
+  },
+
+  // 케이블 — 가는 선이 그어지고, 다 그은 뒤엔 요청 빛 둘이 선을 따라 계속 흐른다
+  trace(el, { points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points, 30);
+    const line = tone === "accent" ? cssVar(el, "accent", "#4FD1FF") : cssVar(el, "tray", cssVar(el, "warning", "#E3B21F"));
+    const glow = cssVar(el, "accent", "#4FD1FF");
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      const pts = partial(points, p);
+      g.strokeStyle = line;
+      g.lineWidth = 4;
+      g.lineCap = "round";
+      g.beginPath();
+      g.moveTo(pts[0][0], pts[0][1]);
+      for (const q of pts.slice(1)) g.lineTo(q[0], q[1]);
+      g.stroke();
+      if (p < 1) return;
+      for (const off of [0, 0.5]) {
+        const k = ((t - at - dur) / 0.9 + off) % 1;
+        const [x, y] = partial(points, k).at(-1)!;
+        g.fillStyle = glow;
+        g.shadowColor = glow;
+        g.shadowBlur = 18;
+        g.beginPath();
+        g.arc(x, y, 7, 0, Math.PI * 2);
+        g.fill();
+        g.shadowBlur = 0;
+      }
+    };
+  },
+
+  // 서지 — 화면이 한 번 차갑게 번쩍이고, LED 줄 띠가 가운데에서 위아래로 훑고 지나간다
+  drop(el, { ctx, drop }) {
+    const flash = layer(el, "inset:0;background:var(--kf-accent);mix-blend-mode:screen;opacity:0");
+    const bands = [0, 1, 2, 3].map(() => layer(el, "left:0;right:0;height:10px;background:repeating-linear-gradient(90deg, var(--kf-success) 0 18px, transparent 18px 30px);display:none"));
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, 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(drop);
+      bands.forEach((b, i) => {
+        const live = local >= 0 && local < 0.6;
+        b.style.display = live ? "" : "none";
+        if (!live) return;
+        const k = local / 0.6;
+        const dir = i % 2 ? -1 : 1;
+        b.style.top = `${(50 + dir * (k * 55 + Math.floor(i / 2) * 6)).toFixed(2)}%`;
+        b.style.opacity = String(1 - k);
+      });
+      return s;
+    };
+  },
+};