kasaframe 0.1.1 → 0.1.4

package/themes/marble-run/sample/index.html

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

package/themes/marble-run/sample/kf.json

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

@@ -0,0 +1,30 @@
+import type { SceneCtx } from "@kasaframe/core";
+
+export type V3 = [number, number, number];
+
+/** 컷마다 벽의 다른 자리(세트) — 세트끼리 이만큼 떨어져 있어 한 화면에 둘이 안 걸린다 */
+export const SET = 60;
+
+/** 회사 i(브리프 차례) = 구슬 색 i+1 */
+export const marble = (i: number): string => `marble${(i % 9) + 1}`;
+
+export interface Cut {
+  from: number;
+  to: number;
+  /** 이 컷 k 번째 박(장면 안 초) — 박이 모자라면 박 간격으로 이어 센다 */
+  beat(k: number): number;
+}
+
+/** 마디마다 컷 하나 — 첫 컷은 장면 처음부터, 마지막은 장면 끝까지 */
+export function cuts(ctx: SceneCtx, n: number): Cut[] {
+  const bars = ctx.beats.bars.filter((b) => b >= -1e-6 && b < ctx.dur - 0.05);
+  const beats = ctx.beats.beats;
+  const gap = beats.length > 1 ? (beats[beats.length - 1] - beats[0]) / (beats.length - 1) : 0.35;
+  const edge = (i: number) => (i <= 0 ? 0 : i >= n ? ctx.dur : (bars[i] ?? (ctx.dur * i) / n));
+  return Array.from({ length: n }, (_, i) => {
+    const from = edge(i);
+    const to = edge(i + 1);
+    const mine = beats.filter((b) => b >= from - 0.02 && b < to - 0.02);
+    return { from, to, beat: (k: number) => mine[k] ?? (mine.length ? mine[mine.length - 1] + (k - mine.length + 1) * gap : from + k * gap) };
+  });
+}

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

@@ -0,0 +1,58 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { marbleStage, marbles, plaque, rail } from "../../effects.ts";
+import svg from "../assets/og/logo.svg?raw";
+import { OG } from "../lib/facts.ts";
+import { cuts, marble, SET, type V3 } from "../lib/run.ts";
+
+// 첫 토큰 실측 — 평평한 레일을 같은 빠르기(14/초)로 구르니 레일 길이가 곧 ms, 구슬도 꼭 그 ms 만에 닿는다
+const V = 14;
+const ROUTE: Record<string, number> = { "gpt-5.4-nano": 0, "gemini-3.5-flash-lite": 2, "claude-haiku-5-5": 1 };
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const [a, b, c] = cuts(ctx, 3);
+    const [XA, XB] = [7 * SET, 8 * SET];
+    const stage = marbleStage(root, {
+      ctx,
+      shots: [
+        { from: a.from, to: a.to, keys: [{ t: a.from, look: [XA, 0.6] }] },
+        { from: b.from, to: b.to, keys: [{ t: b.from, look: [XB, 0.4] }] },
+        // 마지막 마디 — 명판으로 다가가 선다
+        { from: c.from, to: c.to, keys: [{ t: c.from, look: [XB, 0.4], dist: 22 }, { t: c.from + 0.45, look: [XB, 0.2], dist: 16.5, ease: "outCubic" }] },
+      ],
+    });
+
+    // 컷 1 — 첫 토큰 가운데값 셋: 세 레일에서 한꺼번에 떠나 각자의 ms 만에 끝에 닿고, 끝 명판이 그동안 센다.
+    // 실측은 18번 호출 — 레일마다 여섯 번 굴린다
+    const go = a.beat(1);
+    stage.add(plaque(stage, { ctx, text: "첫 토큰 가운데값", pos: [XA - 8.8, 5.0, 0.1], height: 0.72, at: a.from, anchor: "left" }));
+    stage.add(plaque(stage, { ctx, text: OG.calls, pos: [XA + 9.2, 5.0, 0.1], height: 0.58, at: a.beat(2), anchor: "right" }));
+    OG.ttft.forEach(([model, , ms], i) => {
+      const y = 2.6 - i * 2.5;
+      const len = (V * ms) / 1000;
+      const line: V3[] = [[XA - 8, y, 0.6], [XA - 8 + len, y, 0.6]];
+      stage.add(rail(stage, { ctx, points: line, at: a.from + i * 0.05, dur: 0.3 }));
+      stage.add(marbles(stage, { ctx, points: line, times: Array.from({ length: 6 }, (_, k) => go + k * 0.19), v0: V, radius: 0.28, colors: marble(ROUTE[model] ?? i), end: "stay" }));
+      stage.add(plaque(stage, { ctx, text: model, pos: [XA - 8, y + 0.8, 0.1], height: 0.52, at: a.from + 0.05 + i * 0.05, font: "mono", anchor: "left" }));
+      stage.add(plaque(stage, { ctx, text: (t) => `${Math.min(ms, Math.max(0, (t - go) * 1000)).toFixed(1)}ms`, pos: [XA - 7.3 + len, y, 0.1], height: 0.6, at: go, font: "mono", anchor: "left" }));
+    });
+
+    // 컷 2·3 — 끝 카드: 명판 둘을 고리 레일이 두르고 구슬이 쉬지 않고 돈다, 위에 로고
+    const loop: V3[] = [[XB - 8, 2.6, 0.6], [XB - 3, 3.6, 0.6], [XB + 3, 3.6, 0.6], [XB + 8, 2.6, 0.6], [XB + 8.6, -1.2, 0.6], [XB + 4.5, -3.6, 0.6], [XB - 4.5, -3.6, 0.6], [XB - 8.6, -1.2, 0.6]];
+    // 컷이 바뀌는 순간 이미 돌고 있다 — 끝 카드가 서는 동안에도 요청은 쉬지 않는다
+    stage.add(rail(stage, { ctx, points: loop, closed: true }));
+    stage.add(marbles(stage, { ctx, points: loop, at: b.from - 2, count: 9, every: 0.22, v0: 7, colors: OG.providers.map((_, i) => marble(i)), end: "loop", closed: true }));
+    stage.add(plaque(stage, { ctx, text: "OpenGateway", pos: [XB, -0.3, 0.1], height: 1.1, at: b.beat(1) }));
+    stage.add(plaque(stage, { ctx, text: OG.site, pos: [XB, -1.85, 0.1], height: 0.75, at: b.beat(2), font: "mono" }));
+    const mark = document.createElement("div");
+    mark.style.cssText = `position:absolute;left:810px;top:350px;width:300px;color:${ctx.style.colors.brass};visibility:hidden;pointer-events:none`;
+    mark.innerHTML = svg.replace(/ width="\d+" height="\d+"/, ' width="100%" style="display:block"');
+    root.append(mark);
+
+    return (t: number) => {
+      stage(t);
+      // 로고는 고리 위 — 다가가는 마지막 마디에는 화면이 명판으로 좁아져 빠진다
+      mark.style.visibility = t >= b.from && t < c.from ? "visible" : "hidden";
+    };
+  },
+};

package/themes/marble-run/sample/scenes/gather.ts

@@ -0,0 +1,51 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { marbleStage, marbles, plaque, rail, tubes } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { cuts, marble, SET, type V3 } from "../lib/run.ts";
+
+// 컷 1 — 회사 아홉이 저마다 따로 놓인 짧은 레일(서로 안 이어진다), 끝은 벽 구멍으로 들어간다
+const CELL: [number, number][] = [[-7, 3.4], [0, 3.4], [7, 3.4], [-7, -0.2], [0, -0.2], [7, -0.2], [-7, -3.8], [0, -3.8], [7, -3.8]];
+// 박마다 셋 — 흩어진 자리부터
+const WAVE = [0, 2, 1, 1, 0, 2, 2, 1, 0];
+// 컷 2 관 묶음 — 첫 박 셋, 나머지 박마다 둘
+const ROWS = [0, 0, 0, 1, 1, 2, 2, 3, 3];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const [a, b] = cuts(ctx, 2);
+    const X = SET;
+    const stage = marbleStage(root, {
+      ctx,
+      shots: [
+        { from: a.from, to: a.to, keys: [{ t: 0, look: [0, 0.2] }] },
+        { from: b.from, to: b.to, keys: [{ t: b.from, look: [X, 0.6] }] },
+      ],
+    });
+
+    // 컷 1 — 박마다 레일 셋이 놓이고 명판이 붙고, 놓이자마자 그 회사 색 구슬이 따로따로 구른다
+    OG.providers.forEach(([name], i) => {
+      const [cx, cy] = CELL[i];
+      const beat = a.beat(WAVE[i]);
+      // 첫 묶음은 처음부터 놓여 구슬이 0 초부터 구른다 — 첫 박 전에 화면이 서지 않게
+      const first = WAVE[i] === 0;
+      const at = first ? -1 : beat - 0.24;
+      const pts: V3[] = [[cx - 2.7, cy + 0.9, 0.6], [cx - 0.6, cy + 0.05, 0.6], [cx + 1.4, cy - 0.45, 0.6], [cx + 2.6, cy - 0.3, 0.45], [cx + 3, cy - 0.35, 0.05]];
+      stage.add(rail(stage, { ctx, points: pts, at, dur: first ? 0.01 : beat + 0.06 - at }));
+      stage.add(plaque(stage, { ctx, text: name, pos: [cx - 1.5, cy + 1.6, 0.05], height: 0.62, at: first ? 0 : beat }));
+      stage.add(marbles(stage, { ctx, points: pts, at: first ? -0.5 : beat + 0.08, count: first ? 10 : 8, every: 0.3, colors: marble(i), until: a.to }));
+    });
+
+    // 컷 2 — 회사마다 투명 관, 구슬이 떨어져 쌓인 높이가 모델 수. 관 위 명판이 앉은 구슬을 센다
+    const base = -4.6;
+    const items = OG.providers.map(([, n], i) => ({ x: X + (i - 4) * 2.25, count: n, color: marble(i), at: b.beat(ROWS[i]) + 0.02, every: Math.min(0.05, 1 / n) }));
+    const stack = tubes(stage, { ctx, items, base, z: 0.6 });
+    stage.add(stack);
+    const top = base + Math.max(...items.map((it) => it.count)) * 0.24 + 0.3;
+    OG.providers.forEach(([name], i) => {
+      stage.add(plaque(stage, { ctx, text: name, pos: [items[i].x, base - 0.6, 0.3], height: 0.44, at: items[i].at }));
+      stage.add(plaque(stage, { ctx, text: (t) => String(stack.landed(i, t)), pos: [items[i].x, top + 0.5, 0.6], height: 0.55, at: items[i].at, font: "mono" }));
+    });
+
+    return (t: number) => stage(t);
+  },
+};

package/themes/marble-run/sample/scenes/models.ts

@@ -0,0 +1,73 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { flipper, funnel, marbleStage, marbles, plaque, rail, releaseGate } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { cuts, marble, SET, type V3 } from "../lib/run.ts";
+
+// 컷 2 갈래 넷 — 갈림판에서 갈라져 모델 ID 명판으로. [갈래 색, 끝 높이, 갈림판이 겨눌 각(도)]
+const LANES: [string, number, number][] = [
+  [marble(0), 2.2, -6],
+  [marble(1), 0.4, -29],
+  [marble(2), -1.4, -45],
+  [marble(7), -3.2, -55],
+];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const [a, b, c] = cuts(ctx, 3);
+    const [XA, XB, XC] = [2 * SET, 3 * SET, 4 * SET];
+    const stage = marbleStage(root, {
+      ctx,
+      shots: [
+        // 한 주소 — 깔때기로 천천히 다가간다
+        { from: a.from, to: a.to, keys: [{ t: a.from, look: [XA, -0.3], dist: 23 }, { t: a.to, look: [XA, -0.2], dist: 19.5, ease: "linear" }] },
+        { from: b.from, to: b.to, keys: [{ t: b.from, look: [XB + 1.6, 0.4] }] },
+        // 드롭 앞 — 쌓이는 더미로 천천히 다가간다
+        { from: c.from, to: c.to, keys: [{ t: c.from, look: [XC - 1.2, 1.2], dist: 21 }, { t: ctx.dur, look: [XC - 1.8, 1.4], dist: 17.5, ease: "linear" }] },
+      ],
+    });
+
+    // 컷 1 — 한 주소 = 깔때기: 양쪽 레일의 아홉 색 구슬이 깔때기를 돌아 한 구멍으로 빠지고 아래 레일 하나로 나간다
+    const left: V3[] = [[XA - 9.5, 3.8, 2.4], [XA - 6, 2.2, 2.6], [XA - 3.4, 1.0, 2.7], [XA - 2.3, 0.75, 2.7]];
+    const right: V3[] = left.map(([x, y, z]) => [2 * XA - x, y, z]);
+    const out: V3[] = [[XA, -1.6, 2.7], [XA + 3, -3.0, 2.3], [XA + 7, -3.9, 1.3], [XA + 11.5, -4.3, 0.6]];
+    const colors = OG.providers.map((_, i) => marble(i));
+    const inL = marbles(stage, { ctx, points: left, at: a.beat(0) + 0.1, count: 9, every: 0.13, v0: 3, colors, until: a.to });
+    const inR = marbles(stage, { ctx, points: right, at: a.beat(0) + 0.165, count: 9, every: 0.13, v0: 3, colors: [...colors].reverse(), until: a.to });
+    const feeds = [...inL.arrivals.map((time, k) => ({ time, color: colors[k % 9], angle: Math.PI })), ...inR.arrivals.map((time, k) => ({ time, color: colors[8 - (k % 9)], angle: 0 }))];
+    const vortex = funnel(stage, { ctx, pos: [XA, -0.8, 2.7], at: a.beat(0), feeds, spin: 1.1 });
+    stage.add(rail(stage, { ctx, points: left }));
+    stage.add(rail(stage, { ctx, points: right }));
+    stage.add(rail(stage, { ctx, points: out, at: a.beat(2), dur: 0.3 }));
+    stage.add(inL);
+    stage.add(inR);
+    stage.add(vortex);
+    stage.add(marbles(stage, { ctx, points: out, times: vortex.exits, colors: feeds.map((f) => f.color), until: a.to }));
+    stage.add(plaque(stage, { ctx, text: OG.url, pos: [XA, 4.7, 0.1], height: 0.82, at: a.beat(0), font: "mono" }));
+    stage.add(plaque(stage, { ctx, text: "OpenAI · Anthropic 형식", pos: [XA, 3.6, 0.1], height: 0.56, at: a.beat(2) }));
+    OG.endpoints.forEach((e, i) => stage.add(plaque(stage, { ctx, text: e, pos: [XA - 9.4 + (i % 2) * 4.8, -3.3 - Math.floor(i / 2) * 1.0, 0.1], height: 0.5, at: a.beat(3) + i * 0.05, font: "mono", anchor: "left" })));
+
+    // 컷 2 — 라우팅 = 갈림판: 같은 주소에서 내려온 구슬을 갈림판이 박마다 다른 갈래로 보낸다, 갈래 끝 명판이 모델 ID
+    const src: V3[] = [[XB - 10.5, 5.2, 0.6], [XB - 6, 4.0, 0.6], [XB - 3, 3.0, 0.6], [XB - 1.6, 2.6, 0.6]];
+    // 갈림판에 첫 박부터 구슬이 닿게 — 컷 앞에서 미리 굴려 둔다(다른 세트라 앞 컷에는 안 보인다)
+    const feed = marbles(stage, { ctx, points: src, at: b.from - 1.6, count: 26, every: 0.12, colors: "ink", until: b.to });
+    stage.add(rail(stage, { ctx, points: src }));
+    stage.add(feed);
+    stage.add(flipper(stage, { ctx, pos: [XB - 1.5, 2.65, 0.75], flips: [b.beat(1), b.beat(2), b.beat(3)], aims: LANES.map((l) => l[2]) }));
+    stage.add(plaque(stage, { ctx, text: OG.host, pos: [XB - 8.8, 5.9, 0.1], height: 0.66, font: "mono", anchor: "left", at: b.from }));
+    LANES.forEach(([color, endY], k) => {
+      const lane: V3[] = [[XB - 1.2, 2.6, 0.6], [XB + 0.8, 2.4 - k * 0.9, 0.6], [XB + 3.2, endY, 0.6], [XB + 4.8, endY - 0.1, 0.6]];
+      const from = b.beat(k);
+      const to = k < 3 ? b.beat(k + 1) : Infinity;
+      stage.add(rail(stage, { ctx, points: lane, at: from - 0.2, dur: 0.22 }));
+      stage.add(marbles(stage, { ctx, points: lane, times: feed.arrivals.filter((x) => x >= from && x < to), colors: color, end: "stay", until: b.to }));
+      stage.add(plaque(stage, { ctx, text: OG.ids[k], pos: [XB + 5.3, endY, 0.1], height: 0.46, at: from, font: "mono", anchor: "left" }));
+    });
+
+    // 컷 3 — 드롭 앞 모아 올리기: 방출 문 뒤로 구슬이 하나씩 떨어져 쌓이고, 명판이 그 수를 102 까지 센다
+    const [f0, f1] = [c.from + 0.05, ctx.dur - 0.08];
+    stage.add(releaseGate(stage, { ctx, top: [XC - 6, 3.5, 1.4], bottom: [XC + 3, -1.8, 1.4], count: OG.models, colors, width: 2.4, fill: [f0, f1] }));
+    stage.add(plaque(stage, { ctx, text: (t) => String(Math.min(OG.models, Math.max(0, Math.floor(((t - f0) / (f1 - f0)) * OG.models) + 1))), pos: [XC + 3.6, 3.4, 0.1], height: 1.0, at: c.from, font: "mono" }));
+
+    return (t: number) => stage(t);
+  },
+};

package/themes/marble-run/sample/scenes/price.ts

@@ -0,0 +1,51 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { clockWheel, marbleStage, marbles, plaque, rail, releaseGate, tollGate } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { cuts, marble, SET, type V3 } from "../lib/run.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const [a, b, c] = cuts(ctx, 3);
+    const [XA, XB, XC] = [4 * SET, 5 * SET, 6 * SET];
+    const stage = marbleStage(root, {
+      ctx,
+      shots: [
+        // 드롭 — 앞 장면 끝 자리에서 이어 받고, 쏟아지는 더미 전체를 담게 한 번 물러난다
+        { from: a.from, to: a.to, keys: [{ t: 0, look: [XA - 1.8, 1.4], dist: 17.5 }, { t: 0.9, look: [XA + 1.5, 0.2], dist: 23, ease: "outCubic" }] },
+        { from: b.from, to: b.to, keys: [{ t: b.from, look: [XB, 0.2] }] },
+        { from: c.from, to: c.to, keys: [{ t: c.from, look: [XC, 0.6] }] },
+      ],
+    });
+    const colors = OG.providers.map((_, i) => marble(i));
+
+    // 컷 1 — 드롭: 방출 문이 젖혀지고 102 개가 한꺼번에 쏟아져 받침에 깔린다, 받침에서 한 레일(한 주소)로 줄지어 나간다
+    stage.add(releaseGate(stage, { ctx, drop: 0, top: [XA - 6, 3.5, 1.4], bottom: [XA + 3, -1.8, 1.4], count: OG.models, colors, width: 2.4 }));
+    stage.add(plaque(stage, { ctx, text: String(OG.models), pos: [XA + 3.6, 3.4, 0.1], height: 1.0, font: "mono" }));
+    stage.add(plaque(stage, { ctx, text: OG.host, pos: [XA + 3.6, 2.2, 0.1], height: 0.55, at: a.beat(1), font: "mono" }));
+    const exit: V3[] = [[XA + 6.4, -1.9, 1.3], [XA + 8.5, -3.0, 1.0], [XA + 11, -3.6, 0.7], [XA + 13.5, -3.8, 0.5]];
+    stage.add(rail(stage, { ctx, points: exit, at: a.beat(1) - 0.2, dur: 0.25 }));
+    stage.add(marbles(stage, { ctx, points: exit, at: a.beat(1), count: 9, every: 0.11, v0: 3, colors, until: a.to }));
+
+    // 컷 2 — 하루 = 시계 고리: 구슬이 하루를 돌고, 00–10 시간대 고리가 싼 운임 색으로 켜진다, 옆에 −90%
+    stage.add(clockWheel(stage, { ctx, pos: [XB - 4.5, 0, 0.6], radius: 3.3, at: b.from, window: [OG.night.from, OG.night.to], windowAt: b.beat(1), turn: 2.6, count: 6 }));
+    stage.add(plaque(stage, { ctx, text: `00:00–10:00 ${OG.night.tz}`, pos: [XB + 1.6, 3.0, 0.1], height: 0.75, at: b.beat(1), font: "mono", anchor: "left" }));
+    stage.add(plaque(stage, { ctx, text: OG.deepseek.off.replace("-", "−"), pos: [XB + 1.6, 1.0, 0.1], height: 1.5, at: b.beat(2), anchor: "left" }));
+    stage.add(plaque(stage, { ctx, text: OG.deepseek.id, pos: [XB + 1.6, -1.0, 0.1], height: 0.5, at: b.beat(2) + 0.08, font: "mono", anchor: "left" }));
+    stage.add(plaque(stage, { ctx, text: `${OG.glm.id} ${OG.glm.off.replace("-", "−")}`, pos: [XB + 1.6, -2.1, 0.1], height: 0.5, at: b.beat(3), font: "mono", anchor: "left" }));
+
+    // 컷 3 — 비용 = 관문: 입력·출력 레일마다 놋쇠 관문, 구슬이 지나는 값이 00–10 박에 내려앉으며 1/10 로 바뀐다
+    const go = c.beat(2);
+    stage.add(plaque(stage, { ctx, text: `deepseek/${OG.deepseek.id}`, pos: [XC, 5.1, 0.1], height: 0.62, at: c.from, font: "mono" }));
+    ([["입력", OG.deepseek.input, 2.4], ["출력", OG.deepseek.output, -1.8]] as [string, string[], number][]).forEach(([name, [full, night], y], r) => {
+      const line: V3[] = [[XC - 9.5, y + 0.6, 0.6], [XC - 4, y + 0.2, 0.6], [XC + 2, y - 0.3, 0.6], [XC + 9.5, y - 0.7, 0.6]];
+      stage.add(rail(stage, { ctx, points: line, at: c.from, dur: 0.3 }));
+      stage.add(marbles(stage, { ctx, points: line, at: c.from - 0.6 + r * 0.06, count: 34, every: 0.13, v0: 2.5, colors: marble(7), until: c.to }));
+      stage.add(plaque(stage, { ctx, text: name, pos: [XC - 8.4, y + 1.55, 0.1], height: 0.62, at: c.beat(0) }));
+      stage.add(tollGate(stage, { ctx, pos: [XC + 1, y - 0.25, 0.6], price: (t) => `${t < go ? full : night}/M`, at: c.beat(1) + r * 0.06, changes: [go] }));
+      stage.add(plaque(stage, { ctx, text: "00–10", pos: [XC + 5.4, y + 1.05, 0.1], height: 0.52, at: go + r * 0.05, font: "mono" }));
+    });
+    stage.add(plaque(stage, { ctx, text: OG.deepseek.off.replace("-", "−"), pos: [XC + 6.6, 0.25, 0.1], height: 1.0, at: c.beat(3) }));
+
+    return (t: number) => stage(t);
+  },
+};

package/themes/marble-run/sample/style.json

@@ -0,0 +1,109 @@
+{
+  "name": "marble-run",
+  "label": "구슬 레일 — 요청이 구슬로 구르고 장치가 길을 정한다",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#2A211B",
+    "surface": "#3A2E25",
+    "raised": "#4A3B2F",
+    "line": "#5E4C3D",
+    "ink": "#F3E9D8",
+    "inkSoft": "#D9CBB4",
+    "dim": "#B5A48C",
+    "accent": "#D9A441",
+    "accentSoft": "#6B5330",
+    "accentText": "#E8B95A",
+    "onAccent": "#2A211B",
+    "success": "#6CC08B",
+    "danger": "#E0604E",
+    "warning": "#E8B95A",
+    "steel": "#C9CED4",
+    "brass": "#C9A24E",
+    "engrave": "#2A1E12",
+    "marble1": "#3B82F6",
+    "marble2": "#E07A5F",
+    "marble3": "#34A853",
+    "marble4": "#8B5CF6",
+    "marble5": "#E5E7EB",
+    "marble6": "#F59E0B",
+    "marble7": "#06B6D4",
+    "marble8": "#EC4899",
+    "marble9": "#EF4444"
+  },
+  "fonts": {
+    "sans": "\"Josefin Sans\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Josefin Sans\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"DM Mono\", ui-monospace, \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Josefin Sans",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/josefin-sans@5/files/josefin-sans-latin-wght-normal.woff2",
+        "weight": "100 700"
+      },
+      {
+        "family": "DM Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource/dm-mono@5/files/dm-mono-latin-500-normal.woff2",
+        "weight": "500"
+      },
+      {
+        "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": 90,
+    "body": 44,
+    "caption": 32,
+    "weightDisplay": 700,
+    "weightBody": 600,
+    "tracking": "0.02em"
+  },
+  "radius": {
+    "sm": 4,
+    "md": 10,
+    "lg": 18,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "0 10px 24px rgba(0, 0, 0, 0.45)",
+    "lift": "0 16px 36px rgba(0, 0, 0, 0.5)"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "once-per-phrase",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "rise",
+    "ease": "inOutCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.3,
+      "slow": 0.6
+    }
+  },
+  "theme": {
+    "inks": [
+      "#2A211B 호두나무 벽 — 조형이 걸린 판, 서 있다",
+      "#C9CED4 광택 강철 레일·받침대",
+      "#C9A24E 놋쇠 — 명판·관문, 글은 그 위에 새긴 #2A1E12",
+      "marble1–9 색유리 구슬 — 회사 하나에 색 하나"
+    ],
+    "texture": "강철은 환경을 비추는 광택, 나무는 무광 단색, 구슬은 매끈한 색유리. 위쪽 키라이트 하나가 레일·구슬 그림자를 벽에 떨어뜨린다. 결·흠집 같은 세부 없음",
+    "movement": "구슬이 내리막에서 빨라지고 평지에서 느려진다(에너지 보존), 깔때기에서는 안쪽일수록 빨리 돈다. 레일은 놓이는 쪽으로 자라고, 갈림판은 박에 넘어가고, 관 안 구슬은 떨어져 쌓인다. 카메라는 서서 보거나 구슬 하나를 따라간다"
+  },
+  "notes": [
+    "구슬 색은 회사 색 — 장치(레일·관문·명판)는 강철·놋쇠·나무만.",
+    "화면 글은 놋쇠 명판에 새긴다(WebGL 글자판). 꼭 읽혀야 하는 끝 카드 글은 명판 위에 크게.",
+    "헤드리스 SwiftShader 로 그린다 — 레일은 관 단면 6각, 구슬은 InstancedMesh 하나, 그림자는 키라이트 하나."
+  ]
+}

package/themes/marble-run/slots.ts

@@ -0,0 +1,116 @@
+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, strokePath, traceCanvas } from "@kasaframe/themes/slotkit";
+import { marbleStage } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 구슬 조형의 결로. 3D 는 surface 하나(호두나무 벽, 한 번 그려 서 있다),
+// 나머지는 DOM — 판은 놋쇠 테 두른 나무 명판, 앉기는 구슬이 떨어져 통통 튀다 서는 것, 선은 강철 두 가닥 위를 구슬이 구른다
+
+export const slots: ThemeSlots = {
+  surface(el, { ctx }) {
+    const stage = marbleStage(el, { ctx, shots: [{ from: -1, to: 1e9, keys: [{ t: 0, look: [0, 0] }] }] });
+    return stillStage(stage, (t) => stage(t));
+  },
+
+  // 나무 명판 — 짙은 판에 놋쇠 테와 나사 넷, 벽에 붙는 순간 살짝 눌렸다 선다. 강조 판은 놋쇠 테가 두껍다
+  panel(el, { at, tone }) {
+    const box = layer(el, "inset:0", true);
+    const board = layer(box, `inset:0;border-radius:10px;background:var(--kf-surface);border:${tone === "accent" ? 10 : 6}px solid var(--kf-brass, var(--kf-accent))`);
+    for (const p of ["left:14px;top:14px", "right:14px;top:14px", "left:14px;bottom:14px", "right:14px;bottom:14px"]) layer(board, `${p};width:12px;height:12px;border-radius:50%;background:var(--kf-brass, var(--kf-accent))`);
+    return (t) => {
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      const k = t < at ? 0 : spring(t - at, { from: 0.92, to: 1, stiffness: 420, damping: 18 });
+      board.style.transform = `scale(${k.toFixed(4)})`;
+    };
+  },
+
+  // 구슬이 떨어져 앉는 것 — 닿는 순간부터 위로 통통 튀다가 잦아들어 선다(0.6초)
+  land(_el, { at, seed }) {
+    const hop = 34 + rand(seed, 0) * 14;
+    return (t): Style => {
+      if (t < at) return {};
+      const tau = t - at;
+      if (tau > 0.6) return {};
+      return { y: -hop * Math.exp(-tau * 7) * Math.abs(Math.sin(tau * 17)) };
+    };
+  },
+
+  // 명판에 글을 새긴다 — 한 자씩, 막 새긴 글자는 놋쇠빛이었다가 글 색으로 앉는다
+  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";
+        const born = at + (i / spans.length) * dur;
+        s.style.color = i < n && t - born < 0.12 && t < at + dur + 0.12 ? "var(--kf-accent-text, var(--kf-accent))" : "";
+      });
+    };
+  },
+
+  // 강철 두 가닥이 놓이고, 다 놓인 뒤엔 그 위를 구슬이 끝까지 굴러갔다 처음부터 다시
+  trace(el, { ctx, points, at, dur, seed }) {
+    const { g, clear } = traceCanvas(el, points, 60);
+    const steel = ctx.style.colors.steel ?? ctx.style.colors.inkSoft;
+    const marble = ctx.style.colors[`marble${1 + Math.floor(rand(seed, 0) * 9)}`] ?? ctx.style.colors.accent;
+    const total = points.slice(1).reduce((a, q, i) => a + Math.hypot(q[0] - points[i][0], q[1] - points[i][1]), 0);
+    const ride = Math.max(0.5, total / 900);
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      const pts = partial(points, ease.inOutCubic(p));
+      g.lineCap = "round";
+      g.strokeStyle = steel;
+      g.lineWidth = 4;
+      for (const off of [-7, 7]) {
+        g.save();
+        g.translate(0, off);
+        strokePath(g, pts);
+        g.restore();
+      }
+      if (p < 1) return;
+      const k = ((t - at - dur) / ride) % 1;
+      const [x, y] = partial(points, k).at(-1)!;
+      g.fillStyle = marble;
+      g.beginPath();
+      g.arc(x, y - 4, 14, 0, Math.PI * 2);
+      g.fill();
+      g.fillStyle = "rgba(255,255,255,0.7)";
+      g.beginPath();
+      g.arc(x - 5, y - 9, 4, 0, Math.PI * 2);
+      g.fill();
+    };
+  },
+
+  // 드롭 — 방출 문이 열린 순간처럼 구슬 한 줌이 가운데서 튀어 올랐다 떨어지고, 한 번 섬광
+  drop(el, { ctx, drop }) {
+    const flash = layer(el, `inset:0;background:var(--kf-ink);opacity:0`);
+    const { width: W, height: H } = ctx.meta;
+    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 D = ctx.beats.drop(drop);
+    const bits = Array.from({ length: 28 }, (_, i) => ({ vx: (rand("mr-drop", i) - 0.5) * 1400, vy: -600 - rand("mr-drop", i + 40) * 900, color: ctx.style.colors[`marble${(i % 9) + 1}`] ?? ctx.style.colors.accent }));
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "marble-drop" });
+      flash.style.opacity = (s.flash * 0.55).toFixed(3);
+      g.clearRect(0, 0, W, H);
+      const tau = t - D;
+      if (tau > 0 && tau < 1.2) {
+        for (const b of bits) {
+          g.fillStyle = b.color;
+          g.beginPath();
+          g.arc(W / 2 + b.vx * tau, H * 0.55 + b.vy * tau + 0.5 * 2600 * tau * tau, 14 * Math.min(W, H) / 1080, 0, Math.PI * 2);
+          g.fill();
+        }
+      }
+      return s;
+    };
+  },
+};