kasaframe 0.1.1 → 0.1.4

package/themes/manga-panel/sample/index.html

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

package/themes/manga-panel/sample/kf.json

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

@@ -0,0 +1,58 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { slots } from "../../slots.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);
+
+/** 원고지 바탕 — 테마 surface 슬롯 그대로(서 있다) */
+export function manuscript(root: HTMLElement, ctx: SceneCtx): Paint {
+  return slots.surface!(layer(root), { ctx, seed: ctx.id });
+}
+
+/**
+ * 쪽 — from 에서 until 앞까지만 보이는 한 쪽. 컷은 display:none(숨은 쪽 안 요소가 비치지 않게),
+ * 숨은 쪽은 칠하지 않는다
+ */
+export function page(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);
+  };
+}
+
+/** 칸 안 글 — 상자 안 자리(px)에 글 한 줄. 효과음 꼴이 아닌 설명 글 */
+export function words(cell: HTMLElement, ctx: SceneCtx, o: { text: string; x: number; y: number; size: number; font?: "sans" | "display" | "mono"; anchor?: "left" | "center" | "right"; color?: string }): HTMLDivElement {
+  const d = document.createElement("div");
+  const tx = o.anchor === "left" ? "0" : o.anchor === "right" ? "-100%" : "-50%";
+  d.style.cssText = `position:absolute;left:${o.x}px;top:${o.y}px;transform:translate(${tx},-50%);white-space:nowrap;font-family:${ctx.style.fonts[o.font ?? "sans"]};font-size:${o.size}px;line-height:1;color:${ctx.style.colors[o.color ?? "ink"] ?? o.color};`;
+  d.textContent = o.text;
+  cell.append(d);
+  return d;
+}
+
+/** 원 꼴 칸 — 꼭짓점 n 개 */
+export const circle = (cx: number, cy: number, r: number, n = 56): Pt[] => Array.from({ length: n }, (_, i) => [cx + Math.cos((i / n) * Math.PI * 2) * r, cy + Math.sin((i / n) * Math.PI * 2) * r]);
+
+/** 사각 칸 — 위아래 변을 기울여(dy) 긴장을 준다 */
+export const quad = (x: number, y: number, w: number, h: number, dyTop = 0, dyBottom = 0): Pt[] => [
+  [x, y + dyTop / 2],
+  [x + w, y - dyTop / 2],
+  [x + w, y + h - dyBottom / 2],
+  [x, y + h + dyBottom / 2],
+];

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

@@ -0,0 +1,96 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { balloon, focusLines, panelPage, screentone, sfx, speedLines } from "../../effects.ts";
+import svg from "../assets/og/logo.svg?raw";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, layer, manuscript, page, type Paint, type Pt, quad, words } from "../lib/manga.ts";
+
+// 첫 토큰 실측 셋(효과선 띠 길이 = ms) → 로고 칸에 집중선 → 마지막 마디엔 로고 칸이 화면 끝까지 뚫린다
+const local = (box: { poly: Pt[]; x: number; y: number }): Pt[] => box.poly.map(([x, y]) => [x - box.x, y - box.y]);
+
+function logo(cell: HTMLElement, x: number, y: number, w: number, ink: string): HTMLDivElement {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:${w}px;color:${ink}`;
+  el.innerHTML = svg.replace(/ width="\d+" height="\d+"/, ' width="100%" style="display:block"');
+  cell.append(el);
+  return el;
+}
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = manuscript(root, ctx);
+    const art = layer(root);
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const ink = ctx.style.colors.ink;
+
+    // 쪽 1 — 실측 세 줄. 줄마다 한 박, 효과선 띠가 ms 만큼 뻗고 ms 가 효과음 꼴로 찍힌다
+    const max = Math.max(...OG.ttft.map(([, , ms]) => ms));
+    const ttft = page(art, 0, B(4), (el) => {
+      const extra: Paint[] = [];
+      const pg = panelPage(el, {
+        ctx,
+        rows: [...OG.ttft.map(() => ({ h: 1, cols: [1], tilt: -30 })), { h: 0.5, cols: [1] }],
+        at: (i) => B(i),
+        build(cell, i, box) {
+          if (i === 3) {
+            words(cell, ctx, { text: OG.calls, x: box.w / 2, y: box.h / 2, size: 72 });
+            return;
+          }
+          const [id, label, ms] = OG.ttft[i];
+          const bandW = (box.w - 620) * (ms / max);
+          const band: Pt[] = [[560, box.h * 0.22], [560 + bandW, box.h * 0.22], [560 + bandW, box.h * 0.78], [560, box.h * 0.78]];
+          extra.push(screentone(cell, { ctx, poly: band, pitch: 9, value: 0.25, at: B(i) + 0.125 }));
+          extra.push(speedLines(cell, { ctx, area: [560, 0, bandW, box.h], clip: band, angle: 0, rate: 1.2, at: B(i) + 0.125, seed: `ttft${i}` }));
+          words(cell, ctx, { text: id, x: 50, y: box.h / 2, size: 54, anchor: "left" });
+          extra.push(sfx(cell, { ctx, text: label, x: 560 + bandW / 2, y: box.h / 2, size: 116, rotate: -3, at: B(i) + 0.2, seed: `ms${i}` }));
+        },
+      });
+      return [pg, ...extra];
+    });
+
+    // 쪽 2 — 가운데 로고 칸에 집중선, 아래 칸에 opengateway.ai, 주소 상자
+    const card = page(art, B(4), B(8), (el) => {
+      const extra: Paint[] = [];
+      const pg = panelPage(el, {
+        ctx,
+        quads: [quad(80, 60, 1760, 640, 0, -40), quad(80, 740, 1760, 280, -40, 0)],
+        at: [B(4), B(5)],
+        build(cell, i, box) {
+          if (i === 0) {
+            extra.push(focusLines(cell, { ctx, cx: box.w / 2, cy: box.h / 2, rx: 420, ry: 250, area: [0, 0, box.w, box.h], clip: local(box), at: B(4) + 0.125, burst: 0.12, count: 150, seed: "logo" }));
+            logo(cell, box.w / 2 - 290, box.h / 2 - 165, 580, ink);
+            return;
+          }
+          extra.push(screentone(cell, { ctx, poly: local(box), pitch: 10, value: (u) => 0.08 + 0.3 * u, at: B(7) }));
+          extra.push(sfx(cell, { ctx, text: OG.site, x: box.w / 2, y: box.h * 0.42, size: 118, rotate: -2, skew: -6, at: B(5) + 0.125, seed: "site" }));
+          extra.push(balloon(cell, { ctx, kind: "box", x: box.w / 2, y: box.h * 0.8, w: 820, h: 70, text: OG.url, size: 44, at: B(6) }));
+        },
+      });
+      return [pg, ...extra];
+    });
+
+    // 쪽 3 — 로고 칸이 화면 끝까지 뚫린다(타치키리), 집중선이 끝까지 끓는다
+    const bleed = page(art, B(8), ctx.dur + 1, (el) => {
+      const extra: Paint[] = [];
+      const pg = panelPage(el, {
+        ctx,
+        quads: [quad(-30, -30, 1980, 1140)],
+        at: [B(8)],
+        build(cell) {
+          extra.push(focusLines(cell, { ctx, cx: 990, cy: 470, rx: 640, ry: 330, area: [0, 0, 1980, 1140], at: B(8), burst: 0.12, count: 200, seed: "bleed" }));
+          logo(cell, 990 - 330, 470 - 230, 660, ink);
+          extra.push(sfx(cell, { ctx, text: OG.site, x: 990, y: 820, size: 116, rotate: -3, at: B(8) + 0.125, ink: "accent", seed: "site2" }));
+          extra.push(balloon(cell, { ctx, kind: "box", x: 990, y: 990, w: 860, h: 76, text: OG.url, size: 46, at: B(9) }));
+        },
+      });
+      return [pg, ...extra];
+    });
+
+    return (t: number) => {
+      paper(t);
+      ttft(t);
+      card(t);
+      bleed(t);
+    };
+  },
+};

package/themes/manga-panel/sample/scenes/gather.ts

@@ -0,0 +1,100 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { focusLines, pageTurn, panelPage, screentone, sfx, speedLines } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, layer, manuscript, page, type Paint, type Pt, words } from "../lib/manga.ts";
+
+// 흩어진 공급자 아홉 칸(효과선이 저마다 다른 쪽으로) → 모델 수만큼 큰 칸(칸 넓이 = 모델 수)
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = manuscript(root, ctx);
+    const art = layer(root);
+    const b = beatsIn(ctx);
+    const bar2 = b[4] ?? 1.6947;
+
+    const scattered = page(art, 0, bar2, (el) => {
+      const lines: Paint[] = [];
+      const tones: Paint[] = [];
+      const pg = panelPage(el, {
+        ctx,
+        rows: [
+          { h: 1, cols: [1.1, 0.9, 1], slant: 70, tilt: 50 },
+          { h: 1, cols: [0.9, 1.2, 0.9], slant: -80, tilt: -60 },
+          { h: 1, cols: [1, 1, 1.05], slant: 60 },
+        ],
+        // 줄마다 한 박 — 오른쪽 위 줄부터
+        at: (i) => [0, b[0] ?? 0.29, b[1] ?? 0.64][Math.floor(i / 3)] + (i % 3) / 24,
+        build(cell, i, box) {
+          const [name] = OG.providers[i];
+          const local = box.poly.map(([x, y]) => [x - box.x, y - box.y] as Pt);
+          // 회사마다 효과선이 다른 쪽으로 — 아직 한 곳으로 모이지 않았다
+          lines.push(speedLines(cell, { ctx, area: [0, 0, box.w, box.h], clip: local, angle: (i * 137) % 360, rate: 0.5, at: b[2] ?? 0.99, seed: `g${i}` }));
+          if (i % 2 === 0) tones.push(screentone(cell, { ctx, poly: local, pitch: 11, value: (u, v) => 0.08 + 0.32 * v, at: b[3] ?? 1.35 }));
+          const tag = words(cell, ctx, { text: name, x: box.w / 2, y: box.h / 2, size: 86 });
+          tag.style.background = ctx.style.colors.surface;
+          tag.style.padding = "4px 18px";
+          tag.style.border = `5px solid ${ctx.style.colors.ink}`;
+        },
+      });
+      return [pg, ...tones, ...lines];
+    });
+
+    // 칸 넓이 = 모델 수 — 오른쪽 큰 칸이 OpenAI 41, 나머지 61 을 줄마다
+    const [ax, ay, aw, ah] = [80, 60, 1760, 960];
+    const gx = 18;
+    const gy = 30;
+    const total = OG.models;
+    const bigW = ((aw - gx) * OG.providers[0][1]) / total;
+    const quads: Pt[][] = [[[ax + aw - bigW, ay], [ax + aw, ay], [ax + aw, ay + ah], [ax + aw - bigW - 40, ay + ah]]];
+    const restW = aw - bigW - gx;
+    const groups = [OG.providers.slice(1, 3), OG.providers.slice(3, 6), OG.providers.slice(6, 9)];
+    const sums = groups.map((g) => g.reduce((a, [, n]) => a + n, 0));
+    const sumAll = sums.reduce((a, s) => a + s, 0);
+    // OpenAI 칸 왼쪽 변이 기울어 있으니 그 옆 칸들의 오른쪽 변도 같은 기울기로 물러선다
+    const edgeX = (yy: number) => ax + restW - (40 * (yy - ay)) / ah;
+    let y = ay;
+    groups.forEach((g, r) => {
+      const h = ((ah - gy * 2) * sums[r]) / sumAll;
+      const free = restW - gx * (g.length - 1);
+      let x = ax + restW;
+      g.forEach(([, n], c) => {
+        const w = (free * n) / sums[r];
+        const rt = c === 0 ? edgeX(y) : x;
+        const rb = c === 0 ? edgeX(y + h) : x;
+        quads.push([[x - w, y], [rt, y], [rb, y + h], [x - w, y + h]]);
+        x -= w + gx;
+      });
+      y += h + gy;
+    });
+    const openAt = [b[4] ?? 1.69, b[5] ?? 2.05, b[5] ?? 2.05, b[6] ?? 2.4, b[6] ?? 2.4, b[6] ?? 2.4, b[7] ?? 2.76, b[7] ?? 2.76, b[7] ?? 2.76];
+    const counts = page(art, bar2, ctx.dur, (el) => {
+      const extra: Paint[] = [];
+      const pg = panelPage(el, {
+        ctx,
+        quads,
+        at: (i) => openAt[i] + ((i - 1) % 3) / 24,
+        build(cell, i, box) {
+          const [name, n] = OG.providers[i];
+          const local = box.poly.map(([px, py]) => [px - box.x, py - box.y] as Pt);
+          // 이름 띠를 아래에 떼어 두고 남은 높이·폭 안에 숫자 — Gasoek One 숫자 한 자 0.9em 남짓, 기울기·흰 테두리 몫을 남긴다
+          const nameSize = Math.round(Math.max(26, Math.min(60, box.h * 0.15, box.w * 0.15)));
+          const room = box.h - nameSize * 1.7;
+          const big = Math.min((box.w * 0.7) / (0.9 * String(n).length), room * 0.74);
+          const cy = room / 2 + 6;
+          if (i === 0) extra.push(focusLines(cell, { ctx, cx: box.w / 2, cy, rx: box.w * 0.36, ry: box.h * 0.2, area: [0, 0, box.w, box.h], clip: local, at: openAt[0] + 0.125, burst: 0.12, count: 110, seed: "openai" }));
+          else extra.push(screentone(cell, { ctx, poly: local, pitch: 9, value: 0.12 + (i % 3) * 0.06, at: openAt[i] + 0.125 }));
+          extra.push(sfx(cell, { ctx, text: String(n), x: box.w / 2, y: cy, size: Math.round(big), rotate: i % 2 ? 5 : -6, at: openAt[i] + 0.125, stagger: 1 / 24, seed: `n${i}` }));
+          words(cell, ctx, { text: name, x: box.w / 2, y: box.h - nameSize * 0.85, size: nameSize });
+        },
+      });
+      return [pg, ...extra];
+    });
+
+    const turn = pageTurn(layer(root), { ctx, at: ctx.dur - 0.24, dur: 0.22 });
+    return (t: number) => {
+      paper(t);
+      scattered(t);
+      counts(t);
+      turn(t);
+    };
+  },
+};

package/themes/manga-panel/sample/scenes/models.ts

@@ -0,0 +1,96 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { balloon, focusLines, panelPage, sfx, speedLines } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, layer, manuscript, page, type Paint, type Pt, quad, words } from "../lib/manga.ts";
+
+// 한 주소 → 박마다 다른 모델 ID 가 요청 풍선으로 같은 주소를 부른다(효과선이 주소 칸 쪽으로) → 엔드포인트 넷, 처리량이 오르며 드롭으로 모은다
+const local = (box: { poly: Pt[]; x: number; y: number }): Pt[] => box.poly.map(([x, y]) => [x - box.x, y - box.y]);
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = manuscript(root, ctx);
+    const art = layer(root);
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+
+    // 쪽 1 — 주소 한 줄, /v1 이 쾅, 집중선, 두 형식이 아래에서 주소로 흘러든다
+    const address = page(art, 0, B(4), (el) => {
+      const extra: Paint[] = [];
+      const pg = panelPage(el, {
+        ctx,
+        quads: [quad(80, 60, 1760, 600, 0, -50), quad(970, 700, 870, 320, -50, 0), quad(80, 700, 870, 320, -50, 0)],
+        at: [0, B(3), B(3) + 1 / 24],
+        build(cell, i, box) {
+          if (i === 0) {
+            // 주소가 서면 옅은 집중선이 먼저 끓고, 셋째 박에 진한 집중선이 쏘아 들어온다
+            extra.push(focusLines(cell, { ctx, cx: box.w / 2, cy: 420, rx: 420, ry: 150, area: [0, 0, box.w, box.h], clip: local(box), at: 0.125, until: B(2), strength: 0.3, count: 70, seed: "v1a" }));
+            extra.push(focusLines(cell, { ctx, cx: box.w / 2, cy: 420, rx: 420, ry: 150, area: [0, 0, box.w, box.h], clip: local(box), at: B(2), burst: 0.12, count: 130, seed: "v1" }));
+            extra.push(balloon(cell, { ctx, kind: "box", x: box.w / 2, y: 150, w: 1360, h: 150, text: OG.url, size: 78, at: 0.125 }));
+            extra.push(sfx(cell, { ctx, text: "/v1", x: box.w / 2, y: 420, size: 250, rotate: -5, at: B(1), ink: "accent", seed: "v1" }));
+            return;
+          }
+          const fmt = i === 1 ? "OpenAI 형식" : "Anthropic 형식";
+          extra.push(speedLines(cell, { ctx, area: [0, 0, box.w, box.h], clip: local(box), angle: -90, rate: 0.7, at: B(3), seed: `fmt${i}` }));
+          extra.push(balloon(cell, { ctx, kind: "round", x: box.w / 2, y: box.h / 2, w: 560, h: 170, text: fmt, size: 66, at: B(3) + 0.125 + (i - 1) / 24, seed: `fmt${i}` }));
+        },
+      });
+      return [pg, ...extra];
+    });
+
+    // 쪽 2 — 왼쪽 주소 칸 하나, 오른쪽 칸마다 다른 모델 ID 요청 풍선. 효과선이 모두 주소 칸 쪽(왼쪽)으로
+    const calls = page(art, B(4), B(8), (el) => {
+      const extra: Paint[] = [];
+      const rowH = (960 - 3 * 22) / 4;
+      const quads: Pt[][] = [quad(80, 60, 600, 960, 0, 0)];
+      for (let k = 0; k < 4; k++) quads.push(quad(700, 60 + k * (rowH + 22), 1140, rowH, k ? 24 : 0, k < 3 ? 24 : 0));
+      const pg = panelPage(el, {
+        ctx,
+        quads,
+        at: (i) => (i === 0 ? B(4) : B(3 + i)),
+        // 주소 칸은 베타(먹칠) — 요청이 모두 모이는 한 곳
+        fill: (i) => (i === 0 ? "ink" : "surface"),
+        build(cell, i, box) {
+          if (i === 0) {
+            words(cell, ctx, { text: OG.host.split("/")[0], x: box.w / 2, y: box.h * 0.36, size: 60, color: "surface" });
+            extra.push(sfx(cell, { ctx, text: "/v1", x: box.w / 2, y: box.h * 0.58, size: 170, rotate: -4, at: B(4) + 0.125, seed: "v1b" }));
+            extra.push(focusLines(cell, { ctx, cx: box.w / 2, cy: box.h * 0.5, rx: 250, ry: 300, area: [0, 0, box.w, box.h], clip: local(box), at: B(4) + 0.125, strength: 0.55, count: 90, ink: "surface", seed: "addr" }));
+            return;
+          }
+          const id = OG.ids[i - 1];
+          extra.push(speedLines(cell, { ctx, area: [0, 0, box.w, box.h], clip: local(box), angle: 180, rate: 0.45, at: B(3 + i), seed: `call${i}` }));
+          extra.push(balloon(cell, { ctx, kind: "round", x: box.w * 0.5, y: box.h / 2, w: Math.min(1060, 200 + id.length * 27), h: box.h * 0.8, text: id, size: Math.min(62, Math.floor((1060 * 0.84) / (id.length * 0.47))), tail: [box.w + 30, box.h * 0.75], at: B(3 + i) + 0.125, seed: `id${i}` }));
+        },
+      });
+      return [pg, ...extra];
+    });
+
+    // 쪽 3 — 엔드포인트 넷이 기운 세로 칸에 세로쓰기로, 칸마다 효과선 처리량이 오르고 마지막 박에 화면 전체 집중선이 드롭으로 모은다
+    const endpoints = page(art, B(8), ctx.dur, (el) => {
+      const extra: Paint[] = [];
+      const pg = panelPage(el, {
+        ctx,
+        rows: [{ h: 1, cols: [1, 1, 1, 1], slant: 120 }],
+        gutter: [40, 22],
+        at: (i) => B(8 + i),
+        build(cell, i, box) {
+          const ep = OG.endpoints[i];
+          extra.push(speedLines(cell, { ctx, area: [0, 0, box.w, box.h], clip: local(box), angle: -90, rate: (t) => 0.4 + 1.2 * Math.max(0, (t - B(8)) / (ctx.dur - B(8))), at: B(8 + i), seed: `ep${i}` }));
+          const v = words(cell, ctx, { text: ep, x: box.w / 2, y: box.h / 2, size: 78 });
+          v.style.writingMode = "vertical-rl";
+          v.style.background = ctx.style.colors.surface;
+          v.style.padding = "22px 10px";
+          v.style.border = `5px solid ${ctx.style.colors.ink}`;
+        },
+      });
+      const gatherLines = focusLines(el, { ctx, cx: 960, cy: 540, rx: 430, ry: 230, at: B(11), burst: 0.2, strength: (t) => 0.4 + 0.6 * Math.min(1, (t - B(11)) / Math.max(0.1, ctx.dur - B(11))), count: 170, seed: "gather" });
+      return [pg, ...extra, gatherLines];
+    });
+
+    return (t: number) => {
+      paper(t);
+      address(t);
+      calls(t);
+      endpoints(t);
+    };
+  },
+};

package/themes/manga-panel/sample/scenes/price.ts

@@ -0,0 +1,154 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { balloon, focusLines, impactFrame, panelPage, penStroke, screentone, sfx, speedLines } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, circle, layer, manuscript, page, type Paint, type Pt, quad, words } from "../lib/manga.ts";
+
+// 드롭 — 칸을 뚫은 쪽 하나에 102 결정타 → 둥근 칸 시계에 00–10시 톤과 -90% → deepseek 정가를 펜이 긋고 밤 값이 떨어진다
+const local = (box: { poly: Pt[]; x: number; y: number }): Pt[] => box.poly.map(([x, y]) => [x - box.x, y - box.y]);
+const SVG = "http://www.w3.org/2000/svg";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = manuscript(root, ctx);
+    const frame = layer(root);
+    const art = layer(frame);
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const drop = ctx.beats.drop(0);
+
+    // 쪽 1 — 타치키리(화면 끝까지 뚫은 칸) 한 장에 102, 집중선, 작은 칸 하나와 주소 상자
+    const ref: { hero?: HTMLElement } = {};
+    const splash = page(art, 0, B(4), (el) => {
+      const extra: Paint[] = [];
+      const pg = panelPage(el, {
+        ctx,
+        quads: [quad(-30, -30, 1980, 1140), quad(120, 90, 470, 300, 30, -30)],
+        at: [drop, B(1)],
+        build(cell, i, box) {
+          if (i === 0) {
+            extra.push(focusLines(cell, { ctx, cx: 990, cy: 520, rx: 560, ry: 270, area: [0, 0, box.w, box.h], at: drop, burst: 0.1, count: 190, strength: (t) => (t >= B(3) ? 1 : 0.7), seed: "drop" }));
+            const hero = document.createElement("div");
+            hero.style.cssText = "position:absolute;inset:0";
+            cell.append(hero);
+            ref.hero = hero;
+            extra.push(sfx(hero, { ctx, text: String(OG.models), x: 990, y: 520, size: 430, rotate: -7, at: drop, stagger: 1 / 24, ink: "accent", seed: "102" }));
+            extra.push(balloon(cell, { ctx, kind: "box", x: 990, y: 935, w: 1240, h: 130, text: OG.url, size: 68, at: B(2) }));
+            return;
+          }
+          extra.push(screentone(cell, { ctx, poly: local(box), pitch: 10, value: (u, v) => 0.05 + 0.25 * (1 - v), at: B(1) + 0.125 }));
+          const tag = words(cell, ctx, { text: "모델", x: box.w / 2, y: box.h / 2, size: 140, font: "display" });
+          tag.style.background = ctx.style.colors.surface;
+          tag.style.padding = "0 18px";
+        },
+      });
+      return [pg, ...extra];
+    });
+
+    // 쪽 2 — 둥근 칸 하루 시계: 바늘이 하루를 돌고, 00–10시 부채꼴에 톤이 붙고, 오른쪽 칸에 KST 와 -90%
+    const clock = page(art, B(4), B(8), (el) => {
+      const extra: Paint[] = [];
+      const R = 420;
+      const pg = panelPage(el, {
+        ctx,
+        quads: [circle(560, 540, R), quad(1080, 60, 760, 960, 0, 0)],
+        at: [B(4), B(6)],
+        build(cell, i, box) {
+          if (i === 0) {
+            const cx = 560 - box.x;
+            const cy = 540 - box.y;
+            const ang = (h: number) => (h / 24) * Math.PI * 2 - Math.PI / 2;
+            const sector: Pt[] = [[cx, cy]];
+            for (let h = OG.night.from; h <= OG.night.to + 1e-6; h += 0.25) sector.push([cx + Math.cos(ang(h)) * (R - 6), cy + Math.sin(ang(h)) * (R - 6)]);
+            extra.push(screentone(cell, { ctx, poly: sector, pitch: 9, value: 0.62, at: B(5) }));
+            const sv = document.createElementNS(SVG, "svg");
+            sv.setAttribute("width", String(box.w));
+            sv.setAttribute("height", String(box.h));
+            sv.style.cssText = "position:absolute;left:0;top:0";
+            for (let h = 0; h < 24; h++) {
+              const big = h % 6 === 0;
+              const l = document.createElementNS(SVG, "line");
+              const r0 = R - (big ? 70 : 40);
+              const r1 = R - 14;
+              for (const [k, v] of Object.entries({ x1: cx + Math.cos(ang(h)) * r0, y1: cy + Math.sin(ang(h)) * r0, x2: cx + Math.cos(ang(h)) * r1, y2: cy + Math.sin(ang(h)) * r1, stroke: ctx.style.colors.ink, "stroke-width": big ? 10 : 5 })) l.setAttribute(k, String(v));
+              sv.append(l);
+            }
+            cell.append(sv);
+            for (const h of [0, 6, 12, 18]) {
+              const lab = words(cell, ctx, { text: String(h).padStart(2, "0"), x: cx + Math.cos(ang(h)) * (R - 125), y: cy + Math.sin(ang(h)) * (R - 125), size: 60 });
+              lab.style.background = ctx.style.colors.surface;
+              lab.style.padding = "0 8px";
+            }
+            // 바늘이 하루를 한 바퀴 돌고 10시(싼 창 끝)에 선다
+            const handBox = document.createElement("div");
+            handBox.style.cssText = `position:absolute;left:0;top:0;width:${box.w}px;height:${box.h}px;transform-origin:${cx}px ${cy}px`;
+            cell.append(handBox);
+            const hand = penStroke(handBox, { ctx, points: [[cx, cy], [cx, cy - R + 90]], at: B(4) + 0.125, dur: 0.12, width: 22 });
+            const hub = document.createElement("div");
+            hub.style.cssText = `position:absolute;left:${cx - 22}px;top:${cy - 22}px;width:44px;height:44px;border-radius:50%;background:${ctx.style.colors.ink}`;
+            cell.append(hub);
+            const sweep = (t: number) => {
+              const u = Math.min(1, Math.max(0, (t - B(4)) / (B(7) - B(4))));
+              const hours = (24 + OG.night.to) * (1 - (1 - u) ** 2);
+              handBox.style.transform = `rotate(${(hours / 24) * 360}deg)`;
+            };
+            extra.push(hand, sweep);
+            return;
+          }
+          extra.push(balloon(cell, { ctx, kind: "box", x: box.w / 2, y: 200, w: 620, h: 150, text: `KST ${String(OG.night.from).padStart(2, "0")}:00–${OG.night.to}:00`, size: 66, at: B(6) + 0.125 }));
+          extra.push(focusLines(cell, { ctx, cx: box.w / 2, cy: 590, rx: 300, ry: 170, area: [0, 0, box.w, box.h], clip: local(box), at: B(7), burst: 0.12, count: 110, seed: "night" }));
+          extra.push(sfx(cell, { ctx, text: OG.deepseek.off.replace("-", "−"), x: box.w / 2, y: 590, size: 200, rotate: -6, at: B(7), ink: "accent", seed: "off" }));
+          words(cell, ctx, { text: OG.deepseek.id, x: box.w / 2, y: 880, size: 42 });
+        },
+      });
+      return [pg, ...extra];
+    });
+
+    // 쪽 3 — 정가 칸(오른쪽)을 펜이 붉게 긋고, 밤 칸(왼쪽)에 싼 값이 효과선을 타고 떨어진다, 아래에 glm
+    const prices = page(art, B(8), ctx.dur, (el) => {
+      const extra: Paint[] = [];
+      const pg = panelPage(el, {
+        ctx,
+        quads: [quad(80, 60, 1760, 170, 0, 0), quad(970, 270, 870, 560, 0, 40), quad(80, 270, 870, 560, 0, -40), quad(80, 870, 1760, 150, 40, 0)],
+        at: [B(8), B(8) + 1 / 24, B(10), B(11)],
+        build(cell, i, box) {
+          const [d0, d1] = OG.deepseek.input;
+          const [o0, o1] = OG.deepseek.output;
+          if (i === 0) {
+            extra.push(speedLines(cell, { ctx, area: [0, 0, box.w, box.h], clip: local(box), angle: 0, rate: 0.8, at: B(8) + 0.125, seed: "banner" }));
+            extra.push(balloon(cell, { ctx, kind: "electric", x: box.w / 2, y: box.h / 2, w: 1100, h: 120, text: OG.deepseek.id, size: 64, at: B(8) + 0.125, seed: "ds" }));
+            return;
+          }
+          if (i === 1) {
+            extra.push(focusLines(cell, { ctx, cx: box.w / 2, cy: 315, rx: 380, ry: 200, area: [0, 0, box.w, box.h], clip: local(box), at: B(8) + 0.17, burst: 0.1, strength: 0.9, count: 150, seed: "list" }));
+            words(cell, ctx, { text: "정가", x: 60, y: 80, size: 64, anchor: "left" });
+            words(cell, ctx, { text: `입력 ${d0} /M`, x: box.w / 2, y: 230, size: 104 });
+            words(cell, ctx, { text: `출력 ${o0} /M`, x: box.w / 2, y: 400, size: 104 });
+            extra.push(penStroke(cell, { ctx, points: [[150, 250], [box.w - 150, 210]], at: B(9), dur: 0.12, width: 18, ink: "accent" }));
+            extra.push(penStroke(cell, { ctx, points: [[150, 420], [box.w - 150, 380]], at: B(9) + 0.12, dur: 0.12, width: 18, ink: "accent" }));
+            return;
+          }
+          if (i === 2) {
+            extra.push(speedLines(cell, { ctx, area: [0, 0, box.w, box.h], clip: local(box), angle: 90, rate: 1, at: B(10), seed: "fall" }));
+            words(cell, ctx, { text: "밤", x: 60, y: 80, size: 64, anchor: "left" }).style.background = ctx.style.colors.surface;
+            extra.push(sfx(cell, { ctx, text: d1, x: box.w / 2, y: 230, size: 150, rotate: -4, at: B(10) + 0.125, seed: "d1" }));
+            extra.push(sfx(cell, { ctx, text: o1, x: box.w / 2, y: 420, size: 150, rotate: 3, at: B(10) + 0.2, seed: "o1" }));
+            return;
+          }
+          words(cell, ctx, { text: `${OG.glm.id}  밤 ${OG.glm.off.replace("-", "−")}`, x: box.w / 2, y: box.h / 2, size: 66 });
+        },
+      });
+      return [pg, ...extra];
+    });
+
+    const hit = impactFrame(layer(root), { ctx, drop: 0, origin: [990, 520], rx: 560, ry: 280 });
+    return (t: number) => {
+      paper(t);
+      splash(t);
+      clock(t);
+      prices(t);
+      const s = hit(t);
+      applyStyle(frame, s.shake);
+      if (ref.hero) applyStyle(ref.hero, s.punch);
+    };
+  },
+};