kasaframe 0.1.4 → 0.1.5

package/themes/og-measure/sample/lib/data.ts

@@ -16,6 +16,12 @@ export const best = medians.indexOf(Math.min(...medians));
 /** 장면 시작 이후의 박 시각(장면 안 초) */
 export const beatsOf = (beats: { beats: number[] }) => beats.beats.filter((b) => b > -0.01);
 
+/** 로고 잉크 — 마스터 로고는 한 색이고 어두운 바탕엔 흰색, 밝은 바탕엔 검정 두 가지뿐이다(스타일가이드 7절·BrandFoundation). 브랜드 파랑으로 칠하지 않는다 */
+export const logoInk = (ctx: { style: { scheme: "light" | "dark" } }) => (ctx.style.scheme === "dark" ? "#FFFFFF" : "#000000");
+
+/** 마스터 로고 원문을 상자에 채운다 — 루트 <svg> 의 width·height(1140×650)만 걷는다(안쪽 rect 의 width 는 그대로) */
+export const fitSvg = (svg: string) => svg.replace(/<svg\b[^>]*>/, (tag) => tag.replace(/\s(width|height)="[^"]*"/g, "").replace("<svg", '<svg width="100%" height="100%"'));
+
 /** 카메라가 잡는 무대 — 왼쪽 위를 축으로 trackCam 을 붙인다 */
 export function stageOf(root: HTMLElement): HTMLElement {
   const stage = document.createElement("div");

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

@@ -1,8 +1,9 @@
 import { applyStyle, ease, progress, type SceneCtx } from "@kasaframe/core";
 import { fx } from "@kasaframe/themes/fx";
-import { beatsOf, best, data, medians, stageOf } from "../lib/data.ts";
+import logo from "../assets/brand/og-logo.svg?raw";
+import { beatsOf, best, data, fitSvg, logoInk, medians, stageOf } from "../lib/data.ts";
 
-const { graphPaper, meter, stamp, flag, trackCam } = fx("og-measure");
+const { graphPaper, meter, stamp, flag, pickFly, trackCam } = fx("og-measure");
 
 // 실측 숫자 하나(직접 잰 첫 토큰 가운데값) → 끝 도장 → OG 로고 · 주소. 마지막 박까지 카메라가 툭 친다.
 export default {
@@ -11,9 +12,9 @@ export default {
     const stage = stageOf(root);
     const b = beatsOf(ctx.beats);
     const B = (i: number) => b[i] ?? i * 0.353;
-    const who = flag(stage, { x: 100, y: 90, text: `${data.models[best]} · 첫 토큰 가운데값`, at: 0, tone: "soft", size: 40 });
+    const who = flag(stage, { x: 100, y: 90, text: `${data.models[best]} · 첫 토큰 가운데값`, at: 0, tone: "plain", size: 40 });
     const big = document.createElement("div");
-    big.style.cssText = "position:absolute;left:100px;top:150px;font-family:var(--kf-font-display);font-weight:800;font-size:230px;line-height:1;letter-spacing:-0.03em;color:var(--kf-ink);font-variant-numeric:tabular-nums";
+    big.style.cssText = "position:absolute;left:100px;top:150px;font-family:var(--kf-font-display);font-weight:800;font-size:230px;line-height:1;letter-spacing:-0.055em;color:var(--kf-ink);font-variant-numeric:tabular-nums";
     const num = document.createElement("span");
     const unit = document.createElement("span");
     unit.textContent = "ms";
@@ -21,11 +22,13 @@ export default {
     big.append(num, unit);
     stage.append(big);
     const seal = stamp(stage, { x: 960, y: 430, at: B(1), date: data.measured_at_kst, calls: data.calls.length, cost: data.cost_usd, size: 30 });
-    const logo = document.createElement("img");
-    logo.src = ctx.asset("brand/og-logo-full.svg");
-    logo.style.cssText = "position:absolute;left:960px;top:560px;height:220px;width:auto;transform-origin:50% 50%";
-    stage.append(logo);
+    const mark = document.createElement("div");
+    mark.style.cssText = `position:absolute;left:960px;top:560px;width:${(220 * 1140) / 650}px;height:220px;color:${logoInk(ctx)}`;
+    mark.innerHTML = fitSvg(logo);
+    stage.append(mark);
     const site = flag(stage, { x: 600, y: 830, text: "opengateway.ai", at: B(3), tone: "plain", size: 80, mono: true });
+    // 로고는 translate 로 가운데를 맞춰 자리 재기에 안 잡힌다 — 그 칸은 좌표로 준다
+    const read = pickFly(stage, { items: [{ stops: [{ at: 0, target: who.el }, { at: B(0) + 0.2, target: num, pad: 8 }, { at: B(2), x: 960, y: 670, w: (220 * 1140) / 650 + 60, h: 280 }, { at: B(3), target: site.el }], hold: true }], size: 40 });
     const shots = [
       { at: 0, x: 960, y: 540, kick: 0.08 },
       { at: B(2), x: 960, y: 560, zoom: 1.02, kick: 0.05 },
@@ -38,9 +41,10 @@ export default {
       num.textContent = meter(t, { to: medians[best], at: 0, dur: 0.6, decimals: 1 });
       seal(t);
       const p = ease.snappy(progress(t, B(2), 0.22));
-      applyStyle(logo, { opacity: p, y: 30 * (1 - p), scale: 1.3 - 0.3 * p });
-      logo.style.translate = "-50% 0";
+      applyStyle(mark, { opacity: p, y: 6 * (1 - p) });
+      mark.style.translate = "-50% 0";
       site(t);
+      read(t);
       applyStyle(stage, trackCam(t, { shots, scene: ctx.id }));
     };
   },

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

@@ -27,7 +27,7 @@ export default {
     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 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: "plain", 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 } })),
@@ -35,6 +35,16 @@ export default {
       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 half = 60 / ctx.beats.bpm / 2;
+    const seen = new Set<number>();
+    const reads = OG.owners.map((_, i) => {
+      const at = i === 0 ? 0 : B(AT[i]);
+      const t = seen.has(at) ? at + half : at;
+      seen.add(at);
+      return { at: t, target: chips[i].el };
+    });
+    const read = pickFly(stage, { items: [{ stops: [...reads, { at: B(6) + 0.24, target: card.parts[0] }, { at: B(7), target: card.parts[1] }], hold: true }], size: SIZE });
     const shots = [
       { at: 0, x: 960, y: 540 },
       { at: B(4), x: 920, y: 530, zoom: 1.04, kick: 0.04 },
@@ -45,6 +55,7 @@ export default {
       for (const c of chips) c(t);
       fly(t);
       card(t);
+      read(t);
       applyStyle(stage, trackCam(t, { shots, scene: ctx.id }));
     };
   },

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

@@ -2,7 +2,7 @@ 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");
+const { graphPaper, callLine, rawLog, flag, pickFly, trackCam } = fx("og-measure");
 
 // 같은 주소로 가는 요청 줄 — 박마다 모델 ID 하나, 드롭 앞 마지막 마디는 반 박마다 하나씩 몰아 올린다. 결과는 붙이지 않는다(부르지 않은 호출).
 export default {
@@ -16,7 +16,17 @@ export default {
     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 });
+    // 읽는 칸 — 새로 든 줄 하나를 통째로 짚는다(표 행의 고름 칠). 줄 칸은 rawLog 와 같은 셈(왼쪽 90 + 안쪽 28, 줄 높이 60)
+    const read = pickFly(stage, {
+      items: [{
+        stops: OG.requests.map((_, i) => ({ at: times[i], x: 960, y: 230 + 28 + Math.min(i, 8) * 60 + 30, w: 1740 - 28, h: 58 })),
+        hold: true,
+        // 줄은 박에 바로 든다 — 기다리지 않고 함께 닿는다
+        lag: 0,
+      }],
+      size: 40,
+    });
+    const one = flag(stage, { x: 90, y: 920, text: "주소 1개", at: B(4), tone: "accent", 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 },
@@ -28,6 +38,7 @@ export default {
       head(t);
       log(t);
       one(t);
+      read(t);
       applyStyle(stage, trackCam(t, { shots, scene: ctx.id }));
     };
   },

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

@@ -2,7 +2,7 @@ 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");
+const { graphPaper, meter, flag, pickFly, trackCam } = fx("og-measure");
 
 // 드롭: 102 가 앞자리부터 멈춰 서며 카메라가 크게 툭 → 박마다 주소 · OpenAI 형식 · Anthropic 형식.
 export default {
@@ -14,17 +14,18 @@ export default {
     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";
+    num.style.cssText = "font-size:430px;line-height:1.1;letter-spacing:-0.055em";
     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 host = flag(stage, { x: 100, y: 660, text: `https://${OG.host}/v1`, at: B(1), tone: "accent", size: 80, mono: true });
+    const a = flag(stage, { x: 100, y: 840, text: "OpenAI 형식", at: B(2), tone: "plain", size: 60 });
+    const c = flag(stage, { x: 560, y: 840, text: "Anthropic 형식", at: B(3), tone: "plain", size: 60 });
+    const read = pickFly(stage, { items: [{ stops: [{ at: 0, target: num, pad: 10 }, { at: B(1), target: host.el }, { at: B(2), target: a.el }, { at: B(3), target: c.el }], hold: true }], size: 60 });
     const shots = [
-      { at: 0, x: 960, y: 540, kick: 0.16 },
+      { at: 0, x: 960, y: 540, kick: 0.06 },
       { at: B(2), x: 950, y: 560, zoom: 1.02, kick: 0.03 },
     ];
     return (t: number) => {
@@ -33,6 +34,7 @@ export default {
       host(t);
       a(t);
       c(t);
+      read(t);
       applyStyle(stage, trackCam(t, { shots, scene: ctx.id }));
     };
   },

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

@@ -2,7 +2,7 @@ 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");
+const { graphPaper, rankBars, flag, pickFly, trackCam } = fx("og-measure");
 
 // 시간대 가격 — 한국 00–10시 창에서 같은 모델 ID 가 정가의 10%. 박마다 막대 하나·차이 칩 하나.
 export default {
@@ -13,8 +13,8 @@ export default {
     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 model = flag(stage, { x: 90, y: 54, text: P.model, at: 0, tone: "plain", size: 48, mono: true });
+    const win = flag(stage, { x: 1300, y: 56, text: "KST 00:00–10:00", at: B(1), tone: "accent", size: 46, mono: true });
     const bars = rankBars(stage, {
       x: 90,
       y: 190,
@@ -36,6 +36,22 @@ export default {
     });
     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 });
+    // 읽는 칸 — 박마다 새로 선 값을 짚는다. 막대는 이름·막대 한 줄을 통째로(표 행의 고름 칠, 줄 칸은 rankBars 와 같은 셈)
+    const read = pickFly(stage, {
+      items: [{
+        stops: [
+          { at: 0, target: model.el },
+          { at: B(1), target: win.el },
+          ...[2, 3, 5, 6].map((k, i) => ({ at: B(k), x: 960, y: 190 + i * (70 + 26 + 56) + 63, w: 1780, h: 140 })),
+          { at: B(8), target: glm.el },
+          { at: B(9), target: auto.el },
+        ],
+        hold: true,
+        // 배지·막대는 박에 바로 선다 — 기다리지 않고 함께 닿는다
+        lag: 0,
+      }],
+      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 },
@@ -50,6 +66,7 @@ export default {
       bars(t);
       glm(t);
       auto(t);
+      read(t);
       applyStyle(stage, trackCam(t, { shots, scene: ctx.id }));
     };
   },

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

@@ -1,29 +1,24 @@
 {
   "name": "og-measure",
   "label": "OG 측정 화면 — 재 온 숫자가 쌓이는 계측기",
-  "scheme": "light",
+  "scheme": "dark",
   "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",
+    "bg": "#090A0C",
+    "surface": "#13151B",
+    "raised": "#252A37",
+    "line": "#394051",
+    "ink": "#C5CBD8",
+    "inkSoft": "#C5CBD8",
+    "dim": "#7C869C",
+    "accent": "#0084FF",
+    "accentSoft": "rgba(0, 132, 255, 0.45)",
+    "accentText": "#3B99F3",
     "onAccent": "#FFFFFF",
-    "tint": "rgba(0, 111, 214, 0.08)",
-    "success": "#22C55E",
-    "danger": "#EF4444",
+    "tint": "rgba(0, 132, 255, 0.1)",
+    "success": "#10B981",
+    "danger": "#EF4343",
     "warning": "#F59E0B",
-    "darkBg": "#090A0C",
-    "darkSurface": "#13151B",
-    "darkLine": "#39404F",
-    "darkInk": "#C6CAD6",
-    "darkAccent": "#0085FF",
-    "bar": "rgba(100, 116, 139, 0.28)"
+    "bar": "rgba(124, 134, 156, 0.35)"
   },
   "fonts": {
     "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
@@ -37,12 +32,12 @@
       },
       {
         "family": "Geist",
-        "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/geist/Geist%5Bwght%5D.ttf",
         "weight": "100 900"
       },
       {
         "family": "Geist Mono",
-        "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/geistmono/GeistMono%5Bwght%5D.ttf",
         "weight": "100 900"
       }
     ]
@@ -67,13 +62,11 @@
     "lift": "none"
   },
   "motion": {
-    "beatPulse": "drops-only",
+    "beatPulse": "off",
     "shake": {
-      "on": [
-        "drop"
-      ],
-      "maxPerPhrase": 1,
-      "maxPx": 8
+      "on": [],
+      "maxPerPhrase": 0,
+      "maxPx": 0
     },
     "cameraMove": "free",
     "repeatSameMove": false,
@@ -87,11 +80,13 @@
     }
   },
   "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)가 늘 조금씩 다가가며 흐르고 마디마다 툭 친다. 박마다 주소 조각·카운터·로그 한 줄·날아가는 숫자·막대·칩 중 하나가 크게 움직인다. 흔들림·섬광은 쓰지 않는다(쇼츠·설명·시연 틀이 끈다)."
+    "정본: opengateway cp-fe-og-styleguide(style/og-brand-styleguide-20261007, 46366b8) design.md 1–9절과 src/app/globals.css. 색·움직임 값은 그 코드에서 옮겼다 — 고칠 때도 거기부터 본다.",
+    "팔레트는 한 벌씩 두 벌이다: 다크(.dark — 기본)가 이 파일, 라이트(:root)는 theme.json vary.palettes.light. bg=--background, surface=--card, raised=--secondary, line=--border, ink=--foreground, dim=--muted-foreground, accent=--primary, accentText=--on-primary(파랑 70%+글 잉크 30%), onAccent=--primary-foreground, tint=고른 상태 bg-primary/10, success=emerald-500, danger=--destructive, warning=amber-500. 정본에 없는 색은 세우지 않는다.",
+    "파랑은 가장 좋은 값 하나에만(차트 칠·고른 상태). 비교 대상은 회색 막대(bar=--muted-foreground 반투명), 빨강은 오류에만. 그림자·그라데이션·네온·섬광 없음.",
+    "가두지 않는다: 구획은 제목·여백, 항목은 가는 구분선(line). 틀이 곧 뜻인 것(호출·응답 패널, 원자료 로그 = 코드 블록)만 면(surface)에 12px. 칩·배지는 속을 칠하지 않고 흐린 테두리(파랑 /45, 무채색 line)와 글자색만.",
+    "모서리는 역할: 알약(pill) = 칩·고름 칠, 12px(md·lg) = 면, 0(sm) = 그 밖(막대·구분선·눈금). 사이 값은 쓰지 않는다.",
+    "글꼴: 한국어·라벨 Pretendard, 큰 숫자·워드마크 Geist 800 자간 −0.055em(한글은 Pretendard 로 떨어진다), 모델 ID·주소·로그·시각은 Geist Mono, 숫자는 tabular-nums.",
+    "움직임: 150(색)·220(나타남·상태)·300ms(자리 옮김), 감속 cubic-bezier(.22,1,.36,1)·스프링 cubic-bezier(.34,1.3,.64,1), 나타남은 6px 올라오며. 누르듯 커졌다 줄기·흔들기 없음. 카메라도 300ms 스프링으로 한 번 옮기고 선다.",
+    "로고는 마스터 public/logo.svg 하나(sample/assets/brand/og-logo.svg 와 바이트가 같다) — 한 색, 어두운 바탕 흰색·밝은 바탕 검정. 파랑으로 칠하지 않고 og-wave 후보·캠페인 그림은 쓰지 않는다."
   ]
-}
+}

package/themes/og-measure/slots.ts

@@ -1,39 +1,33 @@
-import { clamp, ease, progress, type Style } from "@kasaframe/core";
+import { bezier, 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;
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 계측기 화면을 OpenGateway 스타일가이드 결로. 바탕은 서 있는 옅은 모눈,
+// 판은 상자가 아니라 구분선(design.md 2절), 움직임은 220ms 감속·6px 나타남과 300ms 자리 옮김뿐(8절). 색은 모두 --kf-* 토큰
+const out = ease.snappy;
+const springy = bezier(0.34, 1.3, 0.64, 1);
 
 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",
-    );
+    const grid = "color-mix(in srgb, var(--kf-line) 45%, transparent)";
+    layer(el, `inset:0;background:var(--kf-bg);background-image:linear-gradient(${grid} 1px,transparent 1px),linear-gradient(90deg,${grid} 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,
-    );
+    const rule = layer(el, `left:0;right:0;top:0;height:3px;background:${tone === "accent" ? "var(--kf-accent)" : "var(--kf-line)"};transform-origin:0 50%`, 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)`;
+      const p = out(progress(t, at, 0.3));
+      rule.style.visibility = t >= at ? "visible" : "hidden";
+      rule.style.transform = `scaleX(${p.toFixed(4)})`;
     };
   },
 
-  // 값이 잡히는 순간 — 넘침 없이 한 번 조이고 선다(계측은 출렁이지 않는다)
+  // 값이 앉는 순간 — 크기는 그대로 6px 올라와 선다(누름·도착에 커졌다 줄기 없음)
   land(_el, { at }) {
-    return (t): Style => (t < at || t > at + 0.3 ? {} : { scale: 1 + 0.05 * (1 - snappy(progress(t, at, 0.24))) });
+    return (t): Style => (t < at || t > at + 0.3 ? {} : { y: 6 * (1 - out(progress(t, at, 0.22))) });
   },
 
   // 계기판처럼 — 글자는 앞에서부터 서고, 숫자 칸은 서기 전까지 돌고 있다(meter 와 같은 결)
@@ -50,11 +44,11 @@ export const slots: ThemeSlots = {
     };
   },
 
-  // 표본 선 — 파랑 3px 선이 그어지고 꺾이는 점마다 표본 점이 선다
+  // 추이 선 — 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";
+    const color = (tone === "accent" ? css.getPropertyValue("--kf-accent") : css.getPropertyValue("--kf-ink")).trim();
     return (t) => {
       clear();
       const p = clamp((t - at) / Math.max(0.05, dur));
@@ -73,16 +67,17 @@ export const slots: ThemeSlots = {
     };
   },
 
-  // 드롭 — 파랑 판이 한 번 덮였다 걷히고 고리가 퍼진다(흰 바탕이라 흰 섬광은 안 보인다)
+  // 드롭 — 섬광·고리 대신 파란 구분선 한 줄이 가운데에서 양옆으로 300ms 스프링으로 그어졌다 220ms 로 빠진다(흔들림·섬광 없음)
   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");
+    const at = ctx.beats.drop(drop);
+    const line = layer(el, "left:0;right:0;top:50%;height:4px;margin-top:-2px;background:var(--kf-accent);transform:scaleX(0);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;
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "og-drop", emit: false });
+      const grow = springy(progress(t, at, 0.3));
+      const fade = 1 - out(progress(t, at + 0.45, 0.22));
+      line.style.transform = `scaleX(${(t >= at ? grow : 0).toFixed(4)})`;
+      line.style.opacity = String(t >= at ? fade : 0);
+      return { ...s, flash: 0, ring: { scale: 0, opacity: 0 }, punch: {} };
     };
   },
 };

package/themes/og-measure/style.json

@@ -1,29 +1,24 @@
 {
   "name": "og-measure",
   "label": "OG 측정 화면 — 재 온 숫자가 쌓이는 계측기",
-  "scheme": "light",
+  "scheme": "dark",
   "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",
+    "bg": "#090A0C",
+    "surface": "#13151B",
+    "raised": "#252A37",
+    "line": "#394051",
+    "ink": "#C5CBD8",
+    "inkSoft": "#C5CBD8",
+    "dim": "#7C869C",
+    "accent": "#0084FF",
+    "accentSoft": "rgba(0, 132, 255, 0.45)",
+    "accentText": "#3B99F3",
     "onAccent": "#FFFFFF",
-    "tint": "rgba(0, 111, 214, 0.08)",
-    "success": "#22C55E",
-    "danger": "#EF4444",
+    "tint": "rgba(0, 132, 255, 0.1)",
+    "success": "#10B981",
+    "danger": "#EF4343",
     "warning": "#F59E0B",
-    "darkBg": "#090A0C",
-    "darkSurface": "#13151B",
-    "darkLine": "#39404F",
-    "darkInk": "#C6CAD6",
-    "darkAccent": "#0085FF",
-    "bar": "rgba(100, 116, 139, 0.28)"
+    "bar": "rgba(124, 134, 156, 0.35)"
   },
   "fonts": {
     "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
@@ -37,12 +32,12 @@
       },
       {
         "family": "Geist",
-        "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/geist/Geist%5Bwght%5D.ttf",
         "weight": "100 900"
       },
       {
         "family": "Geist Mono",
-        "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/geistmono/GeistMono%5Bwght%5D.ttf",
         "weight": "100 900"
       }
     ]
@@ -67,13 +62,11 @@
     "lift": "none"
   },
   "motion": {
-    "beatPulse": "drops-only",
+    "beatPulse": "off",
     "shake": {
-      "on": [
-        "drop"
-      ],
-      "maxPerPhrase": 1,
-      "maxPx": 8
+      "on": [],
+      "maxPerPhrase": 0,
+      "maxPx": 0
     },
     "cameraMove": "free",
     "repeatSameMove": false,
@@ -87,11 +80,13 @@
     }
   },
   "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)는 이유가 있을 때만 — 결과가 서는 순간에 한 번 옮기며 툭, 사이에는 선다. 흔들림·섬광은 쓰지 않는다(쇼츠·설명·시연 틀이 끈다)."
+    "정본: opengateway cp-fe-og-styleguide(style/og-brand-styleguide-20261007, 46366b8) design.md 1–9절과 src/app/globals.css. 색·움직임 값은 그 코드에서 옮겼다 — 고칠 때도 거기부터 본다.",
+    "팔레트는 한 벌씩 두 벌이다: 다크(.dark — 기본)가 이 파일, 라이트(:root)는 theme.json vary.palettes.light. bg=--background, surface=--card, raised=--secondary, line=--border, ink=--foreground, dim=--muted-foreground, accent=--primary, accentText=--on-primary(파랑 70%+글 잉크 30%), onAccent=--primary-foreground, tint=고른 상태 bg-primary/10, success=emerald-500, danger=--destructive, warning=amber-500. 정본에 없는 색은 세우지 않는다.",
+    "파랑은 가장 좋은 값 하나에만(차트 칠·고른 상태). 비교 대상은 회색 막대(bar=--muted-foreground 반투명), 빨강은 오류에만. 그림자·그라데이션·네온·섬광 없음.",
+    "가두지 않는다: 구획은 제목·여백, 항목은 가는 구분선(line). 틀이 곧 뜻인 것(호출·응답 패널, 원자료 로그 = 코드 블록)만 면(surface)에 12px. 칩·배지는 속을 칠하지 않고 흐린 테두리(파랑 /45, 무채색 line)와 글자색만.",
+    "모서리는 역할: 알약(pill) = 칩·고름 칠, 12px(md·lg) = 면, 0(sm) = 그 밖(막대·구분선·눈금). 사이 값은 쓰지 않는다.",
+    "글꼴: 한국어·라벨 Pretendard, 큰 숫자·워드마크 Geist 800 자간 −0.055em(한글은 Pretendard 로 떨어진다), 모델 ID·주소·로그·시각은 Geist Mono, 숫자는 tabular-nums.",
+    "움직임: 150(색)·220(나타남·상태)·300ms(자리 옮김), 감속 cubic-bezier(.22,1,.36,1)·스프링 cubic-bezier(.34,1.3,.64,1), 나타남은 6px 올라오며. 누르듯 커졌다 줄기·흔들기 없음. 카메라도 300ms 스프링으로 한 번 옮기고 선다.",
+    "로고는 마스터 public/logo.svg 하나(sample/assets/brand/og-logo.svg 와 바이트가 같다) — 한 색, 어두운 바탕 흰색·밝은 바탕 검정. 파랑으로 칠하지 않고 og-wave 후보·캠페인 그림은 쓰지 않는다."
   ]
-}
+}