kasaframe 0.1.4 → 0.1.6

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

@@ -1,12 +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"/>
+<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>
-  <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>
+</svg>

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 });
+    // 읽는 칸 — 잰 값 하나에 내려앉아 머문다(도장 줄·로고로는 내려가지 않는다)
+    const read = pickFly(stage, { items: [{ stops: [{ at: B(0) + 0.2, target: num, pad: 8 }] }], 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,8 @@ 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 read = pickFly(stage, { items: [{ stops: [{ at: B(7), target: card.parts, pad: 12 }] }], 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 +47,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,9 @@ 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 });
+    const one = flag(stage, { x: 90, y: 920, text: "주소 1개", at: B(4), tone: "accent", size: 48 });
+    // 읽는 칸 — 이 장면의 요점(모델이 바뀌어도 주소는 하나)에만 내려앉아 머문다. 줄이 들 때마다 훑지 않는다 — 줄 흐름이 화면을 움직인다
+    const read = pickFly(stage, { items: [{ stops: [{ at: B(4), target: one.el }] }], size: 40 });
     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 +30,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,19 @@ 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 });
+    // 읽는 칸 — 큰 숫자에 앉았다가 이 장면의 핵심 사실(accent 주소 하나)이 서면 그리로 옮겨 머문다. 형식 배지는 곁말이라 짚지 않는다
+    const read = pickFly(stage, { items: [{ stops: [{ at: 0, target: num, pad: 10 }, { at: B(1), target: host.el }] }], 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 +35,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,10 @@ 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 });
+    // 읽는 칸 — 요점에만: 할인 시간대(accent 배지) → 출력 할인 값에 차이 배지가 붙을 때 그 줄 → 입력 할인 값 줄. 정가 줄·곁말 배지는 짚지 않는다.
+    // 줄 칸은 이름·막대 한 줄을 통째로(표 행의 고름 칠, rankBars 와 같은 셈)
+    const row = (k: number) => ({ x: 960, y: 190 + k * (70 + 26 + 56) + 63, w: 1780, h: 140 });
+    const read = pickFly(stage, { items: [{ stops: [{ at: B(1), target: win.el }, { at: B(4), ...row(1) }, { at: B(7), ...row(3) }] }], 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 +54,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,36 @@
-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);
+const smooth = (p: number) => p * p * (3 - 2 * p);
+// 짚는 칸 테두리 — 옮겨 가는 동안은 이 두 배 굵기의 한 줄이 된다
+const BORDER = 3;
 
 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 +47,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 +70,43 @@ export const slots: ThemeSlots = {
     };
   },
 
-  // 드롭 — 파랑 판이 한 번 덮였다 걷히고 고리가 퍼진다(흰 바탕이라 흰 섬광은 안 보인다)
+  // 짚는 칸 — 고른 상태 그대로 파랑/10 알약에 파랑/45 테두리(design.md 4절 — 칠한 배지는 없다). 글 뒤에 깔리고 칸 위 글은 --on-primary 파랑.
+  // 다음 요점으로 옮길 땐 pickFly 읽는 칸과 같은 길 — 떠나는 칸에서 아래 테두리 한 줄로 내려앉고, 거리만큼 미끄러진 뒤, 그 칸만큼 차올라 선다
+  // (칸 크기 그대로 날면 지나는 길의 글을 덮는다). 처음 짚을 땐 그 자리 아래 줄에서 차오른다
+  mark(el) {
+    const line = BORDER * 2;
+    el.style.boxSizing = "border-box";
+    el.style.borderRadius = "var(--kf-radius-pill)";
+    el.style.border = `${BORDER}px solid color-mix(in srgb, var(--kf-accent) 45%, transparent)`;
+    return {
+      ink: "var(--kf-accent-text)",
+      dwell: true,
+      at(from, to, u) {
+        const a = from ?? to;
+        // 미끄러지는 몫은 거리만큼 — 600px 넘게 가면 옮김의 40%, 같은 칸을 다시 짚으면 0
+        const sink = from ? (1 - 0.4 * clamp(Math.hypot(to.x - a.x, to.y + to.h - a.y - a.h) / 600)) / 2 : 0;
+        const go = !from ? 1 : sink < 0.5 ? smooth(clamp((u - sink) / (1 - 2 * sink))) : u < 0.5 ? 0 : 1;
+        const full = !from ? clamp(u) : u < 0.5 ? 1 - clamp(u / sink) : clamp((u - 1 + sink) / sink);
+        const h = line + ((from && u < 0.5 ? a.h : to.h) - line) * full;
+        const bottom = a.y + a.h + (to.y + to.h - a.y - a.h) * go;
+        // 얇을수록 진한 파랑 — 탭 아래 줄처럼 얇아도 지나가는 게 보이게, 다 차오르면 고른 상태 /10
+        el.style.background = `color-mix(in srgb, var(--kf-accent) ${Math.round(10 + 80 * clamp(1 - (h - line) / 40))}%, transparent)`;
+        return u >= 1 ? { ...to } : { x: a.x + (to.x - a.x) * go, y: bottom - h, w: a.w + (to.w - a.w) * go, h };
+      },
+    };
+  },
+
+  // 드롭 — 섬광·고리 대신 파란 구분선 한 줄이 가운데에서 양옆으로 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 후보·캠페인 그림은 쓰지 않는다."
   ]
-}
+}