kasaframe 0.1.1 → 0.1.4

package/themes/newspaper/sample/index.html

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

package/themes/newspaper/sample/kf.json

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

@@ -0,0 +1,27 @@
+import type { SceneCtx } from "@kasaframe/core";
+
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-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;
+}
+
+/** from 부터 to 까지만 보이는 판 — 숨은 판은 그리지 않는다 */
+export function cut(parent: HTMLElement, from: number, to: number) {
+  const el = layer(parent);
+  return {
+    el,
+    on(t: number): boolean {
+      const v = t >= from && t < to;
+      // visibility 로 숨기면 안쪽 요소가 visible 을 주는 순간 부모를 뚫고 보인다 — display 로 통째로 뺀다
+      el.style.display = v ? "" : "none";
+      return v;
+    },
+  };
+}
+
+/** OG 로고를 망점 사진의 원판으로 — 먹 한 색 그림 주소 */
+export const logoSrc = (svg: string): string => `data:image/svg+xml;utf8,${encodeURIComponent(svg.replace(/currentColor/g, "#000"))}`;

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

@@ -0,0 +1,62 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { halftonePhoto, headline, masthead, newsprint, ruleGrid, slugLines } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cut, layer, logoSrc } from "../lib/page.ts";
+import svg from "../assets/og/logo.svg?raw";
+
+// 지연 = 송고까지 걸린 시간. 세 줄이 같은 순간 출발해 실측 첫 토큰 ms 만큼 망점 막대가 자라고, 그 시간에 닿는 순서대로 결과 줄이 떨어진다.
+// 다음 판: 18번 호출 = 망점 칸 18 개가 하나씩 찍히고 합 $0.0004. 끝: 제호 opengateway.ai 와 롤러에 찍혀 나오는 로고 사진
+const SCALE = 800;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const paper = newsprint(layer(root), { ctx, seed: "end" });
+
+    const a = cut(root, 0, b[4]);
+    const go = 0.5;
+    const rows = OG.ttft.map(([name, label, ms], i) => ({ name, label, ms, y: 340 + i * 220 }));
+    const aParts = [
+      headline(a.el, { ctx, text: "첫 토큰", x: 80, y: 92, size: 110, at: 0, gap: 0.08 }),
+      ruleGrid(a.el, { ctx, cols: [1400], top: 230, rows: [{ y: 218, double: true }], at: 0.05 }),
+      slugLines(a.el, { ctx, lines: [["실측", "2026-10-08"], ["가운데값", "OG 18번"], ["단위", "ms"]], x: 1430, y: 240, w: 410, size: 34, lh: 60, weight: 700, times: [0.23, 0.37, 0.47] }),
+      // 셋이 다 닿은 뒤 — 가장 먼저 닿은 모델
+      slugLines(a.el, { ctx, lines: [["가장 빠름", OG.ttft[0][0]]], x: 80, y: 960, w: 1300, size: 40, lh: 60, font: "mono", weight: 700, rules: false, at: go + Math.max(...OG.ttft.map((x) => x[2])) / 1000 + 0.08 }),
+      ...rows.flatMap((r, i) => {
+        const elapsed = (t: number) => Math.min(r.ms, Math.max(0, (t - go) * 1000));
+        return [
+          headline(a.el, { ctx, text: r.name, x: 80, y: r.y - 78, size: 54, font: "mono", weight: 700, at: 0.16 + i * 0.14, gap: 0.04 }),
+          // 실측 ms 만큼의 실제 시간 동안 망점 막대가 자란다(800ms 가 꽉 참)
+          halftonePhoto(a.el, { ctx, x: 80, y: r.y, w: 1280, h: 90, frame: false, pitch: 10, at: go, dur: 0.01, value: (u, _v, t) => (u <= elapsed(t) / SCALE ? 0.85 : 0) }),
+          slugLines(a.el, { ctx, lines: [[`${i + 1}`, r.label]], x: 1430, y: r.y + 50, w: 410, size: 56, lh: 110, weight: 800, at: go + r.ms / 1000 }),
+        ];
+      }),
+    ];
+
+    const m = cut(root, b[4], b[6]);
+    const N = 18;
+    const call = (k: number) => b[4] + 0.03 + k * 0.03;
+    const mParts = [
+      headline(m.el, { ctx, text: "18", x: 104, y: 230, size: 360, weight: 900, at: b[4], lineHeight: 1 }),
+      headline(m.el, { ctx, text: "호출", x: 520, y: 250, size: 120, at: b[4] + 0.06 }),
+      ruleGrid(m.el, { ctx, rows: [{ y: 620, double: true }], at: b[4] }),
+      // 호출 하나에 칸 하나 — 하나씩 찍힌다
+      halftonePhoto(m.el, { ctx, x: 80, y: 660, w: 1760, h: 110, frame: false, pitch: 11, at: b[4], dur: 0.01, value: (u, _v, t) => ((u * N) % 1 < 0.82 && t >= call(Math.floor(u * N)) ? 0.85 : 0) }),
+      slugLines(m.el, { ctx, lines: [["합", "$0.0004"]], x: 80, y: 820, w: 1760, size: 90, lh: 170, weight: 800, at: call(N - 1) + 0.04 }),
+    ];
+
+    const e = cut(root, b[6], ctx.dur);
+    const end = ctx.dur - 0.05;
+    const eParts = [
+      masthead(e.el, { ctx, title: OG.site, folio: [OG.host, "", `모델 ${OG.models}`], y: 92, size: 110, at: b[6] }),
+      halftonePhoto(e.el, { ctx, x: 360, y: 300, w: 1200, h: 620, src: logoSrc(svg), pitch: 14, at: b[6] + 0.06, dur: end - b[6] - 0.06, caption: OG.url }),
+    ];
+
+    return (t: number) => {
+      paper(t);
+      if (a.on(t)) for (const p of aParts) p(t);
+      if (m.on(t)) for (const p of mParts) p(t);
+      if (e.on(t)) for (const p of eParts) p(t);
+    };
+  },
+};

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

@@ -0,0 +1,66 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { halftonePhoto, headline, masthead, newsprint, ruleGrid, slugLines } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cut, layer } from "../lib/page.ts";
+
+// 회사 아홉 = 따로 들어온 기사 아홉. 1면 칸칸이 회사마다 따로 조판된다 — 이름이 찍히고, 모델 수 줄이 떨어지고, 망점 막대가 찍혀 나온다.
+// 다음 판: 증권면처럼 — 회사별 모델 수 표가 한 줄씩 떨어지고, 옆 망점 그래프가 롤러에 찍혀 내려온다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const paper = newsprint(layer(root), { ctx, seed: "gather" });
+    const MAX = Math.max(...OG.providers.map(([, n]) => n));
+
+    const a = cut(root, 0, b[3]);
+    const cols = [80, 680, 1280];
+    const rows = [244, 502, 760];
+    const aParts = [
+      masthead(a.el, { ctx, title: "OpenGateway", folio: ["2026-10-08", "", "/v1/models"], y: 86, size: 96, at: 0 }),
+      ruleGrid(a.el, { ctx, cols: [660, 1260], top: 240, rows: [{ y: rows[1] - 14 }, { y: rows[2] - 14 }], at: 0.06, dur: 0.3 }),
+      ...OG.providers.flatMap(([name, n], i) => {
+        const [x, y] = [cols[i % 3], rows[Math.floor(i / 3)]];
+        const at = 0.05 + i * 0.15;
+        return [
+          headline(a.el, { ctx, text: name, x, y, size: 76, at }),
+          slugLines(a.el, { ctx, lines: [["모델", String(n)]], x, y: y + 104, w: 560, size: 40, at: at + 0.05 }),
+          halftonePhoto(a.el, { ctx, x, y: y + 168, w: 560, h: 44, frame: false, pitch: 10, at: at + 0.07, dur: 0.25, value: (u) => (u <= n / MAX ? 0.85 : 0) }),
+        ];
+      }),
+    ];
+
+    // 적은 회사부터 — 표와 그래프가 가장 큰 줄에서 끝난다
+    const asc = [...OG.providers].reverse();
+    const c = cut(root, b[3], ctx.dur);
+    const every = 0.19;
+    const LH = 82;
+    const T0 = 226;
+    const cParts = [
+      headline(c.el, { ctx, text: "회사별 모델 수", x: 80, y: 86, size: 96, at: b[3], gap: 0.06 }),
+      ruleGrid(c.el, { ctx, cols: [800], top: 206, rows: [{ y: 194, double: true }], at: b[3], dur: 0.3 }),
+      slugLines(c.el, { ctx, lines: asc.map(([name, n]) => [name, String(n)]), x: 80, y: T0, w: 680, size: 54, lh: LH, weight: 800, at: b[3] + 0.05, every }),
+      // 표의 줄마다 같은 높이의 망점 막대 — 롤러가 위에서 아래로 지나며 찍는다
+      halftonePhoto(c.el, {
+        ctx,
+        x: 840,
+        y: T0,
+        w: 1000,
+        h: LH * 9,
+        pitch: 12,
+        at: b[3] + 0.05,
+        dur: every * 9,
+        caption: "MiniMax 3 … OpenAI 41",
+        value: (u, v) => {
+          const k = Math.min(8, Math.floor(v * 9));
+          const inRow = (v * 9) % 1;
+          return inRow > 0.18 && inRow < 0.82 && u <= asc[k][1] / MAX ? 0.85 : 0;
+        },
+      }),
+    ];
+
+    return (t: number) => {
+      paper(t);
+      if (a.on(t)) for (const p of aParts) p(t);
+      if (c.on(t)) for (const p of cParts) p(t);
+    };
+  },
+};

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

@@ -0,0 +1,61 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { halftonePhoto, headline, masthead, newsprint, ruleGrid, slugLines, wireTape } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cut, layer, logoSrc } from "../lib/page.ts";
+import svg from "../assets/og/logo.svg?raw";
+
+// 한 주소 = 제호. 제호 자리에 주소가 찍히고, 오른쪽 전보 띠에 박마다 요청이 한 줄씩 타자되어 들어온다 — 바뀌는 건 모델 ID 뿐,
+// 들어온 요청은 왼쪽 단에 슬러그로 한 줄씩 떨어진다. 다음 판: 두 기사 — OpenAI 형식과 Anthropic 형식이 같은 /v1 아래.
+// 셋째 판: 드롭 앞 — 회사 줄이 점점 빠르게 떨어지고, 로고 사진이 롤러에 찍혀 나온다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const paper = newsprint(layer(root), { ctx, seed: "models" });
+
+    const a = cut(root, 0, b[4]);
+    // 박마다 모델 하나, 그 박 안에 요청 넷 — 같은 주소에 모델 ID 만 바뀐다
+    const q = (b[2] - b[1]) / 4;
+    const calls = [1, 2, 3].flatMap((k, n) => [0, 1, 2, 3].map((j) => ({ t: b[k] + j * q, id: OG.ids[n] }))).filter((c) => c.t < b[4] - 0.02);
+    const aParts = [
+      masthead(a.el, { ctx, title: OG.host, folio: [OG.endpoints[0], OG.endpoints[2], OG.endpoints[1]], y: 84, size: 92, at: 0 }),
+      ruleGrid(a.el, { ctx, cols: [1150], top: 236, at: 0.08 }),
+      headline(a.el, { ctx, text: "한 주소", x: 80, y: 268, size: 170, at: 0.1, gap: 0.12 }),
+      slugLines(a.el, { ctx, lines: calls.map((c) => [c.id, "→ /v1"] as [string, string]), x: 80, y: 486, w: 1030, size: 32, lh: 44, font: "mono", weight: 700, times: calls.map((c) => c.t) }),
+      wireTape(a.el, { ctx, x: 1180, y: 248, w: 660, h: 760, size: 28, cps: 90, lines: [{ t: 0.04, text: "/v1/chat/completions" }, ...calls.map((c) => ({ t: c.t, text: `model: ${c.id}` }))] }),
+    ];
+
+    const m = cut(root, b[4], b[8]);
+    const left = ["/chat/completions", "/responses", "/images/generations"];
+    const reqs = Array.from({ length: 13 }, (_, k) => ({ t: b[5] + k * 0.088, anthropic: k % 2 === 1, ep: k % 2 === 1 ? "/messages" : k % 4 === 0 ? "/chat/completions" : "/responses" })).filter((r) => r.t < b[8] - 0.02);
+    const mParts = [
+      ruleGrid(m.el, { ctx, cols: [960], top: 110, bottom: 840, rows: [{ y: 860, double: true }], at: b[4] }),
+      headline(m.el, { ctx, text: "OpenAI 형식", x: 80, y: 120, size: 110, at: b[4], gap: 0.08 }),
+      headline(m.el, { ctx, text: "Anthropic 형식", x: 1000, y: 120, size: 110, at: b[4] + 0.1, gap: 0.08 }),
+      slugLines(m.el, { ctx, lines: left, x: 80, y: 360, w: 840, size: 40, lh: 64, font: "mono", weight: 700, at: b[4] + 0.2, every: 0.08 }),
+      slugLines(m.el, { ctx, lines: ["/messages"], x: 1000, y: 360, w: 840, size: 40, lh: 64, font: "mono", weight: 700, at: b[4] + 0.28 }),
+      // 요청이 반 박마다 두 형식으로 번갈아 들어온다 — 어느 쪽이든 같은 /v1
+      slugLines(m.el, { ctx, lines: reqs.filter((r) => !r.anthropic).map((r) => `POST /v1${r.ep}`), x: 80, y: 570, w: 840, size: 34, lh: 50, font: "mono", weight: 400, times: reqs.filter((r) => !r.anthropic).map((r) => r.t) }),
+      slugLines(m.el, { ctx, lines: reqs.filter((r) => r.anthropic).map((r) => `POST /v1${r.ep}`), x: 1000, y: 570, w: 840, size: 34, lh: 50, font: "mono", weight: 400, times: reqs.filter((r) => r.anthropic).map((r) => r.t) }),
+      // 두 형식이 한 주소 아래 — 맨 아래 한 줄
+      headline(m.el, { ctx, text: OG.url, x: 80, y: 896, size: 78, at: b[7], gap: 0.05, font: "mono", weight: 400 }),
+    ];
+
+    const c = cut(root, b[8], ctx.dur);
+    const end = ctx.dur - 0.08;
+    // 점점 빨라진다 — 드롭으로 모아 올리기
+    const times = OG.providers.map((_, i) => b[8] + 0.05 + (end - 0.25 - b[8]) * Math.sqrt(i / OG.providers.length));
+    const cParts = [
+      headline(c.el, { ctx, text: "모델", x: 80, y: 92, size: 110, at: b[8] }),
+      ruleGrid(c.el, { ctx, cols: [860], top: 236, rows: [{ y: 222, double: true }], at: b[8] }),
+      slugLines(c.el, { ctx, lines: OG.providers.map(([name, n]) => [name, String(n)]), x: 80, y: 244, w: 740, size: 46, lh: 84, times }),
+      halftonePhoto(c.el, { ctx, x: 900, y: 244, w: 940, h: 560, src: logoSrc(svg), pitch: 13, at: b[8], dur: ctx.dur - b[8] + 0.1, caption: OG.host }),
+    ];
+
+    return (t: number) => {
+      paper(t);
+      if (a.on(t)) for (const p of aParts) p(t);
+      if (m.on(t)) for (const p of mParts) p(t);
+      if (c.on(t)) for (const p of cParts) p(t);
+    };
+  },
+};

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

@@ -0,0 +1,103 @@
+import { applyStyle, clamp, ease, type SceneCtx } from "@kasaframe/core";
+import { breakingBand, halftonePhoto, headline, newsprint, pressRoll, ruleGrid, slugLines } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cut, layer } from "../lib/page.ts";
+
+// 드롭 = 호외: 빨강 띠가 가로지르고 윤전기에 종이가 끌려가며 「102」 가 판 가득 찍힌다, 회사 줄이 옆 단에 떨어진다.
+// 다음 판: 시간대 시세 — 24 시간 망점 막대 그래프에서 00–10시 막대가 눌려 내려가고 -90%.
+// 셋째 판: 시세표 — 정가가 밤값으로, 내림은 빨강 ▼ — 같은 값이 망점 막대로도 눌린다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const paper = newsprint(layer(root), { ctx, seed: "price" });
+    const page = layer(root);
+
+    const a = cut(page, 0, b[4]);
+    const aParts = [
+      breakingBand(a.el, { ctx, label: "호외", text: `모델 ${OG.models} · 한 주소`, y: 66, h: 110, at: 0 }),
+      headline(a.el, { ctx, text: String(OG.models), x: 104, y: 300, size: 520, weight: 900, at: 0.02, lineHeight: 1 }),
+      ruleGrid(a.el, { ctx, cols: [1230], top: 200, rows: [{ y: 856, x: 80, w: 1110, double: true }], at: 0.1 }),
+      headline(a.el, { ctx, text: "모델 · 한 주소", x: 80, y: 890, size: 84, at: b[1], gap: 0.15 }),
+      slugLines(a.el, { ctx, lines: OG.providers.map(([name, n]) => [name, String(n)]), x: 1260, y: 206, w: 580, size: 56, lh: 72, weight: 800, at: b[1] + 0.05, every: 0.1 }),
+      slugLines(a.el, { ctx, lines: [OG.host], x: 1260, y: 866, w: 580, size: 36, lh: 70, font: "mono", weight: 700, rules: false, at: b[1] + 0.05 + 9 * 0.1 }),
+    ];
+
+    const B = cut(page, b[4], b[8]);
+    const night = (h: number) => h >= OG.night.from && h < OG.night.to;
+    const pressAt = (h: number) => b[5] + h * 0.06;
+    const level = (h: number, t: number) => (night(h) ? 1 - 0.9 * ease.outCubic(clamp((t - pressAt(h)) / 0.16)) : 1);
+    const CX = 80;
+    const CW = 1080;
+    const bParts = [
+      headline(B.el, { ctx, text: "시간대 시세", x: 80, y: 86, size: 96, at: b[4], gap: 0.08 }),
+      ruleGrid(B.el, { ctx, cols: [1220], top: 216, rows: [{ y: 204, double: true }], at: b[4] }),
+      // 막대 24 개 — 막대 높이가 그 시간의 값(정가 = 1). 밤 창이 눌려 10분의 1 로
+      halftonePhoto(B.el, {
+        ctx,
+        x: CX,
+        y: 240,
+        w: CW,
+        h: 630,
+        pitch: 11,
+        at: b[4],
+        dur: 0.36,
+        value: (u, v, t) => {
+          const h = Math.min(23, Math.floor(u * 24));
+          const inBar = (u * 24) % 1 < 0.78;
+          return inBar && 1 - v <= level(h, t) * 0.96 ? 0.85 : 0;
+        },
+      }),
+      ...[0, 6, 12, 18].map((h) => headline(B.el, { ctx, text: String(h).padStart(2, "0"), x: CX + (h / 24) * CW, y: 884, size: 40, font: "mono", weight: 400, at: b[4] + 0.2 })),
+      headline(B.el, { ctx, text: OG.deepseek.off, x: 1250, y: 270, size: 190, weight: 900, color: "red", at: b[6], lineHeight: 1 }),
+      headline(B.el, { ctx, text: "00:00-10:00 KST", x: 1264, y: 520, size: 52, font: "mono", weight: 400, at: b[7], gap: 0.06 }),
+      slugLines(B.el, { ctx, lines: [[OG.deepseek.id, `▼${OG.deepseek.off.replace("-", "")}`], [OG.glm.id, `▼${OG.glm.off.replace("-", "")}`]], x: 1264, y: 620, w: 576, size: 30, lh: 64, font: "mono", weight: 700, at: b[7] + 0.1, every: 0.1 }),
+      slugLines(B.el, { ctx, lines: [["입력", `${OG.deepseek.input[0]} → ${OG.deepseek.input[1]}`]], x: 1264, y: 760, w: 576, size: 44, lh: 80, weight: 800, at: b[7] + 0.3 }),
+    ];
+
+    const ds = OG.deepseek;
+    const num = (s: string) => Number.parseFloat(s.replace("$", ""));
+    const c = cut(page, b[8], ctx.dur);
+    const rows = [
+      { name: "입력", vals: ds.input, at: b[9] },
+      { name: "출력", vals: ds.output, at: b[10] },
+    ];
+    // 망점 막대 높이 = 값(1.20 달러가 꽉 참) — 밤값이 되는 박에 눌린다
+    const bar = (r: (typeof rows)[number], t: number) => {
+      const [hi, lo] = [num(r.vals[0]), num(r.vals[1])];
+      return (t < r.at ? hi : hi + (lo - hi) * ease.outCubic(clamp((t - r.at) / 0.16))) / 1.2;
+    };
+    const cParts = [
+      headline(c.el, { ctx, text: ds.id, x: 80, y: 90, size: 72, font: "mono", weight: 400, at: b[8], gap: 0.05 }),
+      ruleGrid(c.el, { ctx, cols: [1180], top: 206, rows: [{ y: 194, double: true }], at: b[8] }),
+      slugLines(c.el, { ctx, lines: [["/M", "정가 → 00–10시"]], x: 80, y: 220, w: 1060, size: 34, lh: 70, at: b[8] + 0.1 }),
+      ...rows.map((r, i) => slugLines(c.el, { ctx, lines: [[r.name, `${r.vals[0]} → ${r.vals[1]}  ▼90%`]], x: 80, y: 300 + i * 150, w: 1060, size: 60, lh: 130, weight: 700, at: r.at })),
+      slugLines(c.el, { ctx, lines: [["00:00-10:00", "KST"], [OG.glm.id, `▼${OG.glm.off.replace("-", "")}`]], x: 80, y: 600, w: 1060, size: 44, lh: 80, font: "mono", weight: 700, times: [b[11], b[11] + 0.12] }),
+      halftonePhoto(c.el, {
+        ctx,
+        x: 1220,
+        y: 240,
+        w: 620,
+        h: 690,
+        pitch: 12,
+        at: b[8],
+        dur: ctx.dur - b[8] + 0.1,
+        caption: "입력 · 출력",
+        value: (u, v, t) => {
+          const r = rows[u < 0.5 ? 0 : 1];
+          const inBar = (u * 2) % 1 > 0.12 && (u * 2) % 1 < 0.88;
+          return inBar && 1 - v <= bar(r, t) ? 0.85 : 0;
+        },
+      }),
+      headline(c.el, { ctx, text: ds.off, x: 100, y: 770, size: 170, weight: 900, color: "red", at: b[10] + 0.2, lineHeight: 1 }),
+    ];
+
+    const press = pressRoll(layer(root), { ctx, drop: 0 });
+    return (t: number) => {
+      paper(t);
+      if (a.on(t)) for (const p of aParts) p(t);
+      if (B.on(t)) for (const p of bParts) p(t);
+      if (c.on(t)) for (const p of cParts) p(t);
+      applyStyle(page, press(t).shake);
+    };
+  },
+};

package/themes/newspaper/sample/style.json

@@ -0,0 +1,100 @@
+{
+  "name": "newspaper",
+  "label": "신문 1면 — 단에 한 줄씩 조판되고 속보에 판이 갈린다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#ECE8DF",
+    "surface": "#F3F0E9",
+    "raised": "#E2DDD2",
+    "line": "#B9B3A7",
+    "ink": "#1B1A18",
+    "inkSoft": "#33312D",
+    "dim": "#5C5850",
+    "accent": "#C8102E",
+    "accentSoft": "#EBC2C2",
+    "accentText": "#B00E28",
+    "onAccent": "#F3F0E9",
+    "success": "#1B1A18",
+    "danger": "#C8102E",
+    "warning": "#C8102E",
+    "paper": "#ECE8DF",
+    "rule": "#1B1A18",
+    "fiber": "#D6D0C4",
+    "red": "#C8102E"
+  },
+  "fonts": {
+    "sans": "\"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": "\"Courier Prime\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Hahmlet",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/hahmlet/Hahmlet%5Bwght%5D.ttf",
+        "weight": "100 900"
+      },
+      {
+        "family": "Courier Prime",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/courierprime/CourierPrime-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      }
+    ]
+  },
+  "type": {
+    "hero": 260,
+    "title": 120,
+    "body": 40,
+    "caption": 28,
+    "weightDisplay": 800,
+    "weightBody": 500,
+    "tracking": "-0.02em"
+  },
+  "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": "outExpo",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.24,
+      "slow": 0.45
+    }
+  },
+  "theme": {
+    "inks": [
+      "#ECE8DF 신문 용지 — 회백, 섬유 결이 서 있다",
+      "#1B1A18 먹 — 글·괘선·망점 사진(회색은 망점으로만)",
+      "#C8102E 속보 빨강 — 호외 띠·내림 표시, 한 지면에 한 군데"
+    ],
+    "texture": "신문 용지 — 미세한 섬유 결(서 있다). 사진·그래프는 굵은 45° 망점 검정 한 판. 그림자·그라데이션 없음",
+    "movement": "판이 짜인다 — 줄(슬러그)이 한 줄씩 떨어져 단을 채우고, 헤드라인이 낱말째 쾅 찍힌다(잉크가 잠깐 번졌다 앉는다). 전보는 한 자씩 타자되고 종이 띠가 한 줄씩 올라간다. 드롭엔 호외 — 띠가 가로질러 판이 갈리고 윤전기에 종이가 한 번 끌려간다"
+  },
+  "notes": [
+    "단을 채우는 것은 실제 사실뿐 — 지어낸 본문·회색 막대 본문 금지. 표(시세)·전보 줄로 채운다.",
+    "빨강은 속보·내림 한 군데. 나머지는 먹 한 색, 명암은 망점으로.",
+    "카메라 이동 없음 — 지면을 바로 앞에서. 구도는 지면을 갈아 끼워(판갈이) 바꾼다."
+  ]
+}

package/themes/newspaper/slots.ts

@@ -0,0 +1,73 @@
+import { clamp, ease, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { cssVar, layer, letters, partial, shownCount, strokePath, traceCanvas } from "@kasaframe/themes/slotkit";
+import { newsprint, pressRoll } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 신문 지면의 결로. 움직임은 조판뿐(줄이 떨어지고·괘선이 그어지고·타자되고), 멈춤은 outExpo 한 손
+const snap = (t: number, at: number, dur: number): number => ease.outExpo(clamp((t - at) / Math.max(1e-3, dur)));
+
+export const slots: ThemeSlots = {
+  surface(el, { ctx, seed }) {
+    return newsprint(el, { ctx, seed });
+  },
+
+  // 기사 상자 — 위에 굵고 가는 이중 괘선, 아래 가는 괘선이 왼쪽에서 그어진다. 강조 판은 위 괘선이 속보 빨강
+  panel(el, { at, tone }) {
+    const box = layer(el, "inset:0", true);
+    const top = tone === "accent" ? "var(--kf-red, var(--kf-accent))" : "var(--kf-rule, var(--kf-ink))";
+    const r1 = layer(box, `left:0;top:0;height:8px;width:0;background:${top}`);
+    const r2 = layer(box, "left:0;top:14px;height:2px;width:0;background:var(--kf-rule, var(--kf-ink))");
+    const r3 = layer(box, "left:0;bottom:0;height:2px;width:0;background:var(--kf-rule, var(--kf-ink))");
+    return (t) => {
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      r1.style.width = `${(snap(t, at, 0.3) * 100).toFixed(2)}%`;
+      r2.style.width = `${(snap(t, at + 0.05, 0.3) * 100).toFixed(2)}%`;
+      r3.style.width = `${(snap(t, at + 0.1, 0.3) * 100).toFixed(2)}%`;
+    };
+  },
+
+  // 슬러그가 제 줄로 떨어져 착 — 쇳덩이 한 줄이 판에 들어가 앉는다
+  land(_el, { at }) {
+    return (t): Style => {
+      if (t < at || t > at + 0.5) return {};
+      const k = snap(t, at, 0.16);
+      return { y: -(1 - k) * 36, scale: 1.05 - 0.05 * k };
+    };
+  },
+
+  // 텔레타이프 — 한 자씩 타자된다
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    return (t) => {
+      const n = shownCount(spans.length, t, at, dur);
+      spans.forEach((s, i) => (s.style.visibility = i < n ? "visible" : "hidden"));
+    };
+  },
+
+  // 신문 그래프 선 — 먹선이 왼쪽부터 그어지고 꺾이는 자리에 네모 점, 다 그은 뒤엔 네모 짚개가 선을 따라 간다
+  trace(el, { points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points);
+    const color = tone === "accent" ? cssVar(el, "red", "#C8102E") : cssVar(el, "rule", "#1B1A18");
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      g.lineCap = "butt";
+      g.lineJoin = "miter";
+      g.lineWidth = 5;
+      g.strokeStyle = color;
+      const drawn = partial(points, p);
+      strokePath(g, drawn);
+      g.fillStyle = color;
+      for (const [x, y] of drawn.slice(0, -1)) g.fillRect(x - 7, y - 7, 14, 14);
+      if (p < 1) return;
+      const [hx, hy] = partial(points, ((t - at - dur) * 0.5) % 1).at(-1)!;
+      g.fillRect(hx - 10, hy - 10, 20, 20);
+    };
+  },
+
+  // 드롭 — 윤전기에 종이가 한 번 끌려간다
+  drop(el, { ctx, drop }) {
+    return pressRoll(el, { ctx, drop });
+  },
+};