kasaframe 0.1.1 → 0.1.4

package/themes/circuit-board/sample/index.html

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

package/themes/circuit-board/sample/kf.json

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

@@ -0,0 +1,45 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { measure, route45, travelTime, type PtIn } from "../../pcb.ts";
+
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+export function layer(parent: HTMLElement, css = ""): HTMLElement {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;inset:0;${css}`;
+  parent.append(el);
+  return el;
+}
+
+/** from 부터 to 까지만 보이는 컷 — 숨은 컷은 그리지 않는다 */
+export function cut(parent: HTMLElement, from: number, to: number) {
+  const el = layer(parent);
+  return {
+    el,
+    on(t: number): boolean {
+      const v = t >= from && t < to;
+      // visibility 로 숨기면 안쪽 요소가 visible 을 주는 순간 부모를 뚫고 보인다 — display 로 통째로 뺀다
+      el.style.display = v ? "" : "none";
+      return v;
+    },
+  };
+}
+
+/** from 부터 to 앞까지 every 초마다 — 요청이 끊이지 않고 들어오는 흐름 */
+export const stream = (from: number, to: number, every: number, phase = 0): number[] => {
+  const out: number[] = [];
+  for (let t = from + phase; t < to - 1e-6; t += every) out.push(t);
+  return out;
+};
+
+/** 펄스가 출발해 끝 패드에 닿는 시각 — 칩이 달아오를 hits 를 펄스와 같은 길로 잰다 */
+export const arrive = (points: readonly PtIn[], start: number, speed: number, holds: readonly { at: number; sec: number }[] = [], bend?: number): number =>
+  start + travelTime(measure(route45(points, bend)).len, speed, holds);
+
+/** OG 로고(currentColor SVG) */
+export function logo(parent: HTMLElement, svg: string, x: number, y: number, w: number, color: string): HTMLElement {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:${w}px;color:${color};`;
+  el.innerHTML = svg.replace(/ width="\d+" height="\d+"/, ' width="100%" style="display:block"');
+  parent.append(el);
+  return el;
+}

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

@@ -0,0 +1,102 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { boardMask, currentPulse, edgeConnector, icChip, ledArray, resistor, routeTrace, sevenSeg, silkText } from "../../effects.ts";
+import { fingerPins, measure, route45, type Pt } from "../../pcb.ts";
+import { OG } from "../lib/facts.ts";
+import { arrive, beatsIn, cut, layer, logo } from "../lib/kit.ts";
+import svg from "../assets/og/logo.svg?raw";
+
+// 지연 = 저항. 같은 순간 출발한 펄스 셋이 저마다의 저항(실측 첫 토큰 ms)에서 그만큼 머물고 차례로 칩에 닿는다 — 머무는 초가 실측값 그대로.
+// 다음: 18번 호출이 LED 18 개를 하나씩 켜고 합 $0.0004. 끝: 로고가 드러난 금 동박으로, 요청이 그 사이를 계속 지나간다
+const SPEED = 2400;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const board = boardMask(layer(root), { ctx, seed: "end" });
+
+    const a = cut(root, 0, b[4]);
+    const aT = layer(a.el);
+    const aP = layer(a.el);
+    const aC = layer(a.el);
+    const pins = fingerPins(80, 230, 64, 600, 3, "left");
+    const RX = 640;
+    const race = OG.ttft.map(([name, label, ms], i) => {
+      const y = pins[i][1];
+      const route: Pt[] = [pins[i], [1220 - 16, y]];
+      const len = measure(route45(route)).len;
+      const hold = { at: (RX - pins[i][0]) / len, sec: ms / 1000 };
+      const holdFrom = (RX - pins[i][0]) / SPEED;
+      return { name, label, ms, y, route, hold, holdFrom, end: arrive(route, 0, SPEED, [hold]) };
+    });
+    const aParts = [
+      edgeConnector(aC, { ctx, x: 80, y: 230, w: 64, h: 600, pins: 3, ref: "J1", hits: race.map((_, i) => ({ pin: i, t: 0 })) }),
+      silkText(aC, { ctx, text: "첫 토큰", x: 80, y: 96, size: 70, font: "display", at: 0, dur: 0.2 }),
+      ...race.flatMap((r, i) => [
+        routeTrace(aT, { ctx, points: r.route, at: 0, dur: 0.18, width: 7, pads: "none" }),
+        currentPulse(aP, { ctx, points: r.route, times: [0.02], speed: SPEED, width: 7, holds: [r.hold] }),
+        resistor(aC, { ctx, x: RX, y: r.y, len: 170, value: r.label, ref: `R${i + 1}`, at: 0.02 + i * 0.04, hot: [[0.02 + r.holdFrom, 0.02 + r.holdFrom + r.hold.sec]] }),
+        icChip(aC, { ctx, x: 1220, y: r.y - 50, w: 340, h: 100, label: r.name, at: b[1] + i * 0.05, hits: [r.end + 0.02] }),
+        // 머무는 동안 ms 를 센다 — 펄스가 저항을 떠나는 순간 실측값에 선다
+        sevenSeg(aC, { ctx, x: 1840, y: r.y - 46, h: 64, cells: 4, align: "right", at: 0.02 + r.holdFrom - 0.1, text: (t) => Math.min(r.ms, Math.max(0, (t - 0.02 - r.holdFrom) * 1000)).toFixed(1) }),
+      ]),
+    ];
+
+    const m = cut(root, b[4], b[6]);
+    const N = 18;
+    const lx = (k: number) => 230 + k * 86;
+    const LY = 760;
+    const callAt = (k: number) => b[4] + 0.02 + k * 0.018;
+    const passAt = (k: number) => callAt(k) + (lx(k) - 144) / 6000;
+    const lit = (t: number) => Array.from({ length: N }, (_, k) => k).filter((k) => t >= passAt(k)).length;
+    const mParts = [
+      edgeConnector(m.el, { ctx, x: 80, y: LY - 60, w: 64, h: 120, pins: 1, at: b[4], hits: Array.from({ length: N }, (_, k) => ({ pin: 0, t: callAt(k) })) }),
+      routeTrace(m.el, { ctx, points: [[144, LY], [1800, LY]], at: b[4], dur: 0.12, width: 6, pads: "end" }),
+      currentPulse(m.el, { ctx, points: [[144, LY], [1800, LY]], times: Array.from({ length: N }, (_, k) => callAt(k)), speed: 6000, width: 6, tail: 120 }),
+      ledArray(m.el, { ctx, points: Array.from({ length: N }, (_, k): [number, number] => [lx(k), LY]), size: 34, at: b[4], lit: (k, t) => (t >= passAt(k) ? 1 : 0) }),
+      sevenSeg(m.el, { ctx, x: 110, y: 170, h: 260, cells: 2, at: b[4], text: (t) => String(lit(t)) }),
+      silkText(m.el, { ctx, text: "호출", x: 116, y: 560, size: 60, font: "display", at: b[4] + 0.05 }),
+      // 18번이 다 켜진 다음에 합이 켜진다
+      silkText(m.el, { ctx, text: "$", x: 900, y: 200, size: 170, color: "gold", at: passAt(N - 1) }),
+      sevenSeg(m.el, { ctx, x: 1840, y: 170, h: 220, text: "0.0004", align: "right", at: passAt(N - 1) }),
+      silkText(m.el, { ctx, text: "합", x: 1772, y: 560, size: 60, font: "display", at: passAt(N - 1) + 0.03 }),
+    ];
+
+    // 끝 — 로고가 드러난 금 동박. 왼쪽 J1 에서 들어온 요청이 로고를 지나 오른쪽으로 계속 나간다
+    const e = cut(root, b[6], ctx.dur);
+    const eT = layer(e.el);
+    const eP = layer(e.el);
+    const eC = layer(e.el);
+    const LW = 760;
+    const LX = 580;
+    const LYt = 210;
+    const sc = LW / 1140;
+    const inP = fingerPins(80, 300, 64, 360, 4, "left");
+    const inR = inP.map((p, i): Pt[] => [p, [LX + 36 * sc - 4, LYt + (130 + i * 130) * sc]]);
+    const outR = [0, 1, 2, 3].map((i): Pt[] => [[LX + 1104 * sc + 4, LYt + (130 + i * 130) * sc], [1800, 300 + 90 * (i + 0.5)]]);
+    const flow = (i: number, lag: number) => Array.from({ length: 8 }, (_, j) => b[6] + 0.1 + j * 0.17 + i * 0.045 + lag);
+    const mark = logo(eC, svg, LX, LYt, LW, ctx.style.colors.gold);
+    const eParts = [
+      edgeConnector(eC, { ctx, x: 80, y: 300, w: 64, h: 360, pins: 4, ref: "J1", at: b[6], hits: [0, 1, 2, 3].flatMap((i) => flow(i, 0).map((t) => ({ pin: i, t }))) }),
+      ...inR.map((r, i) => routeTrace(eT, { ctx, points: r, at: b[6], dur: 0.2, width: 7, tone: "gold", pads: "none" })),
+      ...outR.map((r, i) => routeTrace(eT, { ctx, points: r, at: b[6] + 0.08, dur: 0.24, width: 7, tone: "gold", pads: "end" })),
+      ...inR.map((r, i) => currentPulse(eP, { ctx, points: r, times: flow(i, 0), speed: 2400, width: 7 })),
+      ...outR.map((r, i) => currentPulse(eP, { ctx, points: r, times: flow(i, 0.3), speed: 2400, width: 7 })),
+      silkText(eC, { ctx, text: OG.site, x: 960, y: 760, size: 96, anchor: "center", at: b[7], dur: 0.3 }),
+      silkText(eC, { ctx, text: OG.host, x: 960, y: 900, size: 44, anchor: "center", color: "dim", at: b[8], dur: 0.26 }),
+      icChip(eC, { ctx, x: 1500, y: 860, w: 300, h: 80, label: String(OG.models), sub: "모델", ref: "U0", at: b[9] }),
+    ];
+    const pulseIn = inR.map((r, i) => flow(i, 0).map((s) => arrive(r, s, 2400)));
+
+    return (t: number) => {
+      board(t);
+      if (a.on(t)) for (const p of aParts) p(t);
+      if (m.on(t)) for (const p of mParts) p(t);
+      if (e.on(t)) {
+        // 들어온 요청이 로고 동박에 닿을 때마다 금이 한 번 달아오른다
+        const hot = Math.max(0, ...pulseIn.flat().map((h) => (t >= h && t < h + 0.2 ? 1 - (t - h) / 0.2 : 0)));
+        mark.style.color = hot > 0 ? `color-mix(in srgb, ${ctx.style.colors.hot} ${Math.round(hot * 55)}%, ${ctx.style.colors.gold})` : ctx.style.colors.gold;
+        for (const p of eParts) p(t);
+      }
+    };
+  },
+};

package/themes/circuit-board/sample/scenes/gather.ts

@@ -0,0 +1,76 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { boardMask, currentPulse, icChip, ledArray, routeTrace, sevenSeg, silkText } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { arrive, beatsIn, cut, layer, stream } from "../lib/kit.ts";
+
+// 회사 아홉 = 칩 아홉. 처음엔 기판 여기저기 따로 앉아 저마다 제 패드(제 주소)로만 펄스를 받는다 — 서로 이어진 데가 없다.
+// 다음 마디엔 회사별 모델 수를 LED 로 센다 — 모델 하나에 LED 하나, 오른쪽 표시기가 같이 센다
+const SPOTS: [number, number, number][] = [
+  [400, 260, 330], [1000, 220, 280], [1530, 300, 280],
+  [330, 560, 240], [930, 600, 230], [1500, 560, 220],
+  [450, 850, 220], [1050, 860, 220], [1560, 830, 210],
+];
+const CH = 104;
+const PIN = 14;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const board = boardMask(layer(root), { ctx, seed: "gather" });
+
+    const a = cut(root, 0, b[4]);
+    const stubs = layer(a.el);
+    const pulses = layer(a.el);
+    const chips = layer(a.el);
+    const parts: ((t: number) => void)[] = [];
+    OG.providers.forEach(([name], i) => {
+      const [cx, cy, w] = SPOTS[i];
+      const at = [0, b[0], b[1]][Math.floor(i / 3)] + (i % 3) * 0.05;
+      const pad: [number, number] = [cx - w / 2 - 110, cy + 112];
+      const pin: [number, number] = [cx - w / 2 - PIN, cy];
+      const route = [pad, pin];
+      // 칩마다 제 패드로 따로따로 — 꽂히고 선이 깔리면 그때부터 요청이 끊이지 않는다
+      const times = stream(at + 0.36, b[4], 0.26, ((i * 5) % 9) * 0.029);
+      parts.push(
+        routeTrace(stubs, { ctx, points: route, at: at + 0.12, dur: 0.24, width: 7, bend: 0, pads: "start" }),
+        currentPulse(pulses, { ctx, points: route, times, speed: 1300, tail: 160, width: 7, bend: 0 }),
+        icChip(chips, { ctx, x: cx - w / 2, y: cy - CH / 2, w, h: CH, label: name, ref: `U${i + 1}`, at, hits: times.map((s) => arrive(route, s, 1300, [], 0)) }),
+      );
+    });
+
+    const c = cut(root, b[4], ctx.dur);
+    const rows: ((t: number) => void)[] = [];
+    OG.providers.forEach(([name, count], i) => {
+      const y = 150 + i * 96;
+      const start = [b[4], b[5], b[6]][Math.floor(i / 3)] + (i % 3) * 0.04;
+      const xs = Array.from({ length: count }, (_, j): [number, number] => [400 + j * 31, y]);
+      const speed = 2600;
+      // 줄이 서면 그 회사 모델로 요청이 흐르고, 마지막 박엔 아홉 줄이 한꺼번에
+      const runs = [...stream(start + 0.22, b[7] - 0.05, 0.3, i * 0.045), b[7] + i * 0.02];
+      const passes = (j: number) => runs.map((r) => r + (xs[j][0] - 380) / speed);
+      const shown = (t: number) => Math.min(count, Math.max(0, Math.floor((t - start - 0.05) / 0.008) + 1));
+      rows.push(
+        routeTrace(c.el, { ctx, points: [[380, y], [1735, y]], at: start, dur: 0.2, width: 5, pads: "end" }),
+        currentPulse(c.el, { ctx, points: [[380, y], [1735, y]], times: runs, speed, tail: 300, width: 6 }),
+        ledArray(c.el, {
+          ctx,
+          points: xs,
+          size: 22,
+          at: start,
+          lit: (j, t) => {
+            if (j >= shown(t)) return 0;
+            return passes(j).some((p) => t >= p && t < p + 0.14) ? 1 : 0.68;
+          },
+        }),
+        silkText(c.el, { ctx, text: name, x: 110, y: y - 20, size: 40, at: start }),
+        sevenSeg(c.el, { ctx, x: 1840, y: y - 36, h: 50, cells: 2, align: "right", at: start, text: (t) => String(shown(t)) }),
+      );
+    });
+
+    return (t: number) => {
+      board(t);
+      if (a.on(t)) for (const p of parts) p(t);
+      if (c.on(t)) for (const p of rows) p(t);
+    };
+  },
+};

package/themes/circuit-board/sample/scenes/models.ts

@@ -0,0 +1,101 @@
+import { rand, type SceneCtx } from "@kasaframe/core";
+import { boardMask, currentPulse, edgeConnector, icChip, routeTrace, sevenSeg, silkText } from "../../effects.ts";
+import { fingerPins, type Pt } from "../../pcb.ts";
+import { OG } from "../lib/facts.ts";
+import { arrive, beatsIn, cut, layer } from "../lib/kit.ts";
+
+// 한 주소 = 엣지 커넥터 J1. 마디 하나: J1 에서 칩 다섯으로 트레이스가 갈라지고 박마다 펄스(요청)가 다른 칩으로 — 모델 ID 만 바뀐다.
+// 마디 둘: 엔드포인트 넷이 가운데 게이트웨이 칩 U0 으로 모였다 모델로 나간다(두 형식). 마디 셋: 드롭 앞 — 모델 102 개가 점점 빠르게 꽂힌다
+const SPEED = 2600;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const board = boardMask(layer(root), { ctx, seed: "models" });
+
+    // 마디 하나 — 한 주소에서 모델 다섯으로
+    const a = cut(root, 0, b[4]);
+    const aT = layer(a.el);
+    const aP = layer(a.el);
+    const aC = layer(a.el);
+    const j1 = fingerPins(80, 330, 64, 480, 8, "left");
+    const ids = OG.ids.map((id) => id.split("/"));
+    const chipY = (i: number) => 268 + i * 156;
+    const routes = ids.map((_, i): Pt[] => [j1[i + 1], [1240 - 16, chipY(i) + 44]]);
+    // 박 1·2·3 마다 요청 둘(박과 반 박) — 받는 칩이 박마다 바뀐다
+    const shots = [1, 2, 3].flatMap((k, n) => [{ at: b[k], chip: n }, { at: b[k] + 0.177, chip: n }]);
+    const aParts = [
+      edgeConnector(aC, { ctx, x: 80, y: 330, w: 64, h: 480, pins: 8, ref: "J1", hits: shots.map((s) => ({ pin: s.chip + 1, t: s.at })) }),
+      silkText(aC, { ctx, text: OG.host, x: 80, y: 96, size: 74, at: 0, dur: 0.3 }),
+      silkText(aC, { ctx, text: (t) => `model: "${OG.ids[shots.filter((s) => s.at <= t).at(-1)?.chip ?? 0]}"`, x: 80, y: 196, size: 44, at: b[1], prints: [b[2], b[3]], color: "gold" }),
+      ...routes.map((r, i) => routeTrace(aT, { ctx, points: r, at: 0.08 + i * 0.04, dur: 0.34, width: 7, pads: "none" })),
+      ...routes.map((r, i) => currentPulse(aP, { ctx, points: r, times: shots.filter((s) => s.chip === i).map((s) => s.at), speed: SPEED, width: 8, tail: 300 })),
+      ...ids.map(([, name], i) =>
+        icChip(aC, { ctx, x: 1240, y: chipY(i), w: 520, h: 88, label: name, ref: `U${i + 1}`, at: i * 0.06, hits: shots.filter((s) => s.chip === i).map((s) => arrive(routes[i], s.at, SPEED)) }),
+      ),
+    ];
+
+    // 마디 둘 — 엔드포인트 넷 → 게이트웨이 칩 → 모델
+    const m = cut(root, b[4], b[8]);
+    const mT = layer(m.el);
+    const mP = layer(m.el);
+    const mC = layer(m.el);
+    const eps = fingerPins(80, 250, 64, 580, 4, "left");
+    const U0 = { x: 820, y: 380, w: 340, h: 340 };
+    const inR = eps.map((p, i): Pt[] => [p, [U0.x - 16, U0.y + U0.h * (0.2 + 0.2 * i)]]);
+    const outY = [348, 540, 732];
+    const outR = outY.map((y, i): Pt[] => [[U0.x + U0.w + 16, U0.y + U0.h * (0.3 + 0.2 * i)], [1400 - 16, y]]);
+    // 반 박마다 다른 엔드포인트로 들어와 다른 모델로 나간다 — /chat/completions·/messages·/responses 를 돌아가며
+    const calls = [b[4] + 0.2, b[5], b[5] + 0.177, b[6], b[6] + 0.177, b[7], b[7] + 0.177].map((at, k) => ({ at, ep: [0, 2, 1][k % 3], out: k % 3 }));
+    const inArrive = (c: (typeof calls)[number]) => arrive(inR[c.ep], c.at, SPEED);
+    const outArrive = (c: (typeof calls)[number]) => arrive(outR[c.out], inArrive(c) + 0.04, SPEED);
+    const mParts = [
+      edgeConnector(mC, { ctx, x: 80, y: 250, w: 64, h: 580, pins: 4, ref: "J1", at: b[4], hits: calls.map((c) => ({ pin: c.ep, t: c.at })) }),
+      silkText(mC, { ctx, text: "OpenAI · Anthropic", x: 80, y: 120, size: 60, font: "display", at: b[4], dur: 0.26 }),
+      ...OG.endpoints.map((e, i) => silkText(mC, { ctx, text: e, x: 176, y: eps[i][1] - 58, size: 36, at: b[4] + 0.05 + i * 0.05, color: calls.some((c) => c.ep === i) ? "silk" : "dim" })),
+      ...inR.map((r, i) => routeTrace(mT, { ctx, points: r, at: b[4] + 0.04 + i * 0.03, dur: 0.3, width: 7, pads: "none" })),
+      ...outR.map((r, i) => routeTrace(mT, { ctx, points: r, at: b[4] + 0.18 + i * 0.03, dur: 0.3, width: 7, pads: "none" })),
+      ...inR.map((r, i) => currentPulse(mP, { ctx, points: r, times: calls.filter((c) => c.ep === i).map((c) => c.at), speed: SPEED, width: 7 })),
+      ...outR.map((r, i) => currentPulse(mP, { ctx, points: r, times: calls.filter((c) => c.out === i).map((c) => inArrive(c) + 0.04), speed: SPEED, width: 7 })),
+      icChip(mC, { ctx, ...U0, sides: 4, pins: 8, label: "OpenGateway", sub: "/v1", ref: "U0", at: b[4] + 0.02, hits: calls.map(inArrive) }),
+      ...[0, 1, 2].map((i) => {
+        const name = ids[i][1];
+        return icChip(mC, { ctx, x: 1400, y: outY[i] - 48, w: 400, h: 96, label: name, at: b[4] + 0.1 + i * 0.05, hits: calls.filter((c) => c.out === i).map(outArrive) });
+      }),
+    ];
+
+    // 마디 셋 — 드롭 앞: 모델 102 개가 점점 빠르게 꽂히고 표시기가 같이 센다
+    const c = cut(root, b[8], ctx.dur);
+    const cT = layer(c.el);
+    const cP = layer(c.el);
+    const cC = layer(c.el);
+    const COLS = 17;
+    const ROWS = 6;
+    const gx = (i: number) => 470 + i * 80;
+    const gy = (j: number) => 330 + j * 108;
+    const n = OG.models;
+    const order = Array.from({ length: n }, (_, i) => i).sort((p, q) => rand("place", p) - rand("place", q));
+    const placeAt = new Array<number>(n);
+    order.forEach((cell, k) => (placeAt[cell] = b[8] + 0.06 + 1.3 * Math.sqrt(k / n)));
+    const placed = (t: number) => placeAt.filter((p) => p <= t).length;
+    const rp = fingerPins(80, 330, 64, 540, ROWS, "left");
+    const rowR = Array.from({ length: ROWS }, (_, j): Pt[] => [rp[j], [440, gy(j) + 15], [gx(COLS - 1) + 40, gy(j) + 15]]);
+    // 박마다 펄스가 1 → 2 → 4 → 6 줄로 — 들어오는 요청이 늘며 드롭으로 모인다
+    const waves = [[2], [1, 4], [0, 2, 3, 5], [0, 1, 2, 3, 4, 5]];
+    const cParts = [
+      edgeConnector(cC, { ctx, x: 80, y: 330, w: 64, h: 540, pins: ROWS, ref: "J1", at: b[8], hits: waves.flatMap((rows, k) => rows.map((r) => ({ pin: r, t: b[8 + k] + r * 0.02 }))) }),
+      silkText(cC, { ctx, text: OG.host, x: 80, y: 110, size: 56, at: b[8], dur: 0.24 }),
+      sevenSeg(cC, { ctx, x: 1840, y: 80, h: 120, cells: 3, align: "right", at: b[8], text: (t) => String(placed(t)) }),
+      ...rowR.map((r, j) => routeTrace(cT, { ctx, points: r, at: b[8] + j * 0.03, dur: 0.3, width: 6, pads: "none", bend: 0.2 })),
+      ...rowR.map((r, j) => currentPulse(cP, { ctx, points: r, times: waves.flatMap((rows, k) => (rows.includes(j) ? [b[8 + k] + j * 0.02] : [])), speed: 3000, width: 6, tail: 320, bend: 0.2 })),
+      ...Array.from({ length: n }, (_, i) => icChip(cC, { ctx, x: gx(i % COLS) - 25, y: gy(Math.floor(i / COLS)), w: 50, h: 30, pins: 3, label: "", at: placeAt[i] })),
+    ];
+
+    return (t: number) => {
+      board(t);
+      if (a.on(t)) for (const p of aParts) p(t);
+      if (m.on(t)) for (const p of mParts) p(t);
+      if (c.on(t)) for (const p of cParts) p(t);
+    };
+  },
+};

package/themes/circuit-board/sample/scenes/price.ts

@@ -0,0 +1,109 @@
+import { applyStyle, clamp, type SceneCtx } from "@kasaframe/core";
+import { boardMask, currentPulse, edgeConnector, icChip, ledArray, powerOn, routeTrace, sevenSeg, silkText } from "../../effects.ts";
+import { fingerPins, type Pt } from "../../pcb.ts";
+import { OG } from "../lib/facts.ts";
+import { arrive, beatsIn, cut, layer, stream } from "../lib/kit.ts";
+
+// 드롭 = 전원 투입: 102 표시기가 램프 시험으로 켜지고 빛 고리가 기판을 지나간다, 102 에서 한 주소 J1 로 전류가 몰린다.
+// 다음 마디: 하루 24시간 = LED 24 개 고리, 00–10시가 켜지고 -90%. 셋째 마디: 비용 = 흐르는 전류 — 값이 내리면 트레이스가 가늘어진다
+const ring = (cx: number, cy: number, r: number, n: number): Pt[] => Array.from({ length: n + 1 }, (_, i) => [cx + Math.sin((i / n) * Math.PI * 2) * r, cy - Math.cos((i / n) * Math.PI * 2) * r]);
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const board = boardMask(layer(root), { ctx, seed: "price" });
+    const frame = layer(root);
+
+    // 드롭 마디
+    const a = cut(frame, 0, b[4]);
+    const aT = layer(a.el);
+    const aP = layer(a.el);
+    const aC = layer(a.el);
+    const jp = fingerPins(1776, 600, 64, 340, 5, "right");
+    const fromSeg = [0, 1, 2, 3, 4].map((i): [number, number] => [300 + i * 190, 812]);
+    // 왼쪽 다리에서 나온 선일수록 아래로 돌아 가장 아래 핀에 — 같은 층 트레이스가 서로 건너지 않게
+    const aR = fromSeg.map((p, i): Pt[] => [p, [p[0], 960 - i * 26], [jp[4 - i][0] - 2, jp[4 - i][1]]]);
+    // 한 주소가 서는 박부터 모든 요청이 J1 로 몰린다
+    const flows = jp.map((_, i) => stream(b[1] + 0.3, b[4], 0.12, i * 0.025));
+    const aParts = [
+      sevenSeg(aC, { ctx, x: 110, y: 170, h: 440, text: String(OG.models), at: 0 }),
+      silkText(aC, { ctx, text: "모델", x: 116, y: 850, size: 64, font: "display", at: 0.1, dur: 0.2 }),
+      silkText(aC, { ctx, text: "한 주소", x: 1250, y: 260, size: 150, font: "display", at: b[1], dur: 0.24 }),
+      silkText(aC, { ctx, text: OG.host, x: 1254, y: 460, size: 40, at: b[2], dur: 0.24 }),
+      edgeConnector(aC, { ctx, x: 1776, y: 600, w: 64, h: 340, pins: 5, side: "right", at: b[1], hits: flows.flatMap((ts, i) => ts.map((t) => ({ pin: 4 - i, t: arrive(aR[i], t, 3200, [], 1) }))) }),
+      ...aR.map((r, i) => routeTrace(aT, { ctx, points: r, at: b[1] + i * 0.03, dur: 0.28, width: 8, bend: 1, pads: "none" })),
+      ...aR.map((r, i) => currentPulse(aP, { ctx, points: r, times: flows[i], speed: 3200, width: 8, tail: 300, bend: 1 })),
+    ];
+
+    // 하루 시계 — 00 이 위, 시계 방향
+    const B = cut(frame, b[4], b[8]);
+    const C = [560, 548] as const;
+    const R = 330;
+    const hours = Array.from({ length: 24 }, (_, h): [number, number] => [C[0] + Math.sin((h / 24) * Math.PI * 2) * R, C[1] - Math.cos((h / 24) * Math.PI * 2) * R]);
+    const night = (h: number) => h >= OG.night.from && h < OG.night.to;
+    // 시계 바늘 대신 펄스가 고리를 돈다 — 지나가는 시각의 LED 가 잠깐 켜진다(하루가 흐른다)
+    const hands = stream(b[4] + 0.02, b[8], 0.18);
+    const circ = 2 * Math.PI * R;
+    const swept = (h: number, t: number) => hands.some((s) => {
+      const p = s + ((h / 24) * circ) / 3200;
+      return t >= p && t < p + 0.12;
+    });
+    const bParts = [
+      routeTrace(B.el, { ctx, points: ring(C[0], C[1], R, 96), route: false, at: b[4], dur: 0.3, width: 6, pads: "none" }),
+      currentPulse(B.el, { ctx, points: ring(C[0], C[1], R, 96), route: false, times: hands, speed: 3200, width: 10, tail: 560 }),
+      ledArray(B.el, {
+        ctx,
+        points: hours,
+        size: 34,
+        at: b[4],
+        angle: (h) => (h / 24) * 360,
+        lit: (h, t) => (night(h) && t >= b[5] + h * 0.028 ? 1 : swept(h, t) ? 0.55 : 0),
+      }),
+      ...[0, 6, 12, 18].map((h) => {
+        const [x, y] = [C[0] + Math.sin((h / 24) * Math.PI * 2) * (R + 78), C[1] - Math.cos((h / 24) * Math.PI * 2) * (R + 78)];
+        return silkText(B.el, { ctx, text: String(h).padStart(2, "0"), x, y: y - 22, size: 44, anchor: "center", at: b[4] + 0.05 });
+      }),
+      icChip(B.el, { ctx, x: C[0] - 130, y: C[1] - 60, w: 260, h: 120, label: OG.night.tz, ref: "Y1", at: b[4] + 0.04, hits: [b[5] + 0.3] }),
+      sevenSeg(B.el, { ctx, x: 1030, y: 250, h: 260, text: "-90", at: b[6] }),
+      silkText(B.el, { ctx, text: "%", x: 1690, y: 300, size: 170, font: "display", color: "gold", at: b[6] + 0.1, dur: 0.12 }),
+      silkText(B.el, { ctx, text: "00:00-10:00 KST", x: 1036, y: 680, size: 56, at: b[7], dur: 0.22 }),
+      silkText(B.el, { ctx, text: `${OG.glm.id}  ${OG.glm.off}`, x: 1036, y: 780, size: 38, color: "dim", at: b[7] + 0.14, dur: 0.22 }),
+    ];
+
+    // 비용 = 흐르는 전류 — 1 달러에 50px. 값이 내리는 박에 트레이스가 가늘어진다
+    const c = cut(frame, b[8], ctx.dur);
+    const cT = layer(c.el);
+    const cP = layer(c.el);
+    const cC = layer(c.el);
+    const ds = OG.deepseek;
+    const k = 50;
+    const narrow = (at: number, from: number, to: number) => (t: number) => Math.max(3, (from + (to - from) * clamp((t - at) / 0.22)) * k);
+    const rows = [
+      { y: 470, name: "입력", vals: ds.input, at: b[9], w: narrow(b[9], 0.3, 0.03) },
+      { y: 760, name: "출력", vals: ds.output, at: b[10], w: narrow(b[10], 1.2, 0.12) },
+    ];
+    const cParts = [
+      silkText(cC, { ctx, text: ds.id, x: 110, y: 110, size: 64, at: b[8], dur: 0.26 }),
+      silkText(cC, { ctx, text: `00:00-10:00 KST  ${ds.off}`, x: 110, y: 200, size: 44, color: "gold", at: b[11], dur: 0.22 }),
+      ...rows.flatMap((r, i) => [
+        silkText(cC, { ctx, text: r.name, x: 110, y: r.y - 38, size: 76, font: "display", at: b[8] + 0.04 + i * 0.05 }),
+        routeTrace(cT, { ctx, points: [[330, r.y], [1230, r.y]], at: b[8] + i * 0.05, dur: 0.24, width: r.w, pads: "none" }),
+        currentPulse(cP, { ctx, points: [[330, r.y], [1230, r.y]], times: Array.from({ length: 9 }, (_, j) => b[8] + 0.2 + j * 0.14 + i * 0.07), speed: 2600, width: r.w, tail: 260 }),
+        silkText(cC, { ctx, text: "$", x: 1290, y: r.y - 60, size: 110, font: "mono", color: "gold", at: b[8] + 0.06 }),
+        // 값이 바뀌는 박에 한 번 꺼졌다 켜진다(램프 시험) — 다른 값이 들어왔다는 표시
+        sevenSeg(cC, { ctx, x: 1366, y: r.y - 88, h: 140, cells: 3, at: b[8] + 0.06, text: (t) => (t < r.at ? r.vals[0] : t < r.at + 0.1 ? "888" : r.vals[1]).replace("$", "") }),
+        silkText(cC, { ctx, text: "/M", x: 1726, y: r.y - 26, size: 52, at: b[8] + 0.1 }),
+      ]),
+    ];
+
+    const power = powerOn(layer(root), { ctx, drop: 0, origin: [600, 420] });
+    return (t: number) => {
+      board(t);
+      if (a.on(t)) for (const p of aParts) p(t);
+      if (B.on(t)) for (const p of bParts) p(t);
+      if (c.on(t)) for (const p of cParts) p(t);
+      const s = power(t);
+      applyStyle(frame, s.shake);
+    };
+  },
+};

package/themes/circuit-board/sample/style.json

@@ -0,0 +1,104 @@
+{
+  "name": "circuit-board",
+  "label": "회로 기판 — 요청이 트레이스 위 전류 펄스로 달린다",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#0C3626",
+    "surface": "#114431",
+    "raised": "#17523C",
+    "line": "#2E7656",
+    "ink": "#F2EFE4",
+    "inkSoft": "#CFDDD3",
+    "dim": "#94BCA8",
+    "accent": "#E8B84B",
+    "accentSoft": "#6E5A26",
+    "accentText": "#F2C75E",
+    "onAccent": "#0C3626",
+    "success": "#E8B84B",
+    "danger": "#E07A44",
+    "warning": "#E8B84B",
+    "mask": "#0C3626",
+    "pour": "#114431",
+    "trace": "#2E7656",
+    "gold": "#E8B84B",
+    "copper": "#D98C53",
+    "silk": "#F2EFE4",
+    "hot": "#FFF4CC",
+    "body": "#17191B"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "Orbit, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Share Tech Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Orbit",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/orbit/Orbit-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Share Tech Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/sharetechmono/ShareTechMono-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": 200,
+    "title": 96,
+    "body": 40,
+    "caption": 30,
+    "weightDisplay": 400,
+    "weightBody": 500,
+    "tracking": "0.02em"
+  },
+  "radius": {
+    "sm": 2,
+    "md": 4,
+    "lg": 6,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "0 3px 0 rgba(0, 0, 0, 0.35)",
+    "lift": "0 6px 0 rgba(0, 0, 0, 0.32)"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 8
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "linear",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.24,
+      "slow": 0.48
+    }
+  },
+  "theme": {
+    "inks": [
+      "#0C3626 솔더 마스크 녹 — 바탕, 마스크 아래 동박·트레이스는 한 단 밝은 #114431·#2E7656",
+      "#F2EFE4 실크 흰색 — 이름·부품 기호·글은 전부 실크",
+      "#E8B84B ENIG 금 — 드러난 패드·커넥터, 전류가 지나간 트레이스. 펄스 머리는 달아오른 #FFF4CC"
+    ],
+    "texture": "광택 솔더 마스크 — 면은 고르고 정지, 마스크 아래 동박 면이 한 단 밝게 비친다. 비아·장착 구멍·기준점은 금 고리. 결이 끓지 않는다",
+    "movement": "기판은 서 있고 전류만 달린다 — 펄스가 45° 꺾인 트레이스를 따라 가고, 닿은 패드·칩이 켜진다. 부품은 위에서 내려와 착 앉고 납땜이 한 번 반짝, 실크 글은 스퀴지가 지나가며 찍힌다. 저항 위에서는 펄스가 머뭇거린다(지연)"
+  },
+  "notes": [
+    "층마다 뜻 하나 — 마스크(바탕) · 동박(길) · 금(지금 쓰는 자리) · 실크(이름). 금을 장식으로 칠하지 않는다.",
+    "트레이스는 직각과 45° 만. 이을 것이 있을 때만 깐다 — 바탕에 흐르는 회로 무늬 금지.",
+    "카메라 이동 없음 — 기판을 바로 위에서 본다. 구도는 컷(다른 기판 자리)으로 바꾼다."
+  ]
+}