kasaframe 0.1.1 → 0.1.4

package/themes/ink-wash/sample/index.html

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

package/themes/ink-wash/sample/kf.json

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

@@ -0,0 +1,35 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { hanji } from "../../effects.ts";
+
+// 견본 장면들이 같이 쓰는 작은 도구 — 한지 바탕, 장(마디) 단위 컷, 장면 안 박
+
+export type Paint = (t: number) => void;
+export type Pt = [number, number];
+
+export function layer(parent: HTMLElement, css = ""): HTMLDivElement {
+  const d = document.createElement("div");
+  d.style.cssText = `position:absolute;inset:0;pointer-events:none;${css}`;
+  parent.append(d);
+  return d;
+}
+
+/** 장면 안 박(장면 시작 = 0) — 장면 끝 뒤 박은 거른다 */
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-3 && b < ctx.dur - 0.05);
+
+/** 한지 바탕(서 있다)과 그 위 먹 층 */
+export function paper(root: HTMLElement, ctx: SceneCtx): { art: HTMLElement; paint: Paint } {
+  const bg = hanji(layer(root), { ctx, seed: ctx.id });
+  return { art: layer(root), paint: bg };
+}
+
+/** 종이 한 장 — from 에서 until 앞까지만. 컷은 display:none, 숨은 장은 칠하지 않는다 */
+export function sheet(root: HTMLElement, from: number, until: number, build: (el: HTMLElement) => Paint[]): Paint {
+  const el = layer(root);
+  el.style.display = "none";
+  const paints = build(el);
+  return (t) => {
+    const on = t >= from && t < until;
+    el.style.display = on ? "block" : "none";
+    if (on) for (const p of paints) p(t);
+  };
+}

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

@@ -0,0 +1,72 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { brushStroke, inkBloom, inkText, sealStamp, soak } from "../../effects.ts";
+import svg from "../assets/og/logo.svg?raw";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, paper, sheet, type Paint } from "../lib/ink.ts";
+
+// 첫 토큰 실측 세 획(획 길이 = ms) → 로고가 먹으로 스민다 → 마지막 장엔 로고 낙관과 세로쓰기 주소
+function logo(el: HTMLElement, x: number, y: number, w: number, ink: string): HTMLDivElement {
+  const d = document.createElement("div");
+  d.style.cssText = `position:absolute;left:${x - w / 2}px;top:${y}px;width:${w}px;color:${ink}`;
+  d.innerHTML = svg.replace(/ width="\d+" height="\d+"/, ' width="100%" style="display:block"');
+  el.append(d);
+  return d;
+}
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const sc = paper(root, ctx);
+    const art = sc.art;
+    const ink = ctx.style.colors.ink;
+
+    const max = Math.max(...OG.ttft.map(([, , ms]) => ms));
+    const ttft = sheet(art, 0, B(4), (el) => {
+      const out: Paint[] = [];
+      OG.ttft.forEach(([id, label, ms], k) => {
+        const y = 260 + k * 230;
+        const len = 1080 * (ms / max);
+        out.push(inkText(el, { ctx, text: id, x: 620, y, size: 48, anchor: "right", at: B(k), dur: 0.4, seed: `t${k}` }));
+        out.push(brushStroke(el, { ctx, points: [[680, y + 6], [680 + len * 0.5, y - 4], [680 + len, y + 4]], width: 64, at: B(k), dur: 0.36, dry: 0.75, density: 0.75, seed: `s${k}` }));
+        out.push(inkText(el, { ctx, text: label, x: 680 + len, y: y - 86, size: 92, font: "display", anchor: "right", at: B(k) + 0.2, dur: 0.4, seed: `l${k}` }));
+      });
+      out.push(inkBloom(el, { ctx, x: 960, y: 930, r: 190, at: B(3) - 0.03, grow: 0.5, creep: 0.2, density: 0.3, stretch: [2.4, 0.6], seed: "cost" }));
+      out.push(inkText(el, { ctx, text: OG.calls, x: 960, y: 930, size: 58, at: B(3), dur: 0.45, seed: "cost" }));
+      out.push(brushStroke(el, { ctx, points: [[700, 990], [960, 982], [1220, 992]], width: 26, at: B(3) + 0.16, dur: 0.3, dry: 0.7, density: 0.8, seed: "cost-u" }));
+      return out;
+    });
+
+    const card = sheet(art, B(4), B(8), (el) => {
+      const wash = inkBloom(el, { ctx, x: 960, y: 450, r: 400, at: B(4), grow: 0.5, creep: 0.1, density: 0.2, stretch: [1.4, 0.8], seed: "logo-wash" });
+      const mark = logo(el, 960, 290, 560, ink);
+      const out: Paint[] = [
+        wash,
+        (t) => applyStyle(mark, soak(t, { at: B(4) + 0.08, dur: 0.5, blur: 14 })),
+        inkText(el, { ctx, text: OG.site, x: 960, y: 800, size: 140, font: "display", at: B(5), dur: 0.5, seed: "site" }),
+        inkText(el, { ctx, text: OG.url, x: 960, y: 930, size: 44, at: B(6), dur: 0.45, seed: "url" }),
+        brushStroke(el, { ctx, points: [[620, 872], [960, 862], [1300, 870]], width: 22, at: B(7), dur: 0.26, dry: 0.7, density: 0.7, seed: "u" }),
+      ];
+      return out;
+    });
+
+    // 마지막 장 — 왼쪽 로고, 오른쪽 세로쓰기 주소와 로고 낙관(그림에 이름을 찍듯)
+    const signed = sheet(art, B(8), ctx.dur + 1, (el) => {
+      const wash = inkBloom(el, { ctx, x: 720, y: 520, r: 330, at: B(8), grow: 0.4, creep: 0.12, density: 0.22, seed: "end-wash" });
+      const mark = logo(el, 720, 360, 620, ink);
+      return [
+        wash,
+        (t) => applyStyle(mark, soak(t, { at: B(8) + 0.05, dur: 0.4, blur: 12 })),
+        inkText(el, { ctx, text: OG.site, x: 1330, y: 470, size: 92, vertical: true, at: B(8) + 0.12, dur: 0.45, seed: "v-site" }),
+        sealStamp(el, { ctx, svg, x: 1560, y: 820, size: 200, at: B(9), kind: "baek", seed: "s-logo" }),
+      ];
+    });
+
+    return (t: number) => {
+      sc.paint(t);
+      ttft(t);
+      card(t);
+      signed(t);
+    };
+  },
+};

package/themes/ink-wash/sample/scenes/gather.ts

@@ -0,0 +1,53 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { inkBloom, inkText, mountain } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, paper, sheet, type Paint } from "../lib/ink.ts";
+
+// 흩어진 먹점 아홉(공급자마다 따로 떨어진 먹) → 모델 수만큼 높은 봉우리 아홉(진하기는 무게)
+const SPOT: [number, number][] = [
+  [1480, 300], [760, 230], [1150, 640], [330, 520], [1650, 820], [620, 820], [240, 220], [1000, 380], [1380, 940],
+];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? 0.29 + i * 0.353;
+    const sc = paper(root, ctx);
+    const art = sc.art;
+    const drops = [0, 0.06, B(0), B(0) + 0.17, B(1), B(1) + 0.17, B(2), B(2) + 0.17, B(3)];
+
+    const scattered = sheet(art, 0, B(4), (el) => {
+      const out: Paint[] = [];
+      OG.providers.forEach(([name, n], i) => {
+        const [x, y] = SPOT[i];
+        out.push(inkBloom(el, { ctx, x, y, r: 55 + Math.sqrt(n) * 22, at: drops[i], grow: i < 2 ? 0.25 : 0.4, creep: 0.14, density: 0.45, seed: `p${i}` }));
+        out.push(inkText(el, { ctx, text: name, x, y, size: 62, at: drops[i] + 0.08, dur: 0.45, seed: `pn${i}` }));
+      });
+      return out;
+    });
+
+    // 봉우리 높이 = 모델 수, 오른쪽이 가장 많다. 작은 공급자일수록 묽은 먹(멀리)
+    const base = 900;
+    const unit = 16;
+    const peakAt = [B(4), B(5), B(5) + 0.12, B(6), B(6) + 0.1, B(6) + 0.2, B(7), B(7) + 0.1, B(7) + 0.2];
+    const dens = [0.95, 0.75, 0.72, 0.55, 0.52, 0.5, 0.36, 0.34, 0.32];
+    const peaks = sheet(art, B(4), ctx.dur, (el) => {
+      // 봉우리들이 서는 땅 — 장이 바뀌자마자 넓은 담묵 띠가 먼저 스민다
+      const out: Paint[] = [inkBloom(el, { ctx, x: 1000, y: base + 14, r: 420, at: B(4), grow: 0.35, creep: 0.1, density: 0.22, stretch: [1.55, 0.2], seed: "ground" })];
+      OG.providers.forEach(([name, n], i) => {
+        const x = 1580 - i * 150;
+        const h = n * unit;
+        out.push(mountain(el, { ctx, x, base, h, w: 90 + n * 5, at: peakAt[i], dur: 0.5, density: dens[i], seed: `m${i}` }));
+        out.push(inkText(el, { ctx, text: String(n), x, y: base - h - (i ? 52 : 80), size: i ? 96 : 150, font: "display", at: peakAt[i] + 0.15, dur: 0.4, seed: `mc${i}` }));
+        out.push(inkText(el, { ctx, text: name, x, y: base + 62, size: 36, at: peakAt[i] + 0.1, dur: 0.4, seed: `mn${i}` }));
+      });
+      return out;
+    });
+
+    return (t: number) => {
+      sc.paint(t);
+      scattered(t);
+      peaks(t);
+    };
+  },
+};

package/themes/ink-wash/sample/scenes/models.ts

@@ -0,0 +1,58 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { brushStroke, inkBloom, inkDrop, inkText } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, paper, sheet, type Paint } from "../lib/ink.ts";
+
+// 붓 한 획에 주소가 스민다 → 모델 ID 마다 붓 한 획이 같은 먹물 웅덩이(주소)로 → 엔드포인트 넷 세로쓰기 → 드롭 직전 먹 한 방울이 떨어진다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const sc = paper(root, ctx);
+    const art = sc.art;
+
+    const address = sheet(art, 0, B(4), (el) => [
+      brushStroke(el, { ctx, points: [[1820, 420], [1300, 400], [700, 430], [140, 410]], width: 150, at: 0, dur: 0.42, dry: 0.55, density: 0.18, seed: "addr" }),
+      inkText(el, { ctx, text: OG.url, x: 960, y: 415, size: 76, at: 0.12, dur: 0.5, seed: "url" }),
+      inkBloom(el, { ctx, x: 1340, y: 720, r: 240, at: B(1) - 0.03, grow: 0.4, creep: 0.14, density: 0.45, seed: "pool0" }),
+      inkText(el, { ctx, text: "/v1", x: 1340, y: 720, size: 300, font: "display", at: B(1) + 0.04, dur: 0.5, seed: "v1" }),
+      brushStroke(el, { ctx, points: [[1500, 480], [1440, 540], [1360, 600]], width: 44, at: B(2), dur: 0.34, dry: 0.6, density: 0.85, seed: "link" }),
+      inkBloom(el, { ctx, x: 520, y: 760, r: 200, at: B(3) - 0.03, grow: 0.45, density: 0.16, stretch: [2, 0.55], seed: "fmt-wash" }),
+      inkText(el, { ctx, text: "OpenAI 형식 · Anthropic 형식", x: 160, y: 760, size: 58, anchor: "left", at: B(3), dur: 0.5, seed: "fmt" }),
+    ]);
+
+    // 웅덩이(주소)는 왼쪽 — 모델 ID 마다 오른쪽에서 붓 한 획이 웅덩이로 들어간다
+    const rows = [190, 420, 680, 900];
+    const calls = sheet(art, B(4), B(8), (el) => {
+      const out: Paint[] = [
+        inkBloom(el, { ctx, x: 400, y: 560, r: 240, at: B(4), grow: 0.3, creep: 0.08, density: 0.8, seed: "well" }),
+        inkText(el, { ctx, text: OG.host, x: 400, y: 880, size: 50, at: B(4) + 0.15, dur: 0.5, seed: "host" }),
+      ];
+      rows.forEach((y, k) => {
+        out.push(brushStroke(el, { ctx, points: [[1820, y + 46], [1300, y + 60], [900, (y + 60 + 560) / 2], [560, 560]], width: 38, at: B(4 + k), dur: 0.34, dry: 0.65, density: 0.85, seed: `call${k}` }));
+        out.push(inkText(el, { ctx, text: OG.ids[k], x: 1820, y, size: 52, anchor: "right", at: B(4 + k) + 0.06, dur: 0.45, seed: `id${k}` }));
+      });
+      return out;
+    });
+
+    const cols = [1640, 1340, 1040, 740];
+    const endpoints = sheet(art, B(8), ctx.dur, (el) => {
+      const out: Paint[] = [];
+      cols.forEach((x, k) => {
+        // 획은 글줄 오른쪽에 — 먹 위에 글을 얹으면 대비가 모자라다
+        out.push(brushStroke(el, { ctx, points: [[x + 80, 70], [x + 88, 520], [x + 76, 1000]], width: 110, at: B(8 + k), dur: 0.38, dry: 0.7, density: 0.4, seed: `col${k}` }));
+        out.push(inkText(el, { ctx, text: OG.endpoints[k], x: x - 30, y: 540, size: 66, vertical: true, at: B(8 + k) + 0.08, dur: 0.45, seed: `ep${k}` }));
+      });
+      // 드롭 직전 — 먹 한 방울이 위에서 떨어진다(닿는 순간은 다음 장면 첫 화면)
+      out.push(inkDrop(el, { ctx, drop: 0, origin: [960, 500], seed: "pre-drop" }));
+      return out;
+    });
+
+    return (t: number) => {
+      sc.paint(t);
+      address(t);
+      calls(t);
+      endpoints(t);
+    };
+  },
+};

package/themes/ink-wash/sample/scenes/price.ts

@@ -0,0 +1,85 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { brushStroke, inkBloom, inkDrop, inkText, sealStamp } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, layer, paper, sheet, type Paint, type Pt } from "../lib/ink.ts";
+
+// 드롭 — 먹 방울이 떨어져 크게 퍼지고 102 가 스민다, 낙관 → 원상 시계에 00–10시 진한 획과 −90% 낙관 → 정가를 붓으로 긋고 밤 값은 묽은 먹으로
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const sc = paper(root, ctx);
+    const frame = layer(sc.art);
+    // 먹 방울 층이 맨 아래 — 방울이 먼저 놓이고 숫자가 그 위에 스민다
+    const dropLayer = layer(frame);
+    const art = layer(frame);
+    const drop = ctx.beats.drop(0);
+    const hero = layer(art);
+
+    const splash = sheet(art, 0, B(4), (el) => [
+      inkText(hero, { ctx, text: String(OG.models), x: 960, y: 480, size: 400, font: "display", at: drop + 0.04, dur: 0.45, seed: "102" }),
+      inkBloom(el, { ctx, x: 1560, y: 290, r: 150, at: B(1) - 0.03, grow: 0.4, density: 0.2, seed: "model-wash" }),
+      sealStamp(el, { ctx, text: "모델", x: 1560, y: 290, size: 170, at: B(1), kind: "baek", seed: "s-model" }),
+      inkText(el, { ctx, text: OG.url, x: 960, y: 900, size: 62, at: B(2), dur: 0.5, seed: "url" }),
+      brushStroke(el, { ctx, points: [[560, 760], [900, 742], [1360, 756]], width: 34, at: B(3), dur: 0.3, dry: 0.6, seed: "under" }),
+    ]);
+
+    // 원상 시계 — 붓 한 번에 하루를 긋고, 00–10시는 진한 먹으로 한 번 더
+    const cx = 640;
+    const cy = 540;
+    const R = 360;
+    const arc = (h0: number, h1: number, r: number): Pt[] => {
+      const pts: Pt[] = [];
+      for (let h = h0; h <= h1 + 1e-6; h += 0.5) {
+        const a = (h / 24) * Math.PI * 2 - Math.PI / 2;
+        pts.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]);
+      }
+      return pts;
+    };
+    const clock = sheet(art, B(4), B(8), (el) => {
+      const out: Paint[] = [
+        brushStroke(el, { ctx, points: arc(-0.6, 23.2, R), width: 30, at: B(4), dur: 0.5, dry: 0.45, density: 0.6, seed: "enso" }),
+        brushStroke(el, { ctx, points: arc(OG.night.from, OG.night.to, R), width: 84, at: B(5), dur: 0.32, dry: 0.5, density: 0.95, seed: "night" }),
+        inkBloom(el, { ctx, x: 1420, y: 330, r: 220, at: B(6) - 0.03, grow: 0.5, creep: 0.2, density: 0.28, stretch: [1.8, 0.6], seed: "kst-wash" }),
+        inkText(el, { ctx, text: `KST ${String(OG.night.from).padStart(2, "0")}:00–${OG.night.to}:00`, x: 1180, y: 330, size: 70, anchor: "left", at: B(6), dur: 0.5, seed: "kst" }),
+        inkBloom(el, { ctx, x: 1400, y: 640, r: 280, at: B(7) - 0.18, grow: 0.5, creep: 0.16, density: 0.26, seed: "seal-wash" }),
+        sealStamp(el, { ctx, text: OG.deepseek.off.replace("-", "−"), x: 1400, y: 640, size: 280, at: B(7), kind: "baek", font: "display", seed: "s-off" }),
+        inkText(el, { ctx, text: OG.deepseek.id, x: 1400, y: 880, size: 44, at: B(7) + 0.12, dur: 0.5, seed: "dsid" }),
+      ];
+      for (const h of [0, 6, 12, 18]) {
+        const a = (h / 24) * Math.PI * 2 - Math.PI / 2;
+        out.push(inkText(el, { ctx, text: String(h).padStart(2, "0"), x: cx + Math.cos(a) * (R - 110), y: cy + Math.sin(a) * (R - 110), size: 54, at: B(4) + 0.2 + h / 60, dur: 0.4, seed: `h${h}` }));
+      }
+      return out;
+    });
+
+    // 정가는 진한 먹, 밤 값은 중묵 — 값이 내리면 먹이 묽어진다
+    const [i0, i1] = OG.deepseek.input;
+    const [o0, o1] = OG.deepseek.output;
+    const prices = sheet(art, B(8), ctx.dur, (el) => [
+      inkText(el, { ctx, text: OG.deepseek.id, x: 960, y: 140, size: 60, at: B(8), dur: 0.45, seed: "pid" }),
+      inkText(el, { ctx, text: "정가", x: 300, y: 300, size: 54, anchor: "left", at: B(8) + 0.05, dur: 0.4, seed: "l0" }),
+      inkText(el, { ctx, text: `입력 ${i0} /M`, x: 300, y: 450, size: 92, anchor: "left", at: B(8) + 0.1, dur: 0.45, seed: "i0" }),
+      inkText(el, { ctx, text: `출력 ${o0} /M`, x: 300, y: 610, size: 92, anchor: "left", at: B(8) + 0.18, dur: 0.45, seed: "o0" }),
+      brushStroke(el, { ctx, points: [[270, 470], [600, 440], [900, 452]], width: 30, at: B(9), dur: 0.3, dry: 0.7, seed: "x0" }),
+      brushStroke(el, { ctx, points: [[270, 632], [600, 600], [900, 612]], width: 30, at: B(9) + 0.14, dur: 0.3, dry: 0.7, seed: "x1" }),
+      inkBloom(el, { ctx, x: 1420, y: 530, r: 300, at: B(10) - 0.08, grow: 0.5, creep: 0.16, density: 0.26, stretch: [1.3, 0.9], seed: "night-wash" }),
+      inkText(el, { ctx, text: "밤", x: 1180, y: 300, size: 54, anchor: "left", at: B(10), dur: 0.4, seed: "l1" }),
+      inkText(el, { ctx, text: i1, x: 1420, y: 450, size: 150, font: "display", ink: "inkSoft", at: B(10) + 0.05, dur: 0.45, seed: "i1" }),
+      inkText(el, { ctx, text: o1, x: 1420, y: 620, size: 150, font: "display", ink: "inkSoft", at: B(10) + 0.13, dur: 0.45, seed: "o1" }),
+      inkText(el, { ctx, text: `${OG.glm.id} · 밤 ${OG.glm.off.replace("-", "−")}`, x: 960, y: 900, size: 54, at: B(11), dur: 0.45, seed: "glm" }),
+    ]);
+
+    const ink = inkDrop(dropLayer, { ctx, drop: 0, origin: [960, 500], r: 430, density: 0.4, until: B(4) });
+    return (t: number) => {
+      sc.paint(t);
+      const s = ink(t);
+      hero.style.display = t < B(4) ? "block" : "none";
+      splash(t);
+      clock(t);
+      prices(t);
+      applyStyle(frame, s.shake);
+      applyStyle(hero, s.punch);
+    };
+  },
+};

package/themes/ink-wash/sample/style.json

@@ -0,0 +1,108 @@
+{
+  "name": "ink-wash",
+  "label": "수묵 — 정보가 화선지에 먹으로 스며 나타난다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#EDE6D6",
+    "surface": "#F4EFE3",
+    "raised": "#E2D9C5",
+    "line": "#8A8478",
+    "ink": "#1B1A18",
+    "inkSoft": "#4A4741",
+    "dim": "#5F594F",
+    "accent": "#B8332B",
+    "accentSoft": "#E6B3A6",
+    "accentText": "#A12A23",
+    "onAccent": "#F4EFE3",
+    "success": "#1B1A18",
+    "danger": "#B8332B",
+    "warning": "#B8332B",
+    "paper": "#EDE6D6",
+    "ink2": "#4A4741",
+    "ink3": "#8A8478",
+    "ink4": "#BFB7A8",
+    "seal": "#B8332B"
+  },
+  "fonts": {
+    "sans": "\"Song Myung\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", serif",
+    "display": "\"Nanum Brush Script\", \"Song Myung\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", cursive",
+    "mono": "\"Nanum Gothic Coding\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Nanum Brush Script",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/nanumbrushscript/NanumBrushScript-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Song Myung",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/songmyung/SongMyung-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Nanum Gothic Coding",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/nanumgothiccoding/NanumGothicCoding-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": 48,
+    "caption": 34,
+    "weightDisplay": 400,
+    "weightBody": 400,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 2,
+    "md": 4,
+    "lg": 8,
+    "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": "outCubic",
+    "durations": {
+      "fast": 0.2,
+      "base": 0.45,
+      "slow": 0.9
+    }
+  },
+  "theme": {
+    "inks": [
+      "#EDE6D6 화선지 — 화면 반 이상은 늘 빈 종이(여백)",
+      "#1B1A18 → #4A4741 → #8A8478 → #BFB7A8 먹 다섯 단(墨分五色) — 색이 아니라 물의 양",
+      "#B8332B 인주 낙관 — 결정적인 하나에만, 작게"
+    ],
+    "texture": "한지 섬유가 비치는 종이, 먹은 스며 가장자리가 손가락처럼 뻗고 마른 테두리가 조금 진하다. 빠른 획 끝은 붓털이 갈라진 비백. 겹친 먹은 곱하기로 더 진해진다",
+    "movement": "60fps 로 흐른다(끊지 않는다). 글·숫자는 젖은 먹으로 번졌다가 마르며 또렷해지고, 번진 먹 가장자리는 장면이 끝날 때까지 천천히 기어간다. 붓은 눌러 멈칫 → 빠르게 → 들며 갈라짐. 드롭은 먹 한 방울이 떨어져 크게 퍼지고 먹이 튄다"
+  },
+  "notes": [
+    "여백이 주인공 — 형태는 한쪽으로 치우치고 화면 반 이상을 종이로 남긴다. 상자·테두리·직선 도형을 두지 않는다.",
+    "글은 농묵(ink)·중묵(inkSoft)만 — 담묵(ink3)·청묵(ink4)은 번짐·안개·먼 봉우리에만(글로 쓰면 대비가 모자라다).",
+    "큰 숫자·낱말은 Nanum Brush Script(붓글씨), 모델 ID·주소·작은 글은 Song Myung(붓 명조). 한글은 Pretendard 로 받친다.",
+    "붉은 낙관(accent)은 한 화면에 한 곳 — 결정타 숫자나 끝 카드 도장에만.",
+    "카메라는 움직이지 않는다 — 종이는 책상에 펼쳐져 있다. 흔들림은 드롭의 먹 방울 한 번."
+  ]
+}