kasaframe 0.0.0-stage → 0.1.1

package/themes/debug-hud/sample/beats.json

@@ -0,0 +1 @@
+{"source": "assets/music/kawaii-friends-0400.mp3", "from": 0, "duration": 15.0, "bpm": 170.0, "beats": [0.2899, 0.6382, 0.9923, 1.3464, 1.6947, 2.0546, 2.4029, 2.757, 3.1169, 3.4652, 3.8251, 4.1734, 4.5275, 4.8758, 5.2299, 5.584, 5.9381, 6.2922, 6.6463, 6.9946, 7.336, 7.6971, 8.0628, 8.4053, 8.7478, 9.1135, 9.4676, 9.8159, 10.1816, 10.5241, 10.8782, 11.2265, 11.5748, 11.9405, 12.3004, 12.6487, 12.997, 13.3453, 13.7052, 14.0477, 14.396, 14.7617], "downbeats": [0.2899, 1.6947, 3.1169, 4.5275, 5.9381, 7.336, 8.7478, 10.1816, 11.5748, 12.997, 14.396], "bars": [0.2899, 1.6947, 3.1169, 4.5275, 5.9381, 7.336, 8.7478, 10.1816, 11.5748, 12.997, 14.396], "phrases": [0.0, 1.6947, 7.336, 12.997], "sections": [{"t": 0.0, "kind": "intro"}, {"t": 7.336, "kind": "drop", "strength": 0.99}], "drops": [7.336], "energy": {"hz": 20, "low": [0.0, 0.144, 0.183, 0.0, 0.0, 0.001, 0.0, 0.0, 0.208, 0.21, 0.0, 0.0, 0.0, 0.0, 0.0, 0.226, 0.241, 0.0, 0.0, 0.394, 0.25, 0.0, 0.131, 0.19, 0.033, 0.024, 0.245, 0.101, 0.009, 0.0, 0.0, 0.016, 0.134, 0.285, 0.097, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.371, 0.335, 0.0, 0.0, 0.148, 0.0, 0.0, 0.265, 0.171, 0.0, 0.0, 0.184, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.249, 0.015, 0.0, 0.0, 0.0, 0.0, 0.072, 0.297, 0.092, 0.009, 0.312, 0.389, 0.096, 0.031, 0.133, 0.021, 0.112, 0.0, 0.0, 0.074, 0.0, 0.227, 0.089, 0.018, 0.0, 0.091, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.022, 0.0, 0.0, 0.026, 0.02, 0.006, 0.184, 0.411, 0.068, 0.0, 0.156, 0.083, 0.0, 0.055, 0.182, 0.074, 0.0, 0.288, 0.232, 0.072, 0.022, 0.0, 0.0, 0.0, 0.0, 0.0, 0.015, 0.018, 0.053, 0.0, 0.03, 0.0, 0.0, 0.004, 0.094, 0.461, 0.453, 0.505, 0.55, 0.588, 0.627, 0.672, 0.72, 0.752, 0.759, 0.767, 0.772, 0.761, 0.724, 0.896, 0.998, 0.973, 0.838, 0.624, 0.667, 0.733, 0.796, 0.819, 0.8, 0.747, 0.833, 0.811, 0.816, 0.733, 0.507, 0.341, 0.066, 0.062, 0.0, 0.0, 0.798, 0.981, 1.0, 0.943, 0.813, 0.803, 0.799, 0.747, 0.606, 0.6, 0.606, 0.622, 0.649, 0.684, 0.812, 0.992, 0.986, 0.92, 0.668, 0.628, 0.572, 0.479, 0.365, 0.0, 0.0, 0.075, 0.0, 0.0, 0.758, 1.0, 1.0, 0.979, 0.876, 0.899, 0.9, 0.844, 0.772, 0.805, 0.811, 0.83, 0.858, 0.897, 0.945, 1.0, 0.961, 0.898, 0.862, 0.911, 0.902, 0.822, 0.611, 0.352, 0.0, 0.083, 0.0, 0.0, 0.682, 0.999, 0.985, 0.983, 0.897, 0.871, 0.869, 0.855, 0.74, 0.678, 0.686, 0.705, 0.733, 0.771, 0.793, 0.956, 0.999, 0.955, 0.815, 0.738, 0.75, 0.757, 0.672, 0.597, 0.618, 0.761, 0.977, 0.994, 0.935, 0.8, 0.8, 0.792, 0.782, 0.743, 0.643, 0.522, 0.898, 0.996, 0.975, 0.829, 0.577, 0.615, 0.683, 0.739, 0.765, 0.748, 0.703, 0.763, 0.752, 0.757, 0.68, 0.478, 0.287, 0.03, 0.055, 0.0, 0.022, 0.832, 0.99, 0.967, 0.886, 0.739, 0.749, 0.76, 0.719, 0.607, 0.613, 0.628, 0.645, 0.669, 0.713, 0.823, 1.0, 0.989, 0.916, 0.754, 0.736], "mid": [0.625, 0.806, 0.843, 0.738, 0.642, 0.71, 0.726, 0.582, 0.708, 0.759, 0.668, 0.544, 0.611, 0.572, 0.451, 0.785, 0.835, 0.629, 0.607, 0.911, 0.834, 0.737, 0.856, 0.806, 0.755, 0.566, 0.739, 0.759, 0.685, 0.742, 0.708, 0.66, 0.649, 0.834, 0.819, 0.654, 0.626, 0.747, 0.713, 0.526, 0.65, 0.711, 0.616, 0.518, 0.679, 0.644, 0.437, 0.861, 0.792, 0.499, 0.6, 0.773, 0.665, 0.541, 0.865, 0.918, 0.817, 0.666, 0.852, 0.772, 0.629, 0.697, 0.756, 0.683, 0.585, 0.767, 0.706, 0.55, 0.633, 0.706, 0.632, 0.595, 0.805, 0.726, 0.689, 0.822, 0.841, 0.661, 0.738, 0.746, 0.585, 0.553, 0.588, 0.601, 0.599, 0.566, 0.831, 0.755, 0.6, 0.698, 0.863, 0.782, 0.543, 0.66, 0.617, 0.593, 0.647, 0.707, 0.746, 0.728, 0.746, 0.741, 0.665, 0.748, 0.881, 0.656, 0.472, 0.682, 0.66, 0.618, 0.719, 0.915, 0.852, 0.797, 0.899, 0.862, 0.789, 0.769, 0.7, 0.637, 0.575, 0.608, 0.638, 0.653, 0.664, 0.714, 0.763, 0.732, 0.705, 0.722, 0.722, 0.794, 0.908, 0.714, 0.575, 0.602, 0.584, 0.615, 0.628, 0.732, 0.814, 0.826, 0.779, 0.756, 0.718, 0.641, 0.947, 0.785, 0.711, 0.7, 0.742, 0.817, 0.844, 0.879, 0.896, 0.888, 0.878, 0.878, 0.864, 0.82, 0.876, 0.775, 0.496, 0.503, 0.591, 0.607, 0.65, 0.945, 0.901, 0.821, 0.799, 0.845, 0.875, 0.891, 0.863, 0.757, 0.747, 0.77, 0.796, 0.821, 0.837, 0.935, 0.898, 0.746, 0.732, 0.823, 0.791, 0.805, 0.854, 0.843, 0.515, 0.434, 0.63, 0.711, 0.701, 0.893, 0.92, 0.775, 0.78, 0.834, 0.793, 0.723, 0.708, 0.777, 0.773, 0.82, 0.845, 0.876, 0.918, 0.993, 1.0, 1.0, 0.9, 0.954, 0.887, 0.84, 0.841, 0.888, 0.601, 0.394, 0.659, 0.815, 0.862, 0.939, 1.0, 0.974, 0.953, 0.891, 0.902, 0.903, 0.91, 0.818, 0.778, 0.724, 0.712, 0.78, 0.789, 0.831, 0.966, 0.839, 0.816, 0.822, 0.822, 0.823, 0.843, 0.891, 0.736, 0.674, 0.871, 0.882, 0.8, 0.831, 0.886, 0.902, 0.898, 0.884, 0.909, 0.859, 0.787, 0.949, 0.796, 0.732, 0.753, 0.82, 0.825, 0.862, 0.904, 0.887, 0.883, 0.891, 0.89, 0.876, 0.789, 0.877, 0.733, 0.36, 0.504, 0.736, 0.773, 0.788, 0.977, 0.945, 0.924, 0.905, 0.866, 0.864, 0.867, 0.828, 0.737, 0.731, 0.776, 0.775, 0.75, 0.804, 0.959, 0.923, 0.796, 0.789, 0.85, 0.849], "high": [0.498, 0.853, 0.762, 0.559, 0.557, 0.552, 0.53, 0.517, 0.82, 0.775, 0.541, 0.543, 0.521, 0.483, 0.506, 0.845, 0.835, 0.601, 0.653, 0.952, 0.836, 0.629, 0.85, 0.779, 0.549, 0.583, 0.814, 0.62, 0.566, 0.76, 0.644, 0.544, 0.692, 0.884, 0.66, 0.547, 0.555, 0.615, 0.504, 0.5, 0.528, 0.522, 0.522, 0.513, 0.482, 0.507, 0.549, 0.923, 0.885, 0.563, 0.615, 0.731, 0.497, 0.47, 0.745, 0.681, 0.508, 0.594, 0.784, 0.576, 0.546, 0.547, 0.52, 0.543, 0.638, 0.806, 0.585, 0.587, 0.633, 0.633, 0.643, 0.713, 0.881, 0.809, 0.828, 0.905, 0.936, 0.696, 0.726, 0.85, 0.646, 0.663, 0.682, 0.705, 0.706, 0.728, 0.892, 0.764, 0.738, 0.731, 0.693, 0.645, 0.625, 0.653, 0.654, 0.695, 0.751, 0.773, 0.773, 0.782, 0.837, 0.836, 0.832, 0.884, 0.96, 0.761, 0.678, 0.85, 0.793, 0.786, 0.871, 0.962, 0.906, 0.882, 0.903, 0.888, 0.891, 0.864, 0.758, 0.674, 0.697, 0.712, 0.726, 0.752, 0.807, 0.838, 0.836, 0.848, 0.85, 0.868, 0.897, 0.907, 0.977, 0.839, 0.709, 0.726, 0.751, 0.78, 0.825, 0.863, 0.856, 0.857, 0.864, 0.875, 0.874, 1.0, 1.0, 0.811, 0.806, 0.793, 0.789, 0.826, 0.86, 0.895, 0.892, 0.888, 0.883, 0.879, 0.87, 0.847, 0.948, 0.885, 0.649, 0.574, 0.654, 0.671, 0.696, 0.831, 0.804, 0.843, 0.812, 0.839, 0.899, 0.906, 0.845, 0.707, 0.727, 0.774, 0.771, 0.783, 0.813, 0.877, 0.77, 0.659, 0.672, 0.81, 0.843, 0.864, 0.932, 0.928, 0.637, 0.439, 0.61, 0.671, 0.644, 0.802, 0.77, 0.736, 0.728, 0.714, 0.616, 0.503, 0.548, 0.683, 0.71, 0.714, 0.705, 0.758, 0.831, 0.872, 0.872, 0.875, 0.885, 0.89, 0.854, 0.82, 0.892, 0.961, 0.726, 0.496, 0.603, 0.74, 0.744, 0.828, 0.847, 0.846, 0.831, 0.786, 0.846, 0.859, 0.837, 0.747, 0.713, 0.673, 0.715, 0.84, 0.868, 0.829, 0.848, 0.796, 0.803, 0.838, 0.921, 0.944, 0.927, 0.968, 0.831, 0.699, 0.812, 0.798, 0.799, 0.863, 0.888, 0.847, 0.839, 0.861, 0.884, 0.834, 0.78, 0.832, 0.689, 0.707, 0.686, 0.702, 0.801, 0.858, 0.88, 0.871, 0.862, 0.852, 0.882, 0.867, 0.806, 0.946, 0.851, 0.52, 0.458, 0.679, 0.739, 0.75, 0.862, 0.857, 0.873, 0.821, 0.899, 0.924, 0.921, 0.846, 0.77, 0.781, 0.774, 0.783, 0.81, 0.867, 0.948, 0.824, 0.734, 0.722, 0.894, 0.935]}}

package/themes/debug-hud/sample/index.html

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

package/themes/debug-hud/sample/kf.json

@@ -0,0 +1,59 @@
+{
+  "template": "promo",
+  "title": "debug-hud · OpenGateway 15초",
+  "theme": "debug-hud",
+  "fps": 60,
+  "width": 1920,
+  "height": 1080,
+  "duration": 15.0,
+  "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": "한 주소를 재고 엔드포인트가 로그로, 같은 주소에 모델 ID 만 바뀌는 요청이 박마다 로그로, 모델 수가 102 로 굴러 오른다"
+    },
+    {
+      "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": "첫 토큰 실측 ms 셋을 굴려 재고, OG 로고를 상자로 재는 끝 카드"
+    }
+  ]
+}

package/themes/debug-hud/sample/lib/hudkit.ts

@@ -0,0 +1,49 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { hudFrame } from "../../effects.ts";
+
+export const barsFrom0 = (ctx: SceneCtx): number[] => ctx.beats.bars.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+export const beatsFrom0 = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+export function layer(parent: HTMLElement): HTMLElement {
+  const el = document.createElement("div");
+  el.style.cssText = "position:absolute;inset:0;";
+  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;
+    },
+  };
+}
+
+/** 모노 글 한 덩어리. at 전엔 숨는다 — 계기판 글은 잰 순간에 뜬다 */
+export function mono(parent: HTMLElement, ctx: SceneCtx, o: { x: number; y: number; size: number; text?: string; color?: string; weight?: number; align?: "left" | "center" | "right"; w?: number }) {
+  const el = document.createElement("div");
+  const align = o.align ?? "left";
+  const box = align === "left" ? `left:${o.x}px;` : `left:${o.x}px;width:${o.w ?? 0}px;text-align:${align};`;
+  el.style.cssText = `position:absolute;${box}top:${o.y}px;font:${o.weight ?? 600} ${o.size}px ${ctx.style.fonts.mono};line-height:1;white-space:pre;color:${ctx.style.colors[o.color ?? "ink"] ?? o.color};`;
+  el.textContent = o.text ?? "";
+  parent.append(el);
+  return el;
+}
+
+/** 이 견본은 곡 4.0초부터 — 마디는 그 앞에 셋이 있었다 */
+export const frameOf = (root: HTMLElement, ctx: SceneCtx) => hudFrame(layer(root), { ctx, title: "OpenGateway · apis.opengateway.ai/v1", songFrom: 4.0, barFrom: 3, grid: {} });
+
+/** OG 로고(currentColor SVG) — 계기판 잉크로 */
+export function logo(parent: HTMLElement, svg: string, x: number, y: number, w: number, color: string) {
+  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/debug-hud/sample/lib/og.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/debug-hud/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/debug-hud/sample/scenes/end.ts

@@ -0,0 +1,62 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { crosshair, readout, wireBox } from "../../effects.ts";
+import svg from "../assets/og/logo.svg?raw";
+import { barsFrom0, beatsFrom0, cut, frameOf, layer, logo, mono } from "../lib/hudkit.ts";
+import { OG } from "../lib/og.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const B = barsFrom0(ctx);
+    const b = beatsFrom0(ctx);
+    const frame = frameOf(root, ctx);
+    const content = layer(root);
+    const ink = ctx.style.colors.ink;
+
+    // 첫 마디 — 첫 토큰 가운데값 셋을 박마다 굴려 재고, ms 만큼 막대 상자
+    const ttft = cut(content, 0, B[1]);
+    const max = Math.max(...OG.ttft.map(([, , ms]) => ms));
+    const rows = OG.ttft.map(([id, , ms], i) => ({
+      at: b[i] ?? i * 0.35,
+      ms,
+      id: mono(ttft.el, ctx, { x: 140, y: 110 + i * 270, size: 44, text: id, color: "dim" }),
+      value: mono(ttft.el, ctx, { x: 140, y: 170 + i * 270, size: 140, weight: 800 }),
+    }));
+    const bars = wireBox(ttft.el, { ctx, boxes: rows.map((r, i) => ({ x: 900, y: 175 + i * 270, w: (900 * r.ms) / max, h: 120, at: r.at + 0.05, label: "ttft p50", dims: true })) });
+    const sum = mono(ttft.el, ctx, { x: 900, y: 930, size: 56, text: OG.calls, weight: 700 });
+
+    // 둘째 마디 — 로고를 재는 끝 카드
+    const card = cut(content, B[1], B[2]);
+    logo(card.el, svg, 600, 150, 720, ink);
+    const site = mono(card.el, ctx, { x: 160, y: 640, size: 120, text: OG.site, align: "center", w: 1600, weight: 800 });
+    const url = mono(card.el, ctx, { x: 160, y: 820, size: 44, text: OG.url, align: "center", w: 1600, color: "dim" });
+    const cardBox = wireBox(card.el, { ctx, boxes: [{ x: 580, y: 130, w: 760, h: 450, at: B[1], label: "logo.svg", dims: true }, { x: 460, y: 615, w: 1000, h: 170, at: b[5] ?? B[1] + 0.35, label: "site" }] });
+    const aim = crosshair(card.el, { ctx, keys: [5, 6, 7].map((k, i) => ({ t: b[k] ?? B[1] + (i + 1) * 0.35, x: [960, 600, 1320][i], y: [330, 140, 520][i] })), size: 40, coords: true });
+
+    // 끝 반 마디 — 로고를 왼쪽으로 당기고 주소를 더해 박마다 다시 잰다
+    const last = cut(content, B[2], ctx.dur + 1);
+    logo(last.el, svg, 140, 300, 460, ink);
+    mono(last.el, ctx, { x: 680, y: 340, size: 128, text: OG.site, weight: 800 });
+    mono(last.el, ctx, { x: 690, y: 520, size: 46, text: OG.url, color: "dim" });
+    const again = b.filter((x) => x >= B[2] - 1e-6);
+    const lastBox = wireBox(last.el, { ctx, boxes: again.map((x, i) => ({ x: i % 2 ? 660 : 120, y: i % 2 ? 300 : 280, w: i % 2 ? 1180 : 500, h: i % 2 ? 300 : 300, at: x + 0.01, label: i % 2 ? "opengateway.ai" : "logo.svg", dims: true })) });
+    return (t: number) => {
+      frame(t);
+      if (ttft.on(t)) {
+        for (const r of rows) {
+          const on = t >= r.at;
+          r.id.style.visibility = on ? "visible" : "hidden";
+          r.value.textContent = on ? readout(t, { from: 0, to: r.ms, at: r.at, dur: 0.28, width: 5, decimals: 1, unit: "ms" }) : "";
+        }
+        bars(t);
+        sum.style.visibility = t >= (b[3] ?? 1.06) ? "visible" : "hidden";
+      }
+      if (card.on(t)) {
+        cardBox(t);
+        site.style.visibility = t >= (b[5] ?? B[1] + 0.35) ? "visible" : "hidden";
+        url.style.visibility = t >= (b[7] ?? B[1] + 1.06) ? "visible" : "hidden";
+        aim(t);
+      }
+      if (last.on(t)) lastBox(t);
+    };
+  },
+};

package/themes/debug-hud/sample/scenes/gather.ts

@@ -0,0 +1,67 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { crosshair, scanLine, wireBox, type Box } from "../../effects.ts";
+import { barsFrom0, beatsFrom0, cut, frameOf, layer, mono } from "../lib/hudkit.ts";
+import { OG } from "../lib/og.ts";
+
+// 회사 아홉이 흩어진 자리 — 상자 [x, y]
+const SPOT: [number, number][] = [
+  [140, 150], [760, 120], [1380, 190],
+  [260, 450], [880, 420], [1440, 500],
+  [120, 760], [700, 740], [1300, 800],
+];
+const WAVE = [0, 1, 2, 0, 1, 2, 0, 1, 2];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const B = barsFrom0(ctx);
+    const b = beatsFrom0(ctx);
+    const frame = frameOf(root, ctx);
+    const content = layer(root);
+    const scan = scanLine(root, { ctx, at: 0, dur: 0.3 });
+
+    // 첫 마디 — 흩어진 회사 아홉을 박마다 셋씩 잰다
+    const spread = cut(content, 0, B[1]);
+    const at = (i: number) => b[WAVE[i]] ?? WAVE[i] * 0.35;
+    const boxes: Box[] = OG.providers.map(([name], i) => ({ x: SPOT[i][0], y: SPOT[i][1], w: 400, h: 150, at: at(i), label: name.toLowerCase(), dims: true }));
+    const measure = wireBox(spread.el, { ctx, boxes });
+    const names = OG.providers.map(([name, n], i) => [
+      mono(spread.el, ctx, { x: SPOT[i][0] + 24, y: SPOT[i][1] + 30, size: 64, text: name, weight: 800 }),
+      mono(spread.el, ctx, { x: SPOT[i][0] + 24, y: SPOT[i][1] + 104, size: 28, text: `${n} models`, color: "dim" }),
+    ]);
+    const aim = crosshair(spread.el, { ctx, keys: [0, 1, 2, 3].map((k) => ({ t: b[k] ?? k * 0.35, x: SPOT[k * 2][0] + 200, y: SPOT[k * 2][1] + 75 })), size: 34 });
+
+    // 둘째 마디 — 회사별 모델 수를 막대 상자로 잰다(박마다 셋)
+    const chart = cut(content, B[1], ctx.dur + 1);
+    const base = 900;
+    const colW = 168;
+    const bars: Box[] = OG.providers.map(([, n], i) => ({ x: 130 + i * 186, y: base - (620 * n) / 41, w: colW, h: (620 * n) / 41, at: b[4 + Math.floor(i / 3)] ?? B[1] + Math.floor(i / 3) * 0.35, dims: false }));
+    const measureBars = wireBox(chart.el, { ctx, boxes: bars });
+    const labels = OG.providers.map(([name, n], i) => [
+      mono(chart.el, ctx, { x: bars[i].x, y: base + 16, size: 26, text: name, align: "center", w: colW, color: "dim" }),
+      mono(chart.el, ctx, { x: bars[i].x, y: bars[i].y - 70, size: 56, text: String(n), align: "center", w: colW, weight: 800 }),
+    ]);
+    const aim2 = crosshair(chart.el, { ctx, keys: [0, 1, 2, 3].map((k) => ({ t: b[4 + k] ?? B[1] + k * 0.35, x: bars[[0, 3, 6, 0][k]].x + colW / 2, y: bars[[0, 3, 6, 0][k]].y })), size: 30 });
+    return (t: number) => {
+      frame(t);
+      applyStyle(content, scan(t));
+      if (spread.on(t)) {
+        measure(t);
+        names.forEach(([a, c], i) => {
+          const v = t >= at(i) + 0.12 ? "visible" : "hidden";
+          a.style.visibility = v;
+          c.style.visibility = v;
+        });
+        aim(t);
+      }
+      if (chart.on(t)) {
+        measureBars(t);
+        labels.forEach(([a, c], i) => {
+          const v = t >= bars[i].at + 0.15 ? "visible" : "hidden";
+          a.style.visibility = v;
+          c.style.visibility = v;
+        });
+        aim2(t);
+      }
+    };
+  },
+};

package/themes/debug-hud/sample/scenes/models.ts

@@ -0,0 +1,70 @@
+import { clamp, type SceneCtx } from "@kasaframe/core";
+import { crosshair, logTail, readout, scanLine, wireBox } from "../../effects.ts";
+import { barsFrom0, beatsFrom0, cut, frameOf, layer, mono } from "../lib/hudkit.ts";
+import { OG } from "../lib/og.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const B = barsFrom0(ctx);
+    const b = beatsFrom0(ctx);
+    const drop = ctx.beats.drop(0);
+    const frame = frameOf(root, ctx);
+    const content = layer(root);
+
+    // 첫 마디 — 한 주소를 재고, 엔드포인트가 박마다 로그로
+    const addr = cut(content, 0, B[1]);
+    const urlBox = wireBox(addr.el, { ctx, boxes: [{ x: 160, y: 220, w: 1600, h: 200, at: 0.02, label: "endpoint", dims: true }, { x: 160, y: 520, w: 1600, h: 380, at: b[1] ?? 0.35, label: "routes" }] });
+    const url = mono(addr.el, ctx, { x: 160, y: 280, size: 84, text: OG.url, align: "center", w: 1600, weight: 700 });
+    const eps = logTail(addr.el, { ctx, x: 220, y: 560, w: 1500, h: 320, size: 52, lines: OG.endpoints.map((e, i) => ({ t: (b[Math.min(3, i + 1)] ?? 0.35 * (i + 1)) + (i === 3 ? 0.17 : 0), text: `POST /v1${e}` })) });
+    const reveal = scanLine(addr.el, { ctx, at: 0, dur: 0.25 });
+
+    // 둘째 마디 — 같은 주소, 모델 ID 만 박마다 바뀐다. 위엔 지금 회사, 아래엔 요청 로그
+    const call = cut(content, B[1], B[2]);
+    const who = mono(call.el, ctx, { x: 120, y: 170, size: 200, weight: 800 });
+    const whoBox = wireBox(call.el, { ctx, boxes: [0, 1, 2, 3].map((k) => ({ x: 100, y: 140, w: 1720, h: 260, at: (b[4 + k] ?? B[1] + k * 0.35) + 0.01, label: "model", dims: k === 3 })) });
+    const reqs = logTail(call.el, {
+      ctx,
+      x: 140,
+      y: 470,
+      w: 1660,
+      h: 480,
+      size: 34,
+      lines: OG.ids.slice(0, 4).flatMap((id, k) => {
+        const at = b[4 + k] ?? B[1] + k * 0.35;
+        return [
+          { t: at, text: `POST /v1/chat/completions  model=${id}` },
+          { t: at + 0.12, text: "  200 OK", dim: true },
+        ];
+      }),
+      cps: 400,
+    });
+
+    // 셋째 마디 — 모델 수가 102 로 굴러 오르고, 박마다 상자를 다시 잰다
+    const many = cut(content, B[2], ctx.dur + 1);
+    const cnt = mono(many.el, ctx, { x: 160, y: 250, size: 420, align: "center", w: 1600, weight: 800 });
+    const cntBox = wireBox(many.el, { ctx, boxes: [0, 1, 2, 3].map((k) => ({ x: 560 - k * 30, y: 220 - k * 10, w: 800 + k * 60, h: 460 + k * 20, at: (b[8 + k] ?? B[2] + k * 0.35) + 0.01, label: "models", dims: true })) });
+    const ids = logTail(many.el, { ctx, x: 160, y: 760, w: 1600, h: 200, size: 32, lines: OG.ids.map((id, k) => ({ t: (b[8] ?? B[2]) + k * 0.25, text: `${id}  200` })), cps: 500 });
+    const aim = crosshair(many.el, { ctx, keys: [0, 1, 2, 3].map((k) => ({ t: b[8 + k] ?? B[2] + k * 0.35, x: [560, 1360, 960, 960][k], y: [220, 680, 450, 450][k] })), size: 30, coords: true });
+    return (t: number) => {
+      frame(t);
+      if (addr.on(t)) {
+        urlBox(t);
+        url.style.visibility = t >= 0.05 ? "visible" : "hidden";
+        eps(t);
+        reveal(t);
+      }
+      if (call.on(t)) {
+        const k = Math.max(0, b.slice(4, 8).filter((x) => x <= t).length - 1);
+        who.textContent = OG.ids[k].split("/")[0];
+        whoBox(t);
+        reqs(t);
+      }
+      if (many.on(t)) {
+        cnt.textContent = readout(t, { from: 0, to: OG.models, at: B[2], dur: clamp(drop - B[2] - 0.06, 0.1, 9), width: 3 });
+        cntBox(t);
+        ids(t);
+        aim(t);
+      }
+    };
+  },
+};

package/themes/debug-hud/sample/scenes/price.ts

@@ -0,0 +1,79 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { crosshair, dropTrigger, plotTrace, readout, wireBox } from "../../effects.ts";
+import { barsFrom0, beatsFrom0, cut, frameOf, layer, mono } from "../lib/hudkit.ts";
+import { OG } from "../lib/og.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const B = barsFrom0(ctx);
+    const b = beatsFrom0(ctx);
+    const frame = frameOf(root, ctx);
+    const content = layer(root);
+
+    // 드롭 마디 — 102 를 잰다
+    const hit = cut(content, 0, B[1]);
+    const big = mono(hit.el, ctx, { x: 160, y: 170, size: 480, text: String(OG.models), align: "center", w: 1600, weight: 800 });
+    const bigBox = wireBox(hit.el, { ctx, boxes: [{ x: 620, y: 150, w: 680, h: 440, at: b[1] ?? 0.35, label: "models", dims: true }, { x: 360, y: 700, w: 1200, h: 130, at: b[2] ?? 0.7, label: "endpoint" }] });
+    const host = mono(hit.el, ctx, { x: 360, y: 730, size: 72, text: OG.host, align: "center", w: 1200, weight: 700 });
+    const aim = crosshair(hit.el, { ctx, keys: [1, 2, 3].map((k) => ({ t: b[k] ?? k * 0.35, x: [960, 960, 1310][k - 1], y: [335, 765, 120][k - 1] })), size: 36 });
+
+    // 둘째 마디 — 하루가 한 마디에 흐르는 가격선. 00–10시 창에서 값이 -90% 로 떨어진다
+    const day = cut(content, B[1], B[2]);
+    const span = (B[2] ?? ctx.dur) - B[1];
+    const hourAt = (t: number) => ((((t - B[1]) / span) * 24) % 24 + 24) % 24;
+    const night = (h: number) => h >= OG.night.from && h < OG.night.to;
+    const price = plotTrace(day.el, { ctx, x: 120, y: 170, w: 1480, h: 420, at: B[1], since: B[1], window: span / 2, series: [{ label: "PRICE", value: (t) => (night(hourAt(t)) ? 0.08 : 0.8) }] });
+    const strip = wireBox(day.el, { ctx, boxes: [{ x: 120, y: 690, w: (1680 * 10) / 24, h: 90, at: b[5] ?? B[1] + 0.35, label: `00:00-10:00 ${OG.night.tz}`, dims: true }, { x: 120 + (1680 * 10) / 24 + 8, y: 690, w: (1680 * 14) / 24 - 8, h: 90, at: b[5] ?? B[1] + 0.35, label: "10:00-24:00" }] });
+    const clock = mono(day.el, ctx, { x: 160, y: 712, size: 48, color: "dim" });
+    const off = mono(day.el, ctx, { x: 1000, y: 820, size: 180, text: OG.deepseek.off, weight: 800, align: "right", w: 820 });
+
+    // 셋째 마디 — deepseek 정가에서 밤값으로 숫자가 굴러 내려간다
+    const table = cut(content, B[2], ctx.dur + 1);
+    const ds = OG.deepseek;
+    const idLine = mono(table.el, ctx, { x: 140, y: 100, size: 60, text: ds.id, weight: 700 });
+    const rows = [ds.input, ds.output].map(([from, to], i) => {
+      const at = b[9 + i] ?? B[2] + (i + 1) * 0.35;
+      return {
+        at,
+        from: Number(from.slice(1)),
+        to: Number(to.slice(1)),
+        label: mono(table.el, ctx, { x: 140, y: 290 + i * 260, size: 64, text: i ? "출력" : "입력", color: "dim" }),
+        value: mono(table.el, ctx, { x: 400, y: 250 + i * 260, size: 170, weight: 800 }),
+        was: mono(table.el, ctx, { x: 1060, y: 300 + i * 260, size: 56, text: `정가 ${from}`, color: "dim" }),
+      };
+    });
+    const rowBox = wireBox(table.el, { ctx, boxes: rows.map((r, i) => ({ x: 380, y: 230 + i * 260, w: 640, h: 210, at: r.at, label: i ? "output /M" : "input /M", dims: true })) });
+    const pct = mono(table.el, ctx, { x: 1060, y: 460, size: 150, text: ds.off, weight: 800 });
+    const glm = mono(table.el, ctx, { x: 140, y: 920, size: 48, text: `${OG.glm.id}  ${OG.glm.off}`, color: "ink" });
+    const trig = dropTrigger(root, { ctx, drop: 0, label: String(OG.models) });
+    return (t: number) => {
+      frame(t);
+      if (hit.on(t)) {
+        big.style.visibility = t >= 0.03 ? "visible" : "hidden";
+        bigBox(t);
+        host.style.visibility = t >= (b[2] ?? 0.7) + 0.1 ? "visible" : "hidden";
+        aim(t);
+      }
+      if (day.on(t)) {
+        price(t);
+        strip(t);
+        const h = Math.floor(hourAt(t));
+        clock.textContent = t >= (b[5] ?? B[1]) ? `${String(h).padStart(2, "0")}:00 ${night(h) ? ds.input[1] : ds.input[0]}` : "";
+        clock.style.left = `${Math.min(1480, 120 + (1680 * h) / 24 + 16)}px`;
+        off.style.visibility = t >= (b[7] ?? B[1] + 1.06) ? "visible" : "hidden";
+      }
+      if (table.on(t)) {
+        idLine.style.visibility = "visible";
+        for (const r of rows) {
+          const on = t >= r.at;
+          r.label.style.visibility = r.was.style.visibility = on ? "visible" : "hidden";
+          r.value.textContent = on ? `$${readout(t, { from: r.from, to: r.to, at: r.at + 0.05, dur: 0.3, width: 4, decimals: 2 })}` : "";
+        }
+        rowBox(t);
+        pct.style.visibility = glm.style.visibility = t >= (b[11] ?? B[2] + 1.06) ? "visible" : "hidden";
+      }
+      const s = trig(t);
+      applyStyle(content, s.shake);
+    };
+  },
+};

package/themes/debug-hud/sample/style.json

@@ -0,0 +1,91 @@
+{
+  "name": "debug-hud",
+  "label": "디버그 HUD — 검정 위 형광 한 색으로 화면을 잰다",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#050605",
+    "surface": "#0B0E08",
+    "raised": "#121709",
+    "line": "#2E3A12",
+    "ink": "#C8FF2E",
+    "inkSoft": "#A9D827",
+    "dim": "#7E9E22",
+    "accent": "#C8FF2E",
+    "accentSoft": "#3F5212",
+    "accentText": "#C8FF2E",
+    "onAccent": "#050605",
+    "success": "#C8FF2E",
+    "danger": "#C8FF2E",
+    "warning": "#C8FF2E"
+  },
+  "fonts": {
+    "sans": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "display": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "JetBrains Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+        "weight": "100 800"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      }
+    ]
+  },
+  "type": {
+    "hero": 180,
+    "title": 72,
+    "body": 34,
+    "caption": 26,
+    "weightDisplay": 700,
+    "weightBody": 500,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "pill": 0
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 8
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.5,
+    "enter": "fade",
+    "ease": "outExpo",
+    "durations": {
+      "fast": 0.08,
+      "base": 0.18,
+      "slow": 0.4
+    }
+  },
+  "theme": {
+    "inks": [
+      "#050605 검정",
+      "#C8FF2E 형광 라임 — 글·선·점 전부 이 한 색",
+      "#7E9E22 같은 색의 어두운 단(보조 글·눈금)"
+    ],
+    "texture": "1–2px 선만. 면 채우기는 드롭 섬광 한 번뿐. 상자는 모서리 꺾쇠부터 그려진다",
+    "movement": "재빠르게 잡고 멈춘다(outExpo 0.18초). 스캔선이 지나간 자리부터 드러나고, 숫자는 고정 폭으로 굴러간다"
+  },
+  "notes": [
+    "글은 전부 모노. 한글은 모노 뒤 Pretendard 로 선다.",
+    "형광 한 색과 그 어두운 단 말고 다른 색을 쓰지 않는다.",
+    "화면의 숫자는 지어내지 않는다 — 시각·박·마디·에너지처럼 그 순간 잰 값만."
+  ]
+}

package/themes/debug-hud/style.json

@@ -0,0 +1,91 @@
+{
+  "name": "debug-hud",
+  "label": "디버그 HUD — 검정 위 형광 한 색으로 화면을 잰다",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#050605",
+    "surface": "#0B0E08",
+    "raised": "#121709",
+    "line": "#2E3A12",
+    "ink": "#C8FF2E",
+    "inkSoft": "#A9D827",
+    "dim": "#7E9E22",
+    "accent": "#C8FF2E",
+    "accentSoft": "#3F5212",
+    "accentText": "#C8FF2E",
+    "onAccent": "#050605",
+    "success": "#C8FF2E",
+    "danger": "#C8FF2E",
+    "warning": "#C8FF2E"
+  },
+  "fonts": {
+    "sans": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "display": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "JetBrains Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+        "weight": "100 800"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      }
+    ]
+  },
+  "type": {
+    "hero": 180,
+    "title": 72,
+    "body": 34,
+    "caption": 26,
+    "weightDisplay": 700,
+    "weightBody": 500,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "pill": 0
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 8
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.5,
+    "enter": "fade",
+    "ease": "outExpo",
+    "durations": {
+      "fast": 0.08,
+      "base": 0.18,
+      "slow": 0.4
+    }
+  },
+  "theme": {
+    "inks": [
+      "#050605 검정",
+      "#C8FF2E 형광 라임 — 글·선·점 전부 이 한 색",
+      "#7E9E22 같은 색의 어두운 단(보조 글·눈금)"
+    ],
+    "texture": "1–2px 선만. 면 채우기는 드롭 섬광 한 번뿐. 상자는 모서리 꺾쇠부터 그려진다",
+    "movement": "재빠르게 잡고 멈춘다(outExpo 0.18초). 스캔선이 지나간 자리부터 드러나고, 숫자는 고정 폭으로 굴러간다"
+  },
+  "notes": [
+    "글은 전부 모노. 한글은 모노 뒤 Pretendard 로 선다.",
+    "형광 한 색과 그 어두운 단 말고 다른 색을 쓰지 않는다.",
+    "화면의 숫자는 지어내지 않는다 — 시각·박·마디·에너지처럼 그 순간 잰 값만."
+  ]
+}