kasaframe 0.1.1 → 0.1.4

package/themes/conveyor-factory/sample/index.html

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

package/themes/conveyor-factory/sample/kf.json

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

@@ -0,0 +1,48 @@
+import type { SceneCtx } from "@kasaframe/core";
+
+// 견본 장면들이 같이 쓰는 작은 도구 — 장면 안 박·마디 컷, 컷마다 라인을 떨어뜨려 둘 간격
+
+export type V3 = [number, number, number];
+
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 0.05);
+const barsIn = (ctx: SceneCtx): number[] => ctx.beats.bars.filter((b) => b >= -1e-6 && b < ctx.dur - 0.05);
+
+/** 컷마다 라인을 이만큼 떨어뜨린다 — 안개 너머라 다른 라인이 안 비친다 */
+export const SET = 120;
+
+/** 마디 경계로 자른 컷 n 개 [시작, 끝) — 마지막 컷은 장면 끝 너머까지 */
+export function cuts(ctx: SceneCtx, n: number): [number, number][] {
+  const B = barsIn(ctx);
+  const edge = (i: number) => (i === 0 ? -1 : i >= n ? ctx.dur + 1 : (B[i] ?? (ctx.dur * i) / n));
+  return Array.from({ length: n }, (_, i) => [edge(i), edge(i + 1)]);
+}
+
+/** 간격 every 로 from 부터 until 앞까지 */
+export const every = (from: number, until: number, step: number): number[] => {
+  const out: number[] = [];
+  for (let t = from; t < until; t += step) out.push(+t.toFixed(4));
+  return out;
+};
+
+export type Speed = number | { from: number; to: number; at: number; dur: number };
+
+/** 순간 빠르기 — effects.ts 의 벨트와 같은 꼴 */
+const speedAt = (t: number, s: Speed): number => (typeof s === "number" ? s : s.from + (s.to - s.from) * Math.min(1, Math.max(0, (t - s.at) / s.dur)));
+
+/**
+ * 벨트가 빨라져도 상자 사이가 같은 거리(spacing)로 남게 오르는 시각들 — 벨트가 spacing 만큼 갈 때마다 하나.
+ * 처리량이 오르면 상자가 더 자주 오른다
+ */
+export function spawnBySpacing(s: Speed, from: number, until: number, spacing: number): number[] {
+  const out: number[] = [];
+  let acc = 0;
+  const dt = 1 / 240;
+  for (let t = from; t < until; t += dt) {
+    if (acc <= 0) {
+      out.push(+t.toFixed(4));
+      acc += spacing;
+    }
+    acc -= speedAt(t, s) * dt;
+  }
+  return out;
+}

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

@@ -0,0 +1,44 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { conveyor, factoryStage, logoGate, signBoard, tokenFlow } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cuts, SET, spawnBySpacing } from "../lib/factory.ts";
+
+// 첫 토큰 실측 — 세 라인에서 첫 상자가 실제 ms 그대로 끝에 닿는다 → 로고 기계가 솟고 상자가 그 문을 지난다 → 물러나 라인 전체
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const H = 0.9;
+    const stage = factoryStage(root, {
+      ctx,
+      shots: [
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [-1, 7.5, 12.5], look: [1, 0.8, 0] }] },
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET, 3.3, 11.5], look: [SET, 2.6, 0] }, { t: c1[1], pos: [SET, 3.2, 10.6], look: [SET, 2.6, 0], ease: "linear" }] },
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [SET + 7, 7.5, 15], look: [SET, 2, 0] }] },
+      ],
+    });
+
+    // 라인 셋 — 같은 길이, 첫 상자가 실측 첫 토큰 시간(ms) 그대로 끝에 닿는다. 닿는 순간 끝에 ms 간판
+    const len = 12;
+    const go = B(1);
+    OG.ttft.forEach(([id, label, ms], k) => {
+      const z = (k - 1) * 3.2;
+      const v = len / (ms / 1000);
+      stage.add(conveyor(stage, { ctx, from: [-6, 0, z], to: [6, 0, z], speed: 2.2, width: 1.1, lanes: false }));
+      stage.add(tokenFlow(stage, { ctx, paths: [[[-6, H, z], [6, H, z]]], spawn: [go], speed: v, size: 0.75, label: () => id, tone: "accent" }));
+      stage.add(tokenFlow(stage, { ctx, paths: [[[-6, H, z], [6, H, z]]], spawn: spawnBySpacing(2.2, -6, c0[1], 2.4), speed: 2.2, size: 0.55 }));
+      stage.add(signBoard(stage, { ctx, text: id, pos: [-4.2, 1.45, z + 0.7], height: 0.34, at: B(0) + k * 0.06, font: "mono", hang: false, until: c0[1] }));
+      stage.add(signBoard(stage, { ctx, text: label, pos: [7.4, 1.9, z], height: 0.62, at: go + ms / 1000, font: "display", tone: "accent", hang: false, until: c0[1] }));
+    });
+    stage.add(signBoard(stage, { ctx, text: OG.calls, pos: [0.5, 4.2, -2], height: 0.5, at: B(3), font: "sans", until: c0[1] }));
+
+    // 로고 기계 — 왼쪽 칸으로 상자가 들어가 오른쪽 칸으로 나온다. 박마다 화살이 빛난다
+    stage.add(conveyor(stage, { ctx, from: [SET - 14, 0, 0.4], to: [SET + 14, 0, 0.4], speed: 2.4, width: 1.2 }));
+    stage.add(tokenFlow(stage, { ctx, paths: [[[SET - 14, H, 0.4], [SET + 14, H, 0.4]]], spawn: spawnBySpacing(2.4, c1[0] - 14, ctx.dur, 2), speed: 2.4, size: 0.6 }));
+    stage.add(logoGate(stage, { ctx, pos: [SET, 2.6, 0], scale: 1.1, at: B(4), glow: [B(5), B(6), B(7), B(8), B(9)] }));
+    stage.add(signBoard(stage, { ctx, text: OG.site, pos: [SET, 5.6, 0], height: 0.8, at: B(5), font: "sans" }));
+    stage.add(signBoard(stage, { ctx, text: OG.url, pos: [SET, 0.4, 2.6], height: 0.32, at: B(6), font: "mono", hang: false }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/conveyor-factory/sample/scenes/gather.ts

@@ -0,0 +1,47 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { boxStack, conveyor, factoryStage, signBoard, tokenFlow } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cuts, every, SET, type V3 } from "../lib/factory.ts";
+
+// 회사마다 따로 도는 짧은 라인 아홉(서로 이어지지 않았다) → 회사별 모델 수만큼 쌓인 상자 더미
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? 0.29 + i * 0.353;
+    const [c0, c1] = cuts(ctx, 2);
+    const stage = factoryStage(root, {
+      ctx,
+      shots: [
+        // 흩어진 라인들 — 위에서 비스듬히, 라인이 켜지는 박을 따라 조금 다가간다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [0, 15, 19], look: [0, 0, -1] }, { t: B(3), pos: [0, 12.5, 16], look: [0, 0.5, -1], ease: "outCubic" }] },
+        // 더미 아홉 — 옆에서 낮게, 모델 수 높이가 한눈에
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET - 0.5, 3.9, 15.2], look: [SET - 0.5, 2.1, 0] }, { t: ctx.dur, pos: [SET - 0.5, 4.1, 14.6], look: [SET - 0.5, 2.3, 0], ease: "linear" }] },
+      ],
+    });
+    // 라인 아홉 — 3×3 으로 흩어 놓고 저마다 다른 방향. 줄마다 한 박에 켜진다
+    const startAt = (i: number) => [0, B(0), B(1)][Math.floor(i / 3)] + (i % 3) * 0.05;
+    OG.providers.forEach(([name, n], i) => {
+      const cx = ((i % 3) - 1) * 7.4 + ((Math.floor(i / 3) % 2) - 0.5) * 1.6;
+      const cz = (Math.floor(i / 3) - 1) * 6.2;
+      const ang = (i * 47) % 360;
+      const r = (ang * Math.PI) / 180;
+      const half = 2.3;
+      const from: V3 = [cx - Math.cos(r) * half, 0, cz + Math.sin(r) * half];
+      const to: V3 = [cx + Math.cos(r) * half, 0, cz - Math.sin(r) * half];
+      const at = startAt(i);
+      const speed = 1.2 + n / 20;
+      stage.add(conveyor(stage, { ctx, from, to, at, run: at + 0.2, speed, width: 1.1, lanes: false }));
+      const step = 2.2 / speed;
+      stage.add(tokenFlow(stage, { ctx, paths: [[[from[0], 0.9, from[2]], [to[0], 0.9, to[2]]]], spawn: every(at + 0.15 - 2 * step, c0[1], step), speed, size: 0.62, from: at + 0.3 }));
+      stage.add(signBoard(stage, { ctx, text: name, pos: [cx, 2.5, cz], height: 0.62, at: at + 0.1, until: c0[1], hang: false }));
+    });
+    // 더미 아홉 — 상자 수 = 모델 수. 박마다 묶음으로
+    const pileAt = [B(4), B(5), B(5) + 0.06, B(6), B(6) + 0.05, B(6) + 0.1, B(7), B(7) + 0.05, B(7) + 0.1];
+    OG.providers.forEach(([name, n], i) => {
+      const x = SET + (i - 4) * 1.9;
+      stage.add(boxStack(stage, { ctx, pos: [x, 0, 0], count: n, at: pileAt[i], every: Math.min(0.012, 0.3 / n), grid: [2, 2], size: 0.5, label: String(n) }));
+      stage.add(signBoard(stage, { ctx, text: name, pos: [x, 0.3, 1.4], height: 0.34, at: pileAt[i], hang: false, font: "sans" }));
+    });
+    return (t: number) => stage(t);
+  },
+};

package/themes/conveyor-factory/sample/scenes/models.ts

@@ -0,0 +1,91 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { beacon, conveyor, factoryStage, signBoard, stampPress, tokenFlow } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cuts, SET, spawnBySpacing, type Speed, type V3 } from "../lib/factory.ts";
+
+// 두 형식의 벨트가 한 주소의 문으로 합류 → 박마다 모델 ID 상자가 같은 프레스(주소)를 지나며 찍힌다 → 엔드포인트 네 갈래로 나뉘고 벨트가 빨라지며 드롭으로
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const drop = ctx.beats.drop(0);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const X2 = 2 * SET;
+    const stage = factoryStage(root, {
+      ctx,
+      shots: [
+        // 합류 — 높이서 두 벨트가 한 문으로 드는 모양 전체, 문 간판이 서는 박까지 다가간다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [0, 10, 15], look: [0, 1.2, -2] }, { t: B(2), pos: [0, 8.6, 12.5], look: [0, 1.6, -2.5], ease: "outCubic" }] },
+        // 프레스 가까이 — 서 있다(쉬지 않는 몫은 상자·프레스)
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET - 6.2, 3.8, 6.4], look: [SET + 0.6, 1.9, 0] }] },
+        // 네 갈래 — 벨트가 빨라지는 동안 갈림목으로 다가가 드롭에 닿는다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [X2 - 9, 9, 11], look: [X2 + 1.5, 0.6, 0] }, { t: drop, pos: [X2 - 5.5, 6.2, 7.5], look: [X2 + 1, 0.9, 0], ease: "inCubic" }] },
+      ],
+    });
+
+    // 쪽 1 — 왼쪽 OpenAI 형식·오른쪽 Anthropic 형식 벨트가 가운데 벨트로 합류해 문(주소)을 지나 안쪽으로
+    const v = 2.6;
+    const H = 0.9;
+    const L: V3[] = [[-10, H, 2], [0, H, 2], [0, H, -16]];
+    const R: V3[] = [[10, H, 2], [0, H, 2], [0, H, -16]];
+    stage.add(conveyor(stage, { ctx, from: [0, 0, 2.7], to: [0, 0, -16], speed: v, width: 1.3 }));
+    stage.add(conveyor(stage, { ctx, from: [-10, 0, 2], to: [-0.7, 0, 2], speed: v, width: 1.1, at: B(2), run: B(2) + 0.2, lanes: false }));
+    stage.add(conveyor(stage, { ctx, from: [10, 0, 2], to: [0.7, 0, 2], speed: v, width: 1.1, at: B(3), run: B(3) + 0.2, lanes: false }));
+    const mainSpawn = spawnBySpacing(v, -8, c0[1], 1.5);
+    stage.add(tokenFlow(stage, { ctx, paths: [[[0, H, 3.6], [0, H, -16]]], spawn: mainSpawn, speed: v, size: 0.7 }));
+    stage.add(tokenFlow(stage, { ctx, paths: [L], spawn: spawnBySpacing(v, B(2) + 0.25, c0[1], 2.2), speed: v, size: 0.62 }));
+    stage.add(tokenFlow(stage, { ctx, paths: [R], spawn: spawnBySpacing(v, B(3) + 0.25, c0[1], 2.2), speed: v, size: 0.62 }));
+    stage.add(stampPress(stage, { ctx, pos: [0, 0, -2.5], rotation: Math.PI / 2, width: 2.4, hits: [], at: -1 }));
+    stage.add(signBoard(stage, { ctx, text: OG.url, pos: [0, 4.6, -2.5], height: 0.55, at: 0.05, font: "mono", until: c0[1] }));
+    stage.add(signBoard(stage, { ctx, text: "/v1", pos: [2.9, 2.6, -2.2], height: 0.9, at: B(1), font: "display", tone: "accent", hang: false, until: c0[1] }));
+    stage.add(signBoard(stage, { ctx, text: "OpenAI 형식", pos: [-6.4, 2.3, 2], height: 0.5, at: B(2) + 0.1, until: c0[1] }));
+    stage.add(signBoard(stage, { ctx, text: "Anthropic 형식", pos: [6.4, 2.3, 2], height: 0.5, at: B(3) + 0.1, until: c0[1] }));
+
+    // 쪽 2 — 프레스 하나(주소)를 박마다 다른 모델 ID 상자가 지나며 찍힌다. 머리판엔 방금 찍은 ID
+    const v2 = 3.2;
+    const pressX = SET;
+    const startX = SET - 10;
+    const hitsAt = [B(4), B(5), B(6), B(7)];
+    const spawn2 = [hitsAt[0] - 0.353 * 4, hitsAt[0] - 0.353 * 3, hitsAt[0] - 0.353 * 2, hitsAt[0] - 0.353, ...hitsAt, B(8) - 0.0].map((h) => +(h - (pressX - startX) / v2).toFixed(4));
+    // 앞에 미리 실린 상자 넷 뒤, 박에 닿는 첫 상자가 첫 모델 ID
+    const idOf = (i: number) => OG.ids[(i + 1) % OG.ids.length];
+    stage.add(conveyor(stage, { ctx, from: [startX, 0, 0], to: [SET + 10, 0, 0], speed: v2, width: 1.3 }));
+    const flow2 = tokenFlow(stage, { ctx, paths: [[[startX, H, 0], [SET + 10, H, 0]]], spawn: spawn2, speed: v2, size: 0.85, label: (i) => idOf(i), labelAt: pressX - startX });
+    stage.add(flow2);
+    const arrive = flow2.arrive(pressX - startX);
+    const shownId = (t: number) => {
+      let k = 0;
+      arrive.forEach((a, i) => {
+        if (a <= t) k = i;
+      });
+      return idOf(k);
+    };
+    stage.add(stampPress(stage, { ctx, pos: [pressX, 0, 0], width: 2.2, hits: arrive, name: shownId, at: -1 }));
+    stage.add(signBoard(stage, { ctx, text: OG.host, pos: [SET + 2.2, 4.1, -2.4], height: 0.42, at: c1[0], font: "mono", rotation: -0.55 }));
+    // 지금 찍힌 모델 ID — 박마다 바뀐다(같은 주소 아래)
+    stage.add(signBoard(stage, { ctx, text: shownId, pos: [SET - 1.6, 2.9, 1.9], height: 0.38, at: hitsAt[0], font: "mono", tone: "accent", hang: false, rotation: -0.75 }));
+
+    // 쪽 3 — 갈림목에서 엔드포인트 네 갈래로. 벨트가 빨라지며(처리량) 상자가 더 자주 오르고, 마지막 박에 경광등
+    const ramp: Speed = { from: 2.4, to: 6, at: c2[0], dur: drop - c2[0] };
+    const J: V3 = [X2 - 2, H, 0];
+    const lanesZ = [-4.5, -1.5, 1.5, 4.5];
+    stage.add(conveyor(stage, { ctx, from: [X2 - 16, 0, 0], to: [X2 - 2, 0, 0], speed: ramp, width: 1.3 }));
+    lanesZ.forEach((z, k) => {
+      stage.add(conveyor(stage, { ctx, from: [X2 - 1.4, 0, z * 0.25], to: [X2 + 11, 0, z], speed: ramp, width: 1.1, at: B(8 + k) - 0.15, run: B(8 + k), lanes: false }));
+      stage.add(signBoard(stage, { ctx, text: OG.endpoints[k], pos: [X2 + 4.6, 2.1, z * 0.75], height: 0.5, at: B(8 + k), font: "mono", hang: false, rotation: -1 }));
+    });
+    const spawn3 = spawnBySpacing(ramp, c2[0] - 4, drop, 1.6);
+    stage.add(
+      tokenFlow(stage, {
+        ctx,
+        paths: lanesZ.map((z) => [[X2 - 16, H, 0], J, [X2 + 11, H, z]] as V3[]),
+        spawn: spawn3,
+        route: (i) => i % 4,
+        speed: ramp,
+        size: 0.6,
+      }),
+    );
+    stage.add(beacon(stage, { ctx, pos: [X2 - 3, 0, -2.6], on: B(11) }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/conveyor-factory/sample/scenes/price.ts

@@ -0,0 +1,77 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { beacon, conveyor, factoryStage, gauge, pressDrop, signBoard, stampPress, tokenFlow } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cuts, SET, spawnBySpacing } from "../lib/factory.ts";
+import { textPlane, THREE } from "@kasaframe/themes/stage3d";
+
+// 드롭 — 큰 프레스가 쾅 내려찍어 상자에 102 → 벽 계기판 24칸에 00–10시가 켜지고 −90% → 정가 상자가 프레스를 지나며 밤 값으로 찍혀 나온다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const drop = ctx.beats.drop(0);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const H = 0.9;
+    const stage = factoryStage(root, {
+      ctx,
+      shots: [
+        // 드롭 — 프레스 정면에서, 찍힌 뒤 한 번 물러나 전체를 보인다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [0, 3.2, 10.5], look: [0, 2.4, 0] }, { t: B(1), pos: [0, 3.2, 10.5], look: [0, 2.4, 0] }, { t: B(3), pos: [1.5, 4.6, 13.5], look: [0, 2.3, 0], ease: "outCubic" }] },
+        // 계기판 — 벽 앞에서 서 있다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET + 1.2, 3.4, 10], look: [SET + 1.2, 2.9, -3] }] },
+        // 값 바꾸기 프레스 — 벨트를 따라 비스듬히
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [2 * SET - 2.6, 4.4, 10], look: [2 * SET + 0.4, 2.1, 0] }] },
+      ],
+    });
+
+    // 쪽 1 — 벨트 위 큰 상자에 프레스가 내려찍으면 앞면에 102 가 찍혀 있다
+    stage.add(conveyor(stage, { ctx, from: [-14, 0, 0], to: [14, 0, 0], speed: 2.2, width: 2.6 }));
+    stage.add(tokenFlow(stage, { ctx, paths: [[[-14, H, 0], [14, H, 0]]], spawn: spawnBySpacing(2.2, -14, c0[1], 3.4).filter((s) => Math.abs(-14 + 2.2 * (drop - s)) > 2.6), speed: 2.2, size: 1.1 }));
+    const crate = new THREE.Mesh(new THREE.BoxGeometry(2.4, 1.6, 2.2), new THREE.MeshStandardMaterial({ color: new THREE.Color(ctx.style.colors.kraft), roughness: 0.85 }));
+    crate.position.set(0, H + 0.8, 0);
+    crate.castShadow = true;
+    crate.receiveShadow = true;
+    const stamp = textPlane({ text: String(OG.models), family: ctx.style.fonts.display, weight: 400, color: ctx.style.colors.onAccent, height: 1.0, px: 200, plate: ctx.style.colors.accent, pad: 26 });
+    stamp.position.set(0, H + 0.82, 1.11);
+    stage.scene.add(crate, stamp);
+    stage.add((t) => {
+      crate.visible = t < c0[1];
+      stamp.visible = t >= drop + 0.04 && t < c0[1];
+    });
+    stage.add(signBoard(stage, { ctx, text: `모델 ${OG.models} · 한 주소`, pos: [0, 4.95, 1.9], height: 0.5, at: B(1), until: c0[1] }));
+    stage.add(signBoard(stage, { ctx, text: OG.host, pos: [0, 0.35, 2.2], height: 0.34, at: B(2), until: c0[1], font: "mono", hang: false }));
+    stage.add(beacon(stage, { ctx, pos: [-4.4, 0, -1.4], on: drop, off: c0[1], red: drop }));
+    stage.add(beacon(stage, { ctx, pos: [4.4, 0, -1.4], on: drop + 0.05, off: c0[1], red: drop }));
+
+    // 쪽 2 — 벽 계기판: 바늘이 하루를 돌고 00–10시 칸이 켜진다, 앞 벨트는 쉬지 않는다
+    const wall = new THREE.Mesh(new THREE.BoxGeometry(18, 7, 0.4), new THREE.MeshStandardMaterial({ color: new THREE.Color(ctx.style.colors.surface), roughness: 0.9 }));
+    wall.position.set(SET, 3.5, -3.6);
+    wall.receiveShadow = true;
+    stage.scene.add(wall);
+    stage.add(gauge(stage, { ctx, pos: [SET - 1.8, 3.1, -3.3], radius: 2.3, at: B(4), window: [OG.night.from, OG.night.to], litAt: B(5) }));
+    stage.add(signBoard(stage, { ctx, text: `KST ${String(OG.night.from).padStart(2, "0")}:00–${OG.night.to}:00`, pos: [SET + 3.8, 5.0, -3.2], height: 0.58, at: B(6), font: "mono", hang: false }));
+    stage.add(signBoard(stage, { ctx, text: OG.deepseek.off.replace("-", "−"), pos: [SET + 3.8, 2.5, -3.2], height: 1.2, at: B(7), font: "display", tone: "accent", hang: false }));
+    stage.add(conveyor(stage, { ctx, from: [SET - 12, 0, 1.6], to: [SET + 12, 0, 1.6], speed: 2.4, width: 1.2 }));
+    stage.add(tokenFlow(stage, { ctx, paths: [[[SET - 12, H, 1.6], [SET + 12, H, 1.6]]], spawn: spawnBySpacing(2.4, c1[0] - 12, c1[1], 1.8), speed: 2.4, size: 0.7 }));
+
+    // 쪽 3 — 정가 라벨 상자가 프레스(deepseek)를 지나며 밤 값 라벨로 찍혀 나온다
+    const X = 2 * SET;
+    const v3 = 3;
+    const startX = X - 10;
+    const hits = [B(9), B(10), B(11)];
+    const spawn3 = [hits[0] - 0.7, ...hits, hits[2] + 0.35].map((h) => +(h - (X - startX) / v3).toFixed(4));
+    const [i0, i1] = OG.deepseek.input;
+    const [o0, o1] = OG.deepseek.output;
+    stage.add(conveyor(stage, { ctx, from: [startX, 0, 0], to: [X + 10, 0, 0], speed: v3, width: 1.4 }));
+    const flow3 = tokenFlow(stage, { ctx, paths: [[[startX, H, 0], [X + 10, H, 0]]], spawn: spawn3, speed: v3, size: 1.05, pre: () => `${i0} · ${o0}`, label: () => `${i1} · ${o1}`, labelAt: X - startX, tone: "accent" });
+    stage.add(flow3);
+    stage.add(stampPress(stage, { ctx, pos: [X, 0, 0], width: 2.4, hits: flow3.arrive(X - startX), name: OG.deepseek.id, at: B(8) - 0.2 }));
+    stage.add(signBoard(stage, { ctx, text: `정가 입력 ${i0} · 출력 ${o0} /M`, pos: [X - 3, 3.7, -1.6], height: 0.3, at: B(8), font: "mono" }));
+    stage.add(signBoard(stage, { ctx, text: `밤 ${i1} · ${o1} /M`, pos: [X + 4, 3.6, -1.6], height: 0.48, at: B(9) + 0.08, font: "mono", tone: "accent" }));
+    stage.add(signBoard(stage, { ctx, text: `${OG.glm.id} 밤 ${OG.glm.off.replace("-", "−")}`, pos: [X + 0.4, 0.35, 2.6], height: 0.34, at: B(11), font: "mono", hang: false }));
+
+    // 드롭 프레스는 맨 끝 — 그 프레임 카메라 자리에 흔들림을 더한다
+    stage.add(pressDrop(stage, { ctx, pos: [0, 0, 0], width: 3.6 }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/conveyor-factory/sample/style.json

@@ -0,0 +1,107 @@
+{
+  "name": "conveyor-factory",
+  "label": "컨베이어 공장 — 요청이 토큰 상자로 벨트를 타고 흐르고 프레스가 찍어 낸다",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#1B1E22",
+    "surface": "#262A30",
+    "raised": "#31363D",
+    "line": "#4A5159",
+    "ink": "#EEF0F2",
+    "inkSoft": "#C9CED4",
+    "dim": "#9AA2AB",
+    "accent": "#F2B705",
+    "accentSoft": "#5A4609",
+    "accentText": "#F2B705",
+    "onAccent": "#16181B",
+    "success": "#3FBF6A",
+    "danger": "#E5483C",
+    "warning": "#F2B705",
+    "floor": "#2A2E34",
+    "steel": "#8E979F",
+    "belt": "#121417",
+    "kraft": "#C49A62",
+    "tape": "#9C7745"
+  },
+  "fonts": {
+    "sans": "\"IBM Plex Sans KR\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Saira Stencil One\", \"IBM Plex Sans KR\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"IBM Plex Mono\", \"IBM Plex Sans KR\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Saira Stencil One",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/sairastencilone/SairaStencilOne-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "IBM Plex Sans KR",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/ibmplexsanskr/IBMPlexSansKR-Bold.ttf",
+        "weight": "700"
+      },
+      {
+        "family": "IBM Plex Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/ibmplexmono/IBMPlexMono-SemiBold.ttf",
+        "weight": "600"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      }
+    ]
+  },
+  "type": {
+    "hero": 230,
+    "title": 110,
+    "body": 46,
+    "caption": 32,
+    "weightDisplay": 400,
+    "weightBody": 700,
+    "tracking": "0.01em"
+  },
+  "radius": {
+    "sm": 2,
+    "md": 4,
+    "lg": 6,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "0 8px 24px rgba(0, 0, 0, 0.45)",
+    "lift": "0 4px 0 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": "pop",
+    "ease": "outCubic",
+    "durations": {
+      "fast": 0.07,
+      "base": 0.25,
+      "slow": 0.5
+    }
+  },
+  "theme": {
+    "inks": [
+      "#1B1E22 그늘진 콘크리트 공장 · #8E979F 강철 · #121417 벨트 고무 · #C49A62 크라프트 상자",
+      "#EEF0F2 간판 글",
+      "#F2B705 안전 노랑 — 기둥·차선·경광등·프레스 경고 띠, 강조는 이것 하나"
+    ],
+    "texture": "반무광 강철, 가로 골이 난 무광 고무 벨트, 종이 상자에 테이프 줄. 바닥에 노란 차선. 머리 위 조명 하나의 선명한 그림자, 먼 곳은 어둠으로 빠진다",
+    "movement": "벨트는 일정한 빠르기로 쉬지 않고 상자가 같은 간격으로 지나간다(처리량 = 벨트 속도). 프레스는 0.07초에 내려찍고 천천히 올라가며 찍힌 상자에 라벨이 생긴다. 컷마다 다른 라인, 카메라는 다가가기·드롭 충격 때만"
+  },
+  "notes": [
+    "원근 3/4 시점 — 등각 정사영은 쓰지 않는다(iso-diorama 와 겹친다).",
+    "강조는 안전 노랑(accent) 하나. 초록·빨강은 램프 불빛에만.",
+    "간판 글은 밝은 ink, 큰 숫자는 Saira Stencil One(창고 스텐실), 한글·모델 ID 는 IBM Plex Sans KR·Mono.",
+    "쉬지 않는 몫은 벨트와 상자가 진다 — 카메라는 이유 있을 때만(다가가기·드롭 충격)."
+  ]
+}

package/themes/conveyor-factory/slots.ts

@@ -0,0 +1,121 @@
+import { clamp, ease, type Style } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { stillStage, THREE } from "@kasaframe/themes/stage3d";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, shownCount, traceCanvas } from "@kasaframe/themes/slotkit";
+import { factoryStage } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 공장의 결로. 3D 는 surface 하나(한 번 그려 서 있다), 나머지는 DOM·캔버스 2D
+const HAZARD = "repeating-linear-gradient(135deg, var(--kf-accent) 0 14px, var(--kf-belt, #121417) 14px 28px)";
+
+export const slots: ThemeSlots = {
+  // 공장 바닥 — 원근으로 내려다본 콘크리트에 노란 차선 둘이 깊이로 뻗는다. 처음 한 번 그려 서 있다
+  surface(el, { ctx }) {
+    const stage = factoryStage(el, { ctx, shots: [{ from: -1, to: 1e9, keys: [{ t: 0, pos: [0, 7, 11], look: [0, 0, -6] }] }], fog: [10, 46] });
+    const lane = new THREE.MeshStandardMaterial({ color: new THREE.Color(ctx.style.colors.accent), roughness: 0.8, emissive: new THREE.Color(ctx.style.colors.accent), emissiveIntensity: 0.1 });
+    for (const x of [-3.2, 3.2]) {
+      const m = new THREE.Mesh(new THREE.PlaneGeometry(0.16, 80), lane);
+      m.rotation.x = -Math.PI / 2;
+      m.position.set(x, 0.01, -30);
+      stage.scene.add(m);
+    }
+    return stillStage(stage, (t) => stage(t));
+  },
+
+  // 강철 판 — 롤 셔터가 말려 올라가며 열린다(올라가는 동안 셔터 살이 보인다). 위 가장자리에 노랑·검정 경고 띠, 강조 판은 노란 판
+  panel(el, { at, tone }) {
+    const accent = tone === "accent";
+    const box = layer(el, `inset:0;background:${accent ? "var(--kf-accent)" : "var(--kf-surface)"};border:3px solid ${accent ? "var(--kf-on-accent)" : "var(--kf-line)"};box-sizing:border-box`, true);
+    layer(box, `left:0;right:0;top:0;height:9%;min-height:6px;background:${HAZARD}`);
+    const shutter = layer(box, "inset:0;background:repeating-linear-gradient(180deg, var(--kf-raised) 0 10px, var(--kf-line) 10px 12px)");
+    return (t) => {
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      const u = clamp((t - at) / 0.28);
+      const up = ease.inOutCubic(u);
+      shutter.style.display = u < 1 ? "block" : "none";
+      shutter.style.clipPath = `inset(0 0 ${(up * 100).toFixed(1)}% 0)`;
+    };
+  },
+
+  // 프레스로 찍힌다 — 위에서 0.07초에 내려와 눌렸다(가로로 퍼짐) 0.3초 안에 선다
+  land(_el, { at }) {
+    return (t): Style => {
+      if (t < at) return {};
+      const k = t - at;
+      if (k < 0.07) return { y: -60 * (1 - k / 0.07), scaleY: 1.04 };
+      if (k < 0.14) return { scaleY: 0.86, scaleX: 1.07 };
+      if (k < 0.3) {
+        const u = (k - 0.14) / 0.16;
+        return { scaleY: 0.86 + 0.14 * ease.outBack(u), scaleX: 1.07 - 0.07 * u };
+      }
+      return {};
+    };
+  },
+
+  // 스텐실 분사 — 한 자씩 노란 칠로 뿌려졌다가 마르며 글 색으로 앉는다
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    const n = spans.length;
+    return (t) => {
+      const shown = shownCount(n, t, at, dur);
+      spans.forEach((s, i) => {
+        const born = at + (dur * i) / Math.max(1, n);
+        s.style.visibility = i < shown ? "visible" : "hidden";
+        s.style.color = i < shown && t - born < 0.18 ? "var(--kf-accent)" : "";
+      });
+    };
+  },
+
+  // 벨트 — 강철 레일 사이 검은 벨트가 깔리고, 다 깔린 뒤엔 가로 골이 흐른다(처리량)
+  trace(el, { points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points, 40);
+    const css = (k: string, fb: string) => getComputedStyle(el).getPropertyValue(k).trim() || fb;
+    const rail = css("--kf-steel", "#8E979F");
+    const belt = css("--kf-belt", "#121417");
+    const rib = css(tone === "accent" ? "--kf-accent" : "--kf-line", "#4A5159");
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      const pts = partial(points, p);
+      const path = () => {
+        g.beginPath();
+        pts.forEach((q, i) => (i ? g.lineTo(q[0], q[1]) : g.moveTo(q[0], q[1])));
+      };
+      g.lineCap = "butt";
+      g.lineJoin = "round";
+      g.strokeStyle = rail;
+      g.lineWidth = 22;
+      path();
+      g.stroke();
+      g.strokeStyle = belt;
+      g.lineWidth = 15;
+      path();
+      g.stroke();
+      g.strokeStyle = rib;
+      g.lineWidth = 13;
+      g.setLineDash([3, 11]);
+      g.lineDashOffset = p >= 1 ? -(t - at - dur) * 90 : 0;
+      path();
+      g.stroke();
+      g.setLineDash([]);
+    };
+  },
+
+  // 결정타 — 노란 섬광과 함께 위아래에서 경고 띠가 쾅 닫혔다 열리고 화면이 흔들린다
+  drop(el, { ctx, drop }) {
+    const flash = layer(el, "inset:0;background:var(--kf-accent);opacity:0");
+    const top = layer(el, `left:0;right:0;top:0;height:7%;background:${HAZARD};transform:translateY(-100%)`);
+    const bottom = layer(el, `left:0;right:0;bottom:0;height:7%;background:${HAZARD};transform:translateY(100%)`);
+    const at = ctx.beats.drop(drop);
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "pressDrop" });
+      flash.style.opacity = (s.flash * 0.45).toFixed(3);
+      const k = t - at;
+      const shut = k < 0 ? 0 : k < 0.08 ? k / 0.08 : k < 0.5 ? 1 : 1 - clamp((k - 0.5) / 0.3);
+      top.style.transform = `translateY(${(-100 + 100 * shut).toFixed(1)}%)`;
+      bottom.style.transform = `translateY(${(100 - 100 * shut).toFixed(1)}%)`;
+      return s;
+    };
+  },
+};