kasaframe 0.1.3 → 0.1.5

package/themes/water-works/sample/index.html

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

package/themes/water-works/sample/kf.json

@@ -0,0 +1,59 @@
+{
+  "template": "promo",
+  "title": "water-works · OpenGateway 소개 15초",
+  "theme": "water-works",
+  "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/water-works/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/water-works/sample/lib/hall.ts

@@ -0,0 +1,22 @@
+import type { SceneCtx } from "@kasaframe/core";
+
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+/** t 뒤 k 번째 박 */
+export const beatAfter = (ctx: SceneCtx, t: number, k = 0): number => beatsIn(ctx).filter((x) => x > t + 0.02)[k] ?? t + 0.35 * (k + 1);
+
+/** 컷마다 관 선반(세트)을 이만큼 떨어뜨린다 — 망원 화면 폭(16 남짓) 밖이라 다른 세트가 안 비친다 */
+export const SET = 40;
+
+/** 마디 경계로 n 컷 — [시작, 끝] */
+export function cuts(ctx: SceneCtx, n: number): [number, number][] {
+  const B = ctx.beats.bars.filter((b) => b > 0.5 && b < ctx.dur - 0.1);
+  const edge = (i: number) => (i === 0 ? 0 : i >= n ? ctx.dur + 1 : (B[i - 1] ?? (ctx.dur * i) / n));
+  return Array.from({ length: n }, (_, i) => [edge(i), edge(i + 1)]);
+}
+
+/** 박에서 다음 박까지 0.18초에 돌아가는 밸브 — 고른 박 동안만 열린다 */
+export function openDuring(from: number, to: number): (t: number) => number {
+  const s = (x: number) => Math.min(1, Math.max(0, x / 0.18));
+  return (t) => Math.min(s(t - from), 1 - s(t - to));
+}

package/themes/water-works/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/water-works/sample/scenes/end.ts

@@ -0,0 +1,55 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { brassCard, gauge, nameplate, needle, pipeRun, pumpHall, valve } from "../../effects.ts";
+import svg from "../assets/og/logo.svg?raw";
+import { OG } from "../lib/facts.ts";
+import { SET, beatsIn, cuts } from "../lib/hall.ts";
+
+// 첫 토큰 지연 = 물이 관 끝에 닿는 시간. 같은 빠르기로 흐르니 관 길이가 곧 ms(1 단위 = 83ms)
+const UNIT_MS = 83;
+const SPEED = 9;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const [c0, c1] = cuts(ctx, 2);
+    const hall = pumpHall(root, {
+      ctx,
+      shots: [
+        { from: c0[0], to: c0[1], keys: [{ t: 0, look: [0, 0.2, 0], dist: 17.5 }] },
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], look: [SET, 0.2, 0], dist: 17, yaw: 0.04 }] },
+      ],
+    });
+    // 판 A — 한 물탱크에서 세 관으로 같은 순간 물을 보낸다. 짧은 관부터 끝에 닿고, 닿으면 계기 바늘이 그 ms 를 가리킨다
+    const go = 0.05;
+    const x0 = -7.2;
+    OG.ttft.forEach(([id, label, ms], i) => {
+      const y = 2.1 - i * 2.1;
+      const len = ms / UNIT_MS;
+      const x1 = x0 + len;
+      const arrive = go + len / SPEED;
+      hall.add(pipeRun(hall, { ctx, points: [[x0, y, 0], [x1, y, 0]], r: 0.24, flow: 3.6, fillAt: go, fillSpeed: SPEED }));
+      hall.add(gauge(hall, { ctx, pos: [x1 + 1.05, y, 0.1], size: 0.85, value: (t) => needle(t, { at: arrive, to: ms / 800, dur: 0.4 }), ticks: ["0", "200", "400", "600", "800"], band: [0, 0.75], unit: "ms" }));
+      hall.add(nameplate(hall, { ctx, text: id, pos: [x0 + 0.2, y + 0.62, 0.3], height: 0.3, at: (b[i] ?? 0) + 0.02, font: "mono", align: "left" }));
+      hall.add(nameplate(hall, { ctx, text: label, pos: [x1 + 2.2, y, 0.3], height: 0.62, at: arrive + 0.05, font: "mono", look: "counter", align: "left" }));
+    });
+    hall.add(pipeRun(hall, { ctx, points: [[x0 - 1.4, -3.4, 0], [x0 - 1.4, 2.1, 0], [x0, 2.1, 0]], r: 0.3, flow: 3.6 }));
+    hall.add(pipeRun(hall, { ctx, points: [[x0 - 1.4, 0, 0], [x0, 0, 0]], r: 0.24, flow: 3.6 }));
+    hall.add(pipeRun(hall, { ctx, points: [[x0 - 1.4, -2.1, 0], [x0, -2.1, 0]], r: 0.24, flow: 3.6 }));
+    hall.add(valve(hall, { ctx, pos: [x0 - 1.4, -2.8, 0], size: 0.7, vertical: true, open: (t) => needle(t, { at: 0.02, to: 1, dur: go }) }));
+    hall.add(nameplate(hall, { ctx, text: OG.calls, pos: [2.6, -3.0, 0.5], height: 0.34, at: b[3] ?? 1.07, font: "display", look: "brass" }));
+
+    // 판 B — 끝 카드. 본관 물은 계속 흐르고, 그 앞에 놋쇠 이름판이 선다
+    const X = SET;
+    hall.add(pipeRun(hall, { ctx, points: [[X - 10, 2.9, -0.6], [X + 10, 2.9, -0.6]], r: 0.4, flow: 3.4 }));
+    hall.add(pipeRun(hall, { ctx, points: [[X - 10, -2.5, -0.6], [X + 10, -2.5, -0.6]], r: 0.4, flow: 3.4 }));
+    for (const dx of [-6.8, 6.8]) hall.add(pipeRun(hall, { ctx, points: [[X + dx, -2.5, -0.6], [X + dx, 2.9, -0.6]], r: 0.28, flow: 2.8, gap: 0.9 }));
+    hall.add(valve(hall, { ctx, pos: [X - 6.8, 0.2, -0.6], size: 0.8, vertical: true, open: () => 1 }));
+    hall.add(gauge(hall, { ctx, pos: [X + 6.8, 0.6, -0.3], size: 0.9, value: (t) => 0.55 + 0.04 * Math.sin(t * 9), band: [0.25, 0.75] }));
+    const card = brassCard(root, { ctx, rect: { x: 520, y: 170, w: 880, h: 640 }, logo: svg, title: OG.site, sub: OG.url, at: c1[0] + 0.06, subAt: b.find((x) => x > c1[0] + 0.8) ?? c1[0] + 1.05 });
+
+    return (t: number) => {
+      hall(t);
+      card(t);
+    };
+  },
+};

package/themes/water-works/sample/scenes/gather.ts

@@ -0,0 +1,42 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { nameplate, needle, pipeRun, pumpHall, tank } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { SET, beatsIn, cuts } from "../lib/hall.ts";
+
+// 회사 = 탱크, 수위 = 모델 수(가장 많은 OpenAI 가 꽉). 아홉 탱크가 따로 서 있다 — 이어 주는 관이 없다
+const X = (i: number) => -6.6 + i * 1.65;
+const BASE = -2.3;
+const H = 3.3;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const [c0, c1] = cuts(ctx, 2);
+    const max = Math.max(...OG.providers.map(([, n]) => n));
+    const hall = pumpHall(root, {
+      ctx,
+      shots: [
+        { from: c0[0], to: c0[1], keys: [{ t: 0, look: [0, -0.4, 0], dist: 18, yaw: -0.1 }] },
+        // 수위가 다 찬 탱크에 다가간다 — 위에 모델 수가 선다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], look: [SET, 0, 0], dist: 18, yaw: 0.08 }, { t: c1[0] + 0.9, look: [SET, 0.2, 0], dist: 16.2, yaw: 0.05, ease: "outCubic" }] },
+      ],
+    });
+    // 첫 탱크는 장면 첫 프레임에 선다 — 빈 벽으로 시작하지 않게
+    const opens = [0, 0, 1, 1, 2, 2, 3, 3, 3].map((k, i) => (i === 0 ? 0 : (b[k] ?? 0.3 + k * 0.35) + (i % 2) * 0.12 + (k === 3 && i === 8 ? 0.12 : 0)));
+    OG.providers.forEach(([name, n], i) => {
+      const z = [0.2, -0.5, 0.6, -0.3, 0.4, -0.6, 0.1, -0.2, 0.5][i];
+      const lv = n / max;
+      // 판 A — 박마다 탱크가 서고 물이 수위까지 찬다
+      hall.add(tank(hall, { ctx, pos: [X(i), BASE, z], r: 0.55, h: H, at: opens[i], level: (t) => lv * needle(t, { at: opens[i] + 0.15, to: 1, dur: 0.9 }) }));
+      const up = i % 2 === 1;
+      hall.add(nameplate(hall, { ctx, text: name, pos: [X(i), up ? BASE + H + 0.75 : BASE - 0.55, z + 0.75], height: 0.3, at: opens[i] + 0.08, font: "display" }));
+      // 판 B — 같은 탱크를 가까이. 모델 수 계수기가 탱크마다 선다
+      hall.add(tank(hall, { ctx, pos: [SET + X(i), BASE, z], r: 0.55, h: H, level: () => lv }));
+      hall.add(nameplate(hall, { ctx, text: name, pos: [SET + X(i), up ? BASE + H + 0.75 : BASE - 0.55, z + 0.75], height: 0.3, font: "display" }));
+      hall.add(nameplate(hall, { ctx, text: String(n), pos: [SET + X(i), BASE + Math.max(0.5, lv * H) + 0.45, z + 0.8], height: 0.5, at: c1[0] + 0.05 + i * 0.1, font: "mono", look: "counter" }));
+    });
+    // 흩어진 탱크를 관 하나가 잇는다 — 다음 장면의 한 주소로
+    hall.add(pipeRun(hall, { ctx, points: [[SET - 8, BASE + H + 1.6, -1.1], [SET + 8, BASE + H + 1.6, -1.1]], r: 0.3, at: c1[0] + 0.6, dur: 0.7, flow: 3.2, fillAt: c1[0] + 0.9, fillSpeed: 14 }));
+    return (t: number) => hall(t);
+  },
+};

package/themes/water-works/sample/scenes/models.ts

@@ -0,0 +1,51 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { gauge, nameplate, needle, pipeRun, pumpHall, valve } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { SET, beatAfter, beatsIn, cuts, openDuring } from "../lib/hall.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const hall = pumpHall(root, {
+      ctx,
+      shots: [
+        { from: c0[0], to: c0[1], keys: [{ t: 0, look: [0, 0, 0], dist: 17 }] },
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], look: [SET, 0.2, 0], dist: 17, yaw: 0.1 }] },
+        // 드롭 앞 — 수압계로 다가간다(바늘이 차오르는 것을 드러내려고)
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], look: [2 * SET, 0.3, 0], dist: 17, yaw: -0.05 }, { t: c2[1] - 0.15, look: [2 * SET, 0.6, 0], dist: 11.5, yaw: -0.02, ease: "inOutCubic" }] },
+      ],
+    });
+    // 판 A — 한 주소 = 굵은 본관 하나. 관이 놓이고 물이 차고, 형식 넷이 아래에서 들어와 합친다
+    hall.add(pipeRun(hall, { ctx, points: [[-9, 0.6, 0], [9, 0.6, 0]], r: 0.46, at: 0, dur: 0.34, flow: 3.4, fillAt: 0.1, fillSpeed: 30 }));
+    hall.add(nameplate(hall, { ctx, text: OG.host, pos: [0, 1.85, 0.2], height: 0.62, at: b[1] ?? 0.35, font: "mono", look: "brass" }));
+    OG.endpoints.forEach((e, i) => {
+      const x = -5.4 + i * 3.6;
+      const at = (b[i + 1] ?? 0.35 * (i + 1)) + 0.05;
+      hall.add(pipeRun(hall, { ctx, points: [[x, -3.3, 0.2], [x, -1.4, 0.2], [x, 0.6, 0]], r: 0.2, at, dur: 0.22, flow: 2.6, fillAt: at + 0.1, fillSpeed: 16 }));
+      hall.add(nameplate(hall, { ctx, text: e, pos: [x, -1.6, 0.75], height: 0.26, at: at + 0.08, font: "mono" }));
+    });
+
+    // 판 B — 같은 주소 뒤 갈래 다섯. 박마다 한 갈래 밸브만 열려 물이 그 모델로 간다
+    const X = SET;
+    hall.add(pipeRun(hall, { ctx, points: [[X - 9, -1.8, 0], [X + 5.2, -1.8, 0]], r: 0.42, flow: 3.4 }));
+    hall.add(nameplate(hall, { ctx, text: OG.host, pos: [X - 5.8, -0.75, 0.3], height: 0.4, font: "mono", look: "brass" }));
+    const turns = [c1[0], ...[0, 1, 2, 3].map((k) => beatAfter(ctx, c1[0], k))];
+    OG.ids.forEach((_, i) => {
+      const bx = X - 4 + i * 2.2;
+      const open = openDuring(turns[i], turns[i + 1] ?? c1[1] + 1);
+      hall.add(pipeRun(hall, { ctx, points: [[bx, -1.8, 0], [bx, 3.2, 0]], r: 0.22, flow: (t) => 4 * open(t), gap: 0.8, fill: open }));
+      hall.add(valve(hall, { ctx, pos: [bx, 0.4, 0], size: 0.62, open, vertical: true }));
+    });
+    const idAt = (t: number) => OG.ids[Math.max(0, turns.filter((x) => x <= t).length - 1)];
+    hall.add(nameplate(hall, { ctx, text: idAt, pos: [X + 0.4, 3.75, 0.4], height: 0.5, at: c1[0], font: "mono", look: "counter" }));
+
+    // 판 C — 수압계 바늘이 박마다 한 칸씩 차오르고 본관 물이 빨라진다
+    const Y = 2 * SET;
+    const steps = b.filter((x) => x >= c2[0] - 0.02);
+    const level = (t: number) => steps.reduce((v, s, k) => (t >= s ? needle(t, { at: s, from: (k / steps.length) * 0.9, to: ((k + 1) / steps.length) * 0.9, dur: 0.3 }) : v), 0);
+    hall.add(pipeRun(hall, { ctx, points: [[Y - 9, -2.2, 0], [Y + 9, -2.2, 0]], r: 0.46, flow: (t) => 3 + 6 * level(t) }));
+    hall.add(gauge(hall, { ctx, pos: [Y, 0.9, 0.1], size: 2.1, value: level, ticks: ["0", "", "", "", String(OG.models)], band: [0.0, 0.7], unit: "모델", stem: 1.0 }));
+    return (t: number) => hall(t);
+  },
+};

package/themes/water-works/sample/scenes/price.ts

@@ -0,0 +1,66 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { gauge, nameplate, needle, pipeRun, pumpHall, surge, valve } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { SET, beatAfter, cuts } from "../lib/hall.ts";
+
+// 하루 시계 바늘 — 한 바퀴 = 24시간. 20시에서 출발해 00–10시 칸(싼 창)을 지난다
+const CLOCK_REV = 0.72;
+const hourAt = (t: number, from: number): number => (((20 / 24 + (t - from) * CLOCK_REV) % 1) + 1) % 1;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const hall = pumpHall(root, {
+      ctx,
+      shots: [
+        { from: c0[0], to: c0[1], keys: [{ t: 0, look: [0, 0.4, 0], dist: 18 }] },
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], look: [SET + 1.6, 0.4, 0], dist: 15, yaw: -0.06 }] },
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], look: [2 * SET, 0.4, 0], dist: 16.5, yaw: 0.06 }] },
+      ],
+    });
+    // 판 A — 드롭에 밸브가 한꺼번에 열려 수압이 터진다. 사방 관 열둘이 본관 하나로 몰려든다(모델 102 → 한 주소)
+    const burst = surge(hall, { ctx, drop: 0, pos: [0, 0.4, 0.4] });
+    hall.add(pipeRun(hall, { ctx, points: [[-10, 0.4, 0], [10, 0.4, 0]], r: 0.5, flow: (t) => 4 + 6 * Math.max(0, 1 - t), gap: 1.3 }));
+    for (let i = 0; i < 12; i++) {
+      const x = -7.7 + i * 1.4;
+      const top = i % 2 === 0;
+      hall.add(pipeRun(hall, { ctx, points: [[x, top ? 5 : -4, -0.5], [x, top ? 1.6 : -0.8, -0.5], [x, 0.4, -0.2]], r: 0.14, flow: 5, gap: 0.6, fillAt: 0, fillSpeed: 22 }));
+    }
+    hall.add(nameplate(hall, { ctx, text: String(OG.models), pos: [0, 2.85, 0.6], height: 1.5, at: 0, font: "display", look: "counter" }));
+    hall.add(nameplate(hall, { ctx, text: "한 주소", pos: [0, -1.45, 0.6], height: 0.62, at: beatAfter(ctx, 0, 0), font: "display" }));
+    hall.add(nameplate(hall, { ctx, text: OG.host, pos: [0, -2.45, 0.6], height: 0.42, at: beatAfter(ctx, 0, 1), font: "mono", look: "brass" }));
+
+    // 판 B — 하루 시계 계기. 바늘이 시간을 돌고, 00–10시(초록 칸)에 들면 계수기 값이 정가의 10% 로 넘어간다
+    const X = SET;
+    const night = (t: number) => hourAt(t, c1[0]) < OG.night.to / 24;
+    hall.add(gauge(hall, { ctx, pos: [X - 2.4, 0.5, 0.1], size: 2.6, sweep: 360, value: (t) => hourAt(t, c1[0]), ticks: ["00", "03", "06", "09", "12", "15", "18", "21", ""], band: [0, OG.night.to / 24], unit: OG.night.tz }));
+    hall.add(nameplate(hall, { ctx, text: "00:00-10:00", pos: [X + 3.4, 2.6, 0.2], height: 0.5, at: c1[0] + 0.05, font: "mono", look: "brass" }));
+    hall.add(nameplate(hall, { ctx, text: (t) => (night(t) ? OG.deepseek.input[1] : OG.deepseek.input[0]), pos: [X + 3.4, 0.9, 0.3], height: 1.05, at: c1[0] + 0.1, font: "mono", look: "counter" }));
+    hall.add(nameplate(hall, { ctx, text: OG.deepseek.off, pos: [X + 3.4, -0.75, 0.3], height: 0.9, at: beatAfter(ctx, c1[0], 0), font: "display" }));
+    hall.add(nameplate(hall, { ctx, text: `${OG.glm.id}  ${OG.glm.off}`, pos: [X + 3.4, -2.05, 0.3], height: 0.3, at: beatAfter(ctx, c1[0], 1), font: "mono" }));
+
+    // 판 C — 정가 두 관. 박에 밸브가 조여지면 물이 10% 로 가늘어지고 계수기가 정가에서 할인가로 넘어간다
+    const Y = 2 * SET;
+    const squeeze = beatAfter(ctx, c2[0], 1);
+    const throttle = (t: number) => 1 - 0.9 * needle(t, { at: squeeze, to: 1, dur: 0.35 });
+    hall.add(nameplate(hall, { ctx, text: `${OG.deepseek.id}  $/M`, pos: [Y, 3.2, 0.2], height: 0.42, at: c2[0] + 0.04, font: "mono" }));
+    const rows: [string, string, string, number][] = [
+      ["입력", OG.deepseek.input[0], OG.deepseek.input[1], 1.2],
+      ["출력", OG.deepseek.output[0], OG.deepseek.output[1], -1.6],
+    ];
+    rows.forEach(([label, from, to, y], i) => {
+      const at = i === 0 ? c2[0] + 0.05 : beatAfter(ctx, c2[0], 0);
+      hall.add(pipeRun(hall, { ctx, points: [[Y - 9, y, 0], [Y + 1.2, y, 0]], r: 0.36, at, dur: 0.25, flow: (t) => 4.5 * throttle(t), gap: 1 }));
+      hall.add(valve(hall, { ctx, pos: [Y - 1.6, y, 0.05], size: 0.8, at, open: throttle }));
+      hall.add(nameplate(hall, { ctx, text: label, pos: [Y - 5.6, y + 0.85, 0.3], height: 0.44, at: at + 0.05, font: "display" }));
+      hall.add(nameplate(hall, { ctx, text: (t) => (t >= squeeze + 0.2 ? to : from), pos: [Y + 3.6, y, 0.3], height: 0.9, at: at + 0.08, font: "mono", look: "counter" }));
+    });
+    hall.add(nameplate(hall, { ctx, text: OG.deepseek.off, pos: [Y + 3.6, -3.0, 0.4], height: 0.5, at: squeeze + 0.3, font: "display", look: "brass" }));
+
+    return (t: number) => {
+      const s = burst(t);
+      applyStyle(hall.el, s.shake);
+      hall(t);
+    };
+  },
+};

package/themes/water-works/sample/style.json

@@ -0,0 +1,105 @@
+{
+  "name": "water-works",
+  "label": "배관 — 요청이 물이 되어 관을 흐른다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#DCE5E0",
+    "surface": "#F7F4EA",
+    "raised": "#EEE6D2",
+    "line": "#B7C4BD",
+    "ink": "#1C2522",
+    "inkSoft": "#2A3531",
+    "dim": "#4C5A55",
+    "accent": "#C8352B",
+    "accentSoft": "#F0C4BE",
+    "accentText": "#A82A22",
+    "onAccent": "#FFFFFF",
+    "success": "#2E8A4E",
+    "danger": "#C8352B",
+    "warning": "#B5822C",
+    "pipe": "#1F5E4A",
+    "pipeDeep": "#14402F",
+    "brass": "#C59A45",
+    "steel": "#B9C0C4",
+    "water": "#2F8BD8",
+    "dial": "#F7F4EA",
+    "tile": "#CFDAD4",
+    "floor": "#B9B2A3"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"SUIT Variable\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Space Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "SUIT Variable",
+        "src": "https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2.0.5/fonts/variable/ttf/SUIT-Variable.ttf",
+        "weight": "100 900"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      },
+      {
+        "family": "Space Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/spacemono/SpaceMono-Bold.ttf",
+        "weight": "700"
+      }
+    ]
+  },
+  "type": {
+    "hero": 180,
+    "title": 96,
+    "body": 42,
+    "caption": 30,
+    "weightDisplay": 850,
+    "weightBody": 600,
+    "tracking": "-0.02em"
+  },
+  "radius": {
+    "sm": 6,
+    "md": 10,
+    "lg": 16,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "0 6px 0 rgba(28, 37, 34, 0.18)",
+    "lift": "0 10px 0 rgba(28, 37, 34, 0.22)"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "once-per-phrase",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "pop",
+    "ease": "outBack",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.3,
+      "slow": 0.6
+    }
+  },
+  "theme": {
+    "inks": [
+      "#DCE5E0 청자 유약 타일 벽",
+      "#1F5E4A 펌프장 초록 관 · #C59A45 놋쇠 · #B9C0C4 강철",
+      "#C8352B 밸브 바퀴·바늘 빨강 — 강조",
+      "#2F8BD8 관 속 물"
+    ],
+    "texture": "반광 페인트 관과 닦은 강철, 놋쇠 테 계기. 관은 투명해 속 물덩이가 보인다. 벽은 옅은 타일 줄눈, 바닥은 돌. 따뜻한 빛 한 방향, 그림자 하나",
+    "movement": "기계는 서 있고 물이 흐른다 — 관 속 물덩이가 같은 빠르기로 줄지어 가고(유량), 밸브 바퀴가 돌면 그 갈래 흐름이 열리고 닫힌다. 계기 바늘은 값으로 가서 한 번 넘쳤다 선다. 마디마다 다른 관 선반으로 컷, 카메라는 드러낼 것에 다가갈 때만 움직인다"
+  },
+  "notes": [
+    "출처: Crossness 펌프장(Geograph CC BY-SA)·수압계(Wikimedia) — refs/NOTES.md",
+    "pipe·brass·steel·water 는 재료 색이라 변주에서 색상을 지킨다(fixedHue).",
+    "3D 안 글(이름판·계기)은 검사가 못 읽는다 — 끝 카드는 DOM 으로 겹친다."
+  ]
+}

package/themes/water-works/slots.ts

@@ -0,0 +1,140 @@
+import { clamp, ease, rand, spring, type Style } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { stillStage } from "@kasaframe/themes/stage3d";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, shownCount, traceCanvas } from "@kasaframe/themes/slotkit";
+import { gauge, pipeRun, pumpHall, valve } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 펌프장 결로. 3D 는 surface 하나(서 있는 관 선반), 나머지는 DOM·캔버스 2D
+export const slots: ThemeSlots = {
+  // 타일 벽 앞 관 선반 — 한 번 그려 2D 로 옮겨 두고 서 있다(움직이는 것은 내용 몫)
+  surface(el, { ctx }) {
+    const v = ctx.meta.height > ctx.meta.width;
+    // 관은 화면 가장자리로, 밸브·계기는 아래 빈 자리로 — 가운데(내용 자리)를 비운다. 허리 띠는 글을 가로질러 뺀다
+    const [top, side, low] = v ? [7.5, 2.6, -1.0] : [4.0, 5.5, -2.4];
+    const hall = pumpHall(el, { ctx, dado: false, shots: [{ from: -1, to: 1e9, keys: [{ t: 0, look: [0, v ? 2.1 : 0.4, 0], dist: v ? 22 : 16, yaw: -0.1, pitch: 0.12 }] }] });
+    const rigs = [
+      pipeRun(hall, { ctx, points: [[-14, top, -0.6], [14, top, -0.6]], r: 0.3, flow: 0 }),
+      pipeRun(hall, { ctx, points: [[-side, -3.4, -0.6], [-side, top, -0.6]], r: 0.22, flow: 0 }),
+      pipeRun(hall, { ctx, points: [[side, -3.4, -0.6], [side, top, -0.6]], r: 0.22, flow: 0 }),
+      valve(hall, { ctx, pos: [-side, low, -0.6], size: 0.6, open: () => 0.4, vertical: true }),
+      gauge(hall, { ctx, pos: [side + (v ? 0 : 1.2), v ? low - 0.7 : -2.4, -0.3], size: 0.6, value: () => 0.62, band: [0.3, 0.75] }),
+    ];
+    return stillStage(hall, (t) => {
+      for (const r of rigs) r(t);
+      hall.paint(t);
+    });
+  },
+
+  // 이름판 — 미색 판에 놋쇠 테와 모서리 나사, at 에 아래에서 「텅」 하고 선다. 강조 판은 빨간 판
+  panel(el, { at, tone }) {
+    const accent = tone === "accent";
+    const p = layer(el, `inset:0;border-radius:var(--kf-radius-md);background:${accent ? "var(--kf-accent)" : "var(--kf-surface)"};border:5px solid var(--kf-brass, #C59A45);box-shadow:var(--kf-shadow-soft);transform-origin:50% 100%`, true);
+    for (const [x, y] of [["10px", "10px"], ["calc(100% - 22px)", "10px"], ["10px", "calc(100% - 22px)"], ["calc(100% - 22px)", "calc(100% - 22px)"]]) layer(p, `left:${x};top:${y};width:12px;height:12px;border-radius:50%;background:var(--kf-brass, #C59A45)`);
+    return (t) => {
+      const k = t - at;
+      p.style.display = k < 0 ? "none" : "";
+      if (k >= 0) p.style.transform = `scaleY(${ease.outBack(clamp(k / 0.3)).toFixed(4)})`;
+    };
+  },
+
+  // 앉는 순간 — 수압이 한 번 걸려 파문 고리가 퍼지고 숫자가 「텅」 하고 앉는다
+  land(el, { at }) {
+    if (!el.style.position) el.style.position = "relative";
+    const ring = layer(el, "left:50%;top:50%;width:110%;aspect-ratio:1;border-radius:50%;border:6px solid var(--kf-water, #2F8BD8);display:none");
+    return (t): Style => {
+      const k = t - at;
+      const on = k >= 0 && k < 0.55;
+      ring.style.display = on ? "" : "none";
+      if (on) {
+        ring.style.transform = `translate(-50%, -50%) scale(${(0.4 + 0.9 * ease.outCubic(k / 0.55)).toFixed(3)})`;
+        ring.style.opacity = (1 - k / 0.55).toFixed(3);
+      }
+      return k < 0 ? {} : { scale: spring(k, { from: 0.86, to: 1, stiffness: 300, damping: 14 }), y: k < 0.12 ? -18 * (1 - k / 0.12) : 0 };
+    };
+  },
+
+  // 계수기 글자 — 한 자씩 넘어와 선다(넘김판)
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    return (t) => {
+      const n = shownCount(spans.length, t, at, dur);
+      spans.forEach((s, i) => (s.style.visibility = i < n ? "visible" : "hidden"));
+    };
+  },
+
+  // 관 — 초록 관이 그어지고 그 속을 물덩이가 흐른다(다 그은 뒤에도 흐른다)
+  trace(el, { ctx, points, at, dur }) {
+    const { g, clear } = traceCanvas(el, points, 30);
+    const pipe = ctx.style.colors.pipe ?? "#1F5E4A";
+    const water = ctx.style.colors.water ?? "#2F8BD8";
+    return (t) => {
+      clear();
+      const k = t - at;
+      if (k < 0) return;
+      const pts = partial(points, clamp(k / Math.max(0.05, dur)));
+      if (pts.length < 2) return;
+      g.lineCap = "round";
+      g.lineJoin = "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.setLineDash([]);
+      g.strokeStyle = pipe;
+      g.lineWidth = 16;
+      g.stroke();
+      g.strokeStyle = water;
+      g.lineWidth = 6;
+      g.setLineDash([14, 12]);
+      g.lineDashOffset = -k * 120;
+      g.stroke();
+      g.setLineDash([]);
+    };
+  },
+
+  // 드롭 — 물보라 알갱이가 사방으로 튀고 파문 고리가 번진다
+  drop(el, { ctx, drop }) {
+    const W = ctx.meta.width;
+    const H = ctx.meta.height;
+    const c = document.createElement("canvas");
+    c.width = W;
+    c.height = H;
+    c.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none";
+    el.append(c);
+    const g = c.getContext("2d")!;
+    const water = ctx.style.colors.water ?? "#2F8BD8";
+    const at = ctx.beats.drop(drop);
+    const n = 70;
+    const v = Array.from({ length: n }, (_, i) => {
+      const a = rand("ww-drop", i) * Math.PI * 2;
+      const sp = (0.25 + rand("ww-drop", i + 99) * 0.55) * Math.min(W, H);
+      return [Math.cos(a) * sp, Math.sin(a) * sp - 0.3 * Math.min(W, H)];
+    });
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "surge" });
+      g.clearRect(0, 0, W, H);
+      const k = t - at;
+      if (k < 0 || k > 1) return s;
+      g.fillStyle = water;
+      for (const [vx, vy] of v) {
+        const x = W / 2 + vx * k;
+        const y = H / 2 + vy * k + 0.9 * Math.min(W, H) * k * k;
+        g.beginPath();
+        g.arc(x, y, 9 * (1 - k), 0, Math.PI * 2);
+        g.fill();
+      }
+      g.strokeStyle = water;
+      for (let j = 0; j < 3; j++) {
+        const p = clamp((k - j * 0.1) / 0.7);
+        if (p <= 0 || p >= 1) continue;
+        g.globalAlpha = 1 - p;
+        g.lineWidth = 8 * (1 - p) + 1;
+        g.beginPath();
+        g.arc(W / 2, H / 2, ease.outCubic(p) * Math.hypot(W, H) * 0.6, 0, Math.PI * 2);
+        g.stroke();
+      }
+      g.globalAlpha = 1;
+      return s;
+    };
+  },
+};