kasaframe 0.1.1 → 0.1.4

package/themes/lab-notebook/sample/index.html

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

package/themes/lab-notebook/sample/kf.json

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

@@ -0,0 +1,53 @@
+import { clamp, type SceneCtx } from "@kasaframe/core";
+import { gridPaper, ruleLine, type Traced } from "../../effects.ts";
+import { ellipsePts, type Pt } from "../../kit.ts";
+
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+/** 컷 경계 — 첫 컷은 0 부터(장면 머리의 못갖춘마디는 첫 컷에 넣는다), 나머지는 마디 첫 박 */
+export const cutsAt = (ctx: SceneCtx): number[] => [0, ...ctx.beats.bars.filter((b) => b > 0.6 && b < ctx.dur - 1e-6)];
+
+export function layer(parent: HTMLElement, css = ""): HTMLElement {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;inset:0;${css}`;
+  parent.append(el);
+  return el;
+}
+
+/** 쪽 하나 — 그 구간에서만 보인다(display 로 통째로 뺀다). 안의 그리기는 장면 시각을 받는다. 펜이 따라갈 획은 into 에 모은다 */
+export function page(parent: HTMLElement, from: number, to: number, build: (el: HTMLElement) => ((t: number) => void)[], into?: Traced[]): (t: number) => void {
+  const el = layer(parent);
+  const paints = build(el);
+  if (into) for (const p of paints) if ("strokes" in p) into.push(p as Traced);
+  return (t) => {
+    const on = t >= from && t < to;
+    el.style.display = on ? "" : "none";
+    if (on) for (const p of paints) p(t);
+  };
+}
+
+/** 쪽 넘기기 — 지난 쪽(빈 모눈 종이)이 at 에 왼쪽 위로 넘어가며 새 쪽이 드러난다 */
+export function turn(parent: HTMLElement, ctx: SceneCtx, at: number, dur = 0.3): (t: number) => void {
+  const el = layer(parent, "transform-origin:0 0;");
+  gridPaper(el, { ctx });
+  const edge = document.createElement("div");
+  edge.style.cssText = `position:absolute;top:0;right:0;width:24px;height:100%;background:linear-gradient(to right, transparent, rgba(30,30,40,0.18));`;
+  el.append(edge);
+  return (t) => {
+    const p = clamp((t - at) / dur);
+    el.style.display = p < 1 ? "" : "none";
+    if (p >= 1) return;
+    const e = p ** 1.6;
+    el.style.transform = `translate(${(-e * ctx.meta.width * 1.05).toFixed(1)}px, ${(-e * 80).toFixed(1)}px) rotate(${(-e * 8).toFixed(2)}deg)`;
+  };
+}
+
+/** 같음표(〃) — 손글씨 글꼴에 없어 두 짧은 획으로 긋는다. 「위 칸과 같다」 */
+export function ditto(parent: HTMLElement, ctx: SceneCtx, x: number, y: number, at: number): Traced {
+  const marks = [0, 1].map((k) => ruleLine(parent, { ctx, points: [[x + k * 18, y], [x + 8 + k * 18, y + 22]] as Pt[], at: at + k * 0.05, dur: 0.06, tone: "ink", width: 4, hand: true }));
+  return Object.assign((t: number) => marks.forEach((s) => s(t)), { strokes: marks.flatMap((m) => m.strokes) });
+}
+
+
+/** 빨간 동그라미 — 손 선으로 한 바퀴 남짓 */
+export const circle = (parent: HTMLElement, ctx: SceneCtx, cx: number, cy: number, rx: number, ry: number, at: number, dur = 0.22) =>
+  ruleLine(parent, { ctx, points: ellipsePts(cx, cy, rx, ry, 1.12, `c:${cx}:${cy}`), at, dur, tone: "accent", width: 5, hand: true });

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

@@ -0,0 +1,127 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { gridPaper, penTrack, penWrite, plotPoints, ruleLine, tapeOn, type Stroke, type Traced } from "../../effects.ts";
+import { areaCanvas, color, handPath, type Pt, strokeHand } from "../../kit.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, circle, cutsAt, layer, page, turn } from "../lib/note.ts";
+
+// 지연 = 측정값. 첫 마디: 첫 토큰 표 — 모델 셋과 ms 를 적고, 출력한 점 그래프를 붙이고, 18번 호출 합을 빨간 동그라미로.
+// 둘째 마디: 끝 카드 — 새 쪽에 OG 로고를 마커로 따라 그리고(끝 프레임까지 긋는다) opengateway.ai 를 적고 두 줄 밑줄
+const S = 0.72;
+const LX = (1920 - 1140 * S) / 2;
+const LY = 110;
+const P = (x: number, y: number): Pt => [LX + x * S, LY + y * S];
+
+// 로고 획 — logo.svg 의 도형을 굵은 마커 획으로(가운데 선 · 굵기)
+function rrect(x: number, y: number, w: number, h: number, r: number): Pt[] {
+  const out: Pt[] = [];
+  const arc = (cx: number, cy: number, a0: number) => {
+    for (let i = 0; i <= 6; i++) {
+      const a = a0 + (i / 6) * (Math.PI / 2);
+      out.push(P(cx + Math.cos(a) * r, cy + Math.sin(a) * r));
+    }
+  };
+  out.push(P(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);
+  return out;
+}
+const STROKES: { pts: Pt[]; w: number }[] = [
+  { pts: rrect(36, 36, 420, 578, 89), w: 72 },
+  { pts: [P(90, 325), P(331, 325)], w: 106 },
+  { pts: [P(684, 213), ...rrect(684, 36, 420, 578, 89).slice(22, 29), ...rrect(684, 36, 420, 578, 89).slice(1, 22), P(684, 436)], w: 72 },
+  { pts: [P(420, 325), P(830, 325)], w: 106 },
+];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = gridPaper(layer(root), { ctx });
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, bar2] = cutsAt(ctx);
+    const strokes: Traced[] = [];
+
+    const table = page(root, 0, bar2, (el) => [
+      penWrite(el, { ctx, text: "첫 토큰 (ms)", x: 200, y: 110, size: 104, at: 0.05, dur: 0.2 }),
+      penWrite(el, { ctx, text: "p.4", x: 1690, y: 64, size: 52, at: 0.03, dur: 0.1, tone: "pencil", font: "sans" }),
+      ...OG.ttft.flatMap(([id, ms], i) => [
+        penWrite(el, { ctx, text: id, x: 230, y: 300 + i * 110, size: 64, at: 0.22 + i * 0.2, dur: 0.16 }),
+        penWrite(el, { ctx, text: ms, x: 840, y: 296 + i * 110, size: 72, at: 0.36 + i * 0.2, dur: 0.08, tone: i === 0 ? "accent" : "ink" }),
+      ]),
+      ruleLine(el, { ctx, points: [[810, 290], [810, 620]], at: 0.2, dur: 0.2 }),
+      tapeOn(el, {
+        ctx,
+        x: 1160,
+        y: 240,
+        w: 600,
+        h: 520,
+        at: b(1) + 0.1,
+        rot: -2,
+        build(card) {
+          const head = areaCanvas(card, 0, 0, 600, 60);
+          head.g.fillStyle = color(ctx, "printInk");
+          head.g.font = `500 22px ${ctx.style.fonts.mono}`;
+          head.g.fillText("TTFT median  2026-10-08", 30, 42);
+          return plotPoints(card, { ctx, x: 90, y: 90, w: 440, h: 340, points: OG.ttft.map((r, i) => [i + 1, r[2]] as [number, number]), xMax: 4, yMax: 800, at: b(1) + 0.3, rate: 8, line: "line", labels: OG.ttft.map((r) => String(r[2])), ticks: { y: [[600, "600"], [700, "700"], [800, "800"]], x: [[1, "nano"], [2, "flash"], [3, "haiku"]] }, tone: "accent" });
+        },
+      }),
+      penWrite(el, { ctx, text: `OG ${OG.calls}`, x: 230, y: 720, size: 80, at: b(2) + 0.05, dur: 0.35, tone: "pencil" }),
+      circle(el, ctx, 760, 770, 170, 66, b(3)),
+      turn(el, ctx, -1e-6, 0.24),
+    ], strokes);
+
+    const card = page(root, bar2, ctx.dur, (el) => {
+      const all = STROKES.map((s) => ({ path: handPath(s.pts, { seed: `logo:${s.w}:${s.pts.length}`, wobble: 1.2, step: 8 }), w: s.w * S }));
+      const len = all.map((s) => s.path.length);
+      const total = len.reduce((a, v) => a + v, 0);
+      const { g, clear } = areaCanvas(el, LX - 60, LY - 60, 1140 * S + 120, 650 * S + 120);
+      const head: Pt[] = [P(833, 220), P(970, 325), P(833, 430)];
+      const from = bar2 + 0.25;
+      const to = ctx.dur - 0.2;
+      let start = from;
+      const logoStrokes: Stroke[] = all.map((s, i) => {
+        const dur = ((to - from) * len[i]) / total;
+        const st = { at: start, dur, path: s.path };
+        start += dur;
+        return st;
+      });
+      const marker = Object.assign((t: number) => {
+          clear();
+          if (t < from) return;
+          const p = Math.min(1, (t - from) / (to - from));
+          let left = p * total;
+          const ink = color(ctx, "ink");
+          all.forEach((s, i) => {
+            const q = Math.max(0, Math.min(1, left / len[i]));
+            left -= len[i];
+            strokeHand(g, s.path, q, { color: ink, width: s.w });
+          });
+          if (p >= 0.98) {
+            g.fillStyle = ink;
+            g.beginPath();
+            g.moveTo(...head[0]);
+            g.lineTo(...head[1]);
+            g.lineTo(...head[2]);
+            g.closePath();
+            g.fill();
+          }
+      }, { strokes: logoStrokes });
+      return [
+        marker,
+        penWrite(el, { ctx, text: OG.site, x: 700, y: 620, size: 128, at: b(5), dur: 0.5 }),
+        ruleLine(el, { ctx, points: [[680, 780], [1250, 772]], at: b(7), dur: 0.18, tone: "accent", width: 5, hand: true }),
+        ruleLine(el, { ctx, points: [[700, 800], [1230, 794]], at: b(7) + 0.16, dur: 0.18, tone: "accent", width: 5, hand: true }),
+        turn(el, ctx, bar2 - 1e-6, 0.24),
+      ];
+    }, strokes);
+    const pen = penTrack(layer(root), { ctx, from: strokes });
+
+    return (t: number) => {
+      paper(t);
+      table(t);
+      card(t);
+      pen(t);
+    };
+  },
+};

package/themes/lab-notebook/sample/scenes/gather.ts

@@ -0,0 +1,83 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { gridPaper, highlighter, penTrack, penWrite, ruleLine, tapeOn, type Traced } from "../../effects.ts";
+import { areaCanvas, color } from "../../kit.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, circle, cutsAt, layer } from "../lib/note.ts";
+
+// 공급처 = 시약 회사, 모델 = 시료. 첫 마디: 날짜·제목을 적고 회사 아홉을 박마다 셋씩 적는다, 넷째 박에 표 줄을 긋는다.
+// 둘째 마디: 회사 옆에 모델 수를 적고, 출력한 막대 그래프를 테이프로 붙인다 — 넷째 박에 OpenAI 41 을 형광펜·빨간 동그라미로
+const ROW = 76;
+const Y0 = 290;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = gridPaper(layer(root), { ctx });
+    const el = layer(root);
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, bar2] = cutsAt(ctx);
+    const paints: ((t: number) => void)[] = [
+      penWrite(el, { ctx, text: "2026-10-08", x: 200, y: 64, size: 52, at: 0, dur: 0.25, tone: "pencil", font: "sans" }),
+      penWrite(el, { ctx, text: "p.1", x: 1690, y: 64, size: 52, at: 0.12, dur: 0.12, tone: "pencil", font: "sans" }),
+      penWrite(el, { ctx, text: "공급처 · 모델 수", x: 200, y: 128, size: 104, at: 0.06, dur: 0.4 }),
+    ];
+    // 회사 아홉 — 박마다 셋, 한 줄씩 이어 쓴다
+    OG.providers.forEach(([name], i) => {
+      const g = Math.floor(i / 3);
+      paints.push(penWrite(el, { ctx, text: name, x: 236, y: Y0 + i * ROW, size: 64, at: b(g) + (i % 3) * 0.11, dur: 0.14 }));
+    });
+    // 표 줄 — 자를 대고
+    paints.push(ruleLine(el, { ctx, points: [[200, 270], [840, 270]], at: b(3), dur: 0.18 }));
+    paints.push(ruleLine(el, { ctx, points: [[520, 280], [520, Y0 + 9 * ROW]], at: b(3) + 0.12, dur: 0.2 }));
+    // 모델 수 — 둘째 마디에 박마다 셋
+    OG.providers.forEach(([, n], i) => {
+      const g = Math.floor(i / 3);
+      paints.push(penWrite(el, { ctx, text: String(n), x: 560, y: Y0 + i * ROW - 4, size: 72, at: b(4 + g) + (i % 3) * 0.1, dur: 0.1 }));
+    });
+    // 출력해서 붙인 막대 그래프 — 모델 수가 줄마다 자란다
+    paints.push(
+      tapeOn(el, {
+        ctx,
+        x: 920,
+        y: 280,
+        w: 840,
+        h: 640,
+        at: bar2,
+        rot: -1.4,
+        build(card) {
+          const { g, clear } = areaCanvas(card, 0, 0, 840, 640);
+          const ink = color(ctx, "printInk");
+          return (t) => {
+            clear();
+            g.fillStyle = ink;
+            g.font = `500 24px ${ctx.style.fonts.mono}`;
+            g.fillText("/v1/models  2026-10-08", 140, 52);
+            g.fillRect(200, 76, 2, 540);
+            OG.providers.forEach(([name, n], i) => {
+              const y = 92 + i * 58;
+              const p = Math.max(0, Math.min(1, (t - bar2 - 0.25 - i * 0.1) / 0.2));
+              g.fillStyle = ink;
+              g.textAlign = "right";
+              g.fillText(name, 186, y + 30);
+              g.textAlign = "left";
+              g.fillStyle = i === 0 ? color(ctx, "accent") : ink;
+              g.fillRect(204, y + 8, (560 * n * p) / 41, 30);
+              if (p >= 1) {
+                g.fillStyle = ink;
+                g.fillText(String(n), 214 + (560 * n) / 41, y + 32);
+              }
+            });
+          };
+        },
+      }),
+    );
+    paints.push(highlighter(el, { ctx, x: 226, y: Y0 + 4, w: 420, h: 62, at: b(7), dur: 0.16 }));
+    paints.push(circle(el, ctx, 598, Y0 + 38, 70, 48, b(7) + 0.12, 0.2));
+    const pen = penTrack(layer(root), { ctx, from: paints.filter((p): p is Traced => "strokes" in p) });
+    return (t: number) => {
+      paper(t);
+      for (const p of paints) p(t);
+      pen(t);
+    };
+  },
+};

package/themes/lab-notebook/sample/scenes/models.ts

@@ -0,0 +1,73 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { arrowNote, gridPaper, penTrack, penWrite, ruleLine, type Traced } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, circle, cutsAt, ditto, layer, page, turn } from "../lib/note.ts";
+
+// 한 주소 = 장치 하나. 쪽을 넘기며 마디가 바뀐다. 첫 마디: 새 쪽에 「장치」와 주소를 크게 적고 상자로 두르고, 시료(모델)가 들어가고 결과가 나오는 화살표.
+// 둘째 마디: 시행 표 — 박마다 한 줄씩 시료(모델 ID)를 적고, 장치 칸은 첫 줄만 /v1 이고 아래는 같음표(〃) — 같은 장치.
+// 셋째 마디: 두 형식 — OpenAI 엔드포인트 셋과 Anthropic /messages 를 적고, 두 화살표가 같은 /v1 로 모여 빨간 동그라미
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = gridPaper(layer(root), { ctx });
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, barB, barC] = cutsAt(ctx);
+    const strokes: Traced[] = [];
+
+    const a = page(root, 0, barB, (el) => [
+      penWrite(el, { ctx, text: "장치", x: 200, y: 128, size: 104, at: 0.12, dur: 0.18 }),
+      penWrite(el, { ctx, text: "p.2", x: 1690, y: 64, size: 52, at: 0.1, dur: 0.12, tone: "pencil", font: "sans" }),
+      penWrite(el, { ctx, text: OG.host, x: 300, y: 410, size: 128, at: b(1), dur: 0.55 }),
+      ruleLine(el, { ctx, points: [[250, 390], [1660, 384], [1666, 590], [256, 596], [250, 390]], at: b(2) + 0.1, dur: 0.3, tone: "ink", width: 5, hand: true }),
+      arrowNote(el, { ctx, from: [330, 800], to: [420, 610], text: "시료 (모델)", textAt: [230, 810], at: b(3), dur: 0.16, tone: "ink", size: 64 }),
+      arrowNote(el, { ctx, from: [1500, 800], to: [1420, 610], text: "결과", textAt: [1450, 810], at: b(3) + 0.12, dur: 0.16, tone: "accent", size: 64, bend: -0.25 }),
+      turn(el, ctx, -1e-6, 0.26),
+    ], strokes);
+
+    const stops = [b(4), b(5), b(6), b(7), (b(7) + b(8)) / 2];
+    const bb = page(root, barB, barC, (el) => {
+      const rows = OG.ids.flatMap((id, i) => {
+        const y = 330 + i * 112;
+        const at = stops[i];
+        return [
+          penWrite(el, { ctx, text: String(i + 1), x: 226, y, size: 72, at, dur: 0.06 }),
+          penWrite(el, { ctx, text: id, x: 330, y: y + 6, size: 64, at: at + 0.05, dur: 0.22 }),
+          i === 0 ? penWrite(el, { ctx, text: "/v1", x: 1440, y, size: 72, at: at + 0.25, dur: 0.08 }) : ditto(el, ctx, 1470, y + 22, at + 0.25),
+          ruleLine(el, { ctx, points: [[200, y + 96], [1700, y + 96]], at: at + 0.04, dur: 0.18, width: 2 }),
+        ];
+      });
+      return [
+        penWrite(el, { ctx, text: "No.", x: 210, y: 240, size: 56, at: barB + 0.02, dur: 0.08, tone: "pencil", font: "sans" }),
+        penWrite(el, { ctx, text: "시료", x: 330, y: 240, size: 56, at: barB + 0.08, dur: 0.08, tone: "pencil", font: "sans" }),
+        penWrite(el, { ctx, text: "장치", x: 1440, y: 240, size: 56, at: barB + 0.14, dur: 0.08, tone: "pencil", font: "sans" }),
+        ruleLine(el, { ctx, points: [[200, 316], [1700, 316]], at: barB + 0.05, dur: 0.2 }),
+        ruleLine(el, { ctx, points: [[300, 240], [300, 900]], at: barB + 0.1, dur: 0.2 }),
+        ruleLine(el, { ctx, points: [[1400, 240], [1400, 900]], at: barB + 0.15, dur: 0.2 }),
+        ...rows,
+        turn(el, ctx, barB - 1e-6, 0.26),
+      ];
+    }, strokes);
+
+    const c = page(root, barC, ctx.dur, (el) => [
+      penWrite(el, { ctx, text: "형식 2", x: 200, y: 128, size: 104, at: barC + 0.05, dur: 0.16 }),
+      penWrite(el, { ctx, text: "OpenAI", x: 240, y: 290, size: 96, at: b(8) + 0.05, dur: 0.16 }),
+      ...["/chat/completions", "/responses", "/images/generations"].map((e, i) => penWrite(el, { ctx, text: e, x: 270, y: 400 + i * 74, size: 64, at: b(8) + 0.2 + i * 0.1, dur: 0.12 })),
+      penWrite(el, { ctx, text: "Anthropic", x: 1140, y: 290, size: 96, at: b(9), dur: 0.16 }),
+      penWrite(el, { ctx, text: "/messages", x: 1170, y: 400, size: 64, at: b(9) + 0.18, dur: 0.12 }),
+      arrowNote(el, { ctx, from: [620, 640], to: [860, 820], at: b(10), dur: 0.18, tone: "ink", bend: 0.2 }),
+      arrowNote(el, { ctx, from: [1300, 500], to: [1080, 820], at: b(10) + 0.12, dur: 0.18, tone: "ink", bend: -0.2 }),
+      penWrite(el, { ctx, text: "/v1", x: 900, y: 806, size: 112, at: b(10) + 0.3, dur: 0.1, tone: "accent" }),
+      circle(el, ctx, 985, 870, 150, 80, b(11)),
+      turn(el, ctx, barC - 1e-6, 0.26),
+    ], strokes);
+    const pen = penTrack(layer(root), { ctx, from: strokes });
+
+    return (t: number) => {
+      paper(t);
+      a(t);
+      bb(t);
+      c(t);
+      pen(t);
+    };
+  },
+};

package/themes/lab-notebook/sample/scenes/price.ts

@@ -0,0 +1,89 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import type { DropBurstState } from "@kasaframe/motion";
+import { arrowNote, gridPaper, highlighter, penTrack, penWrite, plotPoints, resultStamp, ruleLine, strikeFix, tapeOn, type Traced } from "../../effects.ts";
+import { areaCanvas, color } from "../../kit.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cutsAt, layer, page, turn } from "../lib/note.ts";
+
+// 드롭 = 결과 도장 — 빨간 「102」가 쾅 찍히고 「모델 102 · 주소 1」을 적고 두 줄 밑줄.
+// 둘째 마디: 출력한 하루 값 그래프(입력 /M, 시간마다 점)를 테이프로 붙이고, 00–10 시 구간에 형광펜과 빨간 화살표 -90%.
+// 셋째 마디: 값 표 — 정가에 두 줄을 긋고 빨간 펜으로 밤값을 고쳐 쓴다(지우지 않는다)
+const PRICE = (h: number) => (h < OG.night.to ? 0.03 : 0.3);
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = gridPaper(layer(root), { ctx });
+    const content = layer(root);
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, bar2, bar3] = cutsAt(ctx);
+    let stamp: ((t: number) => DropBurstState) | null = null;
+    const strokes: Traced[] = [];
+
+    const one = page(content, 0, bar2, (el) => {
+      stamp = resultStamp(el, { ctx, drop: 0, x: 960, y: 430, text: String(OG.models), size: 280 });
+      return [
+        penWrite(el, { ctx, text: "p.3", x: 1690, y: 64, size: 52, at: 0.02, dur: 0.1, tone: "pencil", font: "sans" }),
+        penWrite(el, { ctx, text: "모델 102 · 주소 1", x: 560, y: 720, size: 104, at: b(1), dur: 0.4 }),
+        ruleLine(el, { ctx, points: [[540, 860], [1380, 852]], at: b(2) + 0.05, dur: 0.16, tone: "ink", width: 5, hand: true }),
+        ruleLine(el, { ctx, points: [[560, 880], [1360, 874]], at: b(2) + 0.18, dur: 0.16, tone: "ink", width: 5, hand: true }),
+        penWrite(el, { ctx, text: OG.host, x: 600, y: 920, size: 64, at: b(3), dur: 0.3, tone: "pencil" }),
+      ];
+    }, strokes);
+
+    const day = page(content, bar2, bar3, (el) => {
+      const px = 80;
+      const py = 100;
+      const pw = 960;
+      const ph = 400;
+      const pts = Array.from({ length: 25 }, (_, h): [number, number] => [h, PRICE(Math.min(23, h))]);
+      return [
+        penWrite(el, { ctx, text: "하루 값 · KST", x: 200, y: 92, size: 96, at: bar2 + 0.05, dur: 0.22 }),
+        tapeOn(el, {
+          ctx,
+          x: 300,
+          y: 250,
+          w: 1120,
+          h: 600,
+          at: bar2 + 0.08,
+          rot: 1.2,
+          build(card) {
+            const head = areaCanvas(card, 0, 0, 1120, 60);
+            head.g.fillStyle = color(ctx, "printInk");
+            head.g.font = `500 24px ${ctx.style.fonts.mono}`;
+            head.g.fillText(`${OG.deepseek.id}  input $/M`, 40, 44);
+            return plotPoints(card, { ctx, x: px, y: py, w: pw, h: ph, points: pts, xMax: 24, yMax: 0.33, at: bar2 + 0.3, rate: 50, line: "step", ticks: { x: [[0, "00"], [6, "06"], [10, "10"], [12, "12"], [18, "18"], [24, "24"]], y: [[0.03, "0.03"], [0.3, "0.30"]] } });
+          },
+        }),
+        highlighter(el, { ctx, x: 300 + px + 4, y: 250 + py + ph - 60, w: (pw * 10) / 24, h: 50, at: b(6), dur: 0.22 }),
+        arrowNote(el, { ctx, from: [1560, 520], to: [300 + px + (pw * 10) / 24 + 30, 250 + py + ph - 40], text: OG.deepseek.off, textAt: [1480, 420], at: b(7), dur: 0.22, size: 112 }),
+        penWrite(el, { ctx, text: "00:00 ~ 10:00", x: 330, y: 890, size: 72, at: b(5) + 0.1, dur: 0.3, tone: "accent" }),
+        turn(el, ctx, bar2 - 1e-6, 0.24),
+      ];
+    }, strokes);
+
+    const money = (v: number) => `$${v.toFixed(2)}`;
+    const shop = page(content, bar3, ctx.dur, (el) => [
+      penWrite(el, { ctx, text: OG.deepseek.id, x: 200, y: 110, size: 88, at: bar3 + 0.05, dur: 0.35 }),
+      penWrite(el, { ctx, text: "입력", x: 240, y: 300, size: 96, at: bar3 + 0.12, dur: 0.1, font: "sans" }),
+      penWrite(el, { ctx, text: money(0.3), x: 520, y: 296, size: 104, at: bar3 + 0.22, dur: 0.16 }),
+      penWrite(el, { ctx, text: "출력", x: 240, y: 480, size: 96, at: bar3 + 0.3, dur: 0.1, font: "sans" }),
+      penWrite(el, { ctx, text: money(1.2), x: 520, y: 476, size: 104, at: bar3 + 0.38, dur: 0.16 }),
+      strikeFix(el, { ctx, x: 520, y: 362, w: 230, at: b(9), fix: money(0.03), fixX: 840, fixY: 290, size: 112 }),
+      strikeFix(el, { ctx, x: 520, y: 542, w: 230, at: b(10), fix: money(0.12), fixX: 840, fixY: 470, size: 112 }),
+      penWrite(el, { ctx, text: `${OG.glm.id}  ${OG.glm.off}`, x: 240, y: 700, size: 72, at: b(11), dur: 0.3, tone: "pencil" }),
+      turn(el, ctx, bar3 - 1e-6, 0.24),
+    ], strokes);
+    const pen = penTrack(layer(root), { ctx, from: strokes });
+
+    return (t: number) => {
+      paper(t);
+      const s = stamp?.(t);
+      if (s) applyStyle(content, s.shake);
+      one(t);
+      day(t);
+      shop(t);
+      pen(t);
+    };
+  },
+};

package/themes/lab-notebook/sample/style.json

@@ -0,0 +1,109 @@
+{
+  "name": "lab-notebook",
+  "label": "실험 노트 — 요청 한 번이 시행 한 줄",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F4F0E5",
+    "surface": "#FFFFFF",
+    "raised": "#E6DFCD",
+    "line": "#A9C3DB",
+    "ink": "#1E3270",
+    "inkSoft": "#34467E",
+    "dim": "#5B6070",
+    "accent": "#C81E2B",
+    "accentSoft": "#F2C4C4",
+    "accentText": "#B3121F",
+    "onAccent": "#FFFFFF",
+    "success": "#2F7D4A",
+    "danger": "#C81E2B",
+    "warning": "#A86A12",
+    "grid": "#D3E1EE",
+    "gridBold": "#B4CBE0",
+    "margin": "#E3A0A0",
+    "pencil": "#5B6070",
+    "tape": "#E3D3A4",
+    "highlight": "#FFE45C",
+    "print": "#FFFFFF",
+    "printInk": "#222222"
+  },
+  "fonts": {
+    "sans": "Gaegu, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Nanum Pen Script\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Courier Prime\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Nanum Pen Script",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/nanumpenscript/NanumPenScript-Regular.ttf",
+        "weight": "100 900"
+      },
+      {
+        "family": "Gaegu",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/gaegu/Gaegu-Bold.ttf",
+        "weight": "100 900"
+      },
+      {
+        "family": "Courier Prime",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/courierprime/CourierPrime-Regular.ttf",
+        "weight": "100 900"
+      },
+      {
+        "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": 104,
+    "body": 48,
+    "caption": 36,
+    "weightDisplay": 400,
+    "weightBody": 400,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 2,
+    "md": 3,
+    "lg": 4,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "0 2px 0 #E6DFCD, 6px 10px 18px rgba(30,30,40,0.16)",
+    "lift": "0 2px 0 #E6DFCD, 10px 16px 26px rgba(30,30,40,0.2)"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "outCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.25,
+      "slow": 0.5
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F4F0E5 노트 종이 · #D3E1EE 모눈(5mm) · #E3A0A0 여백 줄",
+      "#1E3270 파란 볼펜(적는 글) · #5B6070 연필(자 대고 그은 선·메모) · #C81E2B 빨간 펜(고친 값·결과·동그라미)",
+      "#FFFFFF 출력물 · #E3D3A4 마스킹 테이프 · #FFE45C 형광펜"
+    ],
+    "texture": "모눈 종이 위 손글씨(나눔손글씨 펜), 붙인 출력물은 흰 종이에 고정폭 글(Courier Prime)과 얇은 그림자, 모서리에 반투명 테이프. 틀린 값은 지우지 않고 두 줄 긋기",
+    "movement": "글은 펜 끝을 따라 왼쪽부터 드러나고(초당 18자 안팎), 선은 자를 대고 긋거나 손으로 돌린다. 출력물은 위에서 내려와 놓이고 테이프가 차례로 붙는다. 드롭은 빨간 도장 한 번"
+  },
+  "notes": [
+    "요청 한 번 = 시행 한 줄(No.), 모델 = 시료, 한 주소 = 장치 하나 — 아래 줄은 같음표로 「같은 장치」.",
+    "손글씨는 Nanum Pen Script·Gaegu(OFL), 출력물은 Courier Prime(OFL), 한글 대체는 Pretendard.",
+    "카메라 없음 — 노트는 책상에 펼쳐져 있다. 쪽을 넘기면 새 구도."
+  ]
+}