kasaframe 0.1.5 → 0.1.7

package/themes/og-measure/THEME.md

@@ -28,7 +28,7 @@
 
 ## 변주 — 브랜드를 지키는 축만
 
-- 강조 파랑은 돌지 않는다(`vary.keep` — accent·accentText·accentSoft·onAccent·tint·의미색). `hue`·`chroma`·`tint` 축이 없다.
+- 강조 파랑은 돌지 않는다(`vary.keep` — accent·accentText·accentSoft·onAccent·tint·칠 토큰 fill·onFill·fillLine·의미색). `hue`·`chroma`·`tint` 축이 없다.
 - 밝기 둘: 다크(세계 기본)·라이트(`vary.palettes.light` — 라이트 판은 다크를 뒤집어 옮기지 않고 정본 라이트 한 벌에서 시작한다. 두 벌이 거울상이 아니라서 옮기면 정본 값이 안 나온다).
 - 바탕은 정본 면 색 사이만(`vary.bg` — 다크 `--background`~`--card`, 라이트 `--card`~`--background`). 그 위의 면·선·흐린 글은 바탕을 따라 자리를 지킨다.
 - 글꼴·모서리·빠르기·질감·선 굵기는 정본이 하나뿐이라 돌지 않는다(스타일가이드의 한글 글꼴 다섯 후보는 「비교용, 고르기 전엔 전역 글꼴을 안 바꾼다」).
@@ -70,4 +70,15 @@ export default {
 - 원자료 로그·축 눈금은 코드 화면이라 글 덩어리가 많다 — 견본은 `kf.json` 의 `text.maxOnScreen` 을 로그 줄·눈금·값을 센 실제 수(30)로 두었다. 로그·차트 밖 글은 셋을 넘기지 않는다.
 - 결과가 서는 순간은 드롭에(`meter` + `trackCam`), 끝 도장은 마지막 마디에.
 - 배지 tone 은 뜻으로 고른다 — 이 장면의 핵심 사실 하나만 accent(파랑 테두리), 나머지 이름·주소는 plain, 덜 중요한 곁말은 soft.
-- **쉬지 않는다** — 화면을 꽉 채우고(글 56–64px, 화면 전체), 박마다 주소 조각·카운터·로그 한 줄·날아가는 숫자(`pickFly`)·막대·배지 중 하나가 나타나거나 자라 같은 구도가 1.5초를 넘지 않게. 기다리는 동안도 카운터가 실제 속도로 구른다. `trackCam` 샷은 드러냄·결과가 서는 순간에만 — 구도를 메우려고 샷을 박지 않는다(샷 사이 카메라는 선다).
+- 읽는 칸(`pickFly` 의 `stops`)은 **장면의 요점에만** — 주인공 값, 그 장면의 핵심 사실(accent 배지), 그 순간 자막이 말하는 값. 나타나는 항목(공급자 칩·로그 줄·가격 줄)을 박마다 차례로 짚지 않고, 한 번 내려앉으면 다음 요점까지 머문다(다시 훑기 `hold` 를 쓰지 않는다). 칸은 글 뒤에 깔린다 — 옮겨 가는 동안은 아래 테두리 한 줄로 얇아져 지나가고, 값에 닿으면 그 값의 칸만큼 차올라 다음 요점까지 딱 맞게 선다. 배지는 `pad` 없이(배지 테두리에 겹친다), 글은 `pad` 로 둘레를 준다. 도장 줄·로고처럼 지나가면 안 되는 것이 사이에 있으면 정지점을 그 위쪽에서만 고른다(견본 끝 장면).
+- **흐름은 내용이 진다** — 화면을 꽉 채우고(글 56–64px, 화면 전체), 박마다 주소 조각·카운터·로그 한 줄·날아가는 숫자(`pickFly`)·막대·배지 중 하나가 나타나거나 자라 같은 구도가 1.5초를 넘지 않게. 읽는 칸으로 화면을 메우지 않는다 — 1초 안쪽의 쉼은 괜찮다(멈춤 기준 1초). 기다리는 동안도 카운터가 실제 속도로 구른다. `trackCam` 샷은 드러냄·결과가 서는 순간에만 — 구도를 메우려고 샷을 박지 않는다(샷 사이 카메라는 선다).
+
+## 감독 패턴에서
+
+감독(`kf direct`)의 장면 문법 패턴은 효과 대신 슬롯(`slots.ts`)으로 이 세계를 입는다 — 바탕 모눈(`surface`), 위 구분선 판(`panel`), 6px 앉기(`land`), 계기판 글 찍기(`write`), 3px 추이 선(`trace`), 파란 구분선 드롭(`drop`), 그리고 짚는 칸(`mark`).
+
+- **짚는 칸은 고른 상태 알약** — 파랑/10 칠에 파랑/45 테두리, 글 뒤에 깔리고 칸 위 글은 `--on-primary` 파랑. 꽉 칠한 강조색 네모는 서지 않는다(4절). 장면의 요점(주인공 값·그 순간 목소리가 말하는 값)에만 내려앉아 머물고, 다음 요점이 생기면 읽는 칸(`pickFly`)과 같은 길로 아래 테두리 한 줄로 내려앉아 미끄러진 뒤 그 칸만큼 차오른다. 짚을 것이 하나뿐이면 칸이 없다.
+- **칠한 칸도 고른 상태 결** — 진행·점유·지금(차오르는 단계 카드·한계 계기·GPU 칸·시간축 지난 길과 읽음값)은 칠 토큰(`fill`·`onFill`·`fillLine`)으로 파랑/10 면에 파랑/45 안쪽 테두리, 그 위 글은 `--on-primary` 파랑. 「찼다」는 뜻은 남고 꽉 찬 강조색 면은 없다.
+- **시간축 표시는 눈금선** — 축을 가로지르는 가는 눈금이 딱지까지 이어지고(지나면 파랑), 딱지·구간 이름은 오른쪽 한 줄에 겹치지 않게 쌓인다. 글은 눕히지 않는다.
+- **멈춤 오류 기준 1초**(`theme.json` `motion.maxFreezeSec`) — 화면을 살려 두려고 칸이 박마다 항목을 훑지 않는다. 0.1초 넘는 멈춤은 kf check 경고로 보이고(틀 기준), 오류·감독 다시 고르기는 1초부터. 쉬는 구간은 내용이 메운다 — 항목은 목소리가 그것을 말하는 순간에 서고(숫자·계기는 그때까지 구르고 차오른다), 그 사이 카메라가 방금 말한 항목 쪽으로 천천히 다가간다(바탕은 흐르지 않는다).
+- **장면 사이는 컷과 짧은 페이드만**(`theme.json` `transitions`: `none`·`fade`) — 육각 조리개·화면을 쓰는 큰 면·흐린 원 같은 면 전환과 3D 이음매는 쓰지 않는다. 페이드는 바탕색으로 경계 양쪽 0.15초씩.

package/themes/og-measure/effects.ts

@@ -1,4 +1,4 @@
-import { applyStyle, bezier, clamp, emit, ease, progress, safeTime, type Style } from "@kasaframe/core";
+import { applyStyle, bezier, clamp, cue, emit, ease, progress, safeTime, type SfxRole, type Style } from "@kasaframe/core";
 import { typeText } from "@kasaframe/motion";
 
 // 비유: 계측기 화면. 실제 호출이 한 줄 나가고, 원자료 로그가 흐르고, 거기서 숫자가 뽑혀 점·막대·큰 숫자로 쌓인다.
@@ -16,7 +16,9 @@ const RISE = 6;
 const out = ease.snappy;
 const springy = bezier(0.34, 1.3, 0.64, 1);
 
-function rise(t: number, at: number, dur = BASE, px = RISE): Style {
+// 서는 순간 소리 하나 — 같은 시각에 함께 서는 칸들은 한 번만(자리가 같으면 한 줄). 칸마다 나는 나타남·째깍·타자는 잔소리, 끝 도장만 기본으로
+function rise(t: number, at: number, dur = BASE, px = RISE, role: SfxRole = "appear"): Style {
+  cue(role, t - at, { source: `rise:${role}@${at.toFixed(3)}`, minor: role !== "end" });
   const p = out(progress(t, at, dur));
   return { opacity: p, y: px * (1 - p) };
 }
@@ -86,6 +88,7 @@ export function trackCam(t: number, o: { shots: CamShot[]; w?: number; h?: numbe
   for (let k = 0; k < shots.length; k++) if (shots[k].at <= t) i = k;
   let f = frame(i);
   const since = t - shots[i].at;
+  if (i > 0) cue("whoosh", since, { source: `trackCam@${shots[i].at.toFixed(3)}`, scene: o.scene });
   if (i > 0 && since < SLOW) {
     const p = springy(since / SLOW);
     const a = frame(i - 1);
@@ -229,7 +232,7 @@ export function rawLog(
         shown = i + 1;
         slide = out(progress(t, at, BASE));
       }
-      applyStyle(items[i].row, t >= at ? rise(t, at, BASE, 0) : { opacity: 0 });
+      applyStyle(items[i].row, t >= at ? rise(t, at, BASE, 0, "type") : { opacity: 0 });
       const n = items[i].num;
       if (n) {
         const on = t >= at;
@@ -244,20 +247,23 @@ export function rawLog(
 }
 
 type Pt = { x: number; y: number };
-/** 읽는 칸이 닿을 자리 — 무대 좌표 가운데(x·y)와 크기, 아니면 target 요소(효과가 돌려준 .el)를 그 자리에서 잰다 */
+/**
+ * 읽는 칸이 닿을 자리 — 무대 좌표 가운데(x·y)와 크기, 아니면 target 요소(효과가 돌려준 .el)를 그 자리에서 잰다. 요소 여럿이면 그 전부를 덮는 한 칸.
+ * pad 는 글 둘레 여백(배지는 0 — 배지 테두리에 딱 맞는다)
+ */
 export interface ReadStop {
   at: number;
   x?: number;
   y?: number;
   w?: number;
   h?: number;
-  target?: HTMLElement | null;
+  target?: HTMLElement | null | (HTMLElement | null)[];
   pad?: number;
 }
 type Box = Pt & { w: number; h: number };
 
 // SlidingPillNav 처럼 offsetTop·offsetLeft 를 무대까지 더해 잰다 — 나타남의 6px 올라옴(transform)은 자리에 넣지 않는다
-function measure(target: HTMLElement, stage: HTMLElement, pad: number): Box | null {
+function measure(target: HTMLElement, stage: HTMLElement): { l: number; t: number; r: number; b: number } | null {
   let x = 0;
   let y = 0;
   let n: HTMLElement | null = target;
@@ -266,49 +272,70 @@ function measure(target: HTMLElement, stage: HTMLElement, pad: number): Box | nu
     y += n.offsetTop;
   }
   if (n !== stage || !target.offsetWidth) return null;
-  return { x: x + target.offsetWidth / 2, y: y + target.offsetHeight / 2, w: target.offsetWidth + pad * 2, h: target.offsetHeight + pad * 2 };
+  return { l: x, t: y, r: x + target.offsetWidth, b: y + target.offsetHeight };
+}
+
+function measureAll(targets: (HTMLElement | null)[], stage: HTMLElement, pad: number): Box | null {
+  const rs = targets.map((el) => el && measure(el, stage)).filter((r) => r !== null);
+  if (!rs.length) return null;
+  const l = Math.min(...rs.map((r) => r.l)) - pad;
+  const t = Math.min(...rs.map((r) => r.t)) - pad;
+  const r = Math.max(...rs.map((q) => q.r)) + pad;
+  const b = Math.max(...rs.map((q) => q.b)) + pad;
+  return { x: (l + r) / 2, y: (t + b) / 2, w: r - l, h: b - t };
+}
+
+// 짚은 값 위에 서 있는 최소 시간 — 다음 값이 박에 바로 와도 칸이 한 번은 그 값에 딱 맞게 앉는다
+const REST = 0.03;
+const smooth = (p: number) => p * p * (3 - 2 * p);
+
+// 옮겨 가는 동안의 칸 — 떠나는 값에서 아래 테두리 한 줄로 내려앉고, 그 한 줄이 다음 값 아래로 미끄러진 뒤, 그 값의 칸만큼 다시 차오른다.
+// 칸 크기 그대로 날아가면 지나는 길의 글을 통째로 덮어 고장처럼 보였다. a 가 없으면(첫 값) 그 자리에서 차오르기만.
+// 미끄러지는 몫은 거리만큼 — 600px 넘게 가면 옮김의 40%, 같은 칸을 다시 짚으면 0(한 줄로 서 있는 동안 화면이 멈춘다)
+function between(a: Box | null, b: Box, u: number, line: number): Box {
+  const from = a ?? b;
+  const sink = (1 - 0.4 * clamp(Math.hypot(b.x - from.x, b.y + b.h / 2 - from.y - from.h / 2) / 600)) / 2;
+  const go = a ? (sink < 0.5 ? smooth(clamp((u - sink) / (1 - 2 * sink))) : u < 0.5 ? 0 : 1) : 1;
+  const full = a ? (u < 0.5 ? 1 - clamp(u / sink) : clamp((u - 1 + sink) / sink)) : clamp(u);
+  const hBase = a && u < 0.5 ? a.h : b.h;
+  const h = line + (hBase - line) * full;
+  const bottom = from.y + from.h / 2 + (b.y + b.h / 2 - from.y - from.h / 2) * go;
+  return { x: from.x + (b.x - from.x) * go, y: bottom - h / 2, w: from.w + (b.w - from.w) * go, h };
+}
+
+// 바탕보다 밝은 글은 「밝게 섞기」(어두운 바탕), 어두운 글은 「어둡게 섞기」(밝은 바탕)로 그대로 남는다 — 위에 그려도 글 뒤에 깔린 것처럼 보인다.
+// 응답 패널·로그의 면 안쪽 값도 짚어야 해서 쌓는 차례로는 글 뒤에 둘 수 없다
+function underText(el: HTMLElement): string {
+  const m = /#([0-9a-f]{6})/i.exec(getComputedStyle(el).getPropertyValue("--kf-bg"));
+  const [r, g, b] = m ? [0, 2, 4].map((i) => parseInt(m[1].slice(i, i + 2), 16)) : [0, 0, 0];
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 128 ? "screen" : "multiply";
 }
 
 /**
  * 뽑힌 숫자·읽는 칸 — 고름 칠(파랑 /20, 정본의 bg-primary/20) 알약에 스타일가이드의 미끄러지는 알약 테두리(SlidingPillNav, 화면 글 크기에 맞춰 파랑 /55)를 두른 한 장.
  * from·to 를 주면 로그 줄의 숫자가 알약째 떠올라 호를 그리며 점 그림 자리로 300ms 감속으로 날아가 꽂힌다(박마다 큰 움직임).
- * stops 를 주면 지금 재는 값 위로 옮겨 다니며 짚는다 — 메뉴의 알약처럼 값이 나타나 선 뒤(lag, 기본 220ms)에 그 값에 닿고, 그 사이엔 서지 않으며(가까우면 옆으로 휘어 길을 늘린다),
- * 크기는 짚는 값에 맞춰 바뀐다. hold 면 마지막 값 뒤에도 서지 않고 처음 값부터 화면을 다시 짚어 훑는다(holdEvery 초마다 하나)
+ * stops 를 주면 요점(주인공 값·핵심 사실·그 순간 자막이 말하는 값)이 바뀔 때만 그 값으로 옮겨 가 짚는다 — 메뉴의 알약처럼 글 뒤에 깔리고,
+ * 옮겨 가는 동안은 아래 테두리 한 줄로 얇아져 지나가며, 닿으면 그 값의 칸만큼 차올라 다음 요점까지 딱 맞게 선다(옮김 300ms 안).
+ * 나타나는 항목을 차례로 훑는 정지점은 두지 않는다 — 화면을 살려 두는 몫은 내용이 진다
  */
 export function pickFly(
   el: HTMLElement,
   o: {
-    items: ({ at: number; text: string; from: Pt; to: Pt } | { text?: string; stops: ReadStop[]; hold?: boolean; holdEvery?: number; lag?: number })[];
+    items: ({ at: number; text: string; from: Pt; to: Pt } | { text?: string; stops: ReadStop[] })[];
     dur?: number;
     size?: number;
-    /** 읽는 칸의 최소 빠르기(px/초) */
-    minSpeed?: number;
   },
 ): (t: number) => void {
   const doc = el.ownerDocument;
   const dur = o.dur ?? SLOW;
   const size = o.size ?? 44;
-  const vmin = o.minSpeed ?? 320;
+  const border = Math.max(3, Math.round(size * 0.08));
+  let blend = "";
   const pills = o.items.map((it) => {
-    const s = box(doc, `position:absolute;left:0;top:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-family:${MONO};font-size:${size}px;font-weight:600;color:var(--kf-accent-text);background:color-mix(in srgb, var(--kf-accent) 20%, transparent);border:${Math.max(3, Math.round(size * 0.08))}px solid color-mix(in srgb, var(--kf-accent) 55%, transparent);border-radius:var(--kf-radius-pill);padding:0 0.3em;white-space:nowrap;opacity:0;z-index:7;pointer-events:none;font-variant-numeric:tabular-nums`, it.text ?? "");
+    const s = box(doc, `position:absolute;left:0;top:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-family:${MONO};font-size:${size}px;font-weight:600;color:var(--kf-accent-text);background:color-mix(in srgb, var(--kf-accent) 20%, transparent);border:${border}px solid color-mix(in srgb, var(--kf-accent) 55%, transparent);border-radius:var(--kf-radius-pill);padding:0 0.3em;white-space:nowrap;opacity:0;z-index:7;pointer-events:none;font-variant-numeric:tabular-nums`, it.text ?? "");
     el.append(s);
     return s;
   });
-  const glide = (a: Box, b: Box, u: number, gap: number): Box => {
-    const d = Math.hypot(b.x - a.x, b.y - a.y);
-    // 넓은 알약(줄 하나를 짚는 칸)은 옆으로 휘면 긴 위아래 테두리가 제자리라 곧게 가고, 같은 칸을 다시 짚을 때만 화면 가운데 쪽으로 넘었다 돌아온다.
-    // 작은 알약은 곧게 옆으로만 가면 위아래 테두리가 제자리라 늘 조금은 휜다
-    const wide = a.w + b.w > 1.5 * (a.h + b.h);
-    const want = wide ? (d < 20 ? vmin * gap : d) : Math.max(d * 1.05, vmin * gap);
-    const h = Math.sqrt(Math.max(0, want * want - d * d) * (3 / 16));
-    const toCenter = (el.offsetHeight || 1080) / 2 < (a.y + b.y) / 2 ? -1 : 1;
-    const [nx, ny] = d > 1 && !wide ? [-(b.y - a.y) / d, (b.x - a.x) / d] : [0, toCenter];
-    const c = { x: (a.x + b.x) / 2 + nx * h * 2, y: (a.y + b.y) / 2 + ny * h * 2 };
-    // 감속 곡선에 곧은 몫을 섞어 닿기 직전에도 빠르기가 0 이 되지 않게 — 감속 곡선은 앞에 몰려 있어 곧은 몫을 더 크게
-    const e = out(u) * 0.4 + u * 0.6;
-    const v = 1 - e;
-    return { x: v * v * a.x + 2 * v * e * c.x + e * e * b.x, y: v * v * a.y + 2 * v * e * c.y + e * e * b.y, w: a.w + (b.w - a.w) * e, h: a.h + (b.h - a.h) * e };
-  };
   const place = (s: HTMLElement, p: Box, opacity: number) => {
     s.style.opacity = String(opacity);
     s.style.width = `${p.w.toFixed(1)}px`;
@@ -320,6 +347,7 @@ export function pickFly(
       const s = pills[i];
       if (!("stops" in it)) {
         const u = (t - it.at) / dur;
+        cue("land", t - it.at - dur, { source: `pickFly@${it.at.toFixed(3)}` });
         if (u < 0 || u > 1) {
           s.style.opacity = "0";
           return;
@@ -330,38 +358,26 @@ export function pickFly(
         s.style.transform = `translate(${it.from.x + (it.to.x - it.from.x) * p}px, ${it.from.y + (it.to.y - it.from.y) * p - Math.sin(Math.PI * p) * 180}px) translate(-50%, -50%)`;
         return;
       }
-      const lag = it.lag ?? BASE;
-      // 첫 값과는 함께 나타나고, 그다음부터 값이 선 뒤에 따라간다
-      const stops = [...it.stops].sort((a, b) => a.at - b.at).map((st, i) => ({ ...st, at: i ? st.at + lag : st.at }));
-      if (it.hold && stops.length > 1) {
-        // 다시 훑기 — 처음 값으로 돌아가 차례대로. 작은 칸끼리 옆으로만 오가면 화면이 거의 안 바뀌어 큰 칸(첫 값)으로 크게 돌아간다. 같은 t 면 같은 차례
-        const every = it.holdEvery ?? clamp(stops[stops.length - 1].at - stops[stops.length - 2].at, 0.3, 0.6);
-        const n = stops.length;
-        const end = stops[n - 1].at;
-        for (let j = 1; end + j * every <= t + every; j++) {
-          stops.push({ ...stops[(j - 1) % n], at: end + j * every });
-        }
-      }
+      blend ||= underText(el);
+      s.style.mixBlendMode = blend;
+      const stops = [...it.stops].sort((a, b) => a.at - b.at);
       if (!stops.length || t < stops[0].at) {
         s.style.opacity = "0";
         return;
       }
-      const boxOf = (st: ReadStop): Box => (st.target && measure(st.target, el, st.pad ?? size * 0.25)) || { x: st.x ?? 0, y: st.y ?? 0, w: st.w ?? size * 3, h: st.h ?? size * 1.6 };
-      const k = stops.findIndex((st) => st.at > t);
-      const shown = out(progress(t, stops[0].at, BASE));
-      if (k > 0) {
-        const [a, b] = [stops[k - 1], stops[k]];
-        place(s, glide(boxOf(a), boxOf(b), clamp((t - a.at) / (b.at - a.at)), b.at - a.at), shown);
-        return;
-      }
-      const last = boxOf(stops[stops.length - 1]);
-      const since = t - stops[stops.length - 1].at;
-      if (!it.hold) {
-        place(s, last, shown * (1 - out(progress(t, stops[stops.length - 1].at + BASE, FAST))));
-        return;
-      }
-      const r = 36 * clamp(since / 0.2);
-      place(s, { ...last, x: last.x + r * Math.sin(since * 5.5), y: last.y - r * (1 - Math.cos(since * 5.5)) * 0.5 }, shown);
+      const boxOf = (st: ReadStop): Box => (st.target && measureAll([st.target].flat(), el, st.pad ?? 0)) || { x: st.x ?? 0, y: st.y ?? 0, w: st.w ?? size * 3, h: st.h ?? size * 1.6 };
+      let k = 0;
+      while (k + 1 < stops.length && stops[k + 1].at <= t) k++;
+      // 값이 나타나는 순간 떠나 300ms 안에 닿는다 — 다음 값이 가까우면 그 앞에 앉도록 더 빨리
+      const next = stops[k + 1];
+      const move = Math.max(0.1, Math.min(SLOW, (next ? next.at - stops[k].at : Infinity) - REST));
+      const u = clamp((t - stops[k].at) / move);
+      if (k > 0) cue("select", t - stops[k].at, { source: `pickFly:read@${stops[k].at.toFixed(3)}` });
+      const line = border * 2;
+      const p = between(k ? boxOf(stops[k - 1]) : null, boxOf(stops[k]), u, line);
+      // 얇을수록 진한 파랑 — 탭 아래 줄처럼 얇아도 지나가는 게 보이게. 글 한 줄 반 높이를 넘으면 옅은 칠로(큰 숫자 아래 두꺼운 파란 띠가 되지 않게)
+      s.style.background = `color-mix(in srgb, var(--kf-accent) ${Math.round(20 + 80 * clamp(1 - (p.h - line) / (size * 1.5)))}%, transparent)`;
+      place(s, p, out(progress(t, stops[0].at, BASE)));
     });
   };
 }
@@ -404,7 +420,7 @@ export function samplePlot(
       const got = r.samples.filter((s) => t >= s.t);
       r.samples.forEach((s, k) => {
         dots[k].style.left = `${X(s.v)}px`;
-        applyStyle(dots[k], t >= s.t ? { ...rise(t, s.t), opacity: 0.6 * out(progress(t, s.t, BASE)) } : { opacity: 0 });
+        applyStyle(dots[k], t >= s.t ? { ...rise(t, s.t, BASE, RISE, "tick"), opacity: 0.6 * out(progress(t, s.t, BASE)) } : { opacity: 0 });
       });
       if (!got.length) {
         mark.style.opacity = "0";
@@ -441,6 +457,7 @@ export function meter(t: number, o: { to: number; at: number; dur?: number; deci
       continue;
     }
     const settle = o.at + (dur * (k + 1)) / n;
+    cue("tick", t - settle, { source: `meter@${settle.toFixed(3)}`, minor: true });
     s += t >= settle ? ch : String(Math.floor((t * 26 + k * 3.7) % 10 + 10) % 10);
     k++;
   }
@@ -509,7 +526,7 @@ export function stamp(el: HTMLElement, o: { x: number; y: number; at: number; da
   row.append(box(doc, "", `측정 ${o.date} · 호출 ${o.calls}번 · $${o.cost.toFixed(digits)} · 키 하나`));
   el.append(row);
   return (t: number) => {
-    applyStyle(row, rise(t, o.at));
+    applyStyle(row, rise(t, o.at, BASE, RISE, "end"));
     row.style.translate = "-50% 0";
   };
 }

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

@@ -27,8 +27,8 @@ export default {
     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 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 },

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

@@ -35,16 +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 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 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 },

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

@@ -16,17 +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 });
-    // 읽는 칸 — 새로 든 줄 하나를 통째로 짚는다(표 행의 고름 칠). 줄 칸은 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 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 },

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

@@ -23,7 +23,8 @@ export default {
     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 });
+    // 읽는 칸 — 큰 숫자에 앉았다가 이 장면의 핵심 사실(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.06 },
       { at: B(2), x: 950, y: 560, zoom: 1.02, kick: 0.03 },

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

@@ -36,22 +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 });
-    // 읽는 칸 — 박마다 새로 선 값을 짚는다. 막대는 이름·막대 한 줄을 통째로(표 행의 고름 칠, 줄 칸은 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,
-    });
+    // 읽는 칸 — 요점에만: 할인 시간대(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 },

package/themes/og-measure/slots.ts

@@ -7,6 +7,9 @@ import { layer, letters, partial, shownCount, strokePath, traceCanvas } from "@k
 // 판은 상자가 아니라 구분선(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) {
@@ -67,6 +70,32 @@ 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 at = ctx.beats.drop(drop);

package/themes/og-measure/style.json

@@ -15,6 +15,9 @@
     "accentText": "#3B99F3",
     "onAccent": "#FFFFFF",
     "tint": "rgba(0, 132, 255, 0.1)",
+    "fill": "rgba(0, 132, 255, 0.1)",
+    "onFill": "#3B99F3",
+    "fillLine": "rgba(0, 132, 255, 0.45)",
     "success": "#10B981",
     "danger": "#EF4343",
     "warning": "#F59E0B",

package/themes/og-measure/theme.json

@@ -14,6 +14,13 @@
     "16:9",
     "9:16"
   ],
+  "transitions": [
+    "none",
+    "fade"
+  ],
+  "motion": {
+    "maxFreezeSec": 1
+  },
   "vary": {
     "scheme": [
       "dark",
@@ -33,6 +40,9 @@
         "accentText": "#01509D",
         "onAccent": "#FFFFFF",
         "tint": "rgba(0, 111, 214, 0.1)",
+        "fill": "rgba(0, 111, 214, 0.1)",
+        "onFill": "#01509D",
+        "fillLine": "rgba(0, 111, 214, 0.45)",
         "success": "#10B981",
         "danger": "#EF4444",
         "warning": "#F59E0B",
@@ -55,6 +65,9 @@
       "accentText",
       "onAccent",
       "tint",
+      "fill",
+      "onFill",
+      "fillLine",
       "success",
       "danger",
       "warning"
@@ -91,6 +104,7 @@
     ],
     "dims": "2D"
   },
+  "sfx": { "set": "click", "db": -4, "perSec": 0.5 },
   "effects": [
     {
       "name": "graphPaper",
@@ -119,7 +133,7 @@
     {
       "name": "pickFly",
       "kind": "layer",
-      "does": "뽑힌 숫자 — 로그 줄의 숫자가 고름 칠 알약째 떠올라 호를 그리며 점 그림 자리로 300ms 감속으로 날아가 꽂힌다(박마다 큰 움직임)",
+      "does": "뽑힌 숫자 — 로그 줄의 숫자가 고름 칠 알약째 떠올라 호를 그리며 점 그림 자리로 300ms 감속으로 날아가 꽂힌다(박마다 큰 움직임). stops 면 읽는 칸 — 글 뒤에 깔린 알약이 장면의 요점(주인공 값·핵심 사실·자막이 말하는 값)이 바뀔 때만 아래 테두리 한 줄로 얇아져 옮겨 가고, 그 값의 칸만큼 차올라 딱 맞게 서서 머문다(나타나는 항목을 차례로 훑지 않는다)",
       "use": "const paint = pickFly(stage, { items: [{ at: b[0], text: \"746\", from: { x: 760, y: 200 }, to: { x: 1500, y: 250 } }] })"
     },
     {

package/themes/og-measure/variants/snow-blue.json

@@ -38,6 +38,9 @@
       "accentText": "#01509D",
       "onAccent": "#FFFFFF",
       "tint": "rgba(0, 111, 214, 0.1)",
+      "fill": "rgba(0, 111, 214, 0.1)",
+      "onFill": "#01509D",
+      "fillLine": "rgba(0, 111, 214, 0.45)",
       "success": "#10B981",
       "danger": "#EF4444",
       "warning": "#F59E0B",