kasaframe 0.0.0-stage → 0.1.1

package/themes/debug-hud/theme.json

@@ -0,0 +1,68 @@
+{
+  "id": "debug-hud",
+  "name": "디버그 HUD",
+  "metaphor": "화면이 계측되며 드러난다 — 재는 순간 상자가 서고 값이 찍힌다",
+  "status": "approved",
+  "approvedAt": "2026-10-08",
+  "purposes": [
+    "explainer",
+    "demo",
+    "promo",
+    "shorts",
+    "launch"
+  ],
+  "aspect": [
+    "16:9",
+    "9:16"
+  ],
+  "effects": [
+    {
+      "name": "readout",
+      "kind": "value",
+      "does": "고정 폭 숫자 — 앞을 0 으로 채워 굴러도 폭이 안 흔들리고 NaN 은 「--」",
+      "use": "el.textContent = readout(t, { from: 0, to: 170, at: 0.4, dur: 0.6, width: 5, decimals: 1 })"
+    },
+    {
+      "name": "wireBox",
+      "kind": "layer",
+      "does": "와이어 상자 — 모서리 꺾쇠가 서고 변이 뻗은 뒤 이름이 찍힌다, 크기 표를 단다",
+      "use": "const box = wireBox(el, { ctx, boxes: [{ x, y, w, h, at: 0.3, label: \"log\", dims: true }] })"
+    },
+    {
+      "name": "scanLine",
+      "kind": "layer",
+      "does": "스캔선 — 지나간 자리만 보이게(reveal) 또는 지우게(hide) 하는 clip 을 돌려준다",
+      "use": "const scan = scanLine(el, { ctx, at: 0 }); applyStyle(content, scan(t))"
+    },
+    {
+      "name": "logTail",
+      "kind": "layer",
+      "does": "로그 꼬리 — 줄이 정한 시각에 빠르게 찍히고 칸이 차면 한 줄씩 밀린다",
+      "use": "const log = logTail(el, { ctx, x, y, w, h, lines: [{ t: 0.2, text: \"$ kf beats song.mp3\" }] })"
+    },
+    {
+      "name": "plotTrace",
+      "kind": "layer",
+      "does": "오실로스코프 — 지난 몇 초를 흐르는 선으로, 박 눈금·DROP 표시가 같이 흐른다",
+      "use": "const plot = plotTrace(el, { ctx, x, y, w, h, series: [{ label: \"LOW\", value: (t) => ctx.beats.energy(t, \"low\") }] })"
+    },
+    {
+      "name": "crosshair",
+      "kind": "layer",
+      "does": "조준선 — 가로·세로 가는 선과 과녁, 키 사이를 잡고 멈추듯 옮긴다",
+      "use": "const aim = crosshair(el, { ctx, keys: beats.map((b) => ({ t: b, x, y: yOf(b) })), area: [x, y, w, h] })"
+    },
+    {
+      "name": "hudFrame",
+      "kind": "layer",
+      "does": "HUD 틀 — 안전 영역 꺾쇠, 곡 시각·프레임 번호·마디·구간(그 프레임에 잰 값), grid 면 계측판 눈금이 늘 흘러 화면이 서지 않는다",
+      "use": "const frame = hudFrame(el, { ctx, title: \"kf beats · song.mp3\", songFrom: 39.58, barFrom: 28, grid: {} })"
+    },
+    {
+      "name": "dropTrigger",
+      "kind": "layer",
+      "does": "드롭 — 화면이 형광으로 뒤집히고 가로 띠가 어긋났다 돌아온다, 흔들림을 돌려준다",
+      "use": "const s = trig(t); applyStyle(content, s.shake)  // trig = dropTrigger(el, { ctx, drop: 0, label: \"DROP 3/6\" })"
+    }
+  ]
+}

package/themes/og-measure/THEME.md

@@ -0,0 +1,47 @@
+# OG 측정 화면 — 재 온 숫자가 쌓이는 계측기
+
+**비유 한 줄**: 화면은 계측기다 — 실제 호출이 한 줄 나가고, 원자료 로그가 흐르고, 거기서 숫자가 뽑혀 점·막대·큰 숫자로 쌓인다. 얼굴도 캐릭터도 없다.
+
+## 맞는 내용·용도
+
+- 요금·토큰·속도·적중률처럼 **직접 재 본 값**이 주인공인 것 — OG 「재 봤습니다」 연재, 모델 비교, 벤치 결과, 설정 하나 바꾼 전후.
+- 용도: 쇼츠(9:16) · 설명 · 시연 · 홍보의 한 장면. 목소리·자막이 말을 맡고 화면엔 용어와 숫자만.
+- 원자료가 있어야 쓴다 — `measure.json` 같은 호출별 기록(usage 원문·시각·가격). 끝 장면의 612.5ms 는 `sample/measure.ts` 가 OG 를 실제로 18번 불러 만든 값이다.
+- 견본은 공통 주제 「OpenGateway 소개 15초」(`docs/briefs/og-intro-15s.md`). 숫자는 브리프의 사실과 실측만 쓰고, 모델 ID 가 바뀌는 요청 줄은 실제로 부르지 않았으니 결과(상태·지연) 없이 보낸 모양만 보인다.
+
+## 금지
+
+- 숫자를 지어내지 않는다. 재 오지 못한 값은 화면에 「시뮬레이션」·「미확인」을 붙이거나 쓰지 않는다. 비용은 반올림해 0 으로 만들지 않는다(첫 유효 자리까지).
+- 문구·광고 카피·가입 유도 금지. OG 는 실험 도구 한 줄(호출 주소)과 끝 로고만.
+- 파랑은 가장 좋은 값 하나에만. 나머지는 회색 막대. 빨강은 오류에만. 그림자·테두리·그라데이션·네온 금지.
+- 차트 선을 매번 처음부터 다시 그리지 않는다 — 점은 들어온 시각에 한 번 찍히고 남는다.
+- 화면을 흔들지 않는다(맞는 용도가 흔들림을 끈다). 드롭의 힘은 `trackCam` 툭(kick)과 `meter` 로.
+
+## 효과 쓰는 법
+
+```ts
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { fx } from "@kasaframe/themes/fx";
+import data from "../assets/data/measure.json";
+const { graphPaper, callLine, rawLog, samplePlot, meter, trackCam } = fx("og-measure");
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const bg = graphPaper(root, { phase: ctx.from });
+    const stage = document.createElement("div");
+    stage.style.cssText = "position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0";
+    root.append(stage);
+    const b = ctx.beats.beats.filter((x) => x > -0.01);
+    const c = data.calls[0];
+    const call = callLine(stage, { x: 90, y: 140, w: 1740, at: 0, url: ["apis.opengateway.ai", "/v1", "/chat", "/completions"], urlAt: b.slice(0, 4), model: c.model, modelAt: b[4], sendAt: b[6], status: c.status, ms: c.ttft_ms, answer: c.text });
+    return (t: number) => { bg(t); call(t); applyStyle(stage, trackCam(t, { shots: [{ at: 0 }, { at: b[3], zoom: 1.05, kick: 0.04 }], scene: ctx.id })); };
+  },
+};
+```
+
+- 모든 효과는 시각 t 의 순수 함수다. layer 효과는 `build` 에서 한 번 부르고 돌려받은 `(t) => void` 를 장면 함수에서 부른다.
+- 흐름은 「호출 한 줄 → 원자료 로그 → 점·가운데값 → 큰 숫자 하나 → 끝 도장」. 한 장면엔 큰 숫자 하나(display 200 이상)와 굵은 막대 둘·셋.
+- 로그 줄이 들어오는 시각과 점이 찍히는 시각을 같게 둔다 — 「거기서 뽑혔다」가 보인다. 들어오는 박자는 마디·박에.
+- 원자료 로그·축 눈금은 코드 화면이라 글 덩어리가 많다 — 견본은 `kf.json` 의 `text.maxOnScreen` 을 로그 줄·눈금·값을 센 실제 수(30)로 두었다. 로그·차트 밖 글은 셋을 넘기지 않는다.
+- 결과가 서는 순간은 드롭에(`meter` + `trackCam` kick), 끝 도장은 마지막 마디에.
+- **쉬지 않는다** — 화면을 꽉 채우고(글 56–64px, 화면 전체), 박마다 주소 조각·카운터·로그 한 줄·날아가는 숫자(`pickFly`)·막대·칩 중 하나가 크게 움직여 같은 구도가 1.5초를 넘지 않게. 기다리는 동안도 카운터가 실제 속도로 구른다. `trackCam` 샷은 드러냄·결과가 서는 순간에만 — 구도를 메우려고 샷을 박지 않는다(샷 사이 카메라는 선다).

package/themes/og-measure/effects.ts

@@ -0,0 +1,432 @@
+import { applyStyle, clamp, emit, ease, progress, safeTime, type Style } from "@kasaframe/core";
+import { typeText } from "@kasaframe/motion";
+
+// 비유: 계측기 화면. 실제 호출이 한 줄 나가고, 원자료 로그가 흐르고, 거기서 숫자가 뽑혀 점·막대·큰 숫자로 쌓인다.
+// 화면의 숫자는 늘 재 온 값(measure.json 같은 원자료)에서 온다 — 효과는 숫자를 지어내지 않고, 들어온 시각에 보여 줄 뿐이다.
+// 화면은 0.1초도 쉬지 않는다 — 카메라는 늘 조금씩 다가가며 흐르고, 박마다 글자·줄·점·막대 중 하나가 크게 움직인다.
+
+const MONO = "var(--kf-font-mono)";
+const BAR = "rgba(100, 116, 139, 0.28)";
+const snappy = ease.snappy;
+
+// OG 움직임 결: 220ms 감속 + 진입 거리
+function rise(t: number, at: number, dur = 0.22, px = 14): Style {
+  const p = snappy(progress(t, at, dur));
+  return { opacity: p, y: px * (1 - p) };
+}
+
+function box(doc: Document, css: string, text = ""): HTMLElement {
+  const d = doc.createElement("div");
+  d.style.cssText = css;
+  if (text) d.textContent = text;
+  return d;
+}
+
+/**
+ * 측정 바탕 — 흰 모눈이 천천히 흐르고 옅은 파란 주사선이 반 주기 간격으로 둘 지나간다. 주사선은 카드 위로도 지나간다 —
+ * 카메라가 서 있는 사이 화면을 꽉 채운 카드 밑에 숨으면 박 사이가 멈춘 프레임이 된다. 구도는 안 바꾼다
+ */
+export function graphPaper(el: HTMLElement, o: { cell?: number; period?: number; phase?: number } = {}): (t: number) => void {
+  const doc = el.ownerDocument;
+  const cell = o.cell ?? 56;
+  const bg = box(
+    doc,
+    `position:absolute;inset:0;background:var(--kf-bg);overflow:hidden;` +
+      `background-image:linear-gradient(rgba(203,213,225,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(203,213,225,.55) 1px,transparent 1px);` +
+      `background-size:${cell}px ${cell}px`,
+  );
+  const scans = [0, 0.5].map((k) => ({ k, el: box(doc, "position:absolute;top:0;bottom:0;width:120px;z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,111,214,.07),transparent)") }));
+  for (const s of scans) bg.append(s.el);
+  el.append(bg);
+  const period = o.period ?? 4;
+  return (t: number) => {
+    const u = safeTime(t) + (o.phase ?? 0);
+    bg.style.backgroundPosition = `${(u * 18) % cell}px ${(u * 9) % cell}px`;
+    for (const s of scans) s.el.style.transform = `translateX(${((((u / period + s.k) % 1) + 1) % 1) * ((el.clientWidth || 1920) + 240) - 120}px)`;
+  };
+}
+
+export interface CamShot {
+  at: number;
+  /** 화면 가운데에 둘 무대 좌표 */
+  x?: number;
+  y?: number;
+  zoom?: number;
+  /** 샷이 바뀌는 순간 배율을 이만큼 더했다 걷는다(툭) */
+  kick?: number;
+}
+
+/**
+ * 계측 카메라 — 샷이 바뀌면 220ms 감속으로 옮기며 툭(kick) 치고, 샷 사이에는 선다. 샷은 드러냄·결과처럼 이유가 있을 때만 —
+ * 쉬지 않는 몫은 카운터·로그 한 줄·막대가 진다(늘 흐르는 카메라는 kf check camera.wander). drift·pan 을 주면 샷 사이에도 흐르지만 이벤트가 안 남는다.
+ * 긴 로그 줄이 반쯤 잘리지 않게 크게 들어가지 않는다(배율 1–1.1). 무대 상자(transform-origin 0 0)에 붙인다.
+ */
+export function trackCam(t: number, o: { shots: CamShot[]; drift?: number; pan?: number; w?: number; h?: number; scene?: string }): Style {
+  t = safeTime(t);
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const drift = o.drift ?? 0;
+  const pan = o.pan ?? 0;
+  const shots = o.shots.length ? o.shots : [{ at: 0 }];
+  const frame = (i: number, u: number) => {
+    const s = shots[i];
+    const e = Math.max(0, u - s.at);
+    const dir = i % 2 ? -1 : 1;
+    return { x: (s.x ?? W / 2) + dir * pan * e, y: (s.y ?? H / 2) + pan * 0.4 * e, z: (s.zoom ?? 1) * (1 + drift * e) };
+  };
+  let i = 0;
+  for (let k = 0; k < shots.length; k++) if (shots[k].at <= t) i = k;
+  let f = frame(i, t);
+  const since = t - shots[i].at;
+  if (i > 0 && since < 0.22) {
+    const p = snappy(since / 0.22);
+    const a = frame(i - 1, shots[i].at);
+    f = { x: a.x + (f.x - a.x) * p, y: a.y + (f.y - a.y) * p, z: a.z + (f.z - a.z) * p };
+    emit({ kind: "camera", source: "trackCam", scene: o.scene, value: Math.round((1 - p) * 1000) });
+  }
+  const kick = since >= 0 ? (shots[i].kick ?? 0) * Math.exp(-since / 0.12) : 0;
+  if (since >= 0.22 && kick > 0.0005) emit({ kind: "camera", source: "trackCam", scene: o.scene, value: Math.round(kick * 1000) });
+  const z = f.z * (1 + kick);
+  return { x: W / 2 - z * f.x, y: H / 2 - z * f.y, scale: z };
+}
+
+/**
+ * 실제 호출 한 줄 — 주소가 박마다 한 조각씩 붙고, 모델·보낼 글이 찍히고, sendAt 부터 경과 시간이 실제 속도로 굴러
+ * 잰 값(ms)에 멈추며 상태·첫 토큰·받은 글이 붙는다. 카운터는 지어낸 값이 아니라 원자료의 ms 까지만 센다.
+ */
+export function callLine(
+  el: HTMLElement,
+  o: {
+    x: number;
+    y: number;
+    w: number;
+    at: number;
+    url: string[];
+    urlAt: number[];
+    model?: string;
+    modelAt?: number;
+    prompt?: string;
+    promptAt?: number;
+    /** 안 주면 주소 줄만 — 보내고 재는 줄(경과 시간·상태)은 실제로 잰 호출에만 */
+    sendAt?: number;
+    status?: number;
+    ms?: number;
+    answer?: string;
+    usage?: string;
+    usageAt?: number;
+    method?: string;
+    size?: number;
+  },
+): (t: number) => void {
+  const doc = el.ownerDocument;
+  const size = o.size ?? 56;
+  const card = box(doc, `position:absolute;left:${o.x}px;top:${o.y}px;width:${o.w}px;box-sizing:border-box;padding:${size * 0.7}px ${size * 0.85}px;border-radius:12px;background:var(--kf-surface);font-family:${MONO};font-size:${size}px;line-height:1.45;color:var(--kf-ink);font-variant-numeric:tabular-nums`);
+  const row = (css = "") => box(doc, `display:flex;align-items:center;gap:${size * 0.35}px;white-space:nowrap;${css}`);
+  const r1 = row();
+  const chip = box(doc, `padding:0 ${size * 0.3}px;border-radius:999px;background:var(--kf-accent);color:var(--kf-on-accent);font-size:${size * 0.8}px;font-weight:700`, o.method ?? "POST");
+  const urlBox = box(doc, "display:flex");
+  const parts = o.url.map((u) => {
+    const s = doc.createElement("span");
+    s.textContent = u;
+    s.style.display = "inline-block";
+    urlBox.append(s);
+    return s;
+  });
+  r1.append(chip, urlBox);
+  const r2 = row("color:var(--kf-dim)");
+  const r3 = row("color:var(--kf-dim)");
+  const r4 = row(`margin-top:${size * 0.4}px`);
+  const timer = box(doc, `font-family:var(--kf-font-display);font-weight:800;font-size:${size * 1.9}px;letter-spacing:-0.03em;line-height:1;transform-origin:0 50%`);
+  const ok = box(doc, `padding:0 ${size * 0.3}px;border-radius:999px;background:var(--kf-success);color:var(--kf-ink);font-size:${size * 0.8}px;font-weight:700`, String(o.status ?? ""));
+  const what = box(doc, "color:var(--kf-accent-text);font-weight:700", "첫 토큰");
+  const ans = box(doc, "color:var(--kf-ink)");
+  r4.append(timer, ok, what, ans);
+  const r5 = row(`color:var(--kf-dim);font-size:${size * 0.7}px`);
+  card.append(r1, r2, r3, r4, r5);
+  el.append(card);
+  const ms = o.ms ?? 0;
+  const doneAt = o.sendAt === undefined ? Infinity : o.sendAt + ms / 1000;
+  return (t: number) => {
+    applyStyle(card, rise(t, o.at, 0.22, 40));
+    parts.forEach((s, i) => {
+      const at = o.urlAt[i] ?? o.at;
+      s.style.visibility = t >= at ? "visible" : "hidden";
+      applyStyle(s, t >= at ? { ...rise(t, at, 0.18, 0), scale: 1 + 0.25 * (1 - snappy(progress(t, at, 0.18))) } : {});
+    });
+    r2.textContent = o.model ? typeText(`model: ${o.model}`, t, { at: o.modelAt ?? o.at, cps: 90, jitter: 0, ime: false }).text : "";
+    r2.style.display = o.model ? "" : "none";
+    r3.textContent = o.prompt && o.promptAt !== undefined && t >= o.promptAt ? `content: "${o.prompt}"` : "";
+    applyStyle(r3, o.promptAt !== undefined ? rise(t, o.promptAt) : {});
+    const done = t >= doneAt;
+    r4.style.display = o.sendAt === undefined ? "none" : "";
+    r4.style.visibility = o.sendAt !== undefined && t >= o.sendAt ? "visible" : "hidden";
+    timer.textContent = o.sendAt === undefined ? "" : `${Math.min(ms, Math.max(0, Math.floor((t - o.sendAt) * 1000)))}ms`;
+    timer.style.color = done ? "var(--kf-accent-text)" : "var(--kf-ink)";
+    for (const e of [ok, what, ans]) {
+      e.style.display = done ? "" : "none";
+      applyStyle(e, rise(t, doneAt));
+    }
+    applyStyle(timer, done ? { scale: 1 + 0.12 * Math.exp(-(t - doneAt) / 0.1) } : {});
+    ans.textContent = done ? typeText(o.answer ?? "", t, { at: doneAt + 0.08, cps: 22, jitter: 0, ime: false }).text : "";
+    r5.textContent = o.usage && o.usageAt !== undefined && t >= o.usageAt ? o.usage : "";
+    r5.style.display = o.usage ? "" : "none";
+    applyStyle(r5, o.usageAt !== undefined ? rise(t, o.usageAt) : {});
+  };
+}
+
+/**
+ * 원자료 로그 — 줄이 들어온 시각에 맨 아래 붙고 한 줄씩 위로 밀려 오른다. pick 정규식이 잡은 숫자는 그 시각부터 파란 칸.
+ * 줄 자리는 size·lineHeight·pad 로 정해지니 pickFly 출발점을 장면이 같은 값으로 셀 수 있다(새 줄 = 맨 아래 칸).
+ */
+export function rawLog(
+  el: HTMLElement,
+  o: { x: number; y: number; w: number; rows?: number; at?: number; lines: string[]; times: number[]; pick?: RegExp; size?: number; lineHeight?: number; pad?: number },
+): (t: number) => void {
+  const doc = el.ownerDocument;
+  const size = o.size ?? 40;
+  const lh = o.lineHeight ?? Math.round(size * 1.5);
+  const rows = o.rows ?? 9;
+  const pad = o.pad ?? 28;
+  const panel = box(doc, `position:absolute;left:${o.x}px;top:${o.y}px;width:${o.w}px;box-sizing:border-box;padding:${pad}px;border-radius:12px;background:var(--kf-surface);font-family:${MONO};font-size:${size}px;line-height:${lh}px;color:var(--kf-ink-soft);font-variant-numeric:tabular-nums`);
+  // 밀려 오르는 줄이 안쪽 여백에 반쯤 걸쳐 보이지 않게 줄 칸만큼만 보이는 창을 따로 둔다
+  const view = box(doc, `position:relative;height:${rows * lh}px;overflow:hidden`);
+  const strip = box(doc, "position:relative");
+  view.append(strip);
+  panel.append(view);
+  el.append(panel);
+  const items = o.lines.map((line) => {
+    const row = box(doc, `white-space:pre;height:${lh}px`);
+    const m = o.pick ? o.pick.exec(line) : null;
+    let num: HTMLElement | null = null;
+    if (m && m.index !== undefined) {
+      const g = m[1] ?? m[0];
+      const start = m.index + m[0].indexOf(g);
+      num = doc.createElement("span");
+      num.textContent = g;
+      num.style.cssText = "border-radius:6px;padding:0 4px;margin:0 -4px";
+      row.append(doc.createTextNode(line.slice(0, start)), num, doc.createTextNode(line.slice(start + g.length)));
+    } else row.textContent = line;
+    strip.append(row);
+    return { row, num };
+  });
+  return (t: number) => {
+    applyStyle(panel, rise(t, o.at ?? 0, 0.22, 40));
+    let shown = 0;
+    let slide = 1;
+    o.times.forEach((at, i) => {
+      if (t >= at) {
+        shown = i + 1;
+        slide = snappy(progress(t, at, 0.2));
+      }
+      applyStyle(items[i].row, t >= at ? rise(t, at, 0.2, 0) : { opacity: 0 });
+      const n = items[i].num;
+      if (n) {
+        const on = t >= at;
+        n.style.background = on ? "rgba(0,111,214,.16)" : "transparent";
+        n.style.color = on ? "var(--kf-accent-text)" : "";
+        n.style.fontWeight = on ? "700" : "";
+      }
+    });
+    const over = Math.max(0, shown - rows);
+    strip.style.transform = `translateY(${over > 0 ? -(over - 1 + slide) * lh : 0}px)`;
+  };
+}
+
+/** 뽑힌 숫자 — 로그 줄의 숫자가 그 자리에서 떠올라 호를 그리며 점 그림 자리로 날아가 꽂힌다(박마다 큰 움직임) */
+export function pickFly(
+  el: HTMLElement,
+  o: { items: { at: number; text: string; from: { x: number; y: number }; to: { x: number; y: number } }[]; dur?: number; size?: number },
+): (t: number) => void {
+  const doc = el.ownerDocument;
+  const dur = o.dur ?? 0.3;
+  const size = o.size ?? 44;
+  const spans = o.items.map((it) => {
+    const s = box(doc, `position:absolute;left:0;top:0;font-family:${MONO};font-size:${size}px;font-weight:800;color:var(--kf-accent-text);background:rgba(0,111,214,.14);border-radius:8px;padding:0 8px;white-space:nowrap;opacity:0;z-index:7;font-variant-numeric:tabular-nums`, it.text);
+    el.append(s);
+    return s;
+  });
+  return (t: number) => {
+    o.items.forEach((it, i) => {
+      const s = spans[i];
+      const u = (t - it.at) / dur;
+      if (u < 0 || u > 1) {
+        s.style.opacity = "0";
+        return;
+      }
+      const p = ease.inOutCubic(u);
+      const x = it.from.x + (it.to.x - it.from.x) * p;
+      const y = it.from.y + (it.to.y - it.from.y) * p - Math.sin(Math.PI * p) * 180;
+      s.style.opacity = String(1 - clamp((u - 0.85) / 0.15));
+      s.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%) scale(${1 + 0.5 * Math.sin(Math.PI * p)})`;
+    });
+  };
+}
+
+/** 샘플 점 그림 — 모델마다 재 온 값이 들어온 시각에 점으로 꽂히고, 지금까지의 가운데값 눈금·숫자가 따라 미끄러진다 */
+export function samplePlot(
+  el: HTMLElement,
+  o: { x: number; y: number; w: number; rows: { label: string; samples: { t: number; v: number }[] }[]; min: number; max: number; unit?: string; decimals?: number; rowH?: number; at?: number; ticks?: number[]; best?: number; size?: number },
+): (t: number) => void {
+  const doc = el.ownerDocument;
+  const rowH = o.rowH ?? 230;
+  const size = o.size ?? 40;
+  const wrap = box(doc, `position:absolute;left:${o.x}px;top:${o.y}px;width:${o.w}px;height:${rowH * o.rows.length + 70}px;font-family:${MONO};font-variant-numeric:tabular-nums`);
+  el.append(wrap);
+  const X = (v: number) => ((v - o.min) / (o.max - o.min)) * o.w;
+  for (const tk of o.ticks ?? []) {
+    const line = box(doc, `position:absolute;left:${X(tk)}px;top:0;bottom:54px;width:2px;background:var(--kf-line)`);
+    const lab = box(doc, `position:absolute;left:${X(tk)}px;bottom:0;transform:translateX(-50%);font-size:${size * 0.75}px;color:var(--kf-dim)`, `${tk}${o.unit ?? ""}`);
+    wrap.append(line, lab);
+  }
+  const trackY = Math.round(size * 2.6);
+  const rows = o.rows.map((r, i) => {
+    const top = i * rowH;
+    const label = box(doc, `position:absolute;left:0;top:${top}px;font-size:${size}px;color:var(--kf-ink);white-space:nowrap`, r.label);
+    const track = box(doc, `position:absolute;left:0;right:0;top:${top + trackY}px;height:10px;border-radius:5px;background:${BAR}`);
+    const dots = r.samples.map(() => box(doc, `position:absolute;top:${top + trackY - 19}px;width:48px;height:48px;margin-left:-24px;border-radius:50%;background:var(--kf-accent);opacity:0`));
+    const mark = box(doc, `position:absolute;top:${top + trackY - 40}px;width:8px;height:90px;margin-left:-4px;border-radius:4px;background:var(--kf-ink);opacity:0`);
+    const val = box(doc, `position:absolute;top:${top + trackY + 30}px;right:0;font-size:${size * 1.35}px;font-weight:700;color:var(--kf-ink);opacity:0;transform-origin:100% 50%`);
+    wrap.append(label, track, ...dots, mark, val);
+    return { r, dots, mark, val };
+  });
+  const median = (xs: number[]) => {
+    const s = [...xs].sort((a, b) => a - b);
+    const m = s.length >> 1;
+    return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2;
+  };
+  return (t: number) => {
+    applyStyle(wrap, rise(t, o.at ?? 0, 0.22, 40));
+    rows.forEach(({ r, dots, mark, val }, i) => {
+      const got = r.samples.filter((s) => t >= s.t);
+      r.samples.forEach((s, k) => {
+        const p = snappy(progress(t, s.t, 0.2));
+        dots[k].style.left = `${X(s.v)}px`;
+        dots[k].style.opacity = String(0.6 * p);
+        dots[k].style.transform = `scale(${t >= s.t ? 1.8 - 0.8 * p : 0})`;
+      });
+      if (!got.length) {
+        mark.style.opacity = "0";
+        val.style.opacity = "0";
+        return;
+      }
+      // 가운데값은 새 점이 올 때마다 그 자리로 미끄러진다 — 앞 값과 새 값을 220ms 로 잇는다
+      const last = got[got.length - 1];
+      const prev = got.length > 1 ? median(got.slice(0, -1).map((s) => s.v)) : last.v;
+      const now = median(got.map((s) => s.v));
+      const k = snappy(progress(t, last.t, 0.22));
+      const m = prev + (now - prev) * k;
+      mark.style.left = `${X(m)}px`;
+      mark.style.opacity = "1";
+      mark.style.background = o.best === i ? "var(--kf-accent)" : "var(--kf-ink)";
+      val.style.opacity = "1";
+      val.style.color = o.best === i ? "var(--kf-accent-text)" : "var(--kf-ink)";
+      val.style.transform = `scale(${1 + 0.15 * (1 - k)})`;
+      val.textContent = `${m.toFixed(o.decimals ?? 1)}${o.unit ?? ""}`;
+    });
+  };
+}
+
+/** 자리 고정 숫자 — 계기판처럼 앞자리부터 하나씩 멈춰 선다. 멈추기 전 자리는 돌고 있다. 글자 수는 처음부터 끝까지 같다 */
+export function meter(t: number, o: { to: number; at: number; dur?: number; decimals?: number; unit?: string }): string {
+  t = safeTime(t);
+  const target = o.to.toFixed(o.decimals ?? 0);
+  const n = target.replace(/\D/g, "").length || 1;
+  const dur = o.dur ?? 0.9;
+  let k = 0;
+  let out = "";
+  for (const ch of target) {
+    if (!/\d/.test(ch)) {
+      out += ch;
+      continue;
+    }
+    const settle = o.at + (dur * (k + 1)) / n;
+    out += t >= settle ? ch : String(Math.floor((t * 26 + k * 3.7) % 10 + 10) % 10);
+    k++;
+  }
+  return `${out}${o.unit ?? ""}`;
+}
+
+/** 막대 — 굵은 막대가 박마다 하나씩 값만큼 자란다. best 하나만 OG 파랑, 나머지는 회색. 값은 막대 끝, delta 를 주면 그 박에 차이 칩 */
+export function rankBars(
+  el: HTMLElement,
+  o: { x: number; y: number; w: number; items: { label: string; value: number; at: number; delta?: string; deltaAt?: number }[]; max: number; best?: number | number[]; prefix?: string; unit?: string; decimals?: number; barH?: number; gap?: number; size?: number },
+): (t: number) => void {
+  const doc = el.ownerDocument;
+  const barH = o.barH ?? 76;
+  const size = o.size ?? 38;
+  const gap = o.gap ?? 40;
+  const step = barH + gap + size * 1.4;
+  const bests = [o.best ?? []].flat();
+  const wrap = box(doc, `position:absolute;left:${o.x}px;top:${o.y}px;width:${o.w}px;font-family:${MONO};font-variant-numeric:tabular-nums`);
+  el.append(wrap);
+  const rows = o.items.map((it, i) => {
+    const top = i * step;
+    const label = box(doc, `position:absolute;left:0;top:${top}px;font-size:${size}px;color:var(--kf-ink-soft);white-space:nowrap`, it.label);
+    const bar = box(doc, `position:absolute;left:0;top:${top + size * 1.4}px;height:${barH}px;background:${bests.includes(i) ? "var(--kf-accent)" : BAR};transform-origin:0 50%`);
+    const val = box(doc, `position:absolute;top:${top + size * 1.4}px;line-height:${barH}px;font-size:${size * 1.2}px;font-weight:700;white-space:nowrap;color:${bests.includes(i) ? "var(--kf-accent-text)" : "var(--kf-ink)"}`);
+    const delta = it.delta
+      ? box(doc, `position:absolute;top:${top + size * 1.4 + barH / 2}px;padding:4px 16px;border-radius:999px;background:var(--kf-raised);color:var(--kf-ink);font-size:${size}px;font-weight:700;white-space:nowrap;transform-origin:0 50%`, it.delta)
+      : null;
+    wrap.append(label, bar, val, ...(delta ? [delta] : []));
+    return { it, label, bar, val, delta };
+  });
+  return (t: number) => {
+    rows.forEach(({ it, label, bar, val, delta }) => {
+      const p = snappy(progress(t, it.at, 0.3));
+      const w = (it.value / o.max) * (o.w - 440);
+      applyStyle(label, rise(t, it.at));
+      bar.style.width = `${w}px`;
+      bar.style.transform = `scaleX(${p})`;
+      val.style.left = `${w * p + 24}px`;
+      val.style.opacity = String(p);
+      val.textContent = `${o.prefix ?? ""}${it.value.toFixed(o.decimals ?? 1)}${o.unit ?? ""}`;
+      if (delta) {
+        const at = it.deltaAt ?? it.at + 0.35;
+        const d = snappy(progress(t, at, 0.22));
+        delta.style.left = `${w + 24 + size * 6}px`;
+        delta.style.opacity = String(d);
+        delta.style.transform = `translateY(-50%) scale(${t >= at ? 1.3 - 0.3 * d : 0})`;
+      }
+    });
+  };
+}
+
+/** 끝 도장 — 「측정 날짜 · 호출 N번 · $비용 · 키 하나」 한 줄과 OG 로고가 쾅 찍힌다. 비용은 반올림해 0 으로 만들지 않고 첫 유효 자리까지 */
+export function stamp(el: HTMLElement, o: { x: number; y: number; at: number; date: string; calls: number; cost: number; logo?: string; size?: number }): (t: number) => void {
+  const doc = el.ownerDocument;
+  const size = o.size ?? 36;
+  const card = box(doc, `position:absolute;left:${o.x}px;top:${o.y}px;display:flex;align-items:center;gap:${size}px;padding:${size * 0.6}px ${size}px;border-radius:12px;background:var(--kf-raised);font-family:${MONO};font-size:${size}px;color:var(--kf-ink);white-space:nowrap;font-variant-numeric:tabular-nums`);
+  if (o.logo) {
+    const img = doc.createElement("img");
+    img.src = o.logo;
+    img.style.cssText = `height:${size * 1.25}px;width:auto;display:block`;
+    card.append(img);
+  }
+  const digits = o.cost > 0 ? Math.max(2, -Math.floor(Math.log10(o.cost))) : 2;
+  card.append(box(doc, "", `측정 ${o.date} · 호출 ${o.calls}번 · $${o.cost.toFixed(digits)} · 키 하나`));
+  el.append(card);
+  return (t: number) => {
+    const p = snappy(progress(t, o.at, 0.22));
+    card.style.opacity = String(p);
+    card.style.transform = `translateX(-50%) translateY(${20 * (1 - p)}px) scale(${1.25 - 0.25 * p})`;
+  };
+}
+
+/** 칩 — 짧은 낱말·모델 ID·잰 값 하나(「실측」·「openai/ 41」). 220ms 로 크게 들어오고 until 에 오그라들며 빠진다 */
+export function flag(el: HTMLElement, o: { x: number; y: number; text: string; at: number; until?: number; tone?: "accent" | "soft" | "plain"; size?: number; mono?: boolean }): (t: number) => void {
+  const doc = el.ownerDocument;
+  const soft = o.tone === "soft";
+  const chip = box(
+    doc,
+    `position:absolute;left:${o.x}px;top:${o.y}px;padding:6px 20px;border-radius:999px;font-family:${o.mono ? MONO : "var(--kf-font-sans)"};font-size:${o.size ?? 38}px;font-weight:700;white-space:nowrap;transform-origin:0 50%;font-variant-numeric:tabular-nums;` +
+      (o.tone === "plain" ? "background:var(--kf-surface);color:var(--kf-ink)" : soft ? "background:var(--kf-tint);color:var(--kf-accent-text)" : "background:var(--kf-accent);color:var(--kf-on-accent)"),
+    o.text,
+  );
+  el.append(chip);
+  return (t: number) => {
+    const p = snappy(progress(t, o.at, 0.22));
+    const gone = o.until === undefined ? 0 : snappy(progress(t, o.until, 0.12));
+    chip.style.opacity = String(p * (1 - gone));
+    chip.style.transform = `scale(${t >= o.at ? (1.4 - 0.4 * p) * (1 - 0.6 * gone) : 0.6})`;
+  };
+}

package/themes/og-measure/sample/assets/brand/og-logo-full.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140 650" width="1140" height="650" fill="none" role="img" aria-label="OpenGateway">
+  <title>OpenGateway</title>
+  <g id="logo" stroke="currentColor" fill="currentColor">
+    <rect id="node-in" x="36" y="36" width="420" height="578" rx="89" fill="none" stroke-width="72"/>
+    <rect id="bar-in" x="72" y="272" width="277" height="106" stroke="none"/>
+    <path id="node-out" d="M684 213 L684 125 A89 89 0 0 1 773 36 L1015 36 A89 89 0 0 1 1104 125 L1104 525 A89 89 0 0 1 1015 614 L773 614 A89 89 0 0 1 684 525 L684 436" fill="none" stroke-width="72" stroke-linecap="butt"/>
+    <g id="arrow">
+      <rect id="arrow-shaft" x="420" y="272" width="394" height="106" stroke="none"/>
+      <path id="arrow-head" d="M833 220 L970 325 L833 430 Z" stroke-width="38" stroke-linejoin="round"/>
+    </g>
+  </g>
+</svg>

package/themes/og-measure/sample/assets/brand/og-logo.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_레이어_1" data-name="레이어_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1140 650">
+  <!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109)  -->
+  <g id="node-in">
+    <path d="M367,650H125c-68.9,0-125-56.1-125-125V125C0,56.1,56.1,0,125,0h242c68.9,0,125,56.1,125,125v400c0,68.9-56.1,125-125,125ZM125,72c-29.2,0-53,23.8-53,53v400c0,29.2,23.8,53,53,53h242c29.2,0,53-23.8,53-53V125c0-29.2-23.8-53-53-53H125Z"/>
+  </g>
+  <rect id="bar-in" x="72" y="272" width="277" height="106"/>
+  <g id="node-out">
+    <path d="M1015,650h-242c-68.9,0-125-56.1-125-125v-89h72v89c0,29.2,23.8,53,53,53h242c29.2,0,53-23.8,53-53V125c0-29.2-23.8-53-53-53h-242c-29.2,0-53,23.8-53,53v88h-72v-88c0-68.9,56.1-125,125-125h242c68.9,0,125,56.1,125,125v400c0,68.9-56.1,125-125,125Z"/>
+  </g>
+  <path d="M981.6,309.9l-137-105c-5.7-4.4-13.5-5.2-20-2-6.5,3.2-10.6,9.8-10.6,17v52h-394v106h394v52c0,7.2,4.1,13.8,10.6,17,2.7,1.3,5.5,2,8.4,2,4.1,0,8.2-1.3,11.6-3.9l137-105c4.7-3.6,7.4-9.2,7.4-15.1s-2.8-11.5-7.4-15.1Z"/>
+</svg>