kasaframe 0.0.0-stage → 0.1.3

package/themes/og-measure/sample/scenes/gather.ts

@@ -0,0 +1,51 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { fx } from "@kasaframe/themes/fx";
+import { OG, beatsOf, stageOf } from "../lib/data.ts";
+
+const { graphPaper, flag, pickFly, callLine, trackCam } = fx("og-measure");
+
+// 회사마다 흩어진 모델 — 모델 ID 접두와 개수가 박마다 화면 곳곳에 뜨고, 일곱째 박에 한 주소로 날아가 모인다.
+const SPOTS = [
+  [150, 150],
+  [1160, 110],
+  [620, 320],
+  [1420, 360],
+  [200, 560],
+  [1240, 610],
+  [520, 770],
+  [1180, 860],
+  [150, 900],
+] as const;
+const AT = [0, 0, 1, 2, 3, 3, 4, 4, 5];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const bg = graphPaper(root, { phase: ctx.from });
+    const stage = stageOf(root);
+    const b = beatsOf(ctx.beats);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const SIZE = 62;
+    const label = (i: number) => `${OG.owners[i][0]} ${OG.owners[i][1]}`;
+    // 첫 칩은 0초에 — 첫 박(0.29초)까지 화면이 멈춰 있지 않게
+    const chips = OG.owners.map((_, i) => flag(stage, { x: SPOTS[i][0], y: SPOTS[i][1], text: label(i), at: i === 0 ? 0 : B(AT[i]), until: B(6), tone: "soft", size: SIZE, mono: true }));
+    const width = (s: string) => s.length * SIZE * 0.6 + 40;
+    const fly = pickFly(stage, {
+      items: OG.owners.map((o, i) => ({ at: B(6), text: o[0], from: { x: SPOTS[i][0] + width(label(i)) / 2, y: SPOTS[i][1] + SIZE * 0.7 }, to: { x: 960, y: 540 } })),
+      dur: 0.3,
+      size: 52,
+    });
+    const card = callLine(stage, { x: 160, y: 430, w: 1600, at: B(6) + 0.2, size: 84, url: [OG.host, "/v1"], urlAt: [B(6) + 0.24, B(7)] });
+    const shots = [
+      { at: 0, x: 960, y: 540 },
+      { at: B(4), x: 920, y: 530, zoom: 1.04, kick: 0.04 },
+      { at: B(6), x: 960, y: 560, zoom: 1.0, kick: 0.07 },
+    ];
+    return (t: number) => {
+      bg(t);
+      for (const c of chips) c(t);
+      fly(t);
+      card(t);
+      applyStyle(stage, trackCam(t, { shots, scene: ctx.id }));
+    };
+  },
+};

package/themes/og-measure/sample/scenes/models.ts

@@ -0,0 +1,34 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { fx } from "@kasaframe/themes/fx";
+import { OG, beatsOf, stageOf } from "../lib/data.ts";
+
+const { graphPaper, callLine, rawLog, flag, trackCam } = fx("og-measure");
+
+// 같은 주소로 가는 요청 줄 — 박마다 모델 ID 하나, 드롭 앞 마지막 마디는 반 박마다 하나씩 몰아 올린다. 결과는 붙이지 않는다(부르지 않은 호출).
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const bg = graphPaper(root, { phase: ctx.from });
+    const stage = stageOf(root);
+    const b = beatsOf(ctx.beats);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const half = 60 / ctx.beats.bpm / 2;
+    const head = callLine(stage, { x: 90, y: 50, w: 1740, at: -1, size: 60, url: [OG.host, "/v1"], urlAt: [-1, -1] });
+    const lines = OG.requests.map(([path, model]) => `POST ${path.padEnd(24)} ${model}`);
+    const times = lines.map((_, i) => (i < 8 ? B(i) : B(8 + Math.floor((i - 8) / 2)) + ((i - 8) % 2) * half));
+    const log = rawLog(stage, { x: 90, y: 230, w: 1740, rows: 9, lines, times, pick: /([a-z-]+\/[\w.-]+)$/i, size: 40 });
+    const one = flag(stage, { x: 90, y: 920, text: "주소 1개", at: B(4), tone: "soft", size: 48 });
+    const shots = [
+      { at: 0, x: 960, y: 540, kick: 0.05 },
+      { at: B(4), x: 940, y: 530, zoom: 1.03, kick: 0.03 },
+      { at: B(8), x: 980, y: 550, zoom: 1.05, kick: 0.04 },
+      { at: B(10), x: 960, y: 540, zoom: 1.02, kick: 0.04 },
+    ];
+    return (t: number) => {
+      bg(t);
+      head(t);
+      log(t);
+      one(t);
+      applyStyle(stage, trackCam(t, { shots, scene: ctx.id }));
+    };
+  },
+};

package/themes/og-measure/sample/scenes/one.ts

@@ -0,0 +1,39 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { fx } from "@kasaframe/themes/fx";
+import { OG, beatsOf, stageOf } from "../lib/data.ts";
+
+const { graphPaper, meter, flag, trackCam } = fx("og-measure");
+
+// 드롭: 102 가 앞자리부터 멈춰 서며 카메라가 크게 툭 → 박마다 주소 · OpenAI 형식 · Anthropic 형식.
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const bg = graphPaper(root, { phase: ctx.from });
+    const stage = stageOf(root);
+    const b = beatsOf(ctx.beats);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const big = document.createElement("div");
+    big.style.cssText = "position:absolute;left:100px;top:110px;display:flex;align-items:baseline;gap:40px;font-family:var(--kf-font-display);font-weight:800;color:var(--kf-ink);font-variant-numeric:tabular-nums";
+    const num = document.createElement("span");
+    num.style.cssText = "font-size:430px;line-height:1.1;letter-spacing:-0.04em";
+    const unit = document.createElement("span");
+    unit.textContent = "모델";
+    unit.style.cssText = "font-family:var(--kf-font-sans);font-size:150px;font-weight:700;color:var(--kf-dim)";
+    big.append(num, unit);
+    stage.append(big);
+    const host = flag(stage, { x: 100, y: 660, text: `https://${OG.host}/v1`, at: B(1), tone: "plain", size: 80, mono: true });
+    const a = flag(stage, { x: 100, y: 840, text: "OpenAI 형식", at: B(2), size: 60 });
+    const c = flag(stage, { x: 560, y: 840, text: "Anthropic 형식", at: B(3), size: 60 });
+    const shots = [
+      { at: 0, x: 960, y: 540, kick: 0.16 },
+      { at: B(2), x: 950, y: 560, zoom: 1.02, kick: 0.03 },
+    ];
+    return (t: number) => {
+      bg(t);
+      num.textContent = meter(t, { to: OG.models, at: 0, dur: 0.5 });
+      host(t);
+      a(t);
+      c(t);
+      applyStyle(stage, trackCam(t, { shots, scene: ctx.id }));
+    };
+  },
+};

package/themes/og-measure/sample/scenes/price.ts

@@ -0,0 +1,56 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { fx } from "@kasaframe/themes/fx";
+import { OG, beatsOf, stageOf } from "../lib/data.ts";
+
+const { graphPaper, rankBars, flag, trackCam } = fx("og-measure");
+
+// 시간대 가격 — 한국 00–10시 창에서 같은 모델 ID 가 정가의 10%. 박마다 막대 하나·차이 칩 하나.
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const bg = graphPaper(root, { phase: ctx.from });
+    const stage = stageOf(root);
+    const b = beatsOf(ctx.beats);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const P = OG.price;
+    const off = (a: number, z: number) => `−${Math.round((1 - z / a) * 100)}%`;
+    const model = flag(stage, { x: 90, y: 50, text: P.model, at: 0, tone: "plain", size: 52, mono: true });
+    const win = flag(stage, { x: 1300, y: 56, text: "KST 00:00–10:00", at: B(1), tone: "soft", size: 46, mono: true });
+    const bars = rankBars(stage, {
+      x: 90,
+      y: 190,
+      w: 1740,
+      max: 1.3,
+      best: [1, 3],
+      prefix: "$",
+      unit: "/M",
+      decimals: 2,
+      barH: 70,
+      gap: 26,
+      size: 40,
+      items: [
+        { label: "출력 · 정가", value: P.output[0], at: B(2) },
+        { label: "출력 · 00–10시", value: P.output[1], at: B(3), delta: off(P.output[0], P.output[1]), deltaAt: B(4) },
+        { label: "입력 · 정가", value: P.input[0], at: B(5) },
+        { label: "입력 · 00–10시", value: P.input[1], at: B(6), delta: off(P.input[0], P.input[1]), deltaAt: B(7) },
+      ],
+    });
+    const glm = flag(stage, { x: 90, y: 840, text: `${P.glm} · 밤 −70%`, at: B(8), tone: "plain", size: 44, mono: true });
+    const auto = flag(stage, { x: 90, y: 950, text: "신청 없이 · 같은 모델 ID", at: B(9), tone: "soft", size: 44 });
+    const shots = [
+      { at: 0, x: 960, y: 540, kick: 0.05 },
+      { at: B(4), x: 940, y: 530, zoom: 1.03, kick: 0.03 },
+      { at: B(8), x: 980, y: 560, zoom: 1.03, kick: 0.03 },
+      { at: B(10), x: 960, y: 550, zoom: 1.0, kick: 0.04 },
+      { at: B(11), x: 960, y: 550, zoom: 1.02, kick: 0.04 },
+    ];
+    return (t: number) => {
+      bg(t);
+      model(t);
+      win(t);
+      bars(t);
+      glm(t);
+      auto(t);
+      applyStyle(stage, trackCam(t, { shots, scene: ctx.id }));
+    };
+  },
+};

package/themes/og-measure/sample/style.json

@@ -0,0 +1,97 @@
+{
+  "name": "og-measure",
+  "label": "OG 측정 화면 — 재 온 숫자가 쌓이는 계측기",
+  "scheme": "light",
+  "colors": {
+    "bg": "#FFFFFF",
+    "surface": "#F8FAFC",
+    "raised": "#F1F5F9",
+    "line": "#E2E8F0",
+    "ink": "#020817",
+    "inkSoft": "#1E293B",
+    "dim": "#64748B",
+    "accent": "#006FD6",
+    "accentSoft": "rgba(0, 111, 214, 0.45)",
+    "accentText": "#01509D",
+    "onAccent": "#FFFFFF",
+    "tint": "rgba(0, 111, 214, 0.08)",
+    "success": "#22C55E",
+    "danger": "#EF4444",
+    "warning": "#F59E0B",
+    "darkBg": "#090A0C",
+    "darkSurface": "#13151B",
+    "darkLine": "#39404F",
+    "darkInk": "#C6CAD6",
+    "darkAccent": "#0085FF",
+    "bar": "rgba(100, 116, 139, 0.28)"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Geist\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Geist Mono\", ui-monospace, \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      },
+      {
+        "family": "Geist",
+        "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2",
+        "weight": "100 900"
+      },
+      {
+        "family": "Geist Mono",
+        "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2",
+        "weight": "100 900"
+      }
+    ]
+  },
+  "type": {
+    "hero": 132,
+    "title": 72,
+    "body": 38,
+    "caption": 30,
+    "weightDisplay": 800,
+    "weightBody": 500,
+    "tracking": "-0.055em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 12,
+    "lg": 12,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 8
+    },
+    "cameraMove": "free",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "rise",
+    "ease": "snappy",
+    "durations": {
+      "fast": 0.15,
+      "base": 0.22,
+      "slow": 0.3
+    }
+  },
+  "notes": [
+    "잉크 셋: 흰 종이(bg) · 거의 검정(ink #020817) · OG 파랑 하나(accent #006FD6). 회색 막대(bar)는 비교 대상, 파랑은 가장 좋은 값 하나에만. 빨강은 오류에만.",
+    "질감: 흰 모눈 종이 + 아주 옅은 파란 주사선. 면은 테두리 없이 색으로 가른다(surface 98% → raised 96%), 그림자 없음, 모서리는 면 12px·칩 알약뿐.",
+    "숫자·모델 ID·주소·로그는 Geist Mono + tabular-nums, 큰 숫자는 Geist 800 자간 −0.055em. 한글은 Pretendard 로 떨어진다(제목 700).",
+    "움직임 성격: 220ms 감속(snappy) + 6px 진입. 숫자는 지어내지 않고 들어온 시각에 보인다 — 점이 찍히고, 가운데값이 미끄러지고, 큰 숫자는 앞자리부터 멈춰 선다. 차트 선을 매번 다시 그리지 않는다.",
+    "출처: opengateway cp-fe-og-styleguide design.md, 쇼츠 mla-swa-remotion devkit(재 봤습니다 연재).",
+    "쉬지 않는다: 카메라(trackCam)가 늘 조금씩 다가가며 흐르고 마디마다 툭 친다. 박마다 주소 조각·카운터·로그 한 줄·날아가는 숫자·막대·칩 중 하나가 크게 움직인다. 흔들림·섬광은 쓰지 않는다(쇼츠·설명·시연 틀이 끈다)."
+  ]
+}

package/themes/og-measure/slots.ts

@@ -0,0 +1,88 @@
+import { clamp, ease, progress, type Style } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, shownCount, strokePath, traceCanvas } from "@kasaframe/themes/slotkit";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 계측기 화면의 결. 바탕은 서 있는 모눈(뜻 없는 흐름을 두지 않는다),
+// 움직임은 값이 찍히고 막대가 서는 쪽만. 감속은 effects.ts 와 같은 snappy
+const snappy = ease.snappy;
+
+export const slots: ThemeSlots = {
+  surface(el) {
+    layer(
+      el,
+      "inset:0;background:var(--kf-bg);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:56px 56px",
+    );
+    return () => {};
+  },
+
+  // 흰 카드 — 회색 1px 테두리·12px 모서리, 강조 판은 OG 파랑. 위에서 짧게 내려와 선다
+  panel(el, { at, tone }) {
+    const card = layer(
+      el,
+      `inset:0;border-radius:var(--kf-radius-md);border:1px solid var(--kf-line);box-shadow:0 1px 2px rgba(2,8,23,.06),0 8px 24px rgba(2,8,23,.06);background:${tone === "accent" ? "var(--kf-accent)" : "var(--kf-bg)"}`,
+      true,
+    );
+    return (t) => {
+      const p = snappy(progress(t, at, 0.22));
+      card.style.visibility = t >= at ? "visible" : "hidden";
+      card.style.opacity = String(p);
+      card.style.transform = `translateY(${((1 - p) * -14).toFixed(2)}px)`;
+    };
+  },
+
+  // 값이 잡히는 순간 — 넘침 없이 한 번 조이고 선다(계측은 출렁이지 않는다)
+  land(_el, { at }) {
+    return (t): Style => (t < at || t > at + 0.3 ? {} : { scale: 1 + 0.05 * (1 - snappy(progress(t, at, 0.24))) });
+  },
+
+  // 계기판처럼 — 글자는 앞에서부터 서고, 숫자 칸은 서기 전까지 돌고 있다(meter 와 같은 결)
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    const chars = Array.from(text);
+    return (t) => {
+      const n = shownCount(spans.length, t, at, dur);
+      spans.forEach((s, i) => {
+        const on = t >= at && i < Math.min(spans.length, n + 2);
+        s.style.visibility = on ? "visible" : "hidden";
+        s.textContent = i < n || !/\d/.test(chars[i]) ? chars[i] : String(Math.floor(t * 26 + i * 3.7) % 10);
+      });
+    };
+  },
+
+  // 표본 선 — 파랑 3px 선이 그어지고 꺾이는 점마다 표본 점이 선다
+  trace(el, { points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points);
+    const css = getComputedStyle(el);
+    const color = (tone === "accent" ? css.getPropertyValue("--kf-accent") : css.getPropertyValue("--kf-ink")).trim() || "#006FD6";
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      const drawn = partial(points, p);
+      g.strokeStyle = color;
+      g.lineWidth = 3;
+      g.lineJoin = "round";
+      strokePath(g, drawn);
+      g.fillStyle = color;
+      for (const [x, y] of drawn.slice(0, -1)) {
+        g.beginPath();
+        g.arc(x, y, 6, 0, Math.PI * 2);
+        g.fill();
+      }
+    };
+  },
+
+  // 드롭 — 파랑 판이 한 번 덮였다 걷히고 고리가 퍼진다(흰 바탕이라 흰 섬광은 안 보인다)
+  drop(el, { ctx, drop }) {
+    const flood = layer(el, "inset:0;background:var(--kf-accent);opacity:0");
+    const ring = layer(el, "left:50%;top:50%;width:40vmin;height:40vmin;margin:-20vmin 0 0 -20vmin;border-radius:50%;border:6px solid var(--kf-accent);opacity:0");
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "og-drop" });
+      flood.style.opacity = String(Math.round(s.flash * 0.85 * 100) / 100);
+      ring.style.opacity = String(s.ring.opacity);
+      ring.style.transform = `scale(${s.ring.scale.toFixed(3)})`;
+      return s;
+    };
+  },
+};

package/themes/og-measure/style.json

@@ -0,0 +1,97 @@
+{
+  "name": "og-measure",
+  "label": "OG 측정 화면 — 재 온 숫자가 쌓이는 계측기",
+  "scheme": "light",
+  "colors": {
+    "bg": "#FFFFFF",
+    "surface": "#F8FAFC",
+    "raised": "#F1F5F9",
+    "line": "#E2E8F0",
+    "ink": "#020817",
+    "inkSoft": "#1E293B",
+    "dim": "#64748B",
+    "accent": "#006FD6",
+    "accentSoft": "rgba(0, 111, 214, 0.45)",
+    "accentText": "#01509D",
+    "onAccent": "#FFFFFF",
+    "tint": "rgba(0, 111, 214, 0.08)",
+    "success": "#22C55E",
+    "danger": "#EF4444",
+    "warning": "#F59E0B",
+    "darkBg": "#090A0C",
+    "darkSurface": "#13151B",
+    "darkLine": "#39404F",
+    "darkInk": "#C6CAD6",
+    "darkAccent": "#0085FF",
+    "bar": "rgba(100, 116, 139, 0.28)"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Geist\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Geist Mono\", ui-monospace, \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      },
+      {
+        "family": "Geist",
+        "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2",
+        "weight": "100 900"
+      },
+      {
+        "family": "Geist Mono",
+        "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2",
+        "weight": "100 900"
+      }
+    ]
+  },
+  "type": {
+    "hero": 132,
+    "title": 72,
+    "body": 38,
+    "caption": 30,
+    "weightDisplay": 800,
+    "weightBody": 500,
+    "tracking": "-0.055em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 12,
+    "lg": 12,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 8
+    },
+    "cameraMove": "free",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "rise",
+    "ease": "snappy",
+    "durations": {
+      "fast": 0.15,
+      "base": 0.22,
+      "slow": 0.3
+    }
+  },
+  "notes": [
+    "잉크 셋: 흰 종이(bg) · 거의 검정(ink #020817) · OG 파랑 하나(accent #006FD6). 회색 막대(bar)는 비교 대상, 파랑은 가장 좋은 값 하나에만. 빨강은 오류에만.",
+    "질감: 흰 모눈 종이 + 아주 옅은 파란 주사선. 면은 테두리 없이 색으로 가른다(surface 98% → raised 96%), 그림자 없음, 모서리는 면 12px·칩 알약뿐.",
+    "숫자·모델 ID·주소·로그는 Geist Mono + tabular-nums, 큰 숫자는 Geist 800 자간 −0.055em. 한글은 Pretendard 로 떨어진다(제목 700).",
+    "움직임 성격: 220ms 감속(snappy) + 6px 진입. 숫자는 지어내지 않고 들어온 시각에 보인다 — 점이 찍히고, 가운데값이 미끄러지고, 큰 숫자는 앞자리부터 멈춰 선다. 차트 선을 매번 다시 그리지 않는다.",
+    "출처: opengateway cp-fe-og-styleguide design.md, 쇼츠 mla-swa-remotion devkit(재 봤습니다 연재).",
+    "쉬지 않는다: 박마다 주소 조각·카운터·로그 한 줄·날아가는 숫자·막대·칩 중 하나가 크게 움직이고, 모눈·주사선이 늘 흐른다. 카메라(trackCam)는 이유가 있을 때만 — 결과가 서는 순간에 한 번 옮기며 툭, 사이에는 선다. 흔들림·섬광은 쓰지 않는다(쇼츠·설명·시연 틀이 끈다)."
+  ]
+}

package/themes/og-measure/theme.json

@@ -0,0 +1,79 @@
+{
+  "id": "og-measure",
+  "name": "OG 측정 화면",
+  "metaphor": "계측기 화면 — 실제 호출이 한 줄 나가고, 원자료 로그가 흐르고, 거기서 숫자가 뽑혀 점·막대·큰 숫자로 쌓인다",
+  "status": "approved",
+  "approvedAt": "2026-10-08",
+  "purposes": [
+    "shorts",
+    "explainer",
+    "demo",
+    "promo"
+  ],
+  "aspect": [
+    "16:9",
+    "9:16"
+  ],
+  "effects": [
+    {
+      "name": "graphPaper",
+      "kind": "layer",
+      "does": "측정 바탕 — 흰 모눈과 아주 옅은 파란 주사선이 천천히 지나간다",
+      "use": "const paint = graphPaper(root, { phase: ctx.from })  // 모눈이 흐르고 주사선이 지나간다"
+    },
+    {
+      "name": "callLine",
+      "kind": "layer",
+      "does": "실제 호출 한 줄 — 주소가 박마다 한 조각씩 붙고 모델·보낼 글이 찍히고, 보낸 뒤 경과 시간이 실제 속도로 굴러 잰 ms 에 멈추며 상태·첫 토큰·받은 글·사용량이 붙는다",
+      "use": "const paint = callLine(stage, { x: 90, y: 140, w: 1740, at: 0, url: [\"apis.opengateway.ai\", \"/v1\", \"/chat\", \"/completions\"], urlAt: [b[0], b[1], b[2], b[3]], model, modelAt: b[4], prompt, promptAt: b[5], sendAt: b[6], status: 200, ms: call.ttft_ms, answer: call.text, usage, usageAt: b[10] })"
+    },
+    {
+      "name": "rawLog",
+      "kind": "layer",
+      "does": "원자료 로그 — 줄이 들어온 박에 맨 아래 붙고 한 줄씩 밀려 오르며, 정규식이 잡은 숫자에 파란 칸",
+      "use": "const paint = rawLog(stage, { x: 70, y: 150, w: 1080, rows: 14, lines, times, pick: /ttft_ms=(\\d+)/, size: 34 })"
+    },
+    {
+      "name": "samplePlot",
+      "kind": "layer",
+      "does": "샘플 점 그림 — 재 온 값이 꽂히는 시각에 점이 커졌다 자리 잡고 가운데값 눈금·숫자가 따라 미끄러진다",
+      "use": "const paint = samplePlot(stage, { x: 1200, y: 160, w: 650, rows, min: 450, max: 1050, unit: \"ms\", ticks: [500, 750, 1000], best: 0, size: 34 })"
+    },
+    {
+      "name": "pickFly",
+      "kind": "layer",
+      "does": "뽑힌 숫자 — 로그 줄의 숫자가 떠올라 호를 그리며 점 그림 자리로 날아가 꽂힌다(박마다 큰 움직임)",
+      "use": "const paint = pickFly(stage, { items: [{ at: b[0], text: \"746\", from: { x: 760, y: 200 }, to: { x: 1500, y: 250 } }] })"
+    },
+    {
+      "name": "meter",
+      "kind": "value",
+      "does": "자리 고정 숫자 — 계기판처럼 앞자리부터 하나씩 멈춰 선다(글자 수 고정)",
+      "use": "num.textContent = meter(t, { to: 612.5, at: 0, decimals: 1 })"
+    },
+    {
+      "name": "rankBars",
+      "kind": "layer",
+      "does": "막대 — 박마다 하나씩 값만큼 자라고(best 만 OG 파랑), delta 칩이 그 박에 튀어나온다",
+      "use": "const paint = rankBars(stage, { x: 90, y: 400, w: 1740, items: [{ label, value, at: b[2] }, { label, value, at: b[3], delta: \"+80.5ms\", deltaAt: b[5] }], max: 820, best: 0, unit: \"ms\" })"
+    },
+    {
+      "name": "stamp",
+      "kind": "layer",
+      "does": "끝 도장 — 「측정 날짜 · 호출 N번 · $비용 · 키 하나」와 OG 로고가 쾅 찍힌다(비용은 첫 유효 자리까지)",
+      "use": "const paint = stamp(stage, { x: 960, y: 975, at: b[14], date, calls: 18, cost, logo: ctx.asset(\"brand/og-logo.svg\") })"
+    },
+    {
+      "name": "flag",
+      "kind": "layer",
+      "does": "칩 — 짧은 낱말·잰 값 하나가 크게 튀어 들어온다",
+      "use": "const paint = flag(stage, { x: 90, y: 60, text: \"실측\", at: 0 })"
+    },
+    {
+      "name": "trackCam",
+      "kind": "value",
+      "does": "계측 카메라 — 샷이 바뀌면 220ms 로 옮기며 툭(kick) 치고 사이에는 선다. 샷은 드러냄·결과가 서는 순간에만(긴 로그가 잘리지 않게 배율 1–1.1), 쉬지 않는 몫은 카운터·로그·막대",
+      "use": "applyStyle(stage, trackCam(t, { shots: [{ at: 0, kick: 0.1 }, { at: bar[1], zoom: 1.04 }], scene: ctx.id }))  // stage: transform-origin 0 0"
+    }
+  ]
+}

package/themes/riso-zine/THEME.md

@@ -0,0 +1,43 @@
+# 리소 잡지 `riso-zine`
+
+**비유: 잉크 판을 한 장씩 찍어 화면을 인쇄한다.** 리소그래프는 색마다 판(드럼)을 따로 돌려 종이에 한 장씩 겹쳐 찍는다. 화면도 그렇게 — 무엇이 나타나든 박에서 판 한 장이 찍혀 생기고, 판끼리는 곱하기로 겹쳐(블루+핑크 = 보라) 가장자리가 조금씩 어긋난다. 그라데이션은 망점, 바탕은 끓는 종이결.
+
+## 맞는 내용·용도
+
+- 곡·공연·전시·행사 포스터, 인디 제품·책·잡지 소개, 숫자 몇 개로 말하는 데이터(곡 길이·BPM·횟수) — 글이 적고 큰 화면.
+- 용도: 홍보(promo)·뮤비(mv)·피드(square)·쇼츠(shorts)·공개(launch). 마디마다 판 한 장, 드롭에 `dropPlate`.
+- 화면 글은 제목·이름·숫자·짧은 낱말. 한글 큰 글은 Black Han Sans, 작은 글은 Pretendard, 숫자 표는 모노.
+
+## 금지
+
+- 잉크 셋(종이 `bg`·블루 `blue`·핑크 `pink`) 밖의 색, 투명도로 만든 옅은 색, CSS 그라데이션·그림자·흐림 — 옅은 색은 망점으로만.
+- 60fps 로 미끄러지는 보간. 움직임은 `printFrames`(초당 12장)·`drumPass`(24장)로 끊는다. 카메라 대신 종이가 움직인다(`sheetDrift`).
+- 핑크 판 하나로 쓴 작은 글(종이 위 2.6:1). 글은 블루 판, 큰 글은 블루+핑크 두 판을 겹친다.
+- 판을 박마다 흔들기. 판이 끓는 건 `misregister` 의 0.6px 결뿐, 흔들림은 `dropPlate` 가 돌려준 값을 드롭에서만. 박마다의 큰 움직임은 흔들기가 아니라 판 한 장이 새로 찍히는 것이다.
+- 슬로건·감성 문장.
+
+## 움직임
+
+- 마디마다 새 판면 — 드럼이 지나가며(`drumPass`) 다음 판면이 드러난다. 판면 하나는 큰 낱말 하나 + 망점 그림 하나.
+- 박마다 판 한 장: 첫 박 블루 낱말 → 둘째 박 망점 → 셋째 박 핑크 겹침(어긋남) → 넷째 박 작은 표.
+- 그 사이에도 쉬지 않는다: 판면이 `sheetDrift` 로 늘 끌려가고, 종이결이 초당 12번 끓는다.
+
+## 효과
+
+같은 레포 안에서는 `effects.ts` 를 바로, 프로젝트에서는 `fx("riso-zine")`. layer 는 `build` 에서 만들고 `(t) => …` 에서 부른다. 장면 하나는 보통 `paperGrain`(맨 아래) → 판들 → `paperGrain({ mode: "mottle" })`(맨 위) 순서로 쌓는다. 판면 틀에 `sheetDrift`·흔들림을 걸면 그 틀이 따로 합성돼 판끼리만 곱하기로 겹친다 — 종이가 밝아 눈에 띄는 차이는 없다.
+
+| 효과 | 꼴 | 하는 일 |
+|---|---|---|
+| `printFrames` | value | t 를 초당 12장으로 끊는다 |
+| `misregister` | value | 판 어긋남 — 시드 고정 ±px, 찍히는 두 장은 더 어긋났다 앉고 초당 12번 끓는다 |
+| `plateStamp` | layer | 같은 그림을 판 여러 장으로. `build(plate)` 안의 글·SVG 는 `currentColor` 가 판 잉크 |
+| `halftone` | layer | 망점 판. `value(u, v)` 나 `src` 그림, `reveal: "grow" \| "sweep"`, `pulse` 면 드롭 구간 박마다 부푼다 |
+| `paperGrain` | layer | `paper` 종이·섬유·티끌 / `mottle` 잉크 위 흰 반점. 초당 12번 끓는다 |
+| `sheetDrift` | value | 종이 밀림 — 판면이 한 방향으로 끌려가며 조금 돈다(초당 12장). 판면 틀에 |
+| `drumPass` | value | 드럼이 지나간 쪽만 보이는 clip — `plateStamp` 의 `style` 에 |
+| `sheetFeed` | layer | 장면 끝에 새 종이가 들어와 덮는다. 다음 장면은 빈 종이에서 시작 |
+| `dropPlate` | layer | 드롭 — 핑크 판 통째로 + 망점 고리, 흔들림을 돌려준다 |
+
+망 각도는 리소 관례대로 블루 15°·핑크 75°.
+
+견본: `sample/` — 공통 주제 「OpenGateway 소개 15초」, kawaii-friends 4.0–19.0초(드롭 7.34초), 판면 열하나(마디마다). 흩어진 회사 아홉 → 회사별 모델 수 → 주소와 /v1 → 박마다 새 판으로 바뀌는 모델 ID → 두 형식 → 드롭 102 → 하루 시계 00–10시 -90% → deepseek 가격 → 실측 → 로고 두 판 겹침.