kasaframe 0.1.1 → 0.1.4

package/themes/isotype/sample/index.html

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

package/themes/isotype/sample/kf.json

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

@@ -0,0 +1,47 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { pressIn } from "../../effects.ts";
+import { color } from "../../kit.ts";
+
+/** 장면 안 박 — 장면 시작 0 부터 끝 전까지 */
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+/** 컷 경계 — 첫 컷은 0 부터(장면 머리의 못갖춘마디는 첫 컷에 넣는다), 나머지는 마디 첫 박 */
+export function cutsAt(ctx: SceneCtx): number[] {
+  return [0, ...ctx.beats.bars.filter((b) => b > 0.6 && b < ctx.dur - 1e-6)];
+}
+
+export function layer(parent: HTMLElement, css = ""): HTMLElement {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;inset:0;${css}`;
+  parent.append(el);
+  return el;
+}
+
+/** 컷 하나 — 그 구간에서만 보인다(display 로 통째로 뺀다). 안의 그리기는 장면 시각을 받는다 */
+export function cut(parent: HTMLElement, from: number, to: number, build: (el: HTMLElement) => ((t: number) => void)[]): (t: number) => void {
+  const el = layer(parent);
+  const paints = build(el);
+  return (t) => {
+    const on = t >= from && t < to;
+    el.style.display = on ? "" : "none";
+    if (on) for (const p of paints) p(t);
+  };
+}
+
+/** 찍히는 글 — at 에 도장처럼 눌려 선다 */
+export function label(parent: HTMLElement, ctx: SceneCtx, s: string, at: number, css: string, tone = "ink", font: "sans" | "display" | "mono" = "sans"): (t: number) => void {
+  const el = document.createElement("div");
+  el.textContent = s;
+  el.style.cssText = `position:absolute;white-space:pre;line-height:1.15;font-family:${ctx.style.fonts[font]};font-weight:500;color:${color(ctx, tone)};${css}`;
+  parent.append(el);
+  return (t) => {
+    el.style.display = t >= at ? "" : "none";
+    applyStyle(el, pressIn(t, { at }));
+  };
+}
+
+/** 차트 제목 — 왼쪽 위, 아이소타입 판처럼 한 줄 */
+export const title = (parent: HTMLElement, ctx: SceneCtx, s: string, at: number) => label(parent, ctx, s, at, "left:120px;top:72px;font-size:64px;", "ink", "display");
+
+/** 회사 이름 → 모델 ID 머리 */
+export const VENDOR = (id: string): string => id.split("/")[0];

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

@@ -0,0 +1,80 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { chartFrame, countRow, pageSlide, symbolKey } from "../../effects.ts";
+import { color } from "../../kit.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cut, cutsAt, label, layer, title } from "../lib/chart.ts";
+import svg from "../assets/og/logo.svg?raw";
+
+// 지연 = 시계 기호. 시계 하나 = 50ms, 초당 스무 개씩 찍으니 줄이 다 서는 시각이 그 모델의 첫 토큰 실측 그대로다(끝 시계는 잘라 소수).
+// 그다음 18번 호출 = 사람 열여덟. 둘째 마디: 끝 카드 — OG 로고와 주소, 아래로 칩 102 개 판(모델 하나 = 칩 하나)이 끝 프레임까지 찍힌다
+const MS = 50;
+const ROWS = 6;
+const PER = OG.models / ROWS;
+const RATE = 1000 / MS;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = chartFrame(layer(root), { ctx });
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, bar2] = cutsAt(ctx);
+
+    const race = cut(root, 0, bar2, (el) => {
+      const rows = OG.ttft.flatMap(([id, ms, v], i) => {
+        const y = 230 + i * 190;
+        return [
+          label(el, ctx, id, 0, `left:520px;top:${y - 52}px;font-size:34px;`, "dim", "mono"),
+          countRow(el, { ctx, name: "clock", x: 520, y, size: 64, gap: 9, value: v, unit: MS, at: 0, rate: RATE, group: 5, tone: i === 0 ? "accent" : "ink" }),
+          label(el, ctx, ms, v / 1000, `left:120px;top:${y + 2}px;font-size:56px;`, i === 0 ? "accentText" : "ink", "display"),
+        ];
+      });
+      const calls = countRow(el, { ctx, name: "person", x: 520, y: 790, size: 80, gap: 6, value: 18, at: 0.77, rate: 50, group: 5, tone: "ink" });
+      // 호출 수를 사람 기호와 같이 센다 — 한 사람이 찍힐 때마다 한 번
+      const callEl = document.createElement("div");
+      callEl.style.cssText = `position:absolute;left:120px;top:808px;font:500 48px ${ctx.style.fonts.display};color:${color(ctx, "ink")};white-space:pre;`;
+      el.append(callEl);
+      const callCount = (t: number) => {
+        callEl.style.display = t >= 0.77 ? "" : "none";
+        callEl.textContent = `OG ${Math.min(18, Math.floor(Math.max(0, t - 0.77) * 50 + 1e-6) + 1)}번`;
+      };
+      return [
+        title(el, ctx, "첫 토큰", 0),
+        ...rows,
+        symbolKey(el, { ctx, name: "clock", text: `${MS}ms`, x: 1500, y: 72, size: 52, at: 0 }),
+        callCount,
+        calls,
+        label(el, ctx, "$0.0004", b(3), "left:1460px;width:340px;text-align:right;top:808px;font-size:48px;", "accentText", "mono"),
+        // 끝 카드 앞 — 새 장이 들어와 차트를 덮는다
+        pageSlide(el, { ctx, at: 1.1, dur: bar2 - 1.1 - 0.01 }),
+      ];
+    });
+
+    const card = cut(root, bar2, ctx.dur, (el) => {
+      const logo = document.createElement("div");
+      logo.style.cssText = `position:absolute;left:${(1920 - 600) / 2}px;top:80px;width:600px;color:${color(ctx, "ink")};`;
+      logo.innerHTML = svg.replace(/ width="\d+" height="\d+"/, ' width="100%" style="display:block"');
+      el.append(logo);
+      const end = ctx.dur - 1 / 60 - 0.02;
+      const start = b(5) + 0.02;
+      const rate = OG.models / (end - start);
+      return [
+        (t: number) => {
+          logo.style.display = t >= bar2 ? "" : "none";
+          logo.style.clipPath = `inset(0 ${(100 - Math.min(1, (t - bar2) / 0.36) * 100).toFixed(2)}% 0 0)`;
+        },
+        label(el, ctx, OG.site, b(5), "left:0;width:1920px;text-align:center;top:448px;font-size:88px;", "ink", "display"),
+        // 칩 102 개 판 — 여섯 줄 열일곱씩, 줄마다 이어서 끝 프레임까지 찍힌다
+        ...Array.from({ length: ROWS }, (_, r) =>
+          countRow(el, { ctx, name: "chip", x: (1920 - (PER * 66 - 14)) / 2, y: 596 + r * 62, size: 52, gap: 14, value: PER, at: start + (r * PER) / rate, rate, group: 0, toneAt: (i) => (r * PER + i < 41 ? "accentText" : "ink") }),
+        ),
+        symbolKey(el, { ctx, name: "chip", text: `모델 1 · ${OG.models}`, x: 120, y: 980, size: 36, at: start }),
+      ];
+    });
+
+    return (t: number) => {
+      paper(t);
+      race(t);
+      card(t);
+    };
+  },
+};

package/themes/isotype/sample/scenes/gather.ts

@@ -0,0 +1,65 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { chartFrame, countRow, pageSlide, regroup, symbolKey } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cut, cutsAt, label, layer, title } from "../lib/chart.ts";
+
+// 회사 = 공장 기호. 첫 마디: 공장 아홉이 하나씩 판 아래에서 들어와 한 줄로 놓이고, 큰 수가 하나씩 센다.
+// 둘째 마디: 회사별 모델 수 — 칩 하나 = 모델 둘, 줄마다 이어서 칩이 하나씩 찍혀 세고, 끝 칩은 잘라 반 개를 보인다
+const SIZE = 150;
+const GAP = 40;
+const X0 = (1920 - (9 * SIZE + 8 * GAP)) / 2;
+const ROW_Y = 330;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = chartFrame(layer(root), { ctx });
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, bar2] = cutsAt(ctx);
+
+    const one = cut(root, 0, bar2, (el) => {
+      const head = title(el, ctx, "공급자", 0);
+      // 공장은 하나씩 0.15초 간격으로 판 아래에서 들어와 놓인다 — 늘 하나는 옮겨지는 중이고, 놓일 때마다 큰 수가 하나 오른다
+      const step = (b(3) - 0.32) / 8;
+      const land = (i: number) => 0.3 + i * step;
+      const to = OG.providers.map((_, i): [number, number] => [X0 + i * (SIZE + GAP), ROW_Y]);
+      const moves = to.map((p, i) => regroup(el, { ctx, name: "factory", from: [[p[0] + 60, 1120]], to: [p], size: SIZE, at: land(i) - 0.3, dur: 0.3 }));
+      const names = OG.providers.map(([name], i) => label(el, ctx, name, land(i), `left:${to[i][0] - 20}px;width:${SIZE + 40}px;text-align:center;top:${ROW_Y + SIZE + 24}px;font-size:34px;`));
+      const counts = OG.providers.map((_, i) => label(el, ctx, String(i + 1), land(i), `left:120px;top:${ROW_Y + SIZE + 120}px;font-size:160px;line-height:1;`, "accentText", "display"));
+      const tally = (t: number) => {
+        // 지금 놓인 수 하나만 보인다
+        const n = OG.providers.filter((_, i) => t >= land(i)).length;
+        counts.forEach((c, i) => (i === n - 1 ? c(t) : c(-1)));
+      };
+      const slide = pageSlide(el, { ctx, at: b(3), dur: bar2 - b(3) - 0.02 });
+      return [head, ...moves, ...names, tally, slide];
+    });
+
+    const two = cut(root, bar2, ctx.dur, (el) => {
+      const head = title(el, ctx, "회사별 모델", bar2);
+      // 줄은 차례로 — 앞 줄이 다 세어지면 다음 줄이 이어서 센다(칩 하나 = 모델 둘)
+      const rate = 52;
+      let at = bar2 + 0.05;
+      const rows = OG.providers.flatMap(([name, n], i) => {
+        const y = 176 + i * 84;
+        const start = at;
+        const chips = n / 2;
+        at += chips / rate + 0.02;
+        return [
+          label(el, ctx, name, start, `left:120px;top:${y + 4}px;font-size:36px;`),
+          countRow(el, { ctx, name: "chip", x: 420, y, size: 52, gap: 7, value: n, unit: 2, at: start, rate, group: 10, toneAt: () => (i === 0 ? "accent" : "ink") }),
+          label(el, ctx, String(n), start + chips / rate, `left:${420 + Math.ceil(chips) * 59 + Math.floor(Math.ceil(chips) / 10) * 14 + 24}px;top:${y + 2}px;font-size:40px;`, "dim", "display"),
+        ];
+      });
+      const key = symbolKey(el, { ctx, name: "chip", text: "모델 2", x: 120, y: 960, size: 48, at: bar2 });
+      const slide = pageSlide(el, { ctx, at: Math.max(at, b(7)), dur: ctx.dur - Math.max(at, b(7)) - 1 / 60 });
+      return [head, ...rows, key, slide];
+    });
+
+    return (t: number) => {
+      paper(t);
+      one(t);
+      two(t);
+    };
+  },
+};

package/themes/isotype/sample/scenes/models.ts

@@ -0,0 +1,75 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { chartFrame, pictogram, regroup, splitAxis, symbolKey } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cut, cutsAt, label, layer, title, VENDOR } from "../lib/chart.ts";
+
+// 한 주소 = 문 하나, 요청 = 사람 하나. 첫 마디: 문이 찍히고 사람이 끊이지 않고 줄지어 문으로 들어간다.
+// 둘째 마디: 모델 ID 줄마다 「사람 → 같은 문 → 그 회사 칩」, 고른 줄로는 요청이 이어서 흐른다 — 문 기둥 위 주소 하나.
+// 셋째 마디: OpenAI·Anthropic 두 형식 문서에서 사람이 같은 문으로 — 박마다 더 많이(드롭 앞 모아 올리기)
+const P = 84;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = chartFrame(layer(root), { ctx });
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, barB, barC] = cutsAt(ctx);
+
+    const a = cut(root, 0, barB, (el) => {
+      const head = title(el, ctx, "요청 → 주소 1", 0);
+      const door = pictogram(el, { ctx, name: "door", places: [[1260, 300]], size: 420, at: 0 });
+      const url = label(el, ctx, OG.host, b(1), "left:1000px;width:940px;text-align:center;top:760px;font-size:44px;", "ink", "mono");
+      // 요청은 끊이지 않고 줄지어 와서 문 안으로 들어간다 — 사람 하나가 0.07초마다 왼쪽에서 출발
+      const n = Math.ceil((barB - 0.45) / 0.07);
+      const flow = regroup(el, { ctx, name: "person", from: Array.from({ length: n }, () => [80, 560]), to: Array.from({ length: n }, () => [1428, 560]), size: 96, at: 0, dur: 0.5, stagger: 0.07, stay: false });
+      const key = symbolKey(el, { ctx, name: "person", text: "요청 1", x: 120, y: 960, size: 48, at: b(2) });
+      return [head, door, url, flow, key];
+    });
+
+    const ids = OG.ids;
+    const rowAt = [b(4), b(5), b(6), b(7), (b(7) + b(8)) / 2];
+    const bb = cut(root, barB, barC, (el) => {
+      const head = title(el, ctx, "모델 ID", barB);
+      const doorX = 1180;
+      const rows = ids.flatMap((id, i) => {
+        const y = 200 + i * 150;
+        const at = rowAt[i];
+        return [
+          label(el, ctx, id, at, `left:120px;top:${y + 26}px;font-size:34px;`, "ink", "mono"),
+          regroup(el, { ctx, name: "person", from: [[860, y + 160]], to: [[900, y]], size: 96, at: at - 0.12, dur: 0.12 }),
+          regroup(el, { ctx, name: "person", from: Array.from({ length: 16 }, () => [900, y + 16]), to: Array.from({ length: 16 }, () => [doorX + 16, y + 16]), size: 64, at: at + 0.1, dur: 0.24, stagger: 0.09, stay: false, tone: "ink" }),
+          pictogram(el, { ctx, name: "arrow", places: [[1018, y + 24]], size: 48, at, tone: "guide" }),
+          pictogram(el, { ctx, name: "door", places: [[doorX, y]], size: 96, at: barB + i * 0.03 }),
+          pictogram(el, { ctx, name: "arrow", places: [[1300, y + 24]], size: 48, at: at + 0.06, tone: "guide" }),
+          pictogram(el, { ctx, name: "chip", places: [[1380, y]], size: 96, at: at + 0.1, tone: VENDOR(id) === "openai" ? "accent" : "ink" }),
+        ];
+      });
+      const axis = splitAxis(el, { ctx, x: doorX + 48, y0: 196, y1: 196 + 4 * 150 + 100, at: barB, dur: 0.2, right: OG.host, size: 36 });
+      return [head, ...rows, axis];
+    });
+
+    const c = cut(root, barC, ctx.dur, (el) => {
+      const head = title(el, ctx, "형식 2 · 주소 1", barC);
+      const docs = pictogram(el, { ctx, name: "doc", places: [[160, 300], [1560, 300]], size: 200, at: barC, stagger: 0.05, tones: ["ink", "ink"] });
+      const left = [label(el, ctx, "OpenAI", barC, "left:120px;top:540px;font-size:44px;", "accentText", "display"), ...["/chat/completions", "/responses", "/images/generations"].map((s, i) => label(el, ctx, s, barC + 0.06 * (i + 1), `left:120px;top:${610 + i * 56}px;font-size:34px;`, "ink", "mono"))];
+      const right = [label(el, ctx, "Anthropic", b(9), "left:1360px;width:440px;text-align:right;top:540px;font-size:44px;", "accentText", "display"), label(el, ctx, "/messages", b(9) + 0.06, "left:1360px;width:440px;text-align:right;top:610px;font-size:34px;", "ink", "mono")];
+      const door = pictogram(el, { ctx, name: "door", places: [[790, 300]], size: 340, at: barC });
+      const url = label(el, ctx, OG.host, barC + 0.1, "left:560px;width:800px;text-align:center;top:680px;font-size:36px;", "ink", "mono");
+      // 박마다 양쪽 문서에서 사람이 문으로 — 둘, 넷, 여섯, 여덟(드롭 앞 모아 올리기)
+      const waves = [barC, b(9), b(10), b(11)].map((at, k) => {
+        const n = (k + 1) * 2;
+        const from = Array.from({ length: n }, (_, i): [number, number] => (i % 2 ? [1600, 420 + (i % 3) * 20] : [200, 420 + (i % 3) * 20]));
+        const to = from.map((): [number, number] => [918, 470]);
+        return regroup(el, { ctx, name: "person", from, to, size: P, at, dur: 0.3, stagger: 0.025, stay: false, toneAt: (i) => (i % 2 ? "ink" : "accent") });
+      });
+      return [head, docs, ...left, ...right, door, url, ...waves];
+    });
+
+    return (t: number) => {
+      paper(t);
+      a(t);
+      bb(t);
+      c(t);
+    };
+  },
+};

package/themes/isotype/sample/scenes/price.ts

@@ -0,0 +1,90 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { chartFrame, countBurst, countRow, pageSlide, pictogram, splitAxis, stackColumn, symbolKey } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cut, cutsAt, label, layer, title } from "../lib/chart.ts";
+
+// 드롭: 칩 102 개가 드롭 지점부터 판을 채운다(칩 하나 = 모델 하나, OpenAI 41 은 주홍) — 주소 하나.
+// 둘째 마디: 하루 24시간 기둥 — 한 시간씩 차례로 동전 기둥이 서고, 낮은 열 개·밤(00–10) 은 하나. 축선이 밤을 가르고 -90%.
+// 셋째 마디: deepseek 값 — 동전 하나 = $0.03 /M. 입력 열 개 중 아홉, 출력 마흔 개 중 서른여섯이 회색으로 덜어진다
+const HOURS = 24;
+const COL = 66;
+const CX0 = (1920 - HOURS * COL) / 2;
+const BASE = 860;
+const COIN = 38;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = chartFrame(layer(root), { ctx });
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, bar2, bar3] = cutsAt(ctx);
+    const content = layer(root);
+    // 칩 판은 첫 마디에만 — 다음 컷에선 통째로 뺀다
+    const grid = layer(content);
+    const burst = countBurst(grid, { ctx, drop: 0, name: "chip", mode: "grid", box: [120, 200, 1680, 640], count: OG.models, size: 64, origin: [960, 520], dur: 1.38, toneAt: (i) => (i < 41 ? "accent" : "ink") });
+
+    const one = cut(content, 0, bar2, (el) => {
+      return [
+        label(el, ctx, `모델 ${OG.models}`, 0, "left:120px;top:92px;font-size:104px;line-height:1;", "ink", "display"),
+        label(el, ctx, OG.host, b(1), "left:960px;width:840px;text-align:right;top:92px;font-size:44px;", "ink", "mono"),
+        symbolKey(el, { ctx, name: "chip", text: "모델 1", x: 120, y: 900, size: 56, at: b(2) }),
+        label(el, ctx, "OpenAI 41", b(3), "left:960px;width:840px;text-align:right;top:908px;font-size:48px;", "accentText", "display"),
+      ];
+    });
+
+    const day = cut(content, bar2, bar3, (el) => {
+      // 하루가 한 시간씩 흐른다 — 앞 시간 기둥이 다 서면 다음 시간이 이어서 쌓인다(밤은 동전 하나라 금방 지나간다)
+      const rate = 170;
+      let at = bar2;
+      const hourAt: number[] = [];
+      const cols = Array.from({ length: HOURS }, (_, h) => {
+        const n = h < OG.night.to ? 1 : 10;
+        const start = at;
+        hourAt.push(start);
+        at += n / rate + 0.02;
+        return stackColumn(el, { ctx, name: "coin", x: CX0 + h * COL + (COL - COIN) / 2, baseline: BASE, size: COIN, count: n, at: start, rate, tone: h < OG.night.to ? "accent" : "ink" });
+      });
+      // 지금 시각 — 시계 기호가 기둥 아래를 한 시간씩 옮겨 간다(그 시간 기둥이 쌓이는 동안 거기 선다)
+      const now = hourAt.map((from, h) => pictogram(el, { ctx, name: "clock", places: [[CX0 + h * COL + (COL - 56) / 2, BASE + 60]], size: 56, at: from, until: h < HOURS - 1 ? hourAt[h + 1] : bar3 }));
+      const hours = [0, 6, 10, 12, 18, 24].map((h) => label(el, ctx, String(h).padStart(2, "0"), bar2 + 0.2, `left:${CX0 + h * COL - 40}px;width:80px;text-align:center;top:${BASE + 16}px;font-size:30px;`, h === 0 || h === 10 ? "accentText" : "dim", "mono"));
+      return [
+        title(el, ctx, "시간대별 값 · KST", bar2),
+        ...cols,
+        ...now,
+        ...hours,
+        splitAxis(el, { ctx, x: CX0 + OG.night.to * COL, y0: 330, y1: BASE + 8, at: b(5), left: "00–10", right: "10–24", size: 40 }),
+        label(el, ctx, OG.deepseek.off, b(6), `left:${CX0}px;top:470px;font-size:144px;line-height:1;`, "accentText", "display"),
+        pictogram(el, { ctx, name: "moon", places: [[CX0 + 4 * COL, 220]], size: 96, at: b(7) }),
+        pictogram(el, { ctx, name: "sun", places: [[CX0 + 16 * COL, 220]], size: 96, at: b(7), tone: "guide" }),
+        symbolKey(el, { ctx, name: "coin", text: "정가 10%", x: 1460, y: 80, size: 44, at: b(5) }),
+      ];
+    });
+
+    const shop = cut(content, bar3, ctx.dur, (el) => {
+      const unit = 0.03;
+      return [
+        label(el, ctx, OG.deepseek.id, bar3, "left:120px;top:72px;font-size:52px;", "ink", "mono"),
+        label(el, ctx, "입력", bar3, "left:120px;top:236px;font-size:48px;", "ink", "sans"),
+        countRow(el, { ctx, name: "coin", x: 340, y: 232, size: 52, gap: 8, value: 0.3, unit, at: bar3, rate: 60, keep: [[b(9), 1]], dropRate: 40 }),
+        label(el, ctx, `${OG.deepseek.input[0]} → ${OG.deepseek.input[1]}`, b(9) + 0.25, "left:1060px;top:236px;font-size:52px;", "accentText", "mono"),
+        label(el, ctx, "출력", bar3, "left:120px;top:420px;font-size:48px;", "ink", "sans"),
+        countRow(el, { ctx, name: "coin", x: 340, y: 416, size: 52, gap: 8, value: 0.6, unit, at: bar3 + 0.05, rate: 80, keep: [[b(10), 4]], dropRate: 60 }),
+        countRow(el, { ctx, name: "coin", x: 340, y: 488, size: 52, gap: 8, value: 0.6, unit, at: bar3 + 0.3, rate: 80, keep: [[b(10) + 0.2, 0]], dropRate: 60 }),
+        label(el, ctx, `${OG.deepseek.output[0]} → ${OG.deepseek.output[1]}`, b(10) + 0.5, "left:120px;top:600px;font-size:52px;", "accentText", "mono"),
+        label(el, ctx, `${OG.glm.id} ${OG.glm.off}`, b(11), "left:120px;top:740px;font-size:40px;", "dim", "mono"),
+        symbolKey(el, { ctx, name: "coin", text: "$0.03 /M", x: 120, y: 900, size: 52, at: bar3 }),
+        pageSlide(el, { ctx, at: ctx.dur - 0.3, dur: 0.3 - 1 / 60, from: "bottom" }),
+      ];
+    });
+
+    return (t: number) => {
+      paper(t);
+      one(t);
+      grid.style.display = t < bar2 ? "" : "none";
+      const s = burst(t);
+      applyStyle(content, s.shake);
+      day(t);
+      shop(t);
+    };
+  },
+};

package/themes/isotype/sample/style.json

@@ -0,0 +1,101 @@
+{
+  "name": "isotype",
+  "label": "아이소타입 — 같은 기호를 늘어놓아 센다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#EDE7D9",
+    "surface": "#F5F1E8",
+    "raised": "#E2DACA",
+    "line": "#1E1C1A",
+    "ink": "#1E1C1A",
+    "inkSoft": "#3A3631",
+    "dim": "#6B6358",
+    "accent": "#D4512A",
+    "accentSoft": "#E9A486",
+    "accentText": "#B23F1C",
+    "onAccent": "#F5F1E8",
+    "success": "#557F3F",
+    "danger": "#B23F1C",
+    "warning": "#9C7A3A",
+    "guide": "#A88F6E",
+    "grey": "#CBC2B1",
+    "green": "#557F3F",
+    "blue": "#3B6790"
+  },
+  "fonts": {
+    "sans": "Jost, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "Jost, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"IBM Plex Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Jost",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/jost/Jost%5Bwght%5D.ttf",
+        "weight": "100 900"
+      },
+      {
+        "family": "IBM Plex Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/ibmplexmono/IBMPlexMono-Medium.ttf",
+        "weight": "400 700"
+      },
+      {
+        "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": 72,
+    "body": 40,
+    "caption": 30,
+    "weightDisplay": 500,
+    "weightBody": 450,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 8
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "inOutCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.3,
+      "slow": 0.6
+    }
+  },
+  "theme": {
+    "inks": [
+      "#EDE7D9 차트 종이 · #1E1C1A 기호와 글(검정 판)",
+      "#D4512A 주홍 — 몫 하나만 짚는 강조 · #557F3F 초록 · #3B6790 파랑 — 갈래가 둘 셋일 때만",
+      "#A88F6E 안내 그림(배경 맥락)·축선 · #CBC2B1 회색 — 덜어낸 몫·나머지"
+    ],
+    "texture": "납작한 면 — 그라데이션·그림자·윤곽선 없음. 기호는 리놀륨 판으로 찍은 실루엣, 원근 없이 정면이나 옆모습",
+    "movement": "기호가 하나씩 찍혀 늘어난다(초당 20–30개). 크기를 키워 양을 말하지 않는다. 옮길 땐 자석판 위 기호처럼 들어 옮겨 내려놓고, 덜어낼 땐 끝에서부터 회색으로. 장은 옆에서 밀려 들어오는 새 차트"
+  },
+  "notes": [
+    "오토 노이라트·게르트 아른츠 『사회와 경제』(1930) 차트의 색 — 크림 종이, 검정, 주홍, 초록, 안내 그림의 황토.",
+    "기호 하나가 늘 같은 값 — 풀이(symbolKey)를 한 줄 단다. 끝 기호는 잘라서 소수를 보인다.",
+    "글꼴은 Jost(푸투라 계열, OFL) — 한글은 Pretendard. 숫자 표·주소는 IBM Plex Mono.",
+    "카메라 없음 — 차트는 벽에 걸린 판이다."
+  ]
+}

package/themes/isotype/slots.ts

@@ -0,0 +1,74 @@
+import { clamp, ease, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { cssVar, layer, letters, partial, shownCount, traceCanvas } from "@kasaframe/themes/slotkit";
+import { chartFrame, countBurst, pressIn } from "./effects.ts";
+import { drawPicto } from "./kit.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 아이소타입 차트 판의 결로. 서는 것은 도장처럼 찍히고, 늘어나는 것은 같은 기호가 하나씩
+export const slots: ThemeSlots = {
+  surface(el, { ctx }) {
+    return chartFrame(el, { ctx });
+  },
+
+  // 차트 판 칸 — 굵은 검정 머리줄이 왼쪽부터 그어지고 판 면이 깔린다. 강조 판은 주홍 머리줄
+  panel(el, { at, tone }) {
+    const box = layer(el, "inset:0;background:var(--kf-raised)", true);
+    const rule = layer(box, `left:0;top:0;height:10px;width:100%;background:${tone === "accent" ? "var(--kf-accent)" : "var(--kf-ink)"};transform-origin:0 50%`);
+    return (t) => {
+      const p = clamp((t - at) / 0.2);
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      rule.style.transform = `scaleX(${ease.outCubic(p).toFixed(4)})`;
+      box.style.background = p >= 0.5 ? "var(--kf-raised)" : "transparent";
+    };
+  },
+
+  land(_el, { at }) {
+    return (t): Style => (t < at ? {} : pressIn(t, { at, px: 10 }));
+  },
+
+  // 활자를 한 낱말씩 앉히듯 — 낱말 단위로 서고, 서는 순간 도장처럼 눌린다
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    const words: number[] = [];
+    let w = 0;
+    spans.forEach((s, i) => {
+      if (s.textContent === " ") w++;
+      words[i] = w;
+    });
+    const total = w + 1;
+    return (t) => {
+      const n = shownCount(total, t, at, dur);
+      spans.forEach((s, i) => (s.style.visibility = words[i] < n ? "visible" : "hidden"));
+    };
+  },
+
+  // 선은 검정 띠로 그어지고, 다 그은 뒤엔 사람 기호 하나가 선을 따라 끝까지 걷는다(요청이 그 길로 간다)
+  trace(el, { points, at, dur, tone }) {
+    const size = 36;
+    const { g, clear } = traceCanvas(el, points, size);
+    const ink = tone === "accent" ? cssVar(el, "accent", "#D4512A") : cssVar(el, "ink", "#1E1C1A");
+    const walker = cssVar(el, "accent", "#D4512A");
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      const pts = partial(points, p);
+      g.strokeStyle = ink;
+      g.lineWidth = 8;
+      g.lineCap = "butt";
+      g.lineJoin = "miter";
+      g.beginPath();
+      g.moveTo(pts[0][0], pts[0][1]);
+      for (const q of pts.slice(1)) g.lineTo(q[0], q[1]);
+      g.stroke();
+      if (p < 1) return;
+      const k = ((t - at - dur) / 1.2) % 1;
+      const [x, y] = partial(points, k).at(-1)!;
+      drawPicto(g, "person", x - size / 2, y - size, size, walker);
+    };
+  },
+
+  drop(el, { ctx, drop }) {
+    return countBurst(el, { ctx, drop, name: "person", mode: "frame" });
+  },
+};