kasaframe 0.1.1 → 0.1.4

package/themes/data-journal/sample/index.html

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

package/themes/data-journal/sample/kf.json

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

@@ -0,0 +1,25 @@
+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);
+
+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 page(root: HTMLElement, span: [number, number]): { el: HTMLDivElement; show(t: number): void } {
+  const el = document.createElement("div");
+  el.style.cssText = "position:absolute;inset:0;";
+  root.append(el);
+  return { el, show: (t) => void (el.style.display = t >= span[0] && t < span[1] ? "" : "none") };
+}
+
+/** 글 폭(px) — 직접 라벨·주석 자리를 글에 맞춘다. build 는 글꼴을 다 받은 뒤라 치수가 맞다 */
+export function textWidth(ctx: SceneCtx, text: string, size: number, weight = 500, font: "display" | "sans" | "mono" = "sans"): number {
+  const g = document.createElement("canvas").getContext("2d")!;
+  g.font = `${weight} ${size}px ${ctx.style.fonts[font]}`;
+  return g.measureText(text).width;
+}

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

@@ -0,0 +1,69 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { barRank, bigNumber, headline, paperPage, readout } from "../../effects.ts";
+import logo from "../assets/og/logo.svg?raw";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, page, textWidth } from "../lib/page.ts";
+
+// 로고 SVG 를 글 잉크로 — 너비만 주고 높이는 viewBox 에 맡긴다. 왼쪽부터 쓸어 드러난다
+function logoMark(el: HTMLElement, ctx: SceneCtx, x: number, y: number, w: number, at: number, dur = 0.4) {
+  const box = document.createElement("div");
+  box.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:${w}px;color:${ctx.style.colors.ink};`;
+  box.innerHTML = logo;
+  const s = box.querySelector("svg")!;
+  s.setAttribute("width", "100%");
+  s.removeAttribute("height");
+  s.style.display = "block";
+  el.append(box);
+  return (t: number) => {
+    box.style.display = t >= at ? "" : "none";
+    box.style.clipPath = `inset(0 ${((1 - Math.min(1, Math.max(0, (t - at) / dur))) * 100).toFixed(1)}% 0 0)`;
+  };
+}
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const paper = paperPage(root, { ctx, seed: "end" });
+    const A = page(root, c0);
+    const B = page(root, c1);
+    const C = page(root, c2);
+    const paints: ((t: number) => void)[] = [];
+    // 첫 판 — 첫 토큰 가운데값 셋. 막대가 박마다 자라고 가장 짧은(빠른) 것만 강조색, 마지막 박에 실측 출처
+    paints.push(headline(A.el, { ctx, text: "첫 토큰 가운데값", x: 140, y: 150, at: 0.01, kind: "kicker" }));
+    const [fast] = OG.ttft;
+    paints.push(headline(A.el, { ctx, text: `${fast[0]} ${fast[1]}`, x: 140, y: 260, at: 0.04, size: 76 }));
+    const step = (b[1] ?? 0.37) - (b[0] ?? 0);
+    const rows = barRank(A.el, { ctx, x: 140, y: 400, w: 1640, rowH: 150, items: OG.ttft.map(([id, label, ms], i) => ({ label: id, value: ms, text: label, hot: i === 0 })), at: 0.05, stagger: step, dur: 0.42, labelW: 560, size: 46 });
+    paints.push(rows);
+    paints.push(headline(A.el, { ctx, text: `실측 · 2026-10-08 · ${OG.calls}`, x: 140, y: 1000, at: b[3] ?? 1.07, kind: "source", size: 34 }));
+    paints.push(readout(A.el, { ctx, stops: OG.ttft.map(([id, label], i) => ({ t: 0.05 + i * step + 0.45, at: rows.end(i), text: `${id} · ${label}` })), from: 0.05 }));
+    // 둘째 판 — 끝 카드: OG 로고와 opengateway.ai, 아래 숫자 셋이 박마다 세어 오른다
+    paints.push(logoMark(B.el, ctx, 960 - 230, 150, 460, c1[0] + 0.01));
+    paints.push(headline(B.el, { ctx, text: OG.site, x: 960, y: 560, at: b[5] ?? c1[0] + 0.35, size: 120, align: "center" }));
+    const stats = [
+      { x: 420, value: OG.models, label: "모델", at: b[5] ?? c1[0] + 0.35 },
+      { x: 960, value: 90, prefix: "−", suffix: "%", label: "00–10시", at: b[6] ?? c1[0] + 0.7 },
+      { x: 1500, value: OG.ttft[0][2], decimals: 1, suffix: "ms", label: "첫 토큰", at: b[7] ?? c1[0] + 1.05 },
+    ];
+    for (const s of stats) paints.push(bigNumber(B.el, { ctx, x: s.x, y: 820, value: s.value, prefix: s.prefix, suffix: s.suffix, decimals: s.decimals, at: s.at + 0.04, dur: 0.7, size: 140, label: s.label, align: "center" }));
+    // 끝 반 마디 — 이름을 곁에 두고, 로고가 반 마디 끝까지 쓸어 드러나는 동안 주소를 한 자씩
+    paints.push(logoMark(C.el, ctx, 260, 400, 340, c2[0], ctx.dur - c2[0] - 0.02));
+    paints.push(headline(C.el, { ctx, text: OG.site, x: 700, y: 470, at: -1, size: 110 }));
+    // 주소는 반 마디 끝에 맞춰 한 자씩 — 밑줄이 같은 빠르기로 따라 그어진다
+    const urlAt = c2[0] + 0.02;
+    const per = (ctx.dur - urlAt - 0.24) / OG.url.length;
+    paints.push(headline(C.el, { ctx, text: OG.url, x: 700, y: 610, at: urlAt, kind: "mono", size: 60, chars: true, stagger: per, color: "accentText" }));
+    const rule = document.createElement("div");
+    rule.style.cssText = `position:absolute;left:700px;top:668px;height:8px;width:${textWidth(ctx, OG.url, 60, 700, "mono")}px;background:${ctx.style.colors.accent};transform-origin:0 50%;`;
+    C.el.append(rule);
+    paints.push((t) => void (rule.style.transform = `scaleX(${Math.min(1, Math.max(0, (t - urlAt) / (ctx.dur - urlAt - 0.02))).toFixed(3)})`));
+    return (t: number) => {
+      paper(t);
+      A.show(t);
+      B.show(t);
+      C.show(t);
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/data-journal/sample/scenes/gather.ts

@@ -0,0 +1,58 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { dotStrip, headline, paperPage, readout, type Pt } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts } from "../lib/page.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [, c1] = cuts(ctx, 2);
+    const paper = paperPage(root, { ctx, seed: "gather" });
+    const paints: ((t: number) => void)[] = [];
+    // 한 판에서 두 컷 — 모델 102 개가 점 하나씩 흩어져 떠오르고(첫 컷), 마디에 회사 열로 모여 회사별 모델 수가 된다(둘째 컷).
+    // 목록에 적힌 회사 아홉의 합은 100 — 나머지 둘은 어느 열에도 넣지 않고 흩어진 자리에 흐리게 남긴다
+    const listed = OG.providers.reduce((a, [, n]) => a + n, 0);
+    const [x0, base, step, colW] = [240, 860, 27, 174];
+    const dots = dotStrip(root, {
+      ctx,
+      x: x0,
+      y: base,
+      cols: OG.providers.map(([label, count], i) => ({ label, count, hot: i === 0 })),
+      dot: 22,
+      gap: 5,
+      labelSize: 34,
+      perRow: 2,
+      colW,
+      at: 0.02,
+      dur: 1.3,
+      scatter: { box: [180, 300, 1560, 600], gather: c1[0] + 0.02, dur: 0.5, seed: "models" },
+      loose: OG.models - listed,
+      counts: true,
+    });
+    paints.push(dots);
+    paints.push(headline(root, { ctx, text: `모델 ${OG.models}개`, x: 140, y: 150, at: 0.02, swap: [{ at: c1[0], text: "회사별 모델 수" }] }));
+    paints.push(headline(root, { ctx, text: "출처 · /v1/models, 2026-10-08", x: 140, y: 985, at: 0.2, kind: "source" }));
+    // 짚어 읽기 — 흩어진 점 가운데 회사 하나씩 짚고, 모인 뒤엔 가장 큰 열부터 꼭대기를 짚는다
+    const firstOf = (ci: number) => OG.providers.slice(0, ci).reduce((a, [, n]) => a + n, 0);
+    const pick = (ci: number, t: number) => {
+      const from = firstOf(ci);
+      let k = from;
+      for (let j = from; j < from + OG.providers[ci][1]; j++) if (dots.appearAt(j) < t - 0.12) k = j;
+      return k;
+    };
+    const top = (ci: number): Pt => {
+      const rows = Math.ceil(OG.providers[ci][1] / 2);
+      return [x0 + ci * colW + step - 2, base - rows * step + 4];
+    };
+    const early = [0, 1, 2, 7].map((ci, k) => {
+      const t = (b[k] ?? 0.3 + k * 0.35) + 0.04;
+      return { t, at: dots.at(pick(ci, t), t), text: OG.providers[ci][0] };
+    });
+    const late = [0, 1, 2].map((ci, k) => ({ t: (b[5 + k] ?? c1[0] + 0.35 * (k + 1)) + 0.02, at: top(ci), text: `${OG.providers[ci][0]} ${OG.providers[ci][1]}` }));
+    paints.push(readout(root, { ctx, stops: [...early, ...late], floor: base }));
+    return (t: number) => {
+      paper(t);
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/data-journal/sample/scenes/models.ts

@@ -0,0 +1,51 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { annotation, bigNumber, dotStrip, headline, lineSeries, paperPage, readout } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, page, textWidth } from "../lib/page.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 paper = paperPage(root, { ctx, seed: "models" });
+    const A = page(root, c0);
+    const B = page(root, c1);
+    const C = page(root, c2);
+    const paints: ((t: number) => void)[] = [];
+    // 첫 판 — 한 주소. 엔드포인트 넷이 박마다 가는 지시선으로 그 주소에 닿는다
+    paints.push(headline(A.el, { ctx, text: "한 주소", x: 140, y: 150, at: 0.02, kind: "kicker" }));
+    paints.push(headline(A.el, { ctx, text: OG.host, x: 140, y: 280, at: 0.05, kind: "mono", size: 92 }));
+    const hostW = textWidth(ctx, OG.host, 92, 700, "mono");
+    const hits = OG.endpoints.map((_, k) => (k ? (b[k] ?? k * 0.35) : 0.12));
+    OG.endpoints.forEach((e, k) => {
+      // 위 글일수록 오른쪽 자리에 닿게 — 지시선끼리 엇갈리지 않는다
+      const to: [number, number] = [140 + (hostW * (3 - k + 0.6)) / 4.4, 352];
+      paints.push(annotation(A.el, { ctx, text: `/v1${e}`, x: 1000, y: 480 + k * 125, to, at: hits[k], size: 48, weight: 700, bend: 0.1 }));
+    });
+    paints.push(readout(A.el, { ctx, stops: OG.endpoints.map((e, k) => ({ t: hits[k] + 0.26, at: [140 + (hostW * (3 - k + 0.6)) / 4.4, 352] as [number, number], text: `POST /v1${e}` })), below: true }));
+    // 둘째 판 — 같은 요청에 모델만 박마다 바뀐다: 위 머리 글이 바뀌고, 한 줄 위에 요청 점이 하나씩 이어진다
+    paints.push(headline(B.el, { ctx, text: "POST /v1/chat/completions", x: 140, y: 150, at: c1[0] + 0.01, kind: "kicker" }));
+    const swaps = [0, 1, 2, 3].map((k) => (k ? (b[4 + k] ?? c1[0] + 0.35 * k) : c1[0] + 0.02));
+    paints.push(headline(B.el, { ctx, text: OG.ids[0], x: 140, y: 280, at: swaps[0], kind: "mono", size: 72, swap: OG.ids.slice(1, 4).map((text, k) => ({ at: swaps[k + 1], text })) }));
+    const row = lineSeries(B.el, { ctx, x: 220, y: 560, w: 1480, h: 200, xDomain: [0, 3], yDomain: [0, 1], series: [{ points: [0, 1, 2, 3].map((k) => [k, 0.5] as [number, number]), hot: true, dots: true }], at: c1[0] - 0.08, dur: 1.05 });
+    paints.push(row);
+    OG.ids.slice(0, 4).forEach((id, k) => {
+      paints.push(annotation(B.el, { ctx, text: id.split("/")[0], x: row.px(k), y: 700, at: swaps[k] + 0.05, size: 40, weight: 700, color: "inkSoft", align: k === 3 ? "right" : "left" }));
+    });
+    paints.push(readout(B.el, { ctx, stops: OG.ids.slice(0, 4).map((id, k) => ({ t: swaps[k] + 0.12, at: [row.px(k), row.py(0.5)] as [number, number], text: id })), from: c1[0] }));
+    // 셋째 판 — 모델 수를 센다: 점이 하나씩 앉는 만큼 숫자가 오르고 드롭 직전 102
+    paints.push(headline(C.el, { ctx, text: "/v1/models", x: 140, y: 150, at: c2[0] + 0.01, kind: "kicker" }));
+    const grid = dotStrip(C.el, { ctx, x: 1040, y: 720, cols: [{ count: OG.models }], dot: 30, gap: 8, perRow: 17, at: c2[0] + 0.05, dur: drop - c2[0] - 0.08 });
+    paints.push(grid);
+    paints.push(bigNumber(C.el, { ctx, x: 140, y: 470, value: OG.models, at: c2[0] + 0.02, size: 300, label: "모델", track: (t) => grid.shown(t) }));
+    paints.push(headline(C.el, { ctx, text: "출처 · /v1/models, 2026-10-08", x: 140, y: 985, at: c2[0] + 0.15, kind: "source" }));
+    return (t: number) => {
+      paper(t);
+      A.show(t);
+      B.show(t);
+      C.show(t);
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/data-journal/sample/scenes/price.ts

@@ -0,0 +1,73 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { annotation, bigNumber, dotStrip, headline, lineSeries, paperPage, rangeBand, readout, slopeLines } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, page } from "../lib/page.ts";
+
+const usd = (s: string) => Number(s.replace("$", ""));
+
+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 paper = paperPage(root, { ctx, seed: "price" });
+    const frame = document.createElement("div");
+    frame.style.cssText = "position:absolute;inset:0;";
+    root.append(frame);
+    const A = page(frame, c0);
+    const B = page(frame, c1);
+    const C = page(frame, c2);
+    const paints: ((t: number) => void)[] = [];
+    // 드롭 — 102 가 강조 띠를 받으며 선다(흔들림은 지면 틀에). 곁에 점 102 개, 한 주소 · 주소. 커서가 점 무리를 회사별로 짚는다
+    paints.push(bigNumber(A.el, { ctx, x: 140, y: 470, value: OG.models, at: 0, dur: 0.22, size: 360, label: "모델", drop: 0, shakeEl: frame }));
+    const grid = dotStrip(A.el, { ctx, x: 1060, y: 540, cols: [{ count: OG.models }], dot: 30, gap: 8, perRow: 17, at: -1, dur: 0.01 });
+    paints.push(grid);
+    paints.push(headline(A.el, { ctx, text: "한 주소", x: 1060, y: 700, at: b[1] ?? 0.36, size: 96 }));
+    paints.push(headline(A.el, { ctx, text: OG.host, x: 1060, y: 820, at: b[2] ?? 0.73, kind: "mono", size: 50 }));
+    const firstOf = (ci: number) => OG.providers.slice(0, ci).reduce((a, [, n]) => a + n, 0);
+    paints.push(readout(A.el, { ctx, stops: [0, 1, 2, 7].map((ci, k) => ({ t: k < 3 ? (b[k + 1] ?? 0.36 * (k + 1)) + 0.05 : c0[1] - 0.06, at: grid.at(firstOf(ci) + Math.floor(OG.providers[ci][1] / 2), 0), text: `${OG.providers[ci][0]} ${OG.providers[ci][1]}` })), from: 0.1 }));
+    // 둘째 판 — 같은 모델의 시간대별 입력 가격(계단). 00–10 시에 빗금 띠, 박에 -90% 주석, 커서가 하루를 훑는다
+    const ds = OG.deepseek;
+    const [hi, lo] = [usd(ds.input[0]), usd(ds.input[1])];
+    paints.push(headline(B.el, { ctx, text: `${ds.id} · 입력 /M`, x: 140, y: 140, at: c1[0] + 0.01, kind: "kicker" }));
+    const plot = lineSeries(B.el, {
+      ctx,
+      x: 260,
+      y: 300,
+      w: 1440,
+      h: 520,
+      xDomain: [0, 24],
+      yDomain: [0, 0.35],
+      series: [{ points: [[0, lo], [OG.night.to, hi], [24, hi]], hot: true, step: true }],
+      at: c1[0] + 0.02,
+      dur: 0.9,
+      yTicks: [0, 0.1, 0.2, 0.3],
+      yFmt: (v) => `$${v.toFixed(2)}`,
+      xTicks: [0, 6, 10, 12, 18, 24].map((v) => ({ v, label: String(v).padStart(2, "0") })),
+    });
+    paints.push(rangeBand(B.el, { ctx, x: plot.px(OG.night.from), y: 300, w: plot.px(OG.night.to) - plot.px(OG.night.from), h: 520, at: c1[0] + 0.02, hatch: true, label: `00:00-10:00 ${OG.night.tz}` }));
+    paints.push(plot);
+    paints.push(annotation(B.el, { ctx, text: `${ds.off} · ${ds.input[0]} → ${ds.input[1]}`, x: plot.px(1), y: 500, to: [plot.px(5), plot.py(lo) - 6], at: fall, size: 48, weight: 700, color: "accentText", bend: 0.2 }));
+    const hours = [3, 8, 14, 21];
+    paints.push(readout(B.el, { ctx, stops: hours.map((h, k) => ({ t: k < 3 ? (b[5 + k] ?? c1[0] + 0.35 * (k + 1)) : (b[7] ?? fall + 0.35) + 0.3, at: [plot.px(h), plot.py(h < OG.night.to ? lo : hi)] as [number, number], text: `${String(h).padStart(2, "0")}:00 · $${(h < OG.night.to ? lo : hi).toFixed(2)}` })), floor: plot.py(0), from: c1[0] }));
+    // 셋째 판 — 정가와 밤값을 잇는 기울기. 박마다 한 줄, 끝에 -90%, 마지막 박에 glm 주석
+    paints.push(headline(C.el, { ctx, text: ds.id, x: 140, y: 140, at: c2[0] + 0.01, kind: "kicker" }));
+    const [x0, x1, y0, h0, dom] = [720, 1320, 300, 560, [0, 1.3] as [number, number]];
+    const py = (v: number) => y0 + h0 - (v / dom[1]) * h0;
+    const pairs = [
+      { label: "입력", from: usd(ds.input[0]), to: usd(ds.input[1]), fromText: ds.input[0], toText: ds.input[1], hot: true, at: b[9] ?? c2[0] + 0.35 },
+      { label: "출력", from: usd(ds.output[0]), to: usd(ds.output[1]), fromText: ds.output[0], toText: ds.output[1], hot: true, at: b[10] ?? c2[0] + 0.7 },
+    ];
+    paints.push(slopeLines(C.el, { ctx, x0, x1, y: y0, h: h0, domain: dom, headers: ["정가", "00–10시"], pairs, at: c2[0] + 0.02, size: 40 }));
+    paints.push(bigNumber(C.el, { ctx, x: 1500, y: 470, value: 90, prefix: "−", suffix: "%", at: (b[10] ?? c2[0] + 0.7) + 0.3, dur: 0.3, size: 150, label: "00–10시" }));
+    paints.push(annotation(C.el, { ctx, text: `${OG.glm.id} · 밤 ${OG.glm.off}`, x: 140, y: 960, at: b[11] ?? c2[0] + 1.05, size: 40, weight: 700, color: "inkSoft" }));
+    paints.push(readout(C.el, { ctx, stops: pairs.flatMap((p) => [{ t: p.at + 0.02, at: [x0, py(p.from)] as [number, number], text: `${p.label} ${p.fromText}` }, { t: p.at + 0.42, at: [x1, py(p.to)] as [number, number], text: `${p.label} ${p.toText}` }]), from: c2[0] }));
+    return (t: number) => {
+      paper(t);
+      A.show(t);
+      B.show(t);
+      C.show(t);
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/data-journal/sample/style.json

@@ -0,0 +1,114 @@
+{
+  "name": "data-journal",
+  "label": "데이터 저널 — 편집된 차트 위에서 강조 한 색이 값을 짚는다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#FFF1E5",
+    "surface": "#FFF8F1",
+    "raised": "#F2DFCE",
+    "line": "#E3CDBA",
+    "ink": "#2B2724",
+    "inkSoft": "#45403C",
+    "dim": "#6B625C",
+    "accent": "#B8233C",
+    "accentSoft": "#F1C9CC",
+    "accentText": "#9C1A31",
+    "onAccent": "#FFFFFF",
+    "success": "#0D7680",
+    "danger": "#C9561C",
+    "warning": "#9A6B00",
+    "context": "#B9AA9C",
+    "band": "#F0DDCB",
+    "grid": "#E6D3C2"
+  },
+  "fonts": {
+    "sans": "\"IBM Plex Sans KR\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "Hahmlet, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", serif",
+    "mono": "\"IBM Plex Mono\", ui-monospace, \"IBM Plex Sans KR\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Hahmlet",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/hahmlet/Hahmlet%5Bwght%5D.ttf",
+        "weight": "100 900"
+      },
+      {
+        "family": "IBM Plex Sans KR",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/ibmplexsanskr/IBMPlexSansKR-Medium.ttf",
+        "weight": "500"
+      },
+      {
+        "family": "IBM Plex Sans KR",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/ibmplexsanskr/IBMPlexSansKR-Bold.ttf",
+        "weight": "700"
+      },
+      {
+        "family": "IBM Plex Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/ibmplexmono/IBMPlexMono-Medium.ttf",
+        "weight": "500"
+      },
+      {
+        "family": "IBM Plex Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/ibmplexmono/IBMPlexMono-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": 200,
+    "title": 84,
+    "body": 40,
+    "caption": 30,
+    "weightDisplay": 700,
+    "weightBody": 500,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 2,
+    "md": 4,
+    "lg": 6,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 6
+    },
+    "cameraMove": "free",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "outCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.32,
+      "slow": 0.7
+    }
+  },
+  "theme": {
+    "inks": [
+      "#FFF1E5 연어색 신문 종이",
+      "#2B2724 짙은 글·바닥선",
+      "#B9AA9C 회갈색 맥락(대부분의 막대·선·점)",
+      "#B8233C 강조 한 색 — 화면마다 하나의 값만"
+    ],
+    "texture": "평면 종이, 그림자 없음. 가로 눈금선만 1px 옅게, 바닥선 하나 진하게. 직접 라벨·가는 지시선 주석·옅은 구간 띠",
+    "movement": "선은 왼쪽에서 오른쪽으로 그어지고 막대는 바닥에서 자라고 점은 하나씩 앉는다. 쉬지 않는 몫은 짚어 읽는 커서와 값 상자 — 박마다 다음 값에 닿고 그 사이엔 차트 위를 미끄러진다. 큰 숫자는 세어 오른다"
+  },
+  "notes": [
+    "출처: Datawrapper 구간 강조·주석·직접 라벨 예시, FT Visual Vocabulary.",
+    "강조색은 한 화면에 한 값. 작은 글은 ink·dim 으로 — 강조색 작은 글은 accentText."
+  ]
+}

package/themes/data-journal/slots.ts

@@ -0,0 +1,119 @@
+import { clamp, ease, rand, type SceneCtx, type Style } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { layer, letters, partial, strokePath, traceCanvas, type Pt } from "@kasaframe/themes/slotkit";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { paperPage } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 신문 데이터 면의 결로 채운다. 전부 DOM·캔버스 2D
+const col = (ctx: SceneCtx, k: string, fb: string) => ctx.style.colors[k] ?? fb;
+
+// 꺾은선 위 거리 d 의 자리
+function along(points: readonly Pt[], 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 }) {
+    return paperPage(el, { ctx, seed });
+  },
+
+  // 차트 칸 — 편집 지면은 상자를 두르지 않는다: 위에 짧은 강조 줄, 아래 바닥선이 왼쪽부터 그어진다. 강조면 옅은 강조색 띠
+  panel(el, { ctx, at, tone }) {
+    const band = tone === "accent" ? layer(el, `inset:0;background:${col(ctx, "accentSoft", "#F1C9CC")};opacity:0.55;transform-origin:0 50%;`, true) : null;
+    const top = layer(el, `left:0;top:0;width:22%;height:8px;background:${col(ctx, "accent", "#B8233C")};transform-origin:0 50%;`);
+    const base = layer(el, `left:0;right:0;bottom:0;height:3px;background:${col(ctx, "ink", "#2B2724")};transform-origin:0 50%;`);
+    return (t) => {
+      const on = t >= at;
+      for (const d of [band, top, base]) if (d) d.style.display = on ? "" : "none";
+      if (!on) return;
+      const u = ease.outCubic(clamp((t - at) / 0.35));
+      top.style.transform = `scaleX(${u.toFixed(3)})`;
+      base.style.transform = `scaleX(${ease.outCubic(clamp((t - at - 0.08) / 0.4)).toFixed(3)})`;
+      if (band) band.style.transform = `scaleX(${u.toFixed(3)})`;
+    };
+  },
+
+  // 바닥선에서 솟아 앉는다 — 아래에서 올라오고 그 밑에 짧은 강조 줄이 그어진다
+  land(el, { ctx, at }) {
+    const rule = layer(el, `left:0;bottom:-14px;width:36%;height:6px;background:${col(ctx, "accent", "#B8233C")};transform-origin:0 50%;display:none;`);
+    return (t): Style => {
+      const k = t - at;
+      rule.style.display = k >= 0 ? "" : "none";
+      rule.style.transform = `scaleX(${ease.outCubic(clamp((k - 0.1) / 0.3)).toFixed(3)})`;
+      if (k < 0 || k > 0.5) return {};
+      const u = ease.outCubic(clamp(k / 0.32));
+      return { y: 46 * (1 - u), opacity: clamp(k / 0.12) };
+    };
+  },
+
+  // 낱말 굴림 — 글자가 아래에서 차례로 올라와 앉는다
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    for (const s of spans) {
+      s.style.display = "inline-block";
+      s.style.whiteSpace = "pre";
+    }
+    const n = Math.max(1, spans.length);
+    return (t) => {
+      const done = t >= at + dur;
+      spans.forEach((s, i) => {
+        const p = done ? 1 : ease.outCubic(clamp((t - at - (dur * i) / n) / 0.2));
+        s.style.opacity = String(p);
+        s.style.transform = p >= 1 ? "" : `translateY(${((1 - p) * 0.5).toFixed(3)}em)`;
+      });
+    };
+  },
+
+  // 강조선 — 왼쪽에서 그어지고 끝에 점. 다 그은 뒤엔 커서 고리가 선을 따라 짚는다
+  trace(el, { ctx, points, at, dur, seed, tone }) {
+    const { g, clear } = traceCanvas(el, points, 40);
+    const color = col(ctx, tone === "accent" ? "accent" : "context", "#B8233C");
+    const ink = col(ctx, "ink", "#2B2724");
+    const len = points.slice(1).reduce((s, [x, y], i) => s + Math.hypot(x - points[i][0], y - points[i][1]), 0) || 1;
+    return (t) => {
+      clear();
+      if (t < at) return;
+      const u = clamp((t - at) / Math.max(0.01, dur));
+      g.lineCap = "round";
+      g.lineJoin = "round";
+      g.strokeStyle = color;
+      g.lineWidth = 6;
+      strokePath(g, partial(points, ease.inOutQuad(u)));
+      const [hx, hy] = along(points, ease.inOutQuad(u) * len);
+      g.fillStyle = color;
+      g.beginPath();
+      g.arc(hx, hy, 9, 0, Math.PI * 2);
+      g.fill();
+      if (u < 1) return;
+      const d = ((((t - at - dur) * 0.4 + rand(seed, 3)) % 1) + 1) % 1;
+      const [x, y] = along(points, d * len);
+      g.strokeStyle = ink;
+      g.lineWidth = 3;
+      g.beginPath();
+      g.arc(x, y, 14, 0, Math.PI * 2);
+      g.stroke();
+    };
+  },
+
+  // 드롭 — 강조 띠가 화면 가운데를 가로로 훑고 옅은 섬광
+  drop(el, { ctx, drop }) {
+    const band = layer(el, `left:0;right:0;top:40%;height:20%;background:${col(ctx, "accentSoft", "#F1C9CC")};transform-origin:0 50%;opacity:0;`);
+    const flash = layer(el, `inset:0;background:${col(ctx, "surface", "#FFF8F1")};opacity:0;`);
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "data-journal:drop" });
+      flash.style.opacity = String(Math.round(s.flash * 50) / 100);
+      const k = t - ctx.beats.drop(drop);
+      band.style.opacity = k < 0 ? "0" : String(0.8 * (1 - clamp((k - 0.4) / 0.4)));
+      band.style.transform = `scaleX(${(k < 0 ? 0 : ease.outCubic(clamp(k / 0.3))).toFixed(3)})`;
+      return s;
+    };
+  },
+};