kasaframe 0.1.1 → 0.1.4

package/themes/cartography/sample/index.html

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

package/themes/cartography/sample/kf.json

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

@@ -0,0 +1,39 @@
+import type { SceneCtx } from "@kasaframe/core";
+import type { Peak } from "../../effects.ts";
+
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+/** t 뒤 k 번째 박 */
+export const beatAfter = (ctx: SceneCtx, t: number, k = 0): number => beatsIn(ctx).filter((x) => x > t + 0.02)[k] ?? t + 0.35 * (k + 1);
+
+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;
+}
+
+/** 지도 장 바꾸기 — 마디에 다음 장으로 넘긴다(컷). 보이는 장 번호마다 true, 숨은 장은 칠하지 않는다 */
+export function sheets(parent: HTMLElement, swaps: number[]) {
+  const els = Array.from({ length: swaps.length + 1 }, () => layer(parent));
+  return {
+    els,
+    paint(t: number): boolean[] {
+      return els.map((el, i) => {
+        const on = (i === 0 || t >= swaps[i - 1]) && (i === els.length - 1 || t < swaps[i]);
+        el.style.display = on ? "" : "none";
+        return on;
+      });
+    },
+  };
+}
+
+/** 고개 지도 — 서쪽·동쪽 두 봉우리 사이 안장(고개)이 화면 가운데. 모든 길이 이 고개를 넘는다 */
+export const PASS: [number, number] = [960, 470];
+export const PASS_PEAKS: Peak[] = [
+  { x: 470, y: 380, h: 14, r: 290 },
+  { x: 1450, y: 560, h: 14, r: 290 },
+  { x: 980, y: 1010, h: 5, r: 200 },
+  { x: 900, y: 40, h: 6, r: 180 },
+  { x: 180, y: 940, h: 4, r: 160 },
+];

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

@@ -0,0 +1,56 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { contourMap, isochrones, legendBox, lettering, mapPaper, placeMark, route } from "../../effects.ts";
+import svg from "../assets/og/logo.svg?raw";
+import { OG } from "../lib/facts.ts";
+import { PASS_PEAKS, beatsIn, layer, sheets } from "../lib/map.ts";
+
+// 첫 토큰 지연 = 거리. 출발점에서 등시선 한 겹 = 100ms(90px), 모델은 제 ms 만큼 떨어진 자리에 있다
+const ME: [number, number] = [300, 600];
+const PX_PER_MS = 0.9;
+const BEARING = [28, -2, -32];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const swap = ctx.beats.bars.find((x) => x > 0.5 && x < ctx.dur - 0.1) ?? 1.42;
+    const pg = sheets(root, [swap]);
+    const [A, B] = pg.els;
+
+    const a: ((t: number) => void)[] = [mapPaper(layer(A), { ctx })];
+    a.push(isochrones(layer(A), { ctx, origin: ME, step: 100 * PX_PER_MS, rings: 8, at: 0, every: 0.08, labels: ["100 ms", "200 ms", "300 ms", "400 ms", "500 ms"], labelAngle: -70 }));
+    const roads = layer(A);
+    const marks = layer(A);
+    a.push(placeMark(marks, { ctx, x: ME[0], y: ME[1], at: 0.02, kind: "origin", size: 24 }));
+    OG.ttft.forEach(([id, label, ms], i) => {
+      const r = ms * PX_PER_MS;
+      const ang = (BEARING[i] * Math.PI) / 180;
+      const x = ME[0] + Math.cos(ang) * r;
+      const y = ME[1] + Math.sin(ang) * r;
+      const at = b[i + 1] ?? 0.36 * (i + 1);
+      a.push(route(roads, { ctx, points: [ME, [ME[0] + Math.cos(ang) * r * 0.5, ME[1] + Math.sin(ang) * r * 0.5 + (i - 1) * 24], [x, y]], at, dur: 0.36, walkers: 1, speed: 340 }));
+      a.push(placeMark(marks, { ctx, x, y, at: at + 0.24, kind: "dot", size: 20, label: id, labelSize: 32, side: "right", font: "mono" }));
+      a.push(lettering(marks, { ctx, text: label, x: x + 30, y: y + 26, at: at + 0.32, size: 62, font: "display", color: "accentText" }));
+    });
+    a.push(lettering(A, { ctx, text: "첫 토큰", x: 1760, y: 110, at: 0.02, size: 96, font: "display", anchor: "right" }));
+    a.push(legendBox(layer(A), { ctx, rect: { x: 1330, y: 790, w: 490, h: 150 }, rows: [{ sym: "iso", label: "100 ms" }, { sym: "route", label: OG.calls }], at: b[3] ?? 1.07, every: 0.08, rowSize: 30 }));
+
+    // 판 B — 끝 카드는 지도 표제. 사방 길이 표제로 모이고 나그네가 쉬지 않고 들어온다
+    const bb: ((t: number) => void)[] = [mapPaper(layer(B), { ctx }), contourMap(layer(B), { ctx, peaks: PASS_PEAKS, interval: 0.7, at: swap, dur: 1.0, origin: [960, 470] })];
+    const ways = layer(B);
+    const card = { x: 460, y: 150, w: 1000, h: 640 };
+    const into: [number, number][][] = [
+      [[110, 980], [300, 900], [460, 760]],
+      [[1810, 990], [1620, 900], [1460, 760]],
+      [[110, 130], [260, 260], [460, 330]],
+      [[1810, 120], [1650, 250], [1460, 330]],
+    ];
+    into.forEach((pts, i) => bb.push(route(ways, { ctx, points: pts, at: swap + 0.15 + i * 0.12, dur: 0.4, walkers: 2, speed: 240 })));
+    bb.push(legendBox(layer(B), { ctx, rect: card, title: OG.site, titleSize: 110, logo: svg, logoW: 400, sub: OG.url, subAt: b.find((x) => x > swap + 1.2) ?? swap + 1.4, at: swap + 0.05 }));
+
+    return (t: number) => {
+      const [aOn, bOn] = pg.paint(t);
+      if (aOn) for (const p of a) p(t);
+      if (bOn) for (const p of bb) p(t);
+    };
+  },
+};

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

@@ -0,0 +1,46 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { contourMap, legendBox, lettering, mapPaper, placeMark, route, type Peak } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, layer } from "../lib/map.ts";
+
+// 회사 = 봉우리, 봉우리 높이 = 모델 수(등고선 한 줄 = 모델 2개). 아홉 봉우리가 지도에 흩어져 있다
+const SUMMITS: [number, number, number, "left" | "right"][] = [
+  [560, 470, 260, "right"],
+  [1180, 300, 170, "right"],
+  [1350, 720, 170, "right"],
+  [300, 230, 120, "right"],
+  [860, 860, 110, "right"],
+  [1600, 250, 100, "right"],
+  [1690, 560, 90, "left"],
+  [250, 800, 95, "right"],
+  [960, 140, 80, "right"],
+];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const swap = ctx.beats.bars.find((x) => x > 1 && x < ctx.dur) ?? 1.695;
+    const peaks: Peak[] = OG.providers.map(([, n], i) => ({ x: SUMMITS[i][0], y: SUMMITS[i][1], h: n, r: SUMMITS[i][2] }));
+    const paints: ((t: number) => void)[] = [];
+    paints.push(mapPaper(layer(root), { ctx }));
+    // 측량 — 지도 가운데에서 등고선이 번져 그려진다
+    paints.push(contourMap(layer(root), { ctx, peaks, interval: 2, at: 0, dur: swap, origin: [960, 540] }));
+    // 흩어져 있으니 봉우리를 하나씩 다 돌아야 한다 — 검은 산길이 아홉 봉우리를 잇는다
+    const tour = [3, 8, 5, 6, 2, 4, 7, 0, 1].map((i) => [SUMMITS[i][0], SUMMITS[i][1]] as [number, number]);
+    paints.push(route(layer(root), { ctx, points: tour, at: swap + 0.02, dur: 1.2, color: "ink", width: 6, walkers: 3, speed: 420 }));
+    const marks = layer(root);
+    // 박마다 두세 봉우리 — 박 사이도 이름이 이어 쓰인다
+    const opens = [0, 0, 1, 1, 2, 2, 3, 3, 3].map((k, i) => (b[k] ?? 0.3 + k * 0.35) + [0, 0.15, 0, 0.15, 0, 0.15, 0, 0.1, 0.2][i]);
+    OG.providers.forEach(([name, n], i) => {
+      const [x, y, , side] = SUMMITS[i];
+      paints.push(placeMark(marks, { ctx, x, y, at: opens[i], kind: "peak", size: 20, label: name, labelSize: 50, side, font: "display", spaced: 0.12 }));
+      // 마디가 바뀌면 봉우리마다 표고(모델 수)가 찍힌다
+      const lx = side === "right" ? x + 28 : x - 28;
+      paints.push(lettering(marks, { ctx, text: String(n), x: lx, y: y + 32, at: swap + 0.04 + i * 0.13, size: 68, font: "sans", color: "contourDeep", anchor: side === "right" ? "left" : "right", weight: 800 }));
+    });
+    paints.push(legendBox(layer(root), { ctx, rect: { x: 1420, y: 820, w: 400, h: 170 }, rows: [{ sym: "peak", label: "회사 · 높이 = 모델 수" }, { sym: "contour", label: "등고선 = 모델 2개" }], at: b[6] ?? swap + 0.7, every: 0.12, rowSize: 28 }));
+    return (t: number) => {
+      for (const p of paints) p(t);
+    };
+  },
+};

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

@@ -0,0 +1,43 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { contourMap, isochrones, legendBox, lettering, mapPaper, placeMark, route } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { PASS, PASS_PEAKS, beatAfter, beatsIn, layer } from "../lib/map.ts";
+
+// 한 주소 = 두 봉우리 사이 고개 하나. 앱에서 오는 길이 고개를 넘고, 고개 너머로 모델마다 길이 갈린다
+const APP: [number, number] = [210, 860];
+const MODELS_X = 1660;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const bars = ctx.beats.bars.filter((x) => x > 0.5 && x < ctx.dur - 0.1);
+    const [fan, build] = [bars[0] ?? 1.41, bars[1] ?? 2.82];
+    const paints: ((t: number) => void)[] = [];
+    paints.push(mapPaper(layer(root), { ctx }));
+    paints.push(contourMap(layer(root), { ctx, peaks: PASS_PEAKS, interval: 0.7, at: 0, dur: 1.4, origin: PASS }));
+    // 드롭 앞 모아 올리기 — 고개를 둘러싼 등시선이 박마다 한 겹씩 밖에서 안으로 좁혀 온다
+    paints.push(isochrones(layer(root), { ctx, origin: PASS, step: 150, rings: 5, at: build, every: 0.33, inward: true }));
+    const roads = layer(root);
+    const marks = layer(root);
+    // 판 A — 앱에서 고개까지 길이 그어지고, 고개에 주소가 붙는다
+    paints.push(placeMark(marks, { ctx, x: APP[0], y: APP[1], at: 0.05, kind: "origin", size: 22 }));
+    paints.push(route(roads, { ctx, points: [APP, [420, 790], [610, 700], [790, 560], PASS], at: b[1] ?? 0.35, dur: 0.5, walkers: 3, speed: 300, tags: OG.endpoints.map((e) => `POST /v1${e}`), tagSize: 24 }));
+    paints.push(placeMark(marks, { ctx, x: PASS[0], y: PASS[1], at: b[2] ?? 0.7, kind: "pass", size: 30 }));
+    paints.push(lettering(marks, { ctx, text: OG.host, x: PASS[0], y: PASS[1] + 46, at: (b[2] ?? 0.7) + 0.05, size: 46, font: "mono", anchor: "center" }));
+    // 형식 넷 — 같은 고개로 드는 문
+    paints.push(legendBox(layer(root), { ctx, rect: { x: 90, y: 70, w: 520, h: 300 }, title: "형식", rows: OG.endpoints.map((e) => ({ sym: "route" as const, label: e })), at: b[3] ?? 1.05, every: 0.07, titleSize: 40, rowSize: 30 }));
+
+    // 판 B — 고개 너머 박마다 모델 하나로 길이 갈린다. 주소는 그대로
+    const fanAt = [fan, ...[0, 1, 2, 3].map((k) => beatAfter(ctx, fan, k))];
+    OG.ids.forEach((id, i) => {
+      // 가운데(고개 주소 자리)는 비운다
+      const y = [150, 320, 650, 810, 965][i];
+      const at = fanAt[i];
+      paints.push(route(roads, { ctx, points: [PASS, [1240, (PASS[1] + y) / 2 + 30], [MODELS_X, y]], at, dur: 0.3, walkers: 1, speed: 360 }));
+      paints.push(placeMark(marks, { ctx, x: MODELS_X, y, at: at + 0.25, kind: "dot", size: 18, label: id, labelSize: 30, side: "left", font: "mono" }));
+    });
+    return (t: number) => {
+      for (const p of paints) p(t);
+    };
+  },
+};

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

@@ -0,0 +1,73 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { contourMap, lettering, mapBurst, mapPaper, placeMark, profile, route, scaleBar } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { PASS_PEAKS, beatAfter, layer, sheets } from "../lib/map.ts";
+
+// 드롭 고개 — 화면 가운데 조금 아래. 102 는 그 위
+const HUB: [number, number] = [960, 600];
+// 하루 단면 — 24시간이 1600px. 값(가격)이 높이: 낮은 비싼 고원, 00–10시는 깊은 골(-90%)에 물이 찬다
+const DAY = { x: 160, y: 250, w: 1600, h: 380 };
+const hx = (h: number) => DAY.x + (DAY.w * h) / 24;
+const price = (u: number): number => {
+  const h = u * 24;
+  const lowV = 0.09;
+  const highV = 0.88 + 0.03 * Math.sin(h * 1.7) * Math.min(1, (h - 10.5) / 2);
+  if (h < 0.5) return highV + (lowV - highV) * (h / 0.5);
+  if (h < 9.4) return lowV + 0.015 * Math.sin(h * 2.3);
+  if (h < 10.6) return lowV + (0.88 - lowV) * ((h - 9.4) / 1.2) ** 2 * (3 - 2 * ((h - 9.4) / 1.2));
+  return highV;
+};
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const bars = ctx.beats.bars.filter((x) => x > 0.5 && x < ctx.dur - 0.1);
+    const [s1, s2] = [bars[0] ?? 1.41, bars[1] ?? 2.85];
+    const frame = layer(root);
+    const pg = sheets(frame, [s1, s2]);
+    const [A, B, C] = pg.els;
+
+    // 판 A — 드롭에 충격 고리가 번지고 사방 102 갈래 길이 한 고개로 모인다
+    const a: ((t: number) => void)[] = [mapPaper(layer(A), { ctx }), contourMap(layer(A), { ctx, peaks: PASS_PEAKS.map((p) => ({ ...p, y: p.y + 130 })), interval: 0.7 })];
+    const burst = mapBurst(layer(A), { ctx, drop: 0, origin: HUB, trails: OG.models });
+    const hero = layer(A);
+    a.push(placeMark(hero, { ctx, x: HUB[0], y: HUB[1], at: 0, kind: "pass", size: 34 }));
+    a.push(lettering(hero, { ctx, text: String(OG.models), x: 960, y: 110, at: 0, size: 330, font: "display", anchor: "center", spaced: 0.01, dur: 0.12 }));
+    a.push(lettering(hero, { ctx, text: "모델", x: 1290, y: 300, at: beatAfter(ctx, 0, 0), size: 96, font: "display" }));
+    a.push(lettering(hero, { ctx, text: "한 주소", x: 960, y: HUB[1] + 60, at: beatAfter(ctx, 0, 1), size: 110, font: "display", anchor: "center" }));
+    a.push(lettering(hero, { ctx, text: OG.host, x: 960, y: HUB[1] + 200, at: beatAfter(ctx, 0, 2), size: 48, font: "mono", anchor: "center" }));
+
+    // 판 B — 하루 단면. 왼쪽부터 땅이 그려지고 00–10시 골짜기에 물이 차오른다
+    const bb: ((t: number) => void)[] = [mapPaper(layer(B), { ctx })];
+    bb.push(lettering(B, { ctx, text: `00:00-10:00 ${OG.night.tz}`, x: 1760, y: 110, at: s1 + 0.04, size: 70, font: "mono", anchor: "right" }));
+    bb.push(profile(layer(B), { ctx, rect: DAY, value: price, at: s1 + 0.08, dur: 0.75, water: [0, 10.5 / 24] }));
+    [0, 6, 12, 18, 24].forEach((h, i) => bb.push(lettering(B, { ctx, text: String(h).padStart(2, "0"), x: hx(h), y: DAY.y + DAY.h + 18, at: s1 + 0.1 + i * 0.12, size: 40, font: "mono", anchor: "center" })));
+    // 골짜기 위 — 물 위에 얹으면 글 둘레 바탕이 갈려 대비가 흔들린다
+    bb.push(lettering(B, { ctx, text: OG.deepseek.off, x: hx(5), y: DAY.y - 110, at: beatAfter(ctx, s1, 1), size: 130, font: "display", anchor: "center", color: "water" }));
+    bb.push(lettering(B, { ctx, text: `${OG.deepseek.id}  ${OG.deepseek.off}`, x: 160, y: 760, at: beatAfter(ctx, s1, 1) + 0.12, size: 44, font: "mono" }));
+    bb.push(lettering(B, { ctx, text: `${OG.glm.id}  ${OG.glm.off}`, x: 160, y: 830, at: beatAfter(ctx, s1, 2), size: 44, font: "mono" }));
+
+    // 판 C — 값이 곧 길이. 축척 막대 한 칸 = $0.10, 정가 막대가 10% 로 접혀 들어간다
+    const cc: ((t: number) => void)[] = [mapPaper(layer(C), { ctx })];
+    const shrink = beatAfter(ctx, s2, 1);
+    cc.push(lettering(C, { ctx, text: `${OG.deepseek.id}  $/M`, x: 160, y: 110, at: s2 + 0.04, size: 60, font: "mono" }));
+    cc.push(lettering(C, { ctx, text: "입력", x: 160, y: 300, at: s2 + 0.06, size: 64, font: "sans" }));
+    cc.push(scaleBar(C, { ctx, x: 420, y: 310, seg: 100, count: 3, at: s2 + 0.08, every: 0.08, h: 44, shrinkAt: shrink, keep: 0.3, start: "0", ends: [OG.deepseek.input[0], OG.deepseek.input[1]], labelSize: 64 }));
+    cc.push(lettering(C, { ctx, text: "출력", x: 160, y: 520, at: beatAfter(ctx, s2, 0), size: 64, font: "sans" }));
+    cc.push(scaleBar(C, { ctx, x: 420, y: 530, seg: 100, count: 12, at: beatAfter(ctx, s2, 0), every: 0.03, h: 44, shrinkAt: shrink + 0.08, keep: 1.2, start: "0", ends: [OG.deepseek.output[0], OG.deepseek.output[1]], labelSize: 64 }));
+    cc.push(lettering(C, { ctx, text: OG.deepseek.off, x: 1760, y: 700, at: shrink + 0.4, size: 150, font: "display", anchor: "right", color: "accentText" }));
+
+    // 요청 길 — 지도 아래 가장자리를 따라 모델 ID 를 든 나그네가 쉬지 않고 간다
+    const walk = route(layer(root), { ctx, points: [[140, 990], [600, 965], [1200, 1000], [1780, 975]], at: -1, dur: 0.01, walkers: 3, speed: 260, tags: OG.ids, tagSize: 24 });
+
+    return (t: number) => {
+      const [aOn, bOn, cOn] = pg.paint(t);
+      const s = burst(t);
+      applyStyle(frame, s.shake);
+      applyStyle(hero, s.punch);
+      if (aOn) for (const p of a) p(t);
+      if (bOn) for (const p of bb) p(t);
+      if (cOn) for (const p of cc) p(t);
+      walk(t);
+    };
+  },
+};

package/themes/cartography/sample/style.json

@@ -0,0 +1,103 @@
+{
+  "name": "cartography",
+  "label": "지도 — 요청은 땅 위 길로, 지연은 거리로",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F6F4EC",
+    "surface": "#FBFAF5",
+    "raised": "#ECE8DA",
+    "line": "#C9C3B0",
+    "ink": "#1E2321",
+    "inkSoft": "#2F3532",
+    "dim": "#575E58",
+    "accent": "#D2362B",
+    "accentSoft": "#F2C2BA",
+    "accentText": "#B02A20",
+    "onAccent": "#FFFFFF",
+    "success": "#2E7D46",
+    "danger": "#D2362B",
+    "warning": "#B9772A",
+    "paper": "#F6F4EC",
+    "contour": "#B8763D",
+    "contourDeep": "#8E5526",
+    "water": "#2D78B8",
+    "forest": "#D5E5BE",
+    "relief": "#8F989C"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Gowun Batang\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", serif",
+    "mono": "\"DM Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Gowun Batang",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/gowunbatang/GowunBatang-Bold.ttf",
+        "weight": "700"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      },
+      {
+        "family": "DM Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/dmmono/DMMono-Medium.ttf",
+        "weight": "500"
+      }
+    ]
+  },
+  "type": {
+    "hero": 190,
+    "title": 96,
+    "body": 42,
+    "caption": 30,
+    "weightDisplay": 700,
+    "weightBody": 600,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 2,
+    "md": 3,
+    "lg": 4,
+    "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.12,
+      "base": 0.3,
+      "slow": 0.7
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F6F4EC 지도 종이",
+      "#B8763D 등고선 갈색 · #2D78B8 물 파랑 · #D5E5BE 숲",
+      "#D2362B 길(요청) 빨강 — 강조",
+      "#1E2321 지명·격자 검정"
+    ],
+    "texture": "선으로만 — 등고선(다섯 줄마다 굵게), 점선 길, 킬로미터 격자, 아주 옅은 지형 음영(북서쪽 빛). 지명 글자 둘레에 바탕색 테",
+    "movement": "지도는 서 있다. 측량 지점에서 등고선이 번져 그려지고, 길이 땅을 따라 그어지며 나그네 점이 그 위를 늘 간다. 지명은 내려앉으며 자간이 벌어진다. 시간은 등시선 고리로 안에서 밖으로 번진다"
+  },
+  "notes": [
+    "출처: swisstopo 1:25000·Galton 1881 등시선·Tjukanov Vintage Isochrones — refs/NOTES.md",
+    "contour·water·forest·relief 는 재료 색이라 변주에서 색상을 지킨다(fixedHue).",
+    "지명 글은 바탕색 헤일로를 두른다 — 등고선 위에서도 대비가 선다."
+  ]
+}

package/themes/cartography/slots.ts

@@ -0,0 +1,87 @@
+import { clamp, ease, spring, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, shownCount, traceCanvas } from "@kasaframe/themes/slotkit";
+import { mapBurst, mapPaper } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 지도 결로. 판은 범례 상자, 앉기는 측량 고리, 선은 빨간 점선 길
+export const slots: ThemeSlots = {
+  surface(el, { ctx }) {
+    return mapPaper(el, { ctx });
+  },
+
+  // 범례 상자 — 두 줄 도곽 테가 위에서 아래로 펼쳐진다. 강조 판은 길 빨강
+  panel(el, { at, tone }) {
+    const box = layer(el, `inset:0;box-sizing:border-box;border:3px solid var(--kf-ink);background:${tone === "accent" ? "var(--kf-accent)" : "var(--kf-surface)"}`, true);
+    layer(box, "inset:5px;border:1px solid var(--kf-ink)");
+    return (t) => {
+      const k = t - at;
+      box.style.display = k < 0 ? "none" : "";
+      if (k >= 0) box.style.clipPath = `inset(0 0 ${((1 - ease.outCubic(clamp(k / 0.2))) * 100).toFixed(1)}% 0)`;
+    };
+  },
+
+  // 지점이 찍힌다 — 측량 고리가 한 번 번지고 숫자가 살짝 커졌다 앉는다
+  land(el, { at }) {
+    if (!el.style.position) el.style.position = "relative";
+    const ring = layer(el, "left:50%;top:50%;width:120%;aspect-ratio:1;border-radius:50%;border:4px solid var(--kf-accent);display:none");
+    return (t): Style => {
+      const k = t - at;
+      const on = k >= 0 && k < 0.5;
+      ring.style.display = on ? "" : "none";
+      if (on) {
+        ring.style.transform = `translate(-50%, -50%) scale(${(0.3 + 0.9 * ease.outCubic(k / 0.5)).toFixed(3)})`;
+        ring.style.opacity = (1 - k / 0.5).toFixed(3);
+      }
+      return k < 0 ? {} : { scale: spring(k, { from: 1.12, to: 1, stiffness: 320, damping: 17 }) };
+    };
+  },
+
+  // 지명 글자 — 바탕색 테를 두르고 한 자씩 쓰인다
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    el.style.textShadow = "0 0 3px var(--kf-paper, var(--kf-bg)), 0 0 6px var(--kf-paper, var(--kf-bg)), 2px 0 0 var(--kf-paper, var(--kf-bg)), -2px 0 0 var(--kf-paper, var(--kf-bg)), 0 2px 0 var(--kf-paper, var(--kf-bg)), 0 -2px 0 var(--kf-paper, var(--kf-bg))";
+    return (t) => {
+      const n = shownCount(spans.length, t, at, dur);
+      spans.forEach((s, i) => (s.style.visibility = i < n ? "visible" : "hidden"));
+    };
+  },
+
+  // 길 — 빨간 점선이 그어지고(머리에 나그네 점), 다 그은 뒤엔 점선이 가는 쪽으로 흐른다
+  trace(el, { ctx, points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points, 30);
+    const c = ctx.style.colors[tone === "accent" ? "accent" : "ink"] ?? "#D2362B";
+    const paper = ctx.style.colors.paper ?? ctx.style.colors.bg;
+    return (t) => {
+      clear();
+      const k = t - at;
+      if (k < 0) return;
+      const pts = partial(points, clamp(k / Math.max(0.05, dur)));
+      if (pts.length < 2) return;
+      g.lineCap = "round";
+      g.lineJoin = "round";
+      g.beginPath();
+      g.moveTo(pts[0][0], pts[0][1]);
+      for (const q of pts.slice(1)) g.lineTo(q[0], q[1]);
+      g.setLineDash([]);
+      g.strokeStyle = paper;
+      g.lineWidth = 11;
+      g.stroke();
+      g.strokeStyle = c;
+      g.lineWidth = 5;
+      g.setLineDash([17, 10]);
+      g.lineDashOffset = -k * 60;
+      g.stroke();
+      g.setLineDash([]);
+      const h = pts[pts.length - 1];
+      g.beginPath();
+      g.arc(h[0], h[1], 8, 0, Math.PI * 2);
+      g.fillStyle = c;
+      g.fill();
+    };
+  },
+
+  // 드롭 — 충격 고리 셋이 땅을 따라 굽어 번진다
+  drop(el, { ctx, drop }) {
+    return mapBurst(el, { ctx, drop });
+  },
+};