kasaframe 0.1.1 → 0.1.4

package/themes/subway-map/sample/index.html

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

package/themes/subway-map/sample/kf.json

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

@@ -0,0 +1,58 @@
+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. 글은 nameplate 가 찍으니 비워 둔다 */
+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;
+}
+
+/** 회사 i(브리프 차례) = i+1 호선 */
+export const line = (i: number): string => `route${i + 1}`;
+
+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/subway-map/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/subway-map/sample/scenes/end.ts

@@ -0,0 +1,94 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { legTime, nameplate, paperMap, routeDraw, stationStop, trainRun } from "../../effects.ts";
+import svg from "../assets/og/logo.svg?raw";
+import { OG } from "../lib/facts.ts";
+import { label, layer, line, pages, type Pt } from "../lib/map.ts";
+
+// 실측 첫 토큰 — 요청 역에서 첫 토큰 역까지 노선 길이가 그 ms, 열차도 꼭 그 ms 걸려 닿는다(지연 = 역 사이 시간)
+const X0 = 420;
+const PX_PER_MS = 1.578;
+const ROUTE: Record<string, number> = { "gpt-5.4-nano": 0, "gemini-3.5-flash-lite": 2, "claude-haiku-5-5": 1 };
+
+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 { list, show } = pages(root, ctx, 3);
+    const [a, b, c] = list;
+    const ink = ctx.style.colors.ink;
+    const { mono, sans, display } = ctx.style.fonts;
+    const paints: ((t: number) => void)[] = [];
+
+    // 판면 1 — 첫 토큰 실측 셋: 노선이 그어지고, 열차 셋이 한꺼번에 떠나 각자의 ms 만에 닿는다
+    paints.push(paperMap(layer(a.el), { ctx }));
+    const aLines = layer(a.el);
+    const aMarks = layer(a.el);
+    const aWords = layer(a.el);
+    const title = label(aWords, `left:120px;top:96px;font:800 56px ${sans};color:${ink}`);
+    const calls = label(aWords, `right:120px;top:104px;font:700 40px ${mono};color:${ink}`);
+    paints.push(nameplate(title, { ctx, text: "첫 토큰 가운데값", at: a.beat(0), dur: 0.2 }), nameplate(calls, { ctx, text: OG.calls, at: a.beat(2), dur: 0.3, from: "right" }));
+    OG.ttft.forEach(([model, , ms], i) => {
+      const y = 330 + i * 230;
+      const end: Pt = [X0 + ms * PX_PER_MS, y];
+      const color = line(ROUTE[model] ?? i);
+      const leave = a.beat(1);
+      const name = label(aWords, `left:${X0 - 14}px;top:${y - 74}px;font:700 42px ${mono};color:${ink}`);
+      paints.push(
+        routeDraw(aLines, { ctx, points: [[X0, y], end], color, at: a.beat(0), dur: 0.3 }),
+        stationStop(aMarks, { ctx, x: X0, y, at: a.beat(0) }),
+        nameplate(name, { ctx, text: model, at: a.beat(0) + 0.05 * i, dur: 0.24 }),
+        legTime(aMarks, { ctx, from: [X0, y], to: end, at: leave, dur: ms / 1000, value: ms, decimals: 1, unit: "ms", color }),
+        trainRun(aMarks, { ctx, points: [[X0, y], end], color, at: leave, hop: ms / 1000, express: true }),
+        stationStop(aMarks, { ctx, x: end[0], y, at: leave + ms / 1000, kind: "hub", size: 22, length: 0 }),
+      );
+    });
+
+    // 판면 2 — 끝 카드: 순환선이 한 바퀴 그어지고 가운데 환승역에 로고, 아래 주소. 열차는 순환선을 늘 돈다
+    paints.push(paperMap(layer(b.el), { ctx }));
+    const bLines = layer(b.el);
+    const bMarks = layer(b.el);
+    const [cx, cy, w, h] = [960, 450, 1240, 620];
+    const cut = Math.min(w, h) * 0.29;
+    const [l, r, tp, bt] = [cx - w / 2, cx + w / 2, cy - h / 2, cy + h / 2];
+    const ring: Pt[] = [[l + cut, tp], [r - cut, tp], [r, tp + cut], [r, bt - cut], [r - cut, bt], [l + cut, bt], [l, bt - cut], [l, tp + cut]];
+    const stops: Pt[] = ring.map((p, i) => {
+      const q = ring[(i + 1) % ring.length];
+      return [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];
+    });
+    paints.push(
+      routeDraw(bLines, { ctx, points: ring, closed: true, at: b.beat(0), dur: 0.5, radius: 50 }),
+      trainRun(bMarks, { ctx, points: ring, closed: true, radius: 50, stops, at: b.beat(0) + 0.45, count: 2, headway: 0.5, hop: 0.28, dwell: 0.06 }),
+      ...stops.map(([x, y], i) => stationStop(bMarks, { ctx, x, y, at: b.beat(3) + i * 0.03 })),
+      stationStop(bMarks, { ctx, x: cx, y: cy, at: b.beat(0), kind: "hub", size: 150, length: 400 }),
+    );
+    const mark = logo(bMarks, cx - 190, cy - 108, 380, ink);
+    const site = label(bMarks, `left:0;width:1920px;text-align:center;top:${bt + 70}px;font:800 112px ${display};color:${ink};letter-spacing:-0.01em`);
+    paints.push((t) => (mark.style.visibility = t >= b.beat(1) ? "visible" : "hidden"), nameplate(site, { ctx, text: OG.site, at: b.beat(2), dur: 0.26 }));
+
+    // 판면 3 — 마지막 마디: 로고와 주소가 한 줄로 서고, 그 아래 /v1 노선 위로 열차가 오간다
+    paints.push(paperMap(layer(c.el), { ctx }));
+    const cLines = layer(c.el);
+    const cMarks = layer(c.el);
+    const Y = 700;
+    paints.push(
+      routeDraw(cLines, { ctx, points: [[960, Y], [100, Y]], at: c.beat(0), dur: 0.3, ends: "bar" }),
+      routeDraw(cLines, { ctx, points: [[960, Y], [1820, Y]], at: c.beat(0), dur: 0.3, ends: "bar" }),
+      trainRun(cMarks, { ctx, points: [[100, Y], [1820, Y]], stops: [[100, Y], [960, Y], [1820, Y]], at: c.beat(0), count: 3, headway: 0.2, hop: 0.36, dwell: 0.04 }),
+      stationStop(cMarks, { ctx, x: 960, y: Y, at: c.beat(0), kind: "hub", angle: 90, size: 30, length: 56 }),
+    );
+    const mark2 = logo(cMarks, 300, 330, 300, ink);
+    const site2 = label(cMarks, `left:660px;top:350px;font:800 140px ${display};color:${ink};letter-spacing:-0.01em`);
+    paints.push((t) => (mark2.style.visibility = t >= c.from ? "visible" : "hidden"), nameplate(site2, { ctx, text: OG.site, at: c.beat(0), dur: 0.18 }));
+
+    return (t: number) => {
+      show(t);
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/subway-map/sample/scenes/gather.ts

@@ -0,0 +1,64 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { nameplate, paperMap, routeDraw, routeTally, stationStop, trainRun } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { label, layer, line, pages, type Pt } from "../lib/map.ts";
+
+// 회사 아홉이 저마다 따로 놓인 짧은 노선(서로 안 이어진다) — 3×3 칸 가운데에 45° 로 한 번 꺾인 꼴 넷을 돌려 쓴다
+const CELL: Pt[] = [[360, 235], [960, 235], [1560, 235], [360, 560], [960, 560], [1560, 560], [360, 870], [960, 870], [1560, 870]];
+const SHAPE: Pt[][] = [
+  [[-220, -55], [-60, -55], [50, 55], [220, 55]],
+  [[-220, 70], [-130, 70], [-20, -40], [220, -40]],
+  [[-220, 55], [-60, 55], [50, -55], [220, -55]],
+  [[-220, -70], [-130, -70], [-20, 40], [220, 40]],
+].map((s) => s.map(([x, y]) => [x * 1.15, y * 1.15] as Pt));
+// 박마다 셋 — 흩어진 자리부터
+const WAVE = [0, 2, 1, 1, 0, 2, 2, 1, 0];
+// 판면 2 줄 묶음 — 첫 박 셋, 나머지 박마다 둘
+const ROWS = [0, 0, 0, 1, 1, 2, 2, 3, 3];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = paperMap(layer(root), { ctx });
+    const { list, show } = pages(root, ctx, 2);
+    const [a, b] = list;
+
+    // 판면 1 — 흩어진 노선 아홉, 박마다 셋씩 그어지며 곧장 열차(요청)가 오가고, 넷째 박에 아홉 노선에서 둘째 열차가 한꺼번에 떠난다
+    const lines = layer(a.el);
+    const marks = layer(a.el);
+    const words = layer(a.el);
+    const stubs = OG.providers.map(([name], i) => {
+      const [cx, cy] = CELL[i];
+      const pts = SHAPE[i % SHAPE.length].map(([x, y]) => [cx + x, cy + y] as Pt);
+      const beat = a.beat(WAVE[i]);
+      const stops: Pt[] = [pts[0], [(pts[2][0] + pts[3][0]) / 2, pts[3][1]], pts[3]];
+      // 이름은 높은 쪽 종점 위에 — 아래로 꺾이는 노선은 첫 역, 위로 꺾이는 노선은 끝 역(오른쪽 맞춤). 칸 사이 틈에 이름이 겹쳐 쌓이지 않게
+      const up = pts[2][1] < pts[0][1];
+      const end = up ? pts[3] : pts[0];
+      const where = up ? `right:${1920 - end[0] - 12}px` : `left:${end[0] - 12}px`;
+      const name_ = label(words, `${where};top:${end[1] - 80}px;font:800 50px ${ctx.style.fonts.sans};color:${ctx.style.colors.ink}`);
+      // 첫 묶음은 0 초부터 빠르게 긋는다 — 첫 박 전에 화면이 서지 않게
+      const drawAt = WAVE[i] === 0 ? 0 : beat - 0.24;
+      const drawDur = WAVE[i] === 0 ? 0.26 : beat + 0.1 - drawAt;
+      const leave = beat + 0.12;
+      return [
+        routeDraw(lines, { ctx, points: pts, color: line(i), at: drawAt, dur: drawDur, ends: "bar" }),
+        ...stops.map((p, k) => stationStop(marks, { ctx, x: p[0], y: p[1], at: beat + k * 0.05 })),
+        nameplate(name_, { ctx, text: name, at: beat, dur: 0.26, from: up ? "right" : "left" }),
+        trainRun(marks, { ctx, points: pts, stops, color: line(i), at: leave, count: 2, headway: a.beat(3) - leave, hop: 0.3, dwell: 0.06 }),
+      ];
+    }).flat();
+
+    // 판면 2 — 회사별 모델 수: 노선 하나에 모델 하나 = 역 하나. 박마다 몇 줄씩 그어지고, 다 그은 노선엔 급행이 오간다
+    const max = OG.providers[0][1];
+    const rows = OG.providers.map(([name, n], i) =>
+      routeTally(b.el, { ctx, x: 100, y: 130 + i * 100, length: 1180, count: n, max, color: line(i), bullet: String(i + 1), name, at: b.beat(ROWS[i]), train: true }),
+    );
+
+    return (t: number) => {
+      show(t);
+      paper(t);
+      for (const p of stubs) p(t);
+      for (const r of rows) r(t);
+    };
+  },
+};

package/themes/subway-map/sample/scenes/models.ts

@@ -0,0 +1,117 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { nameplate, paperMap, routeDraw, stationStop, trainRun } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { label, layer, line, pages, type Pt } from "../lib/map.ts";
+
+// 판면 1 의 강 — OpenAI 형식(왼쪽 강변)과 Anthropic 형식(오른쪽)을 가르는 경계. 한 주소 환승역이 그 위에 걸친다
+const RIVER: Pt[] = [[1260, -80], [1260, 300], [860, 700], [860, 1160]];
+const Y = 600;
+const HUB = 960;
+// 끝점 역 — [x, 이름 위(-1)/아래(1)]
+const ENDS: [string, number, number][] = [
+  ["/chat/completions", 260, 1],
+  ["/responses", 450, -1],
+  ["/images/generations", 640, 1],
+  ["/messages", 1450, -1],
+];
+
+// 판면 2 — 환승역에서 나란히 나와 갈라지는 가지 넷(나란한 줄 간격 22, 바깥 가지가 먼저 갈라져 대각선끼리 안 겹친다)
+const FAN: { id: string; route: string; pts: Pt[] }[] = [
+  { id: OG.ids[0], route: line(0), pts: [[270, 547], [480, 547], [727, 300], [880, 300]] },
+  { id: OG.ids[1], route: line(1), pts: [[270, 569], [540, 569], [639, 470], [880, 470]] },
+  { id: OG.ids[2], route: line(2), pts: [[270, 591], [540, 591], [639, 690], [880, 690]] },
+  { id: OG.ids[3], route: line(7), pts: [[270, 613], [480, 613], [747, 880], [880, 880]] },
+];
+
+// 판면 3 — 회사 아홉 노선이 화면 가장자리에서 가운데 환승역으로 모인다. [바깥 끝부터의 꼭짓점, 이름 자리 css]
+const C: Pt = [960, 540];
+const INTO: [Pt[], string][] = [
+  [[[100, 540], C], "left:100px;top:470px"],
+  [[[200, 150], [570, 150], C], "left:200px;top:72px"],
+  [[[925, 150], [925, 540]], "right:1015px;top:72px"],
+  [[[995, 150], [995, 540]], "left:1015px;top:72px"],
+  [[[1720, 150], [1350, 150], C], "right:200px;top:72px"],
+  [[[1820, 540], C], "right:100px;top:470px"],
+  [[[1720, 930], [1350, 930], C], "right:200px;top:962px"],
+  [[[960, 1000], C], "left:990px;top:952px"],
+  [[[200, 930], [570, 930], C], "left:200px;top:962px"],
+];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const { list, show } = pages(root, ctx, 3);
+    const [a, b, c] = list;
+    const ink = ctx.style.colors.ink;
+    const { mono, sans } = ctx.style.fonts;
+    const paints: ((t: number) => void)[] = [];
+
+    // 판면 1 — 한 주소: /v1 노선이 환승역에서 양쪽으로 그어지고, 주소가 찍히고, 끝점 넷이 역으로 선다
+    paints.push(paperMap(layer(a.el), { ctx, river: RIVER }));
+    const aLines = layer(a.el);
+    const aMarks = layer(a.el);
+    const aWords = layer(a.el);
+    paints.push(
+      routeDraw(aLines, { ctx, points: [[HUB, Y], [100, Y]], at: a.beat(0), dur: 0.4, ends: "bar" }),
+      routeDraw(aLines, { ctx, points: [[HUB, Y], [1820, Y]], at: a.beat(0), dur: 0.4, ends: "bar" }),
+      trainRun(aMarks, { ctx, points: [[HUB, Y], [100, Y]], stops: [[HUB, Y], ...ENDS.slice(0, 3).map(([, x]) => [x, Y] as Pt).reverse(), [100, Y]], at: a.beat(1), count: 3, headway: 0.3, hop: 0.22, dwell: 0.05 }),
+      trainRun(aMarks, { ctx, points: [[HUB, Y], [1820, Y]], stops: [[HUB, Y], [1450, Y], [1820, Y]], at: a.beat(1) + 0.1, count: 3, headway: 0.3, hop: 0.3, dwell: 0.05 }),
+      stationStop(aMarks, { ctx, x: HUB, y: Y, at: a.beat(0), kind: "hub", angle: 90, size: 30, length: 56 }),
+    );
+    const url = label(aWords, `left:0;width:1920px;text-align:center;top:300px;font:700 64px ${mono};color:${ink}`);
+    paints.push(nameplate(url, { ctx, text: OG.url, at: a.beat(1), dur: 0.34 }));
+    ENDS.forEach(([name, x, side], i) => {
+      const at = a.beat(2) + i * 0.05;
+      paints.push(stationStop(aMarks, { ctx, x, y: Y, at }));
+      const el = label(aWords, `left:${x - 300}px;width:600px;text-align:center;top:${side > 0 ? Y + 42 : Y - 76}px;font:700 32px ${mono};color:${ink}`);
+      paints.push(nameplate(el, { ctx, text: name, at, dur: 0.24 }));
+    });
+    const left = label(aWords, `left:120px;top:900px;font:800 48px ${sans};color:${ink}`);
+    const right = label(aWords, `right:120px;top:900px;font:800 48px ${sans};color:${ink}`);
+    paints.push(nameplate(left, { ctx, text: "OpenAI 형식", at: a.beat(3), dur: 0.22 }), nameplate(right, { ctx, text: "Anthropic 형식", at: a.beat(3), dur: 0.22, from: "right" }));
+
+    // 판면 2 — 같은 주소에서 박마다 다른 모델 ID 로 — 가지가 그어지고 열차(요청)가 떠나고 행선지(모델 ID)가 찍힌다
+    paints.push(paperMap(layer(b.el), { ctx }));
+    const bLines = layer(b.el);
+    const bMarks = layer(b.el);
+    const bWords = layer(b.el);
+    const host = label(bWords, `left:120px;top:110px;font:700 60px ${mono};color:${ink}`);
+    paints.push(nameplate(host, { ctx, text: OG.host, at: b.beat(0), dur: 0.3 }));
+    FAN.forEach((f, k) => {
+      const at = b.beat(k);
+      const end = f.pts[f.pts.length - 1];
+      paints.push(
+        routeDraw(bLines, { ctx, points: f.pts, color: f.route, at, dur: 0.28, width: 16 }),
+        stationStop(bMarks, { ctx, x: end[0], y: end[1], at: at + 0.24 }),
+        trainRun(bMarks, { ctx, points: f.pts, color: f.route, at: at + 0.02, hop: 0.42, dwell: 0.1 }),
+      );
+      const el = label(bWords, `left:${end[0] + 36}px;top:${end[1] - 18}px;font:700 36px ${mono};color:${ink}`);
+      paints.push(nameplate(el, { ctx, text: f.id, at: at + 0.1, dur: 0.28 }));
+    });
+    paints.push(stationStop(bMarks, { ctx, x: 270, y: 580, at: b.beat(0), kind: "hub", angle: 90, size: 34, length: 60 }));
+
+    // 판면 3 — 드롭 앞 모아 올리기: 회사 아홉 노선이 셋씩 가운데 환승역으로 그어지며 열차가 오가고,
+    // 넷째 박에 그 열차들이 내리고 아홉 노선 끝에서 새 열차가 한꺼번에 떠나 드롭 순간 환승역에 닿는다
+    paints.push(paperMap(layer(c.el), { ctx }));
+    const cLines = layer(c.el);
+    const cMarks = layer(c.el);
+    const cWords = layer(c.el);
+    const arrive = ctx.dur;
+    INTO.forEach(([pts, where], i) => {
+      const at = c.beat(Math.floor(i / 3));
+      paints.push(
+        routeDraw(cLines, { ctx, points: pts, color: line(i), at, dur: 0.3, ends: "round" }),
+        stationStop(cMarks, { ctx, x: pts[0][0], y: pts[0][1], at: at + 0.02 }),
+        trainRun(cMarks, { ctx, points: pts, color: line(i), at: at + 0.24, count: 2, headway: 0.2, hop: 0.3, dwell: 0.04, until: c.beat(3) }),
+        trainRun(cMarks, { ctx, points: pts, color: line(i), at: c.beat(3), hop: arrive - c.beat(3), mode: "once" }),
+      );
+      const el = label(cWords, `${where};font:800 44px ${sans};color:${ink}`);
+      paints.push(nameplate(el, { ctx, text: OG.providers[i][0], at, dur: 0.22, from: where.startsWith("right") ? "right" : "left" }));
+    });
+    paints.push(stationStop(cMarks, { ctx, x: C[0], y: C[1], at: c.from, kind: "hub", size: 64, length: 0 }));
+
+    return (t: number) => {
+      show(t);
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/subway-map/sample/scenes/price.ts

@@ -0,0 +1,119 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { hourLoop, hubDrop, nameplate, paperMap, routeDraw, stationStop, trainRun } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { label, layer, line, pages, type Pt } from "../lib/map.ts";
+
+const HX = 960;
+const HY = 470;
+
+// 드롭 바큇살 여덟 끝 — 안전 영역 안쪽에 역 하나씩
+const spokeEnd = (deg: number): Pt => {
+  const a = (deg * Math.PI) / 180;
+  const k = Math.min(Math.abs(Math.cos(a)) > 1e-6 ? 760 / Math.abs(Math.cos(a)) : Infinity, Math.abs(Math.sin(a)) > 1e-6 ? 370 / Math.abs(Math.sin(a)) : Infinity);
+  return [HX + Math.cos(a) * k, HY + Math.sin(a) * k];
+};
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const frame = layer(root);
+    const { list, show } = pages(frame, ctx, 3);
+    const [a, b, c] = list;
+    const ink = ctx.style.colors.ink;
+    const { mono, sans, display } = ctx.style.fonts;
+    const paints: ((t: number) => void)[] = [];
+
+    // 판면 1 — 드롭: 노선 여덟이 한 환승역에서 사방으로 뻗고, 환승역 안에 102, 아래 한 주소
+    paints.push(paperMap(layer(a.el), { ctx }));
+    const spokes = Array.from({ length: 8 }, (_, i) => ({ color: line(i), angle: i * 45 }));
+    const drop = hubDrop(layer(a.el), { ctx, drop: 0, x: HX, y: HY, spokes, size: 120 });
+    const aMarks = layer(a.el);
+    spokes.forEach((s, i) => {
+      const end = spokeEnd(s.angle);
+      // 바큇살 위 환승역 캡슐(가로 반 470·세로 반 190) 바로 밖에서 떠난다
+      const a0 = (s.angle * Math.PI) / 180;
+      const r0 = Math.abs(Math.sin(a0)) > 0.01 ? Math.min(490, 210 / Math.abs(Math.sin(a0))) : 490;
+      const start: Pt = [HX + Math.cos(a0) * r0, HY + Math.sin(a0) * r0];
+      paints.push(
+        trainRun(aMarks, { ctx, points: [start, end], color: s.color, at: a.beat(1) + (i % 2) * 0.06, count: 2, headway: a.beat(2) - a.beat(1), hop: 0.42, express: true }),
+        stationStop(aMarks, { ctx, x: end[0], y: end[1], at: a.beat(3) + i * 0.025, size: 20 }),
+      );
+    });
+    const hub = layer(a.el);
+    paints.push(stationStop(hub, { ctx, x: HX, y: HY, at: a.beat(0), kind: "hub", size: 190, length: 560 }));
+    const count = label(hub, `left:0;width:1920px;top:${HY - 150}px;text-align:center;box-sizing:border-box;padding-right:180px;font:900 300px ${display};color:${ink};letter-spacing:-0.02em`);
+    const word = label(hub, `left:${HX + 250}px;top:${HY - 30}px;font:800 72px ${sans};color:${ink}`);
+    const sign = label(hub, `left:50%;top:${HY + 230}px;transform:translateX(-50%);padding:18px 40px 10px;border:6px solid ${ink};border-radius:999px;background:${ctx.style.colors.surface};font:700 60px ${mono};color:${ink};visibility:hidden`);
+    const writeSign = nameplate(sign, { ctx, text: OG.host, at: a.beat(1), dur: 0.3 });
+    const writeWord = nameplate(word, { ctx, text: "모델", at: a.beat(1), dur: 0.15 });
+    paints.push((t) => {
+      // 0 에서 102 까지 첫 박 사이에 센다 — 환승역에 노선이 하나씩 붙는 수
+      const p = Math.min(1, Math.max(0, (t - a.beat(0)) / Math.max(0.2, a.beat(1) - a.beat(0))));
+      count.textContent = t < a.beat(0) ? "" : String(Math.round(OG.models * p));
+      sign.style.visibility = t >= a.beat(1) ? "visible" : "hidden";
+      writeSign(t);
+      writeWord(t);
+    });
+
+    // 판면 2 — 하루 = 순환선: 24 시 역이 한 바퀴 서고, 00–10 구간이 싼 운임 색으로 덧칠, 그 옆에 −90%
+    paints.push(paperMap(layer(b.el), { ctx }));
+    const bWords = layer(b.el);
+    paints.push(hourLoop(layer(b.el), { ctx, cx: 600, cy: 545, w: 840, h: 760, at: b.beat(0), dur: 0.5, window: [OG.night.from, OG.night.to], windowAt: b.beat(1), labels: [0, 6, 10, 12, 18] }));
+    const span = label(bWords, `left:1180px;top:210px;font:700 84px ${mono};color:${ink}`);
+    const off = label(bWords, `left:1160px;top:360px;font:900 250px ${display};color:${ctx.style.colors.accentText};letter-spacing:-0.03em`);
+    const ds = label(bWords, `left:1186px;top:640px;font:700 34px ${mono};color:${ink}`);
+    const glm = label(bWords, `left:1186px;top:740px;font:700 34px ${mono};color:${ink}`);
+    paints.push(
+      nameplate(span, { ctx, text: "00:00–10:00", at: b.beat(1), dur: 0.28 }),
+      nameplate(off, { ctx, text: OG.deepseek.off.replace("-", "−"), at: b.beat(2), dur: 0.16 }),
+      nameplate(ds, { ctx, text: OG.deepseek.id, at: b.beat(2) + 0.08, dur: 0.26 }),
+      nameplate(glm, { ctx, text: `${OG.glm.id} ${OG.glm.off.replace("-", "−")}`, at: b.beat(3), dur: 0.26 }),
+    );
+
+    // 판면 3 — 운임표: 정가 역에서 00–10 역으로 가는 노선. 열차 무리가 가는 동안 00–10 역 운임이 정가에서 내려가 닿는 박에 앉는다
+    paints.push(paperMap(layer(c.el), { ctx }));
+    const cLines = layer(c.el);
+    const cMarks = layer(c.el);
+    const cWords = layer(c.el);
+    const title = label(cWords, `left:120px;top:100px;font:700 48px ${mono};color:${ink}`);
+    paints.push(nameplate(title, { ctx, text: `deepseek/${OG.deepseek.id}`, at: c.beat(0), dur: 0.3 }));
+    const rows: [string, string[], number][] = [
+      ["입력", OG.deepseek.input, 480],
+      ["출력", OG.deepseek.output, 820],
+    ];
+    const X0 = 520;
+    const X1 = 1560;
+    const [go, land] = [c.beat(2), c.beat(3)];
+    rows.forEach(([name, [full, night], y]) => {
+      const head = label(cWords, `left:120px;top:${y - 30}px;font:800 60px ${sans};color:${ink}`);
+      const p0 = label(cWords, `left:${X0 - 300}px;width:600px;text-align:center;top:${y - 140}px;font:700 84px ${mono};color:${ink}`);
+      const p1 = label(cWords, `left:${X1 - 300}px;width:600px;text-align:center;top:${y - 140}px;font:800 84px ${mono};color:${ctx.style.colors.accentText};visibility:hidden`);
+      const t0 = label(cWords, `left:${X0 - 200}px;width:400px;text-align:center;top:${y + 44}px;font:700 36px ${sans};color:${ink}`);
+      const t1 = label(cWords, `left:${X1 - 200}px;width:400px;text-align:center;top:${y + 44}px;font:700 36px ${mono};color:${ink}`);
+      const pts: Pt[] = [[X0, y], [X1, y]];
+      const [from, to] = [Number(full.slice(1)), Number(night.slice(1))];
+      paints.push(
+        nameplate(head, { ctx, text: name, at: c.beat(0), dur: 0.15 }),
+        routeDraw(cLines, { ctx, points: pts, color: line(7), at: c.beat(0), dur: 0.36 }),
+        trainRun(cMarks, { ctx, points: pts, color: line(7), at: go, count: 3, headway: 0.12, hop: land - go, dwell: 0.04 }),
+        stationStop(cMarks, { ctx, x: X0, y, at: c.beat(1), kind: "hub", size: 24, length: 0 }),
+        stationStop(cMarks, { ctx, x: X1, y, at: c.beat(1) + 0.06, kind: "hub", size: 24, length: 0 }),
+        nameplate(p0, { ctx, text: `${full}/M`, at: c.beat(1), dur: 0.22 }),
+        nameplate(t0, { ctx, text: "정가", at: c.beat(1) + 0.06, dur: 0.12 }),
+        nameplate(t1, { ctx, text: "00–10", at: c.beat(1) + 0.1, dur: 0.14 }),
+        (t) => {
+          // 운임이 첫 열차를 따라 내려간다 — 닿는 박에 00–10 운임 그대로
+          p1.style.visibility = t >= go ? "visible" : "hidden";
+          const k = Math.min(1, Math.max(0, (t - go) / (land - go)));
+          p1.textContent = `$${(k >= 1 ? to : from + (to - from) * k).toFixed(2)}/M`;
+        },
+      );
+    });
+
+    return (t: number) => {
+      show(t);
+      const s = drop(t);
+      applyStyle(frame, s.shake);
+      for (const p of paints) p(t);
+    };
+  },
+};