kasaframe 0.1.1 → 0.1.4

package/themes/blueprint/sample/index.html

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

package/themes/blueprint/sample/kf.json

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

@@ -0,0 +1,55 @@
+import type { SceneCtx } from "@kasaframe/core";
+
+export type Pt = [number, number];
+
+export function layer(parent: HTMLElement, css = ""): HTMLDivElement {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;inset:0;${css}`;
+  parent.append(el);
+  return el;
+}
+
+/** 글 한 덩어리 — 자리는 px. 글은 lettering 이 찍으니 비워 둔다 */
+export function label(parent: HTMLElement, css: string): HTMLDivElement {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;white-space:pre;line-height:1;${css}`;
+  parent.append(el);
+  return el;
+}
+
+export interface Page {
+  el: HTMLDivElement;
+  from: number;
+  to: number;
+  /** 이 판면 k 번째 박(장면 안 초) — 박이 모자라면 박 간격으로 이어 센다 */
+  beat(k: number): number;
+}
+
+/**
+ * 마디마다 도면 한 장 — 그 마디 동안만 보인다(display:none 으로 숨겨 지난 컷이 비치지 않게).
+ * 첫 판면은 장면 처음부터, 마지막은 장면 끝까지
+ */
+export function pages(root: HTMLElement, ctx: SceneCtx, n: number): { list: Page[]; show(t: number): void } {
+  // 첫 마디 머리는 장면 처음보다 조금 늦을 수 있다 — 판면 i 는 i 번째 마디 머리에서(첫 판면만 0 초에서)
+  const bars = ctx.beats.bars.filter((b) => b >= -1e-6 && b < ctx.dur - 0.05);
+  const beats = ctx.beats.beats;
+  const gap = beats.length > 1 ? (beats[beats.length - 1] - beats[0]) / (beats.length - 1) : 0.35;
+  const edge = (i: number) => (i <= 0 ? 0 : i >= n ? ctx.dur : (bars[i] ?? (ctx.dur * i) / n));
+  const list = Array.from({ length: n }, (_, i) => {
+    const from = edge(i);
+    const to = edge(i + 1);
+    const mine = beats.filter((b) => b >= from - 0.02 && b < to - 0.02);
+    return {
+      el: layer(root),
+      from,
+      to,
+      beat: (k: number) => mine[k] ?? (mine.length ? mine[mine.length - 1] + (k - mine.length + 1) * gap : from + k * gap),
+    };
+  });
+  return {
+    list,
+    show(t) {
+      for (const p of list) p.el.style.display = t >= p.from && t < p.to ? "block" : "none";
+    },
+  };
+}

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

@@ -0,0 +1,91 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { balloon, dimension, draftSheet, hatch, lettering, penLine, tSquare, titleBlock } from "../../effects.ts";
+import svg from "../assets/og/logo.svg?raw";
+import { OG } from "../lib/facts.ts";
+import { label, layer, pages } from "../lib/sheet.ts";
+
+// 첫 토큰 실측을 길이로 — 1ms = 1.6px. 해칭은 꼭 그 ms 동안 찬다
+const X0 = 420;
+const PX_PER_MS = 1.6;
+
+function logo(parent: HTMLElement, x: number, y: number, w: number, color: string): HTMLDivElement {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:${w}px;color:${color};visibility:hidden`;
+  el.innerHTML = svg.replace(/ width="\d+" height="\d+"/, ' width="100%" style="display:block"');
+  parent.append(el);
+  return el;
+}
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const sheet = draftSheet(layer(root), { ctx });
+    const ruleLayer = layer(root);
+    const { list, show } = pages(root, ctx, 3);
+    const [a, b, c] = list;
+    // T자 — 박마다 그 박에 긋는 줄로
+    const rule = tSquare(ruleLayer, { ctx, stops: [[0, 435], [a.beat(1), 665], [a.beat(2), 205], [a.beat(3), 895], [b.beat(0), 420], [b.beat(1), 140], [b.beat(2), 720], [b.beat(3), 255], [c.beat(0), 560], [c.beat(1), 340], [ctx.dur, 600]] });
+    const { mono, display } = ctx.style.fonts;
+    const ink = ctx.style.colors.ink;
+    const paints: ((t: number) => void)[] = [];
+
+    // 도면 1 — 첫 토큰 가운데값 셋: 막대가 제도되고, 그 ms 동안 해칭이 차며 아래 치수가 재고, 넷째 박에 시작선(기준면 A)
+    const title = label(a.el, `left:100px;top:84px;font:700 56px ${display};color:${ink}`);
+    const calls = label(a.el, `right:100px;top:94px;font:700 40px ${mono};color:${ink}`);
+    paints.push(lettering(title, { ctx, text: "첫 토큰 가운데값", at: a.beat(0), dur: 0.2 }), lettering(calls, { ctx, text: OG.calls, at: a.beat(2), dur: 0.3 }));
+    OG.ttft.forEach(([model, , ms], i) => {
+      const y = 330 + i * 230;
+      const w = ms * PX_PER_MS;
+      const go = a.beat(1);
+      // 이름 칸은 종이색 — 지나가는 T자가 글자 뒤로 비치지 않게
+      const name = label(a.el, `left:${X0 + 18}px;top:${y - 86}px;font:700 40px ${mono};color:${ink};background-color:${ctx.style.colors.bg}`);
+      paints.push(
+        lettering(name, { ctx, text: model, at: a.beat(0) + i * 0.05, dur: 0.22 }),
+        penLine(a.el, { ctx, shapes: [{ rect: [X0, y - 20, w, 40] }], at: a.beat(0) + i * 0.04, dur: 0.28 }),
+        hatch(a.el, { ctx, rect: [X0, y - 20, w, 40], at: go, dur: ms / 1000, pitch: 12, outline: false }),
+        dimension(a.el, { ctx, from: [X0, y + 20], to: [X0 + w, y + 20], offset: 26, at: go, dur: ms / 1000, value: ms, decimals: 1, unit: "ms", size: 40 }),
+      );
+    });
+    paints.push(
+      penLine(a.el, { ctx, shapes: [{ line: [X0, 220, X0, 920] }], kind: "center", at: a.beat(3), dur: 0.26, nib: false }),
+      balloon(a.el, { ctx, x: X0 - 110, y: 960, to: [X0, 920], text: "A", kind: "datum", at: a.beat(3) + 0.1 }),
+    );
+
+    // 도면 2 — 끝 카드: 로고 위에 표제란이 칸마다 찍히고, 기준면 A 가 API 주소 칸을 짚고, 로고에 중심선
+    const mark = logo(b.el, 780, 140, 360, ink);
+    paints.push(
+      (t) => (mark.style.visibility = t >= b.beat(1) ? "visible" : "hidden"),
+      titleBlock(b.el, {
+        ctx,
+        x: 360,
+        y: 420,
+        w: 1200,
+        at: b.beat(0),
+        step: 0.14,
+        rows: [
+          { label: "이름", value: "OpenGateway", h: 130, size: 84 },
+          { label: "주소", value: OG.site, h: 120, size: 72 },
+          { label: "API", value: OG.host, h: 100, size: 52 },
+          { label: "날짜", value: "2026-10-08", h: 90, size: 44 },
+        ],
+      }),
+      balloon(b.el, { ctx, x: 1680, y: 720, to: [1560, 720], text: "A", kind: "datum", at: b.beat(2) }),
+      penLine(b.el, { ctx, shapes: [{ line: [720, 255, 1200, 255] }, { line: [960, 110, 960, 400] }], kind: "center", at: b.beat(3), dur: 0.3, nib: false }),
+    );
+
+    // 도면 3 — 마지막 마디: 로고와 주소 한 줄, 그 아래 치수선이 주소 폭을 API 주소로 잰다
+    const mark2 = logo(c.el, 230, 360, 300, ink);
+    const site = label(c.el, `left:600px;top:340px;font:700 160px ${display};color:${ink}`);
+    paints.push(
+      (t) => (mark2.style.visibility = t >= c.from ? "visible" : "hidden"),
+      lettering(site, { ctx, text: OG.site, at: c.from, dur: 0.16, guide: false }),
+      dimension(c.el, { ctx, from: [600, 560], to: [1640, 560], offset: 40, at: c.from + 0.06, dur: ctx.dur - c.from - 0.1, text: OG.host, size: 48 }),
+    );
+
+    return (t: number) => {
+      show(t);
+      sheet(t);
+      rule(t);
+      for (const p of paints) p(t);
+    };
+  },
+};

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

@@ -0,0 +1,75 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { balloon, dimension, draftSheet, hatch, lettering, penLine, tSquare } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { label, layer, pages, type Pt } from "../lib/sheet.ts";
+
+// 부품 아홉 — 3×3 칸 가운데, 크기만 조금씩 다른 판(구멍 하나·중심선)
+const CELL: Pt[] = [[340, 290], [960, 290], [1580, 290], [340, 580], [960, 580], [1580, 580], [340, 855], [960, 855], [1580, 855]];
+const SIZE: Pt[] = [[300, 140], [250, 120], [270, 130], [230, 110], [290, 140], [240, 120], [260, 120], [280, 130], [220, 110]];
+// 박마다 셋 — 흩어진 자리부터
+const WAVE = [0, 2, 1, 1, 0, 2, 2, 1, 0];
+// 단면 표 줄 묶음 — 첫 박 셋, 나머지 박마다 둘
+const ROWS = [0, 0, 0, 1, 1, 2, 2, 3, 3];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const sheet = draftSheet(layer(root), { ctx });
+    const ruleLayer = layer(root);
+    const { list, show } = pages(root, ctx, 2);
+    const [a, b] = list;
+    // T자 — 박마다 그 박에 긋는 줄로
+    const rule = tSquare(ruleLayer, { ctx, stops: [[0, 230], [a.beat(0), 560], [a.beat(1), 840], [a.beat(2), 260], [a.beat(3), 580], [b.beat(0), 140], [b.beat(1), 450], [b.beat(2), 650], [b.beat(3), 850], [ctx.dur, 960]] });
+    const { display } = ctx.style.fonts;
+    const ink = ctx.style.colors.ink;
+    const paints: ((t: number) => void)[] = [];
+
+    // 도면 1 — 분해도: 부품(회사) 아홉이 박마다 셋씩 제도되고 품번 풍선·이름이 붙는다, 넷째 박에 절단선 A–A 가 가운데 줄 부품을 자른다
+    const parts = layer(a.el);
+    const notes = layer(a.el);
+    OG.providers.forEach(([name], i) => {
+      const [cx, cy] = CELL[i];
+      const [w, h] = SIZE[i];
+      const beat = a.beat(WAVE[i]);
+      const drawAt = WAVE[i] === 0 ? 0 : beat - 0.22;
+      const r = h * 0.24;
+      // 풍선은 판 바깥 위 모서리(오른쪽 줄은 왼쪽 위 — 안전 영역 안), 이름은 판 아래 가운데
+      const right = i % 3 === 2;
+      const bx = right ? cx - w / 2 - 46 : cx + w / 2 + 46;
+      const by = cy - h / 2 - 44;
+      paints.push(
+        penLine(parts, { ctx, shapes: [{ rect: [cx - w / 2, cy - h / 2, w, h] }], at: drawAt, dur: beat + 0.06 - drawAt }),
+        penLine(parts, { ctx, shapes: [{ circle: [cx, cy, r] }], at: beat, dur: 0.18 }),
+        penLine(parts, { ctx, shapes: [{ line: [cx - w / 2 - 24, cy, cx + w / 2 + 24, cy] }, { line: [cx, cy - h / 2 - 24, cx, cy + h / 2 + 24] }], kind: "center", at: beat + 0.08, dur: 0.22, nib: false }),
+        balloon(notes, { ctx, x: bx, y: by, to: [right ? cx - w / 2 + 16 : cx + w / 2 - 16, cy - h / 2 + 16], text: String(i + 1), at: beat + 0.04 }),
+      );
+      const el = label(notes, `left:${cx - 200}px;width:400px;text-align:center;top:${cy + h / 2 + 32}px;font:700 44px ${display};color:${ink};letter-spacing:0.02em`);
+      paints.push(lettering(el, { ctx, text: name, at: beat + 0.1, dur: 0.24 }));
+    });
+    paints.push(penLine(notes, { ctx, shapes: [{ line: [120, 580, 1800, 580] }], kind: "cut", letter: "A", side: -1, at: a.beat(3), dur: 0.3, nib: false }));
+
+    // 도면 2 — 단면 A–A: 회사마다 잘린 면(해칭) 길이가 모델 수, 그 위 치수가 수를 잰다
+    const title = label(b.el, `left:100px;top:66px;font:700 48px ${display};color:${ink};letter-spacing:0.04em`);
+    paints.push(lettering(title, { ctx, text: "단면 A–A", at: b.beat(0), dur: 0.2 }));
+    const max = OG.providers[0][1];
+    const X0 = 380;
+    const SPAN = 1300;
+    OG.providers.forEach(([name, n], i) => {
+      const y = 150 + i * 98;
+      const at = b.beat(ROWS[i]);
+      const w = (SPAN * n) / max;
+      const el = label(b.el, `left:100px;top:${y - 4}px;font:700 40px ${display};color:${ink}`);
+      paints.push(
+        lettering(el, { ctx, text: name, at, dur: 0.18 }),
+        hatch(b.el, { ctx, rect: [X0, y, w, 28], at, dur: 0.22 + 0.25 * (n / max), pitch: 12 }),
+        dimension(b.el, { ctx, from: [X0, y], to: [X0 + w, y], offset: -20, at: at + 0.06, dur: 0.3 + 0.25 * (n / max), value: n, size: 32 }),
+      );
+    });
+
+    return (t: number) => {
+      show(t);
+      sheet(t);
+      rule(t);
+      for (const p of paints) p(t);
+    };
+  },
+};

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

@@ -0,0 +1,117 @@
+import { clamp, ease, type SceneCtx } from "@kasaframe/core";
+import { balloon, dimension, draftSheet, lettering, penLine, tSquare } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { label, layer, pages, type Pt } from "../lib/sheet.ts";
+
+// 도면 1 — 끝점 넷: [x, 이름 줄(0 위 · 1 아래)]
+const PORTS: [string, number, number][] = [
+  ["/chat/completions", 420, 0],
+  ["/responses", 680, 1],
+  ["/images/generations", 940, 0],
+  ["/messages", 1460, 1],
+];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const sheet = draftSheet(layer(root), { ctx });
+    const ruleLayer = layer(root);
+    const { list, show } = pages(root, ctx, 3);
+    const [a, b, c] = list;
+    // T자 — 박마다 그 박에 긋는 줄로
+    const rule = tSquare(ruleLayer, { ctx, stops: [[0, 200], [a.beat(1), 300], [a.beat(2), 470], [a.beat(3), 720], [b.beat(0), 410], [b.beat(1), 560], [b.beat(2), 300], [b.beat(3), 700], [c.beat(0), 470], [c.beat(1), 250], [c.beat(2), 820], [c.beat(3), 560], [ctx.dur, 640]] });
+    const { mono, display } = ctx.style.fonts;
+    const ink = ctx.style.colors.ink;
+    const paints: ((t: number) => void)[] = [];
+
+    // 도면 1 — 한 주소 = 기준면 A: 판이 제도되고 기준면 표가 붙고, 판 위에 주소, 끝점 구멍 넷과 두 형식 치수
+    paints.push(
+      penLine(a.el, { ctx, shapes: [{ rect: [260, 200, 1400, 360] }], at: a.beat(0), dur: 0.4 }),
+      balloon(a.el, { ctx, x: 170, y: 380, to: [260, 380], text: "A", kind: "datum", at: a.beat(0) + 0.2 }),
+    );
+    const url = label(a.el, `left:260px;width:1400px;text-align:center;top:290px;font:700 62px ${mono};color:${ink}`);
+    paints.push(lettering(url, { ctx, text: OG.url, at: a.beat(1), dur: 0.34 }));
+    PORTS.forEach(([name, x, row], i) => {
+      const at = a.beat(2) + i * 0.05;
+      const y = 470;
+      const ly = 600 + row * 52;
+      paints.push(
+        penLine(a.el, { ctx, shapes: [{ circle: [x, y, 34] }], at, dur: 0.16 }),
+        penLine(a.el, { ctx, shapes: [{ line: [x - 54, y, x + 54, y] }, { line: [x, y - 54, x, y + 54] }], kind: "center", at: at + 0.08, dur: 0.16, nib: false }),
+        penLine(a.el, { ctx, shapes: [{ line: [x, y + 54, x, ly - 6] }], kind: "thin", at: at + 0.1, dur: 0.1, nib: false }),
+      );
+      const el = label(a.el, `left:${x - 300}px;width:600px;text-align:center;top:${ly}px;font:700 30px ${mono};color:${ink}`);
+      paints.push(lettering(el, { ctx, text: name, at: at + 0.12, dur: 0.2 }));
+    });
+    paints.push(
+      dimension(a.el, { ctx, from: [380, 720], to: [980, 720], offset: 40, at: a.beat(3), dur: 0.3, text: "OpenAI 형식", size: 40 }),
+      dimension(a.el, { ctx, from: [1400, 720], to: [1520, 720], offset: 40, at: a.beat(3) + 0.05, dur: 0.3, text: "Anthropic 형식", size: 40 }),
+    );
+
+    // 도면 2 — 같은 축에 박마다 다른 부품(모델 ID): 새 부품은 외형선, 지난 부품은 가상선(다른 자리)으로 남는다
+    paints.push(
+      penLine(b.el, { ctx, shapes: [{ rect: [120, 420, 260, 280] }], at: b.beat(0), dur: 0.26 }),
+      balloon(b.el, { ctx, x: 250, y: 320, to: [250, 420], text: "A", kind: "datum", at: b.beat(0) + 0.12 }),
+      penLine(b.el, { ctx, shapes: [{ line: [380, 540, 1780, 540] }, { line: [380, 580, 1780, 580] }], at: b.beat(0), dur: 0.3, nib: false }),
+      penLine(b.el, { ctx, shapes: [{ line: [100, 560, 1820, 560] }], kind: "center", at: b.beat(0) + 0.05, dur: 0.3, nib: false }),
+    );
+    const host = label(b.el, `left:120px;top:96px;font:700 48px ${mono};color:${ink}`);
+    paints.push(lettering(host, { ctx, text: OG.host, at: b.beat(0), dur: 0.24 }));
+    OG.ids.slice(0, 4).forEach((id, k) => {
+      const at = b.beat(k);
+      const next = k < 3 ? b.beat(k + 1) : Infinity;
+      const x = 520 + k * 320;
+      const part: [number, number, number, number] = [x, 410, 220, 300];
+      const live = layer(b.el);
+      const ghost = layer(b.el);
+      const drawLive = penLine(live, { ctx, shapes: [{ rect: part }], at, dur: 0.24 });
+      const drawGhost = penLine(ghost, { ctx, shapes: [{ rect: part }], kind: "phantom", at: next, dur: 0.01, nib: false });
+      const tag = balloon(live, { ctx, x: x + 190, y: 340, to: [x + 180, 418], text: String(k + 1), at: at + 0.12 });
+      const name = label(b.el, `left:120px;top:176px;font:700 54px ${mono};color:${ink}`);
+      const write = lettering(name, { ctx, text: id, at, dur: 0.24 });
+      paints.push((t) => {
+        live.style.display = t < next ? "block" : "none";
+        name.style.display = t >= at && t < next ? "block" : "none";
+        drawLive(t);
+        drawGhost(t);
+        tag(t);
+        write(t);
+      });
+    });
+
+    // 도면 3 — 분해도가 조립된다: 회사 아홉 부품이 조립선을 따라 박마다 셋씩 가운데 판으로 들어와 붙고, 넷째 박에 품번이 붙는다
+    const C: Pt = [960, 560];
+    paints.push(penLine(c.el, { ctx, shapes: [{ rect: [C[0] - 150, C[1] - 90, 300, 180] }], at: c.from, dur: 0.22 }));
+    const hub = label(c.el, `left:${C[0] - 150}px;width:300px;text-align:center;top:${C[1] - 28}px;font:700 56px ${mono};color:${ink}`);
+    paints.push(lettering(hub, { ctx, text: "/v1", at: c.from + 0.1, dur: 0.12 }));
+    const paths = layer(c.el);
+    OG.providers.forEach(([name], i) => {
+      const th = ((-90 + i * 40) * Math.PI) / 180;
+      const from: Pt = [C[0] + Math.cos(th) * 740, C[1] + Math.sin(th) * 400];
+      const dock: Pt = [C[0] + Math.cos(th) * 400, C[1] + Math.sin(th) * 250];
+      paints.push(penLine(paths, { ctx, shapes: [{ line: [from[0], from[1], dock[0], dock[1]] }], kind: "center", at: c.from, dur: 0.2, nib: false }));
+      const move = layer(c.el, "inset:auto;left:0;top:0;width:0;height:0");
+      // 판 안은 종이색 — 지나온 조립선이 부품 이름 뒤로 비치지 않게
+      layer(move, `inset:auto;left:${from[0] - 100}px;top:${from[1] - 38}px;width:200px;height:76px;background:${ctx.style.colors.bg}`);
+      const draw = penLine(move, { ctx, shapes: [{ rect: [from[0] - 100, from[1] - 38, 200, 76] }], at: c.from + 0.02, dur: 0.18, nib: false });
+      const el = label(move, `left:${from[0] - 150}px;width:300px;text-align:center;top:${from[1] - 20}px;font:700 40px ${display};color:${ink}`);
+      const write = lettering(el, { ctx, text: name, at: c.from + 0.06, dur: 0.16, guide: false });
+      const go = c.beat(i % 3) + 0.12;
+      paints.push((t) => {
+        const e = ease.inOutCubic(clamp((t - go) / 0.28));
+        move.style.transform = `translate(${((dock[0] - from[0]) * e).toFixed(1)}px, ${((dock[1] - from[1]) * e).toFixed(1)}px)`;
+        draw(t);
+        write(t);
+      });
+      // 품번 풍선 — 붙은 부품 바깥쪽 모서리에서
+      const sx = Math.cos(th) >= 0 ? 1 : -1;
+      paints.push(balloon(c.el, { ctx, x: dock[0] + sx * 140, y: dock[1] - 58, to: [dock[0] + sx * 88, dock[1] - 30], text: String(i + 1), at: c.beat(3) + i * 0.03, size: 24 }));
+    });
+
+    return (t: number) => {
+      show(t);
+      sheet(t);
+      rule(t);
+      for (const p of paints) p(t);
+    };
+  },
+};

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

@@ -0,0 +1,94 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { balloon, dimension, draftSheet, exposure, hatch, lettering, penLine, revisionCloud, tSquare } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { label, layer, pages } from "../lib/sheet.ts";
+
+// 가격을 길이로 — $1 = 1150px
+const PER = 1150;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    // 흔들림은 도면 칸에만 — 종이째 흔들면 가장자리에 페이지 검정이 비친다
+    const sheet = draftSheet(layer(root), { ctx });
+    const ruleLayer = layer(root);
+    const frame = layer(root);
+    const { list, show } = pages(frame, ctx, 3);
+    const [a, b, c] = list;
+    // T자 — 박마다 그 박에 긋는 줄로
+    const rule = tSquare(ruleLayer, { ctx, stops: [[0, 600], [a.beat(1), 770], [a.beat(2), 640], [a.beat(3), 930], [b.beat(0), 470], [b.beat(1), 410], [b.beat(2), 640], [b.beat(3), 940], [c.beat(0), 280], [c.beat(1), 400], [c.beat(2), 620], [c.beat(3), 250], [ctx.dur, 760]] });
+    const { mono, sans, display } = ctx.style.fonts;
+    const { ink, accentText } = ctx.style.colors;
+    const paints: ((t: number) => void)[] = [];
+
+    // 도면 1 — 드롭: 노광 한 번에 긴 판이 찍히고 위 치수가 102 를 잰다. 같은 길이를 아래 치수는 한 주소로 잰다
+    const bar: [number, number, number, number] = [160, 600, 1600, 80];
+    paints.push(
+      penLine(a.el, { ctx, shapes: [{ rect: bar }], at: 0, dur: 0.22 }),
+      dimension(a.el, { ctx, from: [160, 600], to: [1760, 600], offset: -110, at: 0, dur: a.beat(1), value: OG.models, unit: " 모델", size: 230 }),
+      dimension(a.el, { ctx, from: [160, 680], to: [1760, 680], offset: 90, at: a.beat(1), dur: 0.32, text: OG.host, size: 56 }),
+      hatch(a.el, { ctx, rect: bar, at: a.beat(2), dur: 0.32, pitch: 18 }),
+      balloon(a.el, { ctx, x: 300, y: 930, to: [300, 680], text: "A", kind: "datum", at: a.beat(3) }),
+    );
+    const drop = exposure(layer(a.el), { ctx, drop: 0 });
+
+    // 도면 2 — 하루 = 24 시간 자: 눈금이 서고, 00–10 구간이 해칭으로 잘리고, 빨간 색연필 개정 구름과 −90%
+    const H0 = 120;
+    const PX = 70;
+    paints.push(
+      penLine(b.el, { ctx, shapes: [{ rect: [H0, 470, 24 * PX, 70] }], at: b.beat(0), dur: 0.3 }),
+      penLine(b.el, { ctx, shapes: Array.from({ length: 25 }, (_, h) => ({ line: [H0 + h * PX, 540, H0 + h * PX, 540 - (h % 6 ? 22 : 44)] as [number, number, number, number] })), kind: "thin", at: b.beat(0) + 0.08, dur: 0.3, nib: false }),
+      hatch(b.el, { ctx, rect: [H0, 470, (OG.night.to - OG.night.from) * PX, 70], at: b.beat(1), dur: 0.3, outline: false }),
+      dimension(b.el, { ctx, from: [H0, 470], to: [H0 + OG.night.to * PX, 470], offset: -64, at: b.beat(1) + 0.06, dur: 0.3, text: `00:00–10:00 ${OG.night.tz}`, size: 44 }),
+      revisionCloud(b.el, { ctx, rect: [96, 330, 748, 236], at: b.beat(2), dur: 0.3, rev: "1" }),
+    );
+    [0, 6, 12, 18, 24].forEach((h) => {
+      const el = label(b.el, `left:${H0 + h * PX - 60}px;width:120px;text-align:center;top:592px;font:700 34px ${mono};color:${ink}`);
+      paints.push(lettering(el, { ctx, text: String(h).padStart(2, "0"), at: b.beat(0) + 0.15, dur: 0.1, guide: false }));
+    });
+    const off = label(b.el, `left:900px;top:640px;font:700 230px ${display};color:${accentText}`);
+    const ds = label(b.el, `left:910px;top:884px;font:700 30px ${mono};color:${ink}`);
+    const glm = label(b.el, `left:910px;top:934px;font:700 30px ${mono};color:${ink}`);
+    paints.push(
+      lettering(off, { ctx, text: OG.deepseek.off.replace("-", "−"), at: b.beat(2) + 0.12, dur: 0.16, guide: false }),
+      lettering(ds, { ctx, text: OG.deepseek.id, at: b.beat(2) + 0.2, dur: 0.2 }),
+      lettering(glm, { ctx, text: `${OG.glm.id}  ${OG.glm.off.replace("-", "−")}`, at: b.beat(3), dur: 0.22 }),
+    );
+
+    // 도면 3 — 가격이 길이: 정가 막대를 재고, 00–10 은 같은 자리 가상선 안에 1/10 만 해칭으로 찬다
+    const title = label(c.el, `left:100px;top:84px;font:700 44px ${mono};color:${ink}`);
+    paints.push(lettering(title, { ctx, text: `deepseek/${OG.deepseek.id}`, at: c.beat(0), dur: 0.24 }));
+    const rows: [string, string[], number][] = [
+      ["입력", OG.deepseek.input, 280],
+      ["출력", OG.deepseek.output, 620],
+    ];
+    rows.forEach(([name, [full, night], y], r) => {
+      const [p0, p1] = [Number(full.slice(1)), Number(night.slice(1))];
+      const w0 = p0 * PER;
+      const w1 = p1 * PER;
+      const ny = y + 120;
+      const head = label(c.el, `left:100px;top:${y - 8}px;font:700 56px ${sans};color:${ink}`);
+      const tod = label(c.el, `left:100px;top:${ny + 4}px;font:700 34px ${mono};color:${ink}`);
+      paints.push(
+        lettering(head, { ctx, text: name, at: c.beat(0), dur: 0.12 }),
+        penLine(c.el, { ctx, shapes: [{ rect: [300, y, w0, 40] }], at: c.beat(0), dur: 0.24 }),
+        dimension(c.el, { ctx, from: [300, y], to: [300 + w0, y], offset: -24, at: c.beat(0) + 0.06, dur: 0.3, value: p0, decimals: 2, prefix: "$", unit: "/M", size: 44 }),
+        lettering(tod, { ctx, text: "00–10", at: c.beat(1), dur: 0.12 }),
+        penLine(c.el, { ctx, shapes: [{ rect: [300, ny, w0, 40] }], kind: "phantom", at: c.beat(1), dur: 0.2, nib: false }),
+        hatch(c.el, { ctx, rect: [300, ny, w1, 40], at: c.beat(1) + 0.08, dur: 0.18, pitch: 10 }),
+        dimension(c.el, { ctx, from: [300, ny + 40], to: [300 + w1, ny + 40], offset: 24, at: c.beat(1) + 0.1, dur: 0.26, value: p1, decimals: 2, prefix: "$", unit: "/M", size: 44 }),
+        revisionCloud(c.el, { ctx, rect: [276, ny - 22, Math.max(380, w1 + 300), 150], at: c.beat(2) + r * 0.1, dur: 0.28, rev: "1" }),
+      );
+    });
+    const cut = label(c.el, `left:900px;top:250px;font:700 150px ${display};color:${accentText}`);
+    paints.push(lettering(cut, { ctx, text: OG.deepseek.off.replace("-", "−"), at: c.beat(3), dur: 0.14, guide: false }));
+
+    return (t: number) => {
+      show(t);
+      const s = drop(t);
+      applyStyle(frame, s.shake);
+      sheet(t);
+      rule(t);
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/blueprint/sample/style.json

@@ -0,0 +1,114 @@
+{
+  "name": "blueprint",
+  "label": "청사진 도면 — 정보가 제도되고 숫자는 치수로 잰다",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#1B4E7B",
+    "surface": "#205886",
+    "raised": "#28639A",
+    "line": "#3A70A1",
+    "ink": "#F1F7FB",
+    "inkSoft": "#CFE2F0",
+    "dim": "#A9C7DF",
+    "accent": "#FF8F80",
+    "accentSoft": "#5E4B6E",
+    "accentText": "#FFA597",
+    "onAccent": "#1B4E7B",
+    "success": "#F1F7FB",
+    "danger": "#FF8F80",
+    "warning": "#FFD789",
+    "grid": "#25598A",
+    "gridMajor": "#30679A"
+  },
+  "fonts": {
+    "sans": "\"Barlow Condensed\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Barlow Condensed\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"B612 Mono\", ui-monospace, \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Barlow Condensed",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource/barlow-condensed@5/files/barlow-condensed-latin-500-normal.woff2",
+        "weight": "500"
+      },
+      {
+        "family": "Barlow Condensed",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource/barlow-condensed@5/files/barlow-condensed-latin-600-normal.woff2",
+        "weight": "600"
+      },
+      {
+        "family": "Barlow Condensed",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource/barlow-condensed@5/files/barlow-condensed-latin-700-normal.woff2",
+        "weight": "700"
+      },
+      {
+        "family": "B612 Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource/b612-mono@5/files/b612-mono-latin-400-normal.woff2",
+        "weight": "400"
+      },
+      {
+        "family": "B612 Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource/b612-mono@5/files/b612-mono-latin-700-normal.woff2",
+        "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": 220,
+    "title": 96,
+    "body": 44,
+    "caption": 32,
+    "weightDisplay": 700,
+    "weightBody": 600,
+    "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": "inOutCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.3,
+      "slow": 0.6
+    }
+  },
+  "theme": {
+    "inks": [
+      "#1B4E7B 청사진 종이(프러시안 블루) — 바탕은 꼼짝 않는다",
+      "#F1F7FB 선과 글 — 빛을 못 받아 하얗게 남은 자리",
+      "#FF8F80 빨간 색연필 — 개정·검토 표시에만",
+      "grid · gridMajor 제도 모눈 — 옅게, 움직이지 않는다"
+    ],
+    "texture": "단색 청색 위 흰 선. 선 종류가 뜻이다 — 외형선(굵은 실선)·숨은선(파선)·중심선(일점쇄선)·가상선(이점쇄선)·치수선(가는 실선과 화살표). 단면은 45° 해칭. 그림자·그라데이션·종이결 없음",
+    "movement": "제도하는 순서대로 — 펜 끝이 선을 긋고, 보조선이 서고 치수선이 가운데서 양쪽으로 뻗어 수가 앉고, 절단선이 지나가며 단면이 해칭으로 차고, 품번 풍선이 붙는다. 드롭 한 번만 노광 섬광"
+  },
+  "notes": [
+    "청사진 색은 1925 미 해군 노퍽 공창 도면에서 잰 #1C5B7E·#275577 을 조금 짙게.",
+    "빨간 색연필은 개정 구름·Δ 표·강조 수 하나에만. 작은 글은 ink.",
+    "카메라 이동 없음 — 도면은 제도대에 붙어 있다. 구도는 마디마다 새 도면 칸으로 컷."
+  ]
+}