kasaframe 0.1.1 → 0.1.4

package/themes/iso-diorama/sample/index.html

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

package/themes/iso-diorama/sample/kf.json

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

@@ -0,0 +1,22 @@
+import type { SceneCtx } from "@kasaframe/core";
+
+export const beatsFrom0 = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+const barsFrom0 = (ctx: SceneCtx): number[] => ctx.beats.bars.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+/** 컷마다 섬을 이만큼 떨어뜨린다 — 정사영 화면(가로 20 남짓) 밖이라 다른 섬이 안 비친다 */
+export const SET = 60;
+
+export function cuts(ctx: SceneCtx, n: number): [number, number][] {
+  const B = barsFrom0(ctx);
+  const edge = (i: number) => (i === 0 ? 0 : i >= n ? ctx.dur + 1 : (B[i] ?? (ctx.dur * i) / n));
+  return Array.from({ length: n }, (_, i) => [edge(i), edge(i + 1)]);
+}
+
+type V3 = [number, number, number];
+/** 섬 가운데로 모이는 네 갈래 길(왕복) — 차가 오간다 */
+export const crossRoads = (x: number, half = 5): V3[][] => [
+  [[x - half, 0.06, 0], [x, 0.06, 0], [x - half, 0.06, 0]],
+  [[x + half, 0.06, 0], [x, 0.06, 0], [x + half, 0.06, 0]],
+  [[x, 0.06, -half], [x, 0.06, 0], [x, 0.06, -half]],
+  [[x, 0.06, half], [x, 0.06, 0], [x, 0.06, half]],
+];

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

@@ -0,0 +1,41 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { carFlow, gatewayHall, isoStage, signPost, tileIsland, towers } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, crossRoads, cuts, SET } from "../lib/iso.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const stage = isoStage(root, {
+      ctx,
+      shots: [
+        // 첫 토큰 실측 셋이 빌딩으로 솟는다 — 밑동에서 물러나 셋을 다 담는다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, look: [0, 2.6, 0], zoom: 10 }, { t: b[2] ?? 0.7, look: [0, 3.2, 0], zoom: 14.5, ease: "outCubic" }] },
+        // 끝 카드 — 회관으로 돌아 들며 주소가 서는 박에 선다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], look: [SET, 2.6, 0], zoom: 12.5, turn: 0.35 }, { t: b[6] ?? c1[0] + 0.7, look: [SET, 2.4, 0], zoom: 10, turn: 0, ease: "outCubic" }] },
+        // 끝 반 마디 — 섬 전체로 물러나 선다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], look: [SET, 2.6, 0.4], zoom: 11 }, { t: c2[0] + 0.45, look: [SET + 0.6, 2.2, 1.2], zoom: 10.6, ease: "outCubic" }] },
+      ],
+    });
+    // 첫 섬 — 첫 토큰 실측 셋이 박마다 빌딩 높이로(ms)
+    stage.add(tileIsland(stage, { ctx, pos: [0, 0, 0], size: [11, 11], at: -1, seed: "ttft" }));
+    const max = Math.max(...OG.ttft.map(([, , ms]) => ms));
+    // 지붕엔 ms 만, 모델 ID 는 발치 팻말로 — 한 줄로 이으면 이웃 탑 간판과 겹친다
+    const foot = (i: number): [number, number, number] => [-4.4 + i * 3.9, 0, 3.4 - i * 3.9];
+    stage.add(towers(stage, { ctx, items: OG.ttft.map(([, label, ms], i) => ({ pos: foot(i), height: (6 * ms) / max, at: b[i] ?? i * 0.35, label, width: 1.9, roof: i === 0 ? "gate" : "roof" })) }));
+    OG.ttft.forEach(([id], i) => {
+      const [x, , z] = foot(i);
+      stage.add(signPost(stage, { ctx, text: id, pos: [x + 1.5, 0, z + 1.5], height: 0.46, at: (b[i] ?? i * 0.35) + 0.08, font: "mono" }));
+    });
+    stage.add(carFlow(stage, { ctx, roads: crossRoads(0, 5), count: 10, speed: 3 }));
+    stage.add(signPost(stage, { ctx, text: OG.calls, pos: [3.2, 0, 3.2], height: 0.7, at: b[3] ?? 1.06 }));
+    // 둘째 섬 — 끝 카드: 관문 회관(OG 로고의 두 칸)과 opengateway.ai
+    stage.add(tileIsland(stage, { ctx, pos: [SET, 0, 0], size: [13, 13], at: c1[0] - 0.3, seed: "card" }));
+    stage.add(gatewayHall(stage, { ctx, pos: [SET, 0, 0], at: c1[0], pulse: b.filter((x) => x >= c1[0]), scale: 1.5 }));
+    stage.add(carFlow(stage, { ctx, roads: crossRoads(SET, 6), count: 18, speed: 3.4 }));
+    stage.add(signPost(stage, { ctx, text: OG.site, pos: [SET, 5.6, 0], height: 1.3, at: b[5] ?? c1[0] + 0.35, post: false }));
+    stage.add(signPost(stage, { ctx, text: OG.url, pos: [SET + 3.4, 0, 4.6], height: 0.72, at: b[7] ?? c1[0] + 1.06, font: "mono" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/iso-diorama/sample/scenes/gather.ts

@@ -0,0 +1,39 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { carFlow, isoStage, tileIsland, towers } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, crossRoads, cuts, SET } from "../lib/iso.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1] = cuts(ctx, 2);
+    const stage = isoStage(root, {
+      ctx,
+      shots: [
+        // 섬이 솟고 회사 집이 박마다 셋씩 선다 — 셋째 무리가 서는 박까지 다가가고, 다음 컷까지 천천히 더 다가간다(컷은 움직임 위에서)
+        { from: c0[0], to: c0[1], keys: [{ t: 0, look: [0, 0, 0], zoom: 14 }, { t: b[2] ?? 0.7, look: [0.4, 0.5, 0.2], zoom: 11.6, ease: "outCubic" }, { t: c0[1], look: [0.5, 0.6, 0.2], zoom: 10.2, ease: "linear" }] },
+        // 모델 수만큼 빌딩이 솟는다 — 가장 높은 탑 곁에서 물러나 도시 전체를 담고, 장면을 떠날 때까지 조금 더 물러난다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], look: [SET - 4, 3, -4], zoom: 9 }, { t: b[7] ?? c1[0] + 1.05, look: [SET, 2.9, 0], zoom: 16.5, ease: "outCubic" }, { t: ctx.dur, look: [SET, 2.9, 0], zoom: 17.6, ease: "linear" }] },
+      ],
+    });
+    // 첫 섬 — 땅이 물결로 솟고, 회사 아홉의 작은 집이 박마다 셋씩 간판을 달고 선다
+    stage.add(tileIsland(stage, { ctx, pos: [0, 0, 0], size: [11, 11], at: 0 }));
+    stage.add(
+      towers(stage, {
+        ctx,
+        items: OG.providers.map(([name], i) => ({ pos: [-3.5 + (i % 3) * 3.5, 0, -3.5 + Math.floor(i / 3) * 3.5] as [number, number, number], height: 0.9 + (i % 2) * 0.5, at: (b[i % 3] ?? (i % 3) * 0.35) + 0.04, label: name, width: 1.2 })),
+      }),
+    );
+    stage.add(carFlow(stage, { ctx, roads: crossRoads(0, 5), count: 10, at: b[2] ?? 0.7 }));
+    // 둘째 섬 — 회사별 모델 수만큼 빌딩이 솟는다(박마다 셋)
+    stage.add(tileIsland(stage, { ctx, pos: [SET, 0, 0], size: [13, 13], at: c1[0] - 0.3, seed: "city" }));
+    stage.add(
+      towers(stage, {
+        ctx,
+        items: OG.providers.map(([name, n], i) => ({ pos: [SET - 4 + (i % 3) * 4, 0, -4 + Math.floor(i / 3) * 4] as [number, number, number], height: 0.6 + (5.4 * n) / 41, at: b[4 + Math.floor(i / 3)] ?? c1[0] + Math.floor(i / 3) * 0.35, label: `${name} ${n}`, width: 1.7, roof: i === 0 ? "gate" : "roof" })),
+      }),
+    );
+    stage.add(carFlow(stage, { ctx, roads: crossRoads(SET, 6), count: 14, at: c1[0] }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/iso-diorama/sample/scenes/models.ts

@@ -0,0 +1,55 @@
+import { clamp, type SceneCtx } from "@kasaframe/core";
+import { carFlow, gatewayHall, isoStage, signPost, tileIsland, towers } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, crossRoads, cuts, SET } from "../lib/iso.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const drop = ctx.beats.drop(0);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const stage = isoStage(root, {
+      ctx,
+      shots: [
+        // 관문 회관으로 길이 모인다 — 엔드포인트 간판이 서는 박까지 다가간다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, look: [0, 1.4, 0], zoom: 14 }, { t: b[2] ?? 0.7, look: [0.4, 1.6, -0.2], zoom: 12, ease: "outCubic" }] },
+        // 회관 가까이 — 첫 박에 다가가 서고, 간판의 모델 ID 가 박마다 바뀐다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], look: [SET, 2.2, 0], zoom: 10.5 }, { t: b[5] ?? c1[0] + 0.35, look: [SET, 2.4, 0.2], zoom: 9, ease: "outCubic" }] },
+        // 도시가 자라고 모델 수가 차오른다 — 서서 받다가 드롭으로 회관에 빨려 든다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], look: [2 * SET, 1.5, 0], zoom: 18 }, { t: b[10] ?? c2[0] + 0.7, look: [2 * SET, 1.5, 0], zoom: 18 }, { t: drop, look: [2 * SET, 2.6, 0], zoom: 11, ease: "inCubic" }] },
+      ],
+    });
+    // 첫 섬 — 가운데 관문 회관, 네 갈래 길로 차가 모여든다. 위에 주소, 박마다 엔드포인트 간판
+    stage.add(tileIsland(stage, { ctx, pos: [0, 0, 0], size: [11, 11], at: -1 }));
+    stage.add(gatewayHall(stage, { ctx, pos: [0, 0, 0], at: 0.02, pulse: b.slice(0, 4) }));
+    stage.add(carFlow(stage, { ctx, roads: crossRoads(0, 5), count: 16, at: b[1] ?? 0.35, speed: 3 }));
+    stage.add(signPost(stage, { ctx, text: OG.host, pos: [0, 3.6, 0], height: 1.1, at: 0.05, post: false, font: "mono" }));
+    OG.endpoints.forEach((e, i) => {
+      const at = (b[Math.min(3, i + 1)] ?? 0.35 * (i + 1)) + (i === 3 ? 0.17 : 0);
+      const [x, z] = [[-3.6, 3.2], [3.4, 3.4], [-3.4, -3.2], [3.6, -3.4]][i];
+      stage.add(signPost(stage, { ctx, text: `/v1${e}`, pos: [x, 0, z], height: 0.55, at, font: "mono", until: c0[1] }));
+    });
+    // 둘째 섬 — 회관 가까이. 간판의 모델 ID 가 박마다 바뀌고 문이 빛난다
+    stage.add(tileIsland(stage, { ctx, pos: [SET, 0, 0], size: [9, 9], at: -1, seed: "hall" }));
+    stage.add(gatewayHall(stage, { ctx, pos: [SET, 0, 0], at: -1, pulse: b.slice(4, 8), scale: 1.25 }));
+    stage.add(carFlow(stage, { ctx, roads: crossRoads(SET, 4), count: 12, speed: 3.2 }));
+    const idAt = (t: number) => OG.ids[Math.max(0, Math.min(3, b.slice(4, 8).filter((x) => x <= t).length - 1))];
+    // 고정폭 간판 한 자 ≈ 높이의 0.43 — 가장 긴 ID 도 화면 폭 안에
+    const idH = Math.min(0.8, 9 / (0.43 * Math.max(...OG.ids.slice(0, 4).map((x) => x.length))));
+    stage.add(signPost(stage, { ctx, text: (t) => idAt(t), pos: [SET, 4.2, 0.6], height: idH, at: c1[0], post: false, font: "mono" }));
+    stage.add(signPost(stage, { ctx, text: "POST /v1/chat/completions", pos: [SET - 2.6, 0, 3], height: 0.45, at: c1[0], font: "mono", color: "dim" }));
+    // 셋째 섬 — 도시가 박 반마다 자라고, 모델 수가 102 로 차오른다
+    stage.add(tileIsland(stage, { ctx, pos: [2 * SET, 0, 0], size: [15, 15], at: c2[0] - 0.3, seed: "grow" }));
+    stage.add(gatewayHall(stage, { ctx, pos: [2 * SET, 0, 0], at: -1 }));
+    const ring = Array.from({ length: 16 }, (_, i) => {
+      const a = (i / 16) * Math.PI * 2;
+      const r = 5 + (i % 2) * 1.2;
+      return { pos: [2 * SET + Math.cos(a) * r, 0, Math.sin(a) * r] as [number, number, number], height: 1 + ((i * 7) % 5) * 0.7, at: c2[0] + (i / 16) * (drop - c2[0] - 0.2), width: 1.1, roof: i % 3 ? "roof" : "steel" };
+    });
+    stage.add(towers(stage, { ctx, items: ring }));
+    stage.add(carFlow(stage, { ctx, roads: crossRoads(2 * SET, 7), count: 24, speed: 4 }));
+    const steps = 8;
+    stage.add(signPost(stage, { ctx, text: (t) => `models ${String(Math.round((OG.models * Math.floor(clamp((t - c2[0]) / (drop - c2[0] - 0.05)) * steps)) / steps)).padStart(3, "0")}`, pos: [2 * SET, 4.6, 0], height: 1.5, at: c2[0], post: false, font: "mono" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/iso-diorama/sample/scenes/price.ts

@@ -0,0 +1,49 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { carFlow, confettiBurst, gatewayHall, isoStage, signPost, sunDial, tileIsland } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, crossRoads, cuts, SET } from "../lib/iso.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const fall = b[6] ?? c1[0] + 0.7;
+    const stage = isoStage(root, {
+      ctx,
+      shots: [
+        // 드롭 — 회관에서 블록이 터지며 등각이 한 번 돌아 서고 물러나 102 를 드러낸다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, look: [0, 3.2, 0], zoom: 9, turn: -0.55 }, { t: b[2] ?? 0.72, look: [0, 2.8, 0], zoom: 13, turn: 0, ease: "outExpo" }] },
+        // 해시계 광장 — 밤 창이 꺼지는 박에 다가간다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], look: [SET, 0.8, 0], zoom: 13 }, { t: fall, look: [SET + 0.4, 1, 0.3], zoom: 10.8 }] },
+        // 가게 거리 — 밤값 간판이 서는 박에 다가간다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], look: [2 * SET, 1.6, 0], zoom: 12.5 }, { t: b[9] ?? c2[0] + 0.35, look: [2 * SET, 1.6, 0], zoom: 12.5 }, { t: (b[9] ?? c2[0] + 0.35) + 0.45, look: [2 * SET + 0.6, 1.4, 0.8], zoom: 10.6, ease: "outCubic" }] },
+      ],
+    });
+    // 드롭 — 회관에서 블록이 터져 오르고, 그 위에 102 · 한 주소
+    stage.add(tileIsland(stage, { ctx, pos: [0, 0, 0], size: [11, 11], at: -1 }));
+    stage.add(gatewayHall(stage, { ctx, pos: [0, 0, 0], at: -1, pulse: b.slice(0, 4) }));
+    stage.add(carFlow(stage, { ctx, roads: crossRoads(0, 5), count: 20, speed: 4.2 }));
+    stage.add(confettiBurst(stage, { ctx, pos: [0, 2, 0], drop: 0 }));
+    stage.add(signPost(stage, { ctx, text: String(OG.models), pos: [0, 5.6, 0], height: 2.7, at: 0.02, post: false }));
+    stage.add(signPost(stage, { ctx, text: "한 주소", pos: [-3.4, 0, 3.6], height: 0.8, at: b[1] ?? 0.35 }));
+    stage.add(signPost(stage, { ctx, text: OG.host, pos: [3.2, 0, 3.4], height: 0.55, at: b[2] ?? 0.7, font: "mono" }));
+    // 둘째 섬 — 해시계 광장. 박에 밤 창 칸이 쑥 꺼진다(-90%)
+    stage.add(tileIsland(stage, { ctx, pos: [SET, 0, 0], size: [11, 11], at: -1, seed: "dial" }));
+    stage.add(sunDial(stage, { ctx, pos: [SET, 0, 0], radius: 4.4, at: c1[0], drop: fall, window: [OG.night.from, OG.night.to] }));
+    stage.add(signPost(stage, { ctx, text: `00:00-10:00 ${OG.night.tz}`, pos: [SET - 3.8, 0, 4], height: 0.6, at: b[5] ?? c1[0] + 0.35, font: "mono" }));
+    stage.add(signPost(stage, { ctx, text: OG.deepseek.off, pos: [SET + 1.6, 3.2, -1.6], height: 1.4, at: fall, post: false, color: "accentText" }));
+    // 셋째 섬 — 가게 거리. 정가 간판이 내려가고 밤값 간판이 솟는다
+    const ds = OG.deepseek;
+    stage.add(tileIsland(stage, { ctx, pos: [2 * SET, 0, 0], size: [11, 11], at: -1, seed: "market" }));
+    stage.add(carFlow(stage, { ctx, roads: crossRoads(2 * SET, 5), count: 12, speed: 3 }));
+    stage.add(signPost(stage, { ctx, text: ds.id, pos: [2 * SET, 3.6, 0], height: 0.7, at: b[8] ?? c2[0], post: false, font: "mono" }));
+    [ds.input, ds.output].forEach(([was, now], i) => {
+      const at = b[9 + i] ?? c2[0] + (i + 1) * 0.35;
+      const [x, z] = i ? [2 * SET + 2.6, 2.4] : [2 * SET - 2.6, 2.4];
+      stage.add(signPost(stage, { ctx, text: `${i ? "출력" : "입력"} ${was}`, pos: [x, 0, z], height: 0.8, at: c2[0], until: at, color: "dim" }));
+      stage.add(signPost(stage, { ctx, text: `${i ? "출력" : "입력"} ${now}`, pos: [x, 0, z], height: 1.15, at, color: "accentText" }));
+    });
+    stage.add(signPost(stage, { ctx, text: `${OG.glm.id} ${OG.glm.off}`, pos: [2 * SET, 0, -3.6], height: 0.5, at: b[11] ?? c2[0] + 1.06, font: "mono" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/iso-diorama/sample/style.json

@@ -0,0 +1,98 @@
+{
+  "name": "iso-diorama",
+  "label": "아이소메트릭 미니어처 — 정보가 작은 도시로 지어진다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#EFE6D6",
+    "surface": "#F7F1E6",
+    "raised": "#E4D8C4",
+    "line": "#C9B9A0",
+    "ink": "#2C2622",
+    "inkSoft": "#4A4038",
+    "dim": "#6E6256",
+    "accent": "#C8643C",
+    "accentSoft": "#E8A786",
+    "accentText": "#A9481F",
+    "onAccent": "#FFF8EE",
+    "success": "#4E8A3E",
+    "danger": "#B23A2E",
+    "warning": "#D98A1E",
+    "grass": "#86AD5E",
+    "path": "#DCCDB4",
+    "water": "#4A8797",
+    "roof": "#C8643C",
+    "wall": "#F1E6D2",
+    "steel": "#8E9497",
+    "gate": "#3D7BEA"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      },
+      {
+        "family": "JetBrains Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+        "weight": "100 800"
+      }
+    ]
+  },
+  "type": {
+    "hero": 160,
+    "title": 84,
+    "body": 40,
+    "caption": 30,
+    "weightDisplay": 800,
+    "weightBody": 600,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 8,
+    "md": 14,
+    "lg": 22,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 8
+    },
+    "cameraMove": "free",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "pop",
+    "ease": "outBack",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.3,
+      "slow": 0.7
+    }
+  },
+  "theme": {
+    "inks": [
+      "#EFE6D6 모형 받침 크림",
+      "#C8643C 테라코타 지붕(강조)",
+      "#4A8797 청록 물",
+      "#2C2622 간판 글"
+    ],
+    "texture": "매트한 점토 모형 — 둥근 모서리 상자, 금빛 햇살의 긴 그림자, 위·아래가 흐린 틸트시프트",
+    "movement": "카메라는 박에 맞춘 키로만 — 드러낼 것에 다가가고(확대), 비교를 담게 물러나고, 드롭에 등각이 한 번 돌아 선다. 그 사이엔 서고 길 위 작은 차가 쉬지 않고 오간다. 마디마다 다른 섬으로 컷, 박마다 건물·간판이 톡 솟는다(outBack)"
+  },
+  "notes": [
+    "출처: 아이소메트릭 미니어처 도시(StockCake·Tripo 시안). 정보는 건물 높이와 간판 글로.",
+    "간판은 크림 판에 짙은 글 — 대비를 지킨다."
+  ]
+}

package/themes/iso-diorama/slots.ts

@@ -0,0 +1,222 @@
+import { clamp, ease, rand, type SceneCtx, 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 { isoStage } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 미니어처 도시의 결로 채운다. 3D 는 surface 하나, 나머지는 DOM·캔버스 2D
+const col = (ctx: SceneCtx, k: string, fb: string) => ctx.style.colors[k] ?? fb;
+
+// 글자마다 span — inline span 이라 글꼴 크기·줄 나눔은 그대로, 색·그림자만 만진다
+function letters(el: HTMLElement, text: string): HTMLSpanElement[] {
+  el.textContent = "";
+  return Array.from(text).map((ch) => {
+    const s = document.createElement("span");
+    s.textContent = ch;
+    el.append(s);
+    return s;
+  });
+}
+
+function beside(el: HTMLElement, css: string): (fn: (d: HTMLDivElement, r: { x: number; y: number; w: number; h: number }) => void) => void {
+  let d: HTMLDivElement | null = null;
+  return (fn) => {
+    const host = (el.offsetParent as HTMLElement | null) ?? el.parentElement;
+    if (!host) return;
+    if (!d) {
+      d = document.createElement("div");
+      d.style.cssText = `position:absolute;pointer-events:none;${css}`;
+      host.prepend(d);
+    }
+    const a = el.getBoundingClientRect();
+    const b = host.getBoundingClientRect();
+    fn(d, { x: a.left - b.left, y: a.top - b.top, w: a.width, h: a.height });
+  };
+}
+
+// 꺾은선 위 거리 d 의 자리
+function along(points: readonly (readonly [number, number])[], d: number): [number, number] {
+  for (let i = 1; i < points.length; i++) {
+    const [a, b] = [points[i - 1], points[i]];
+    const seg = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    if (d <= seg) return [a[0] + ((b[0] - a[0]) * d) / (seg || 1), a[1] + ((b[1] - a[1]) * d) / (seg || 1)];
+    d -= seg;
+  }
+  const last = points[points.length - 1];
+  return [last[0], last[1]];
+}
+
+export const slots: ThemeSlots = {
+  // 모형 받침 한 장 — 등각으로 내려다본 크림 타일 마당, 칸마다 높이가 조금씩 달라 긴 그림자가 결을 낸다(틸트시프트). 서 있다
+  surface(el, { ctx, seed }) {
+    const stage = isoStage(el, { ctx, shots: [{ from: -1, to: 1e9, keys: [{ t: 0, look: [0, 0, 0], zoom: 15 }] }] });
+    const N = 26;
+    const geo = new THREE.BoxGeometry(0.94, 1, 0.94);
+    geo.translate(0, 0.5, 0);
+    const mat = new THREE.MeshStandardMaterial({ roughness: 0.85, metalness: 0 });
+    const tiles = new THREE.InstancedMesh(geo, mat, N * N);
+    tiles.castShadow = true;
+    tiles.receiveShadow = true;
+    const keys = ["surface", "raised", "surface", "path", "surface", "raised", "grass"];
+    const m = new THREE.Matrix4();
+    const c = new THREE.Color();
+    let n = 0;
+    for (let i = 0; i < N; i++)
+      for (let k = 0; k < N; k++, n++) {
+        m.makeScale(1, 0.22 + 0.3 * rand(seed, n) ** 3, 1).setPosition(i - N / 2 + 0.5, -0.5, k - N / 2 + 0.5);
+        tiles.setMatrixAt(n, m);
+        tiles.setColorAt(n, c.set(col(ctx, keys[Math.floor(rand(seed, n + 9999) * keys.length)], "#EFE6D6")));
+      }
+    stage.scene.add(tiles);
+    return stillStage(stage, stage);
+  },
+
+  // 간판 판 — 크림 판에 테라코타 테, 해 질 녘의 긴 그림자. at 에 밑에서 톡 선다
+  panel(el, { ctx, at, tone }) {
+    const r = ctx.style.radius?.md ?? 14;
+    const accent = tone === "accent";
+    const p = document.createElement("div");
+    p.style.cssText = `position:absolute;inset:0;border-radius:${r}px;background:${col(ctx, accent ? "accentSoft" : "surface", "#F7F1E6")};border:3px solid ${col(ctx, "accent", "#C8643C")};box-shadow:12px 16px 0 #2C262222;transform-origin:50% 100%;pointer-events:none;`;
+    el.prepend(p);
+    return (t) => {
+      const on = t >= at;
+      p.style.display = on ? "" : "none";
+      if (!on) return;
+      const u = ease.outBack(clamp((t - at) / 0.32));
+      p.style.transform = `scaleY(${Math.max(0.001, u)})`;
+      p.style.boxShadow = `${12 * clamp(u)}px ${16 * clamp(u)}px 0 #2C262222`;
+    };
+  },
+
+  // 톡 솟아 앉는다 — 밑에서 넘쳐 올라와 서고, 발밑에 그림자가 고인다
+  land(el, { ctx, at }) {
+    const shadow = beside(el, `border-radius:50%;background:radial-gradient(closest-side,${col(ctx, "ink", "#2C2622")}55,${col(ctx, "ink", "#2C2622")}00);`);
+    return (t): Style => {
+      const k = t - at;
+      if (k < 0 || k > 0.6) return {};
+      const u = ease.outBack(clamp(k / 0.32));
+      shadow((d, r) => {
+        const w = r.w * (0.6 + 0.5 * clamp(u));
+        d.style.left = `${r.x + r.w / 2 - w / 2 + 10}px`;
+        d.style.top = `${r.y + r.h - r.h * 0.12}px`;
+        d.style.width = `${w}px`;
+        d.style.height = `${r.h * 0.3}px`;
+        d.style.opacity = String(clamp(u) * (1 - clamp((k - 0.4) / 0.2)));
+      });
+      return { y: 22 * (1 - u), scaleY: 0.72 + 0.28 * u, scaleX: 1.08 - 0.08 * u };
+    };
+  },
+
+  // 간판에 글을 박는다 — 글자마다 테라코타로 찍혔다가 짙은 글로 앉는다
+  write(el, { ctx, text, at, dur }) {
+    const ink = col(ctx, "ink", "#2C2622");
+    const hot = col(ctx, "accentText", "#A9481F");
+    const spans = letters(el, text);
+    const n = Math.max(1, spans.length);
+    return (t) => {
+      spans.forEach((s, i) => {
+        const k = t - (at + (dur * i) / n);
+        const done = t >= at + dur;
+        s.style.opacity = done || k >= 0 ? "1" : "0";
+        const stamp = done ? 0 : k < 0 ? 0 : Math.exp(-k / 0.12);
+        s.style.color = stamp > 0.3 ? hot : ink;
+        s.style.textShadow = stamp > 0 ? `0 ${0.08 * stamp}em 0 ${hot}55` : "";
+      });
+    };
+  },
+
+  // 길 — 베이지 길이 깔리고 가운데 흰 점선, 다 깔린 뒤엔 작은 차가 쉬지 않고 오간다
+  trace(el, { ctx, points, at, dur, seed, tone }) {
+    const ns = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(ns, "svg");
+    svg.setAttribute("style", "position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;");
+    const d = points.map(([x, y], i) => `${i ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)}`).join(" ");
+    const path = (w: number, color: string, dash?: string) => {
+      const p = document.createElementNS(ns, "path");
+      p.setAttribute("d", d);
+      p.setAttribute("fill", "none");
+      p.setAttribute("stroke", color);
+      p.setAttribute("stroke-width", String(w));
+      p.setAttribute("stroke-linecap", "round");
+      p.setAttribute("stroke-linejoin", "round");
+      if (dash) p.setAttribute("stroke-dasharray", dash);
+      svg.append(p);
+      return p;
+    };
+    const len = points.slice(1).reduce((s, [x, y], i) => s + Math.hypot(x - points[i][0], y - points[i][1]), 0) || 1;
+    // 크림 타일 위에서 읽히게 짙은 아스팔트 길 — 해 질 녘 긴 그림자를 오른쪽 아래로 깐다
+    const road = path(18, col(ctx, tone === "accent" ? "accent" : "inkSoft", "#4A4038"), `${len} ${len}`);
+    const edge = path(20, `${col(ctx, "ink", "#2C2622")}38`, `${len} ${len}`);
+    edge.setAttribute("transform", "translate(5 7)");
+    svg.insertBefore(edge, road);
+    const lane = path(2.5, col(ctx, "onAccent", "#FFF8EE"), "10 12");
+    const colors = ["wall", "gate", "grass", "warning"].map((k) => col(ctx, k, "#C8643C"));
+    const cars = colors.map((c) => {
+      const r = document.createElementNS(ns, "rect");
+      r.setAttribute("width", "14");
+      r.setAttribute("height", "9");
+      r.setAttribute("rx", "2");
+      r.setAttribute("fill", c);
+      svg.append(r);
+      return r;
+    });
+    const phase = cars.map((_, i) => rand(seed, i));
+    el.append(svg);
+    return (t) => {
+      svg.style.display = t >= at ? "" : "none";
+      const u = ease.inOutCubic(clamp((t - at) / Math.max(0.01, dur)));
+      for (const p of [road, edge]) p.setAttribute("stroke-dashoffset", String(len * (1 - u)));
+      lane.setAttribute("opacity", String(clamp((u - 0.6) / 0.4)));
+      lane.setAttribute("stroke-dashoffset", String(-t * 30));
+      cars.forEach((r, i) => {
+        const on = u >= 1;
+        r.setAttribute("opacity", on ? "1" : "0");
+        if (!on) return;
+        const dd = (((phase[i] + (t - at - dur) * 0.22 * (i % 2 ? -1 : 1)) % 1) + 1) % 1;
+        const [x, y] = along(points, dd * len);
+        const [x2, y2] = along(points, Math.min(len, dd * len + 2));
+        const ang = (Math.atan2(y2 - y, x2 - x) * 180) / Math.PI;
+        r.setAttribute("transform", `translate(${x.toFixed(1)} ${y.toFixed(1)}) rotate(${ang.toFixed(1)}) translate(-7 -4.5)`);
+      });
+    };
+  },
+
+  // 드롭 — 크림 섬광과 함께 작은 블록이 터져 오르고 떨어진다
+  drop(el, { ctx, drop }) {
+    const flash = document.createElement("div");
+    flash.style.cssText = `position:absolute;inset:0;background:${col(ctx, "onAccent", "#FFF8EE")};opacity:0;pointer-events:none;`;
+    const cv = document.createElement("canvas");
+    cv.width = ctx.meta.width / 2;
+    cv.height = ctx.meta.height / 2;
+    cv.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;";
+    el.append(cv, flash);
+    const g = cv.getContext("2d")!;
+    const keys = ["roof", "gate", "grass", "warning", "water"].map((k) => col(ctx, k, "#C8643C"));
+    const seed = `confetti:${ctx.id}`;
+    const bits = Array.from({ length: 80 }, (_, i) => {
+      const a = rand(seed, i) * Math.PI * 2;
+      const sp = 0.25 + rand(seed, i + 99) * 0.55;
+      return { vx: Math.cos(a) * sp, vy: -(0.7 + rand(seed, i + 199) * 0.6), spin: (rand(seed, i + 299) - 0.5) * 14, c: keys[i % keys.length], s: 6 + rand(seed, i + 399) * 8 };
+    });
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "iso-diorama:drop" });
+      flash.style.opacity = String(Math.round(s.flash * 70) / 100);
+      const k = t - ctx.beats.drop(drop);
+      g.clearRect(0, 0, cv.width, cv.height);
+      if (k >= 0 && k < 1.6) {
+        const [cx, cy] = [cv.width / 2, cv.height * 0.55];
+        for (const b of bits) {
+          const x = cx + b.vx * k * cv.height;
+          const y = cy + (b.vy * k + 0.9 * k * k) * cv.height;
+          g.save();
+          g.translate(x, y);
+          g.rotate(b.spin * k);
+          g.fillStyle = b.c;
+          g.fillRect(-b.s / 2, -b.s / 2, b.s, b.s);
+          g.restore();
+        }
+      }
+      return s;
+    };
+  },
+};