kasaframe 0.1.1 → 0.1.4

package/themes/whiteboard/sample/index.html

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

package/themes/whiteboard/sample/kf.json

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

@@ -0,0 +1,93 @@
+import { rand, type SceneCtx } from "@kasaframe/core";
+import type { Pt } from "../../effects.ts";
+
+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);
+
+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)]);
+}
+
+/** 컷 하나 = 보드의 한 판(지우고 새로 그린 판). 컷 밖에선 display:none — visibility 는 안쪽 요소가 뚫고 나온다 */
+export function board(root: HTMLElement, span: [number, number]): { el: HTMLDivElement; show(t: number): boolean } {
+  const el = document.createElement("div");
+  el.style.cssText = "position:absolute;inset:0;";
+  root.append(el);
+  return {
+    el,
+    show(t) {
+      const on = t >= span[0] && t < span[1];
+      el.style.display = on ? "" : "none";
+      return on;
+    },
+  };
+}
+
+/** 둥근 사각 테를 한 바퀴 도는 점들(왼쪽 위 직선부터) */
+export function roundRect(x: number, y: number, w: number, h: number, r: number): Pt[] {
+  const out: Pt[] = [];
+  const arc = (cx: number, cy: number, a0: number) => {
+    for (let k = 0; k <= 6; k++) {
+      const a = a0 + (k / 6) * (Math.PI / 2);
+      out.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]);
+    }
+  };
+  out.push([x + r, y]);
+  arc(x + w - r, y + r, -Math.PI / 2);
+  arc(x + w - r, y + h - r, 0);
+  arc(x + r, y + h - r, Math.PI / 2);
+  arc(x + r, y + r, Math.PI);
+  out.push([x + r + 6, y]);
+  return out;
+}
+
+/**
+ * OG 로고(public/logo.svg, 1140×650)를 마커 획으로 — 왼 칸 테, 오른 칸(왼쪽이 트인 테), 가로 막대, 화살 머리.
+ * (ox, oy) 왼쪽 위, s 배율. 획 굵기는 로고의 72·106 단위에 맞춘다
+ */
+export function logoStrokes(ox: number, oy: number, s: number): { points: Pt[]; width: number }[] {
+  const P = (x: number, y: number): Pt => [ox + x * s, oy + y * s];
+  const left = roundRect(36, 36, 420, 578, 89).map(([x, y]) => P(x, y));
+  const right: Pt[] = [P(684, 213), P(684, 125)];
+  const arc = (cx: number, cy: number, a0: number) => {
+    for (let k = 1; k <= 6; k++) {
+      const a = a0 + (k / 6) * (Math.PI / 2);
+      right.push(P(cx + Math.cos(a) * 89, cy + Math.sin(a) * 89));
+    }
+  };
+  arc(773, 125, Math.PI);
+  right.push(P(1015, 36));
+  arc(1015, 125, -Math.PI / 2);
+  right.push(P(1104, 525));
+  arc(1015, 525, 0);
+  right.push(P(773, 614));
+  arc(773, 525, Math.PI / 2);
+  right.push(P(684, 436));
+  return [
+    { points: left, width: 72 * s },
+    { points: right, width: 72 * s },
+    { points: [P(90, 325), P(840, 325)], width: 106 * s },
+    { points: [P(845, 232), P(958, 325), P(845, 418), P(845, 232)], width: 60 * s },
+  ];
+}
+
+/** 손글씨 글 폭(px) — 줄 긋기·밑줄 자리를 글에 맞춘다. build 는 글꼴을 다 받은 뒤라 치수가 맞다 */
+export function textWidth(ctx: SceneCtx, text: string, size: number, weight = 700, font: "display" | "sans" | "mono" = "display"): number {
+  const g = document.createElement("canvas").getContext("2d")!;
+  g.font = `${weight} ${size}px ${ctx.style.fonts[font]}`;
+  return g.measureText(text).width;
+}
+
+/** 손으로 그은 상자 — 귀퉁이가 살짝 넘치고 끝이 덜 닫힌다. 한 획으로 네 변 */
+export function boxPoints(x: number, y: number, w: number, h: number, seed = "box"): Pt[] {
+  const j = (i: number) => (rand(seed, i) - 0.5) * 10;
+  return [
+    [x + j(0), y + j(1)],
+    [x + w + j(2), y + j(3)],
+    [x + w + j(4), y + h + j(5)],
+    [x + j(6), y + h + j(7)],
+    [x + j(8) + 14, y + j(9) - 4],
+  ];
+}

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

@@ -0,0 +1,59 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { boardSurface, markerLine, markerPen, markerText } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, board, cuts, logoStrokes, textWidth } from "../lib/board.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const surface = boardSurface(root, { ctx, seed: "end" });
+    const pen = markerPen(root, { ctx, enter: [1700, 900] });
+    const A = board(root, c0);
+    const B = board(root, c1);
+    const C = board(root, c2);
+    const paints: ((t: number) => void)[] = [];
+    // 첫 판 — 첫 토큰 실측 셋: 화살표 길이와 긋는 시간이 ms 에 비례한다(짧을수록 빠르다). 끝에 18번 합
+    paints.push(markerText(A.el, { ctx, text: "첫 토큰", x: 140, y: 170, size: 124, at: 0.01, dur: 0.12, font: "sans", pen }));
+    const max = Math.max(...OG.ttft.map(([, , ms]) => ms));
+    OG.ttft.forEach(([id, label, ms], k) => {
+      const y = 380 + k * 190;
+      const t0 = (b[k] ?? k * 0.36) + (k ? 0 : 0.13);
+      const x0 = 1010;
+      const x1 = x0 + (ms / max) * 700;
+      paints.push(markerText(A.el, { ctx, text: id, x: 140, y, size: 86, at: t0, dur: 0.07, pen }));
+      paints.push(markerLine(A.el, { ctx, points: [[x0, y], [x1, y]], at: t0 + 0.07, dur: (ms / 1000) * 0.3, arrow: true, width: 12, color: k ? "marker" : "accent", pen, seed: `ttft${k}` }));
+      paints.push(markerText(A.el, { ctx, text: label, x: x1, y: y + 86, size: 88, at: t0 + 0.07 + (ms / 1000) * 0.3, dur: 0.05, align: "right", color: "red", pen }));
+    });
+    const sumAt = b[3] ?? 1.07;
+    paints.push(markerText(A.el, { ctx, text: OG.calls, x: 140, y: 950, size: 100, at: sumAt, dur: 0.14, font: "sans", pen }));
+    const ws = textWidth(ctx, OG.calls, 100, 700, "sans");
+    paints.push(markerLine(A.el, { ctx, points: [[130, 1006], [150 + ws, 1000]], at: sumAt + 0.15, dur: 0.1, color: "accent", width: 8, pen, seed: "sum-u" }));
+    // 둘째 판 — OG 로고를 마커로 그려 넣고, 아래 opengateway.ai 와 밑줄
+    const strokes = logoStrokes(580, 140, 0.667);
+    const lt = [0.24, 0.24, 0.12, 0.14];
+    let t = c1[0] + 0.01;
+    strokes.forEach((s, i) => {
+      paints.push(markerLine(B.el, { ctx, points: s.points, at: t, dur: lt[i], width: s.width, color: "accent", pen, seed: `logo${i}`, wobble: 1.4 }));
+      t += lt[i] + 0.02;
+    });
+    const siteAt = b[6] ?? c1[0] + 0.7;
+    paints.push(markerText(B.el, { ctx, text: OG.site, x: 960, y: 760, size: 140, at: siteAt, dur: 0.22, align: "center", pen }));
+    const wsite = textWidth(ctx, OG.site, 140);
+    paints.push(markerLine(B.el, { ctx, points: [[960 - wsite / 2, 850], [960 + wsite / 2, 844]], at: (b[7] ?? siteAt + 0.35) + 0.02, dur: 0.14, color: "red", width: 10, pen, seed: "site-u" }));
+    // 끝 반 마디 — 로고와 이름을 곁에 두고 주소 한 줄을 더 쓴다
+    logoStrokes(160, 330, 0.42).forEach((s, i) => paints.push(markerLine(C.el, { ctx, points: s.points, at: -1, dur: 0.05, width: s.width, color: "accent", seed: `logo2${i}`, wobble: 1.4 })));
+    paints.push(markerText(C.el, { ctx, text: OG.site, x: 760, y: 420, size: 130, at: -1, dur: 0.05 }));
+    paints.push(markerText(C.el, { ctx, text: OG.url, x: 760, y: 600, size: 72, at: c2[0] + 0.01, dur: 0.26, color: "accentText", pen }));
+    const wu = textWidth(ctx, OG.url, 72);
+    paints.push(markerLine(C.el, { ctx, points: [[750, 660], [770 + wu, 654]], at: c2[0] + 0.3, dur: 0.14, color: "red", width: 8, pen, seed: "url-u" }));
+    return (time: number) => {
+      surface(time);
+      A.show(time);
+      B.show(time);
+      C.show(time);
+      for (const p of paints) p(time);
+      pen(time);
+    };
+  },
+};

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

@@ -0,0 +1,50 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { boardSurface, circleMark, markerLine, markerPen, markerText, stickyNote, type Pt } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, board, cuts, textWidth } from "../lib/board.ts";
+
+const NOTES = ["noteYellow", "notePink", "noteMint", "noteBlue", "noteOrange"];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1] = cuts(ctx, 2);
+    const surface = boardSurface(root, { ctx, seed: "gather" });
+    const pen = markerPen(root, { ctx });
+    const A = board(root, c0);
+    const B = board(root, c1);
+    const paints: ((t: number) => void)[] = [];
+    // 첫 판 — 회사 아홉이 포스트잇으로 흩어져 붙는다(박마다 한 줄). 다음 두 박엔 저마다 따로 화살표를 쏜다 — 부르는 곳이 다 다르다
+    OG.providers.forEach(([name], i) => {
+      const [r, c] = [Math.floor(i / 3), i % 3];
+      const x = 400 + c * 560 + (r === 1 ? 70 : -40) * (c - 1);
+      const y = 220 + r * 310;
+      const at = [0.02, b[0] ?? 0.29, b[1] ?? 0.64][r] + c * 0.05;
+      paints.push(stickyNote(A.el, { ctx, x, y, w: 350, h: 230, tone: NOTES[i % NOTES.length], text: name, size: 96, at, rotate: ((i * 37) % 9) - 4 }));
+      const a = ((i * 2.4 + 0.6) % (Math.PI * 2)) - Math.PI;
+      const from: Pt = [x + Math.cos(a) * 200, y + Math.sin(a) * 135];
+      const to: Pt = [x + Math.cos(a) * 320, y + Math.sin(a) * 215];
+      paints.push(markerLine(A.el, { ctx, points: [from, to], at: (i < 5 ? (b[2] ?? 0.99) : (b[3] ?? 1.35)) + (i % 5) * 0.06, dur: 0.06, arrow: true, color: "accent", width: 8, pen, seed: `out${i}` }));
+    });
+    // 둘째 판 — 회사별 모델 수를 손으로 그린 막대로. 박마다 세 줄(이름·막대·숫자), 마지막 박에 가장 긴 막대에 동그라미
+    const x0 = 520;
+    paints.push(markerLine(B.el, { ctx, points: [[x0 - 20, 96], [x0 - 20, 990]], at: c1[0] + 0.01, dur: 0.12, pen, seed: "axis" }));
+    OG.providers.forEach(([name, n], i) => {
+      const y = 140 + i * 98;
+      const t0 = (b[4 + Math.floor(i / 3)] ?? c1[0] + Math.floor(i / 3) * 0.35) + (i % 3) * 0.11 + 0.13;
+      const len = (n / 41) * 1080;
+      paints.push(markerText(B.el, { ctx, text: name, x: x0 - 50, y, size: 88, at: t0, dur: 0.05, align: "right", pen }));
+      paints.push(markerLine(B.el, { ctx, points: [[x0, y], [x0 + len, y]], at: t0 + 0.05, dur: 0.04, width: 30, color: i ? "marker" : "accent", pen, seed: `bar${i}` }));
+      paints.push(markerText(B.el, { ctx, text: String(n), x: x0 + len + 28, y, size: 88, at: t0 + 0.09, dur: 0.02, pen }));
+    });
+    const w41 = textWidth(ctx, "41", 88);
+    paints.push(circleMark(B.el, { ctx, cx: x0 + 1080 + 28 + w41 / 2, cy: 140, rx: w41 / 2 + 46, ry: 52, at: (b[7] ?? c1[0] + 1.06) + 0.02, dur: 0.24, pen }));
+    return (t: number) => {
+      surface(t);
+      A.show(t);
+      B.show(t);
+      for (const p of paints) p(t);
+      pen(t);
+    };
+  },
+};

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

@@ -0,0 +1,56 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { boardSurface, circleMark, eraserWipe, markerLine, markerPen, markerText, tallyMarks, type Pt } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, board, boxPoints, cuts } from "../lib/board.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 surface = boardSurface(root, { ctx, seed: "models" });
+    const pen = markerPen(root, { ctx });
+    const A = board(root, c0);
+    const B = board(root, c1);
+    const C = board(root, c2);
+    const paints: ((t: number) => void)[] = [];
+    // 첫 판 — 가운데 상자에 한 주소를 쓰고, 엔드포인트 넷이 박마다 화살표로 그 상자에 들어온다. 끝에 상자를 두 겹 동그라미
+    paints.push(markerLine(A.el, { ctx, points: boxPoints(380, 390, 1160, 200, "gate"), at: 0.02, dur: 0.2, width: 10, pen, seed: "gate" }));
+    paints.push(markerText(A.el, { ctx, text: OG.host, x: 960, y: 492, size: 104, at: 0.22, dur: 0.26, align: "center", pen }));
+    const ends: { at: Pt; to: Pt; align: "left" | "right" }[] = [
+      { at: [120, 190], to: [560, 382], align: "left" },
+      { at: [1800, 190], to: [1360, 382], align: "right" },
+      { at: [120, 840], to: [560, 600], align: "left" },
+      { at: [1800, 840], to: [1360, 600], align: "right" },
+    ];
+    const when = [0.52, b[2] ?? 0.71, 0.88, b[3] ?? 1.06];
+    OG.endpoints.forEach((e, k) => {
+      const { at, to, align } = ends[k];
+      paints.push(markerText(A.el, { ctx, text: `/v1${e}`, x: at[0], y: at[1], size: 84, at: when[k], dur: 0.1, align, color: "accentText", pen }));
+      const from: Pt = [align === "left" ? at[0] + 240 : at[0] - 240, at[1] + (at[1] < 500 ? 66 : -66)];
+      paints.push(markerLine(A.el, { ctx, points: [from, to], at: when[k] + 0.1, dur: 0.07, arrow: true, color: "accent", pen, seed: `e${k}` }));
+    });
+    paints.push(circleMark(A.el, { ctx, cx: 960, cy: 490, rx: 660, ry: 160, at: 1.2, dur: 0.2, loops: 2, color: "accent", pen }));
+    // 둘째 판 — 같은 요청에 모델 칸만 박마다 지우개로 지우고 다시 쓴다
+    paints.push(markerText(B.el, { ctx, text: "POST /v1/chat/completions", x: 200, y: 300, size: 96, at: c1[0] + 0.01, dur: 0.16, pen }));
+    paints.push(markerText(B.el, { ctx, text: "model:", x: 200, y: 520, size: 104, at: c1[0] + 0.17, dur: 0.06, color: "accentText", pen }));
+    const swaps = [0, 1, 2, 3].map((k) => (k ? (b[4 + k] ?? c1[0] + k * 0.35) : c1[0] + 0.24));
+    OG.ids.slice(0, 4).forEach((id, k) => {
+      if (k) paints.push(eraserWipe(B.el, { ctx, x: 540, y: 455, w: 1300, h: 130, at: swaps[k], dur: 0.12, seed: `wipe${k}` }));
+      paints.push(markerText(B.el, { ctx, text: `"${id}"`, x: 560, y: 520, size: 72, at: swaps[k] + (k ? 0.12 : 0), dur: 0.18, pen }));
+    });
+    paints.push(markerLine(B.el, { ctx, points: [[200, 650], [1520, 650]], at: (b[7] ?? c1[0] + 1.06) + 0.32, dur: 0.12, color: "accent", width: 8, pen, seed: "post-u" }));
+    // 셋째 판 — 바를 정으로 모델을 센다. 드롭 앞까지 102 획이 차오른다
+    paints.push(markerText(C.el, { ctx, text: "models", x: 140, y: 240, size: 124, at: c2[0] + 0.01, dur: 0.1, pen }));
+    const tally = tallyMarks(C.el, { ctx, x: 560, y: 190, count: OG.models, at: c2[0] + 0.12, dur: drop - c2[0] - 0.24, size: 130, perRow: 6, pen });
+    paints.push(tally);
+    return (t: number) => {
+      surface(t);
+      A.show(t);
+      B.show(t);
+      C.show(t);
+      for (const p of paints) p(t);
+      pen(t);
+    };
+  },
+};

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

@@ -0,0 +1,79 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { boardSurface, circleMark, markerLine, markerPen, markerText, slapBurst, stickyNote, strikeOut, type Pt } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, board, cuts, textWidth } from "../lib/board.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 surface = boardSurface(root, { ctx, seed: "price" });
+    const pen = markerPen(root, { ctx, enter: [1500, 320] });
+    const frame = document.createElement("div");
+    frame.style.cssText = "position:absolute;inset:0;";
+    root.append(frame);
+    const A = board(frame, c0);
+    const B = board(frame, c1);
+    const C = board(frame, c2);
+    const paints: ((t: number) => void)[] = [];
+    // 드롭 — 보드를 탁 치며 빨강 102 를 크게 쓰고, 한 주소 · 주소, 밑줄 두 번
+    const slap = slapBurst(A.el, { ctx, x: 960, y: 430, r: 360, drop: 0 });
+    paints.push(markerText(A.el, { ctx, text: String(OG.models), x: 960, y: 430, size: 400, at: 0, dur: 0.16, align: "center", color: "red", pen }));
+    paints.push(markerText(A.el, { ctx, text: "한 주소", x: 960, y: 790, size: 140, at: b[1] ?? 0.36, dur: 0.14, align: "center", font: "sans", weight: 700, pen }));
+    paints.push(markerText(A.el, { ctx, text: OG.host, x: 960, y: 940, size: 88, at: b[2] ?? 0.73, dur: 0.2, align: "center", color: "accentText", pen }));
+    const wh = textWidth(ctx, "한 주소", 140, 700, "sans");
+    paints.push(markerLine(A.el, { ctx, points: [[960 - wh / 2 - 20, 868], [960 + wh / 2 + 20, 862]], at: b[3] ?? 1.07, dur: 0.1, color: "red", width: 9, pen, seed: "u1" }));
+    paints.push(markerLine(A.el, { ctx, points: [[960 - wh / 2, 886], [960 + wh / 2 + 10, 882]], at: (b[3] ?? 1.07) + 0.1, dur: 0.1, color: "red", width: 9, pen, seed: "u2" }));
+    // 둘째 판 — 하루 시계를 그리고 00–10 시 칸을 빗금 친 뒤, 박에 -90%
+    const [cx, cy, R] = [720, 540, 330];
+    const ang = (h: number) => -Math.PI / 2 + (h / 24) * Math.PI * 2;
+    const at = (h: number, r: number): Pt => [cx + Math.cos(ang(h)) * r, cy + Math.sin(ang(h)) * r];
+    const ring: Pt[] = Array.from({ length: 49 }, (_, i) => at(i / 2, R));
+    paints.push(markerLine(B.el, { ctx, points: ring, at: c1[0] + 0.01, dur: 0.24, width: 10, pen, seed: "clock" }));
+    for (const [h, label] of [[0, "00"], [6, "06"], [12, "12"], [18, "18"]] as const) {
+      paints.push(markerLine(B.el, { ctx, points: [at(h, R - 34), at(h, R)], at: c1[0] + 0.25 + h * 0.006, dur: 0.03, width: 8, pen, seed: `tick${h}` }));
+      const [lx, ly] = at(h, R + 62);
+      paints.push(markerText(B.el, { ctx, text: label, x: lx, y: ly, size: 78, at: c1[0] + 0.29 + h * 0.006, dur: 0.03, align: "center", pen }));
+    }
+    const [tx, ty] = at(10, R + 62);
+    paints.push(markerText(B.el, { ctx, text: "10", x: tx, y: ty, size: 78, at: c1[0] + 0.32, dur: 0.03, align: "center", color: "accentText", pen }));
+    const hatchAt = b[5] ?? c1[0] + 0.35;
+    for (let h = 0; h <= 10; h++) paints.push(markerLine(B.el, { ctx, points: [[cx, cy], at(h, R - 14)], at: hatchAt + h * 0.022, dur: 0.02, width: 7, color: "accent", pen, seed: `hatch${h}` }));
+    paints.push(markerLine(B.el, { ctx, points: Array.from({ length: 21 }, (_, i) => at(i / 2, R + 16)), at: hatchAt + 0.25, dur: 0.1, width: 16, color: "accent", pen, seed: "win" }));
+    paints.push(markerText(B.el, { ctx, text: `00:00-10:00 ${OG.night.tz}`, x: 1090, y: 300, size: 84, at: hatchAt + 0.36, dur: 0.14, color: "accentText", pen }));
+    paints.push(markerText(B.el, { ctx, text: OG.deepseek.off, x: 1200, y: 600, size: 230, at: fall, dur: 0.16, color: "red", pen }));
+    paints.push(markerLine(B.el, { ctx, points: [[1190, 640], [1100, 560], [990, 470]], at: fall + 0.18, dur: 0.1, arrow: true, color: "red", width: 9, pen, seed: "to-win" }));
+    const w90 = textWidth(ctx, OG.deepseek.off, 230);
+    paints.push(circleMark(B.el, { ctx, cx: 1200 + w90 / 2, cy: 600, rx: w90 / 2 + 50, ry: 150, at: (b[7] ?? fall + 0.35) + 0.05, dur: 0.24, pen }));
+    // 셋째 판 — 모델 포스트잇 아래 정가를 쓰고, 박마다 줄 그어 밤값으로 고친다
+    const ds = OG.deepseek;
+    paints.push(stickyNote(C.el, { ctx, x: 960, y: 210, w: 1340, h: 170, text: ds.id, size: 84, at: c2[0] + 0.01, rotate: -1.5 }));
+    const rows: { word: string; was: string; now: string; x: number }[] = [
+      { word: "입력", was: ds.input[0], now: ds.input[1], x: 260 },
+      { word: "출력", was: ds.output[0], now: ds.output[1], x: 1010 },
+    ];
+    rows.forEach((r, i) => {
+      const y = 520;
+      const t0 = c2[0] + 0.14 + i * 0.13;
+      paints.push(markerText(C.el, { ctx, text: r.word, x: r.x, y, size: 112, at: t0, dur: 0.05, font: "sans", pen }));
+      const vx = r.x + textWidth(ctx, r.word, 112, 700, "sans") + 30;
+      paints.push(markerText(C.el, { ctx, text: r.was, x: vx, y, size: 136, at: t0 + 0.05, dur: 0.07, pen }));
+      const fix = b[9 + i] ?? c2[0] + (i + 1) * 0.35;
+      const ww = textWidth(ctx, r.was, 136);
+      paints.push(strikeOut(C.el, { ctx, x: vx - 10, y: y - 60, w: ww + 20, h: 110, at: fix, dur: 0.12, pen, seed: `strike${i}` }));
+      paints.push(markerText(C.el, { ctx, text: r.now, x: vx, y: y + 170, size: 156, at: fix + 0.13, dur: 0.12, color: "red", pen }));
+    });
+    paints.push(stickyNote(C.el, { ctx, x: 960, y: 900, w: 1000, h: 150, tone: "notePink", text: `${OG.glm.id} ${OG.glm.off}`, size: 80, at: b[11] ?? c2[0] + 1.06, rotate: 1.2 }));
+    return (t: number) => {
+      surface(t);
+      A.show(t);
+      B.show(t);
+      C.show(t);
+      const s = slap(t);
+      applyStyle(frame, s.shake);
+      for (const p of paints) p(t);
+      pen(t);
+    };
+  },
+};

package/themes/whiteboard/sample/style.json

@@ -0,0 +1,106 @@
+{
+  "name": "whiteboard",
+  "label": "화이트보드 — 회의에서 마커로 그려 가며 설명한다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F7F7F3",
+    "surface": "#FFFFFF",
+    "raised": "#ECECE6",
+    "line": "#D2D3CC",
+    "ink": "#1D2026",
+    "inkSoft": "#353A43",
+    "dim": "#5F646D",
+    "accent": "#2353C4",
+    "accentSoft": "#C6D5F6",
+    "accentText": "#1D47AC",
+    "onAccent": "#FFFFFF",
+    "success": "#1F7F4A",
+    "danger": "#CC3426",
+    "warning": "#B86A00",
+    "marker": "#1D2026",
+    "red": "#CC3426",
+    "green": "#1F7F4A",
+    "noteYellow": "#FFE36B",
+    "notePink": "#FFA3C8",
+    "noteMint": "#A3E8C8",
+    "noteBlue": "#AED6FF",
+    "noteOrange": "#FFC07A",
+    "ghost": "#E4E5DF"
+  },
+  "fonts": {
+    "sans": "Gaegu, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "Gaegu, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "Gaegu, ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Gaegu",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/gaegu/Gaegu-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Gaegu",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/gaegu/Gaegu-Bold.ttf",
+        "weight": "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": 180,
+    "title": 96,
+    "body": 48,
+    "caption": 36,
+    "weightDisplay": 700,
+    "weightBody": 400,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 4,
+    "md": 8,
+    "lg": 14,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "free",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "outCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.3,
+      "slow": 0.7
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F7F7F3 흰 보드",
+      "#1D2026 검정 마커(윤곽·글)",
+      "#2353C4 파랑 마커(강조·화살표)",
+      "#CC3426 빨강 마커(고침·드롭)",
+      "포스트잇 다섯 색 — 회사·모델마다 한 장"
+    ],
+    "texture": "흰 보드에 지운 자국만 옅게(서 있다). 손떨림 있는 굵은 마커 선, 손글씨, 얕은 그림자의 포스트잇과 펜",
+    "movement": "마커 펜이 말을 따라 그린다 — 획이 그어지는 순서가 설명의 순서. 박마다 포스트잇이 붙거나·상자와 화살표가 그어지거나·지우개가 지나가고 다시 쓴다. 바탕은 서 있고, 펜이 다음 자리로 옮겨 가는 동안에도 화면이 쉬지 않는다"
+  },
+  "notes": [
+    "출처: Excalidraw 손그림 아키텍처, Sketchboard 마커 스케치, 포스트잇 사진, RSA Animate 의 그리는 손.",
+    "글은 손글씨(Gaegu)로 크게 — 마커 글씨는 작으면 안 읽힌다. 칠한 넓은 색면 위에 작은 글을 두지 않는다."
+  ]
+}