kasaframe 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kasaframe",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "말로 시키는 코드 영상 엔진 — 쇼츠·홍보·설명·뮤비를 장면 파일로 짜고 박에 맞춰 MP4 로 굽고 검사한다",
   "keywords": [
     "video",

package/packages/cli/src/commands/direct.ts

@@ -8,6 +8,7 @@ import { parseDuration } from "@kasaframe/plan";
 import { type Command, num, parseFlags } from "../command.ts";
 
 const kfBin = fileURLToPath(new URL("../kf.ts", import.meta.url));
+const FALLBACK = "any.words";
 // 검사가 떨어뜨려도 패턴 탓이 아닌 규칙 — 장면 경계(시간표)·생성 자산·자막 판
 const NOT_PATTERN = /^(beat\.|asset\.|caption\.)/;
 // 생성 능력 질문의 답 — kf make 로 그대로 넘긴다
@@ -130,6 +131,7 @@ const cmd: Command = {
     let code = 0;
     if (!opts["no-check"]) {
       const retries = num(opts.retries, 2);
+      let forced = false;
       for (let round = 0; ; round++) {
         // 옛 결과를 치우고 돌린다 — 검사가 돌지 못하고 끝나면 옛 check.json 을 이번 결과로 읽게 된다
         const report_ = join(dir, "out", "check.json");
@@ -154,14 +156,32 @@ const cmd: Command = {
         }
         const blame = blameScenes(dir, report);
         console.error(`kf check 오류 — ${blame.lines.join(" · ")}`);
-        if (round >= retries || (!Object.keys(blame.failed).length && !Object.keys(blame.seamFailed).length)) break;
+        if (!Object.keys(blame.failed).length && !Object.keys(blame.seamFailed).length) break;
+        // 다시 짓기를 다 써도 떨어지는 장면은 감독 기본(any.words)으로 한 번 더 — 막혀도 대체로는 끝까지 간다. 후보가 많은 type 은
+        // 다시 짓기 두 번 안에 기본까지 내려오지 못했다. 기본도 떨어지면 멈춘다
+        const left = Object.keys(blame.failed).filter((id) => report.scenes.find((s) => s.id === id)?.pattern !== FALLBACK);
+        const fallback = (): Record<string, string> | null => {
+          if (forced || !left.length) return null;
+          forced = true;
+          return Object.fromEntries(left.map((id) => [id, FALLBACK]));
+        };
+        let force = round >= retries ? fallback() : undefined;
+        if (force === null) break;
         try {
-          report = await build(dir, content, { seed, failed: blame.failed, seamFailed: blame.seamFailed, log });
+          report = await build(dir, content, { seed, failed: blame.failed, seamFailed: blame.seamFailed, force, log });
         } catch (e) {
+          // 남은 후보가 없어 고르기가 멈췄으면 그 장면들을 감독 기본으로
           console.error(`kf direct: ${e instanceof Error ? e.message : e}`);
-          break;
+          force = fallback();
+          if (!force) break;
+          try {
+            report = await build(dir, content, { seed, failed: blame.failed, seamFailed: blame.seamFailed, force, log });
+          } catch (e2) {
+            console.error(`kf direct: ${e2 instanceof Error ? e2.message : e2}`);
+            break;
+          }
         }
-        console.error(`다시 지음(${round + 1}/${retries}) — ${[...Object.entries(blame.failed), ...Object.entries(blame.seamFailed)].map(([id]) => `${id} → ${report.scenes.find((s) => s.id === id)?.pattern ?? report.scenes.find((s) => s.id === id)?.transition}`).join(" · ")}`);
+        console.error(`${force ? "감독 기본으로" : `다시 지음(${round + 1}/${retries})`} — ${[...Object.entries(blame.failed), ...Object.entries(blame.seamFailed)].map(([id]) => `${id} → ${report.scenes.find((s) => s.id === id)?.pattern ?? report.scenes.find((s) => s.id === id)?.transition}`).join(" · ")}`);
       }
       if (code !== 0) console.error(`kf check 가 아직 떨어진다 — ${dir}/out/check.json 을 보고 content.json 을 고치거나 --seed 를 바꿔 다시`);
     }

package/packages/director/src/assemble.ts

@@ -133,6 +133,8 @@ export interface BuildOpts {
   only?: string[];
   /** 사람이 고른 것 — 장면 id → 패턴 id·장면 씨앗. director.json 의 pinned 에 남아 다음 kf direct 가 덮지 않는다 */
   pins?: Record<string, Pin>;
+  /** 이번 짓기에만 — 장면 id → 패턴 id. pins 와 달리 director.json 에 안 남는다(다시 짓기를 다 쓰고 감독 기본으로 박을 때) */
+  force?: Record<string, string>;
   /** 장면마다 진행 줄(「장면 <id>: 쓰는 중|씀|실패 <까닭>」 — 굽기·검사까지 끝난 「끝」은 작업실·render 몫) */
   log?: (line: string) => void;
 }
@@ -258,10 +260,14 @@ export async function build(dir: string, content: Content, o: BuildOpts = {}): P
       if (!r) throw new Error(`장면 ${s.id}: 남은 패턴 후보가 없다 — 떨어진 것 ${(failed[s.id] ?? []).join(", ")}`);
       picks[i] = r;
     }
-  } else picks = selectAll(slots, entries, ctx, failed);
+  } else {
+    // 박을 장면은 떨어진 기록 없이 고른다 — 후보가 다 떨어졌으면 고르기가 「고를 패턴이 없다」로 멈춰 박기까지 못 간다
+    const left = o.force ? Object.fromEntries(Object.entries(failed).filter(([id]) => !(id in o.force!))) : failed;
+    picks = selectAll(slots, entries, ctx, left);
+  }
   // 사람이 고른 패턴이 이긴다 — 그 type 의 패턴이어야 한다
   for (const [i, s] of slots.entries()) {
-    const want = pinned[s.id]?.pattern;
+    const want = o.force?.[s.id] ?? pinned[s.id]?.pattern;
     if (!want || picks[i].pattern === want) continue;
     const e = entryOf.get(want);
     if (!e || (!e.fallback && e.meta.type !== s.type)) throw new Error(`--pattern ${s.id}=${want}: ${e ? `${s.type} 장면에 ${e.meta.type} 패턴` : "없는 패턴"} — 후보는 director.json 의 order`);

package/packages/director/src/fallback.ts

@@ -5,11 +5,23 @@ import { definePattern } from "./pattern.ts";
 
 const MAX_WORD = 14;
 
+function chunks(s: string): string[] {
+  if ([...s].length <= MAX_WORD) return [s];
+  const out: string[] = [];
+  for (const w of s.split(/\s+/)) {
+    const last = out[out.length - 1];
+    if (last !== undefined && [...`${last} ${w}`].length <= MAX_WORD) out[out.length - 1] = `${last} ${w}`;
+    else out.push(w);
+  }
+  return out;
+}
+
 function words(content: Record<string, unknown>): string[] {
   const out: string[] = [];
+  // 긴 글은 버리지 않고 띄어쓰기에서 MAX_WORD 안으로 나눈다 — 통째로 버리면 긴 제목 하나뿐인 장면에 띄울 낱말이 없어 대체 후보가 빠졌다
   const add = (v: unknown, unit?: unknown) => {
     if (typeof v === "number") out.push(`${v}${typeof unit === "string" ? unit : ""}`);
-    else if (typeof v === "string" && v.trim()) out.push(v.trim());
+    else if (typeof v === "string" && v.trim()) out.push(...chunks(v.trim()));
   };
   const each = (list: unknown, key: string) => Array.isArray(list) && list.forEach((x) => (typeof x === "string" ? add(x) : x && typeof x === "object" && add((x as Record<string, unknown>)[key])));
   const side = (x: unknown) => {
@@ -20,7 +32,7 @@ function words(content: Record<string, unknown>): string[] {
   };
   add(content.prefix !== undefined && typeof content.value === "number" ? `${content.prefix}${content.value}${content.unit ?? ""}` : undefined);
   if (content.prefix === undefined) add(content.value, content.unit);
-  for (const k of ["title", "term", "full", "ko", "label", "knob", "ratio", "change", "cost", "text", "who", "line", "url"]) add(content[k]);
+  for (const k of ["title", "term", "full", "ko", "label", "knob", "ratio", "change", "cost", "text", "who", "line", "url", "kicker", "sub"]) add(content[k]);
   side(content.a);
   side(content.b);
   side(content.before);

package/packages/director/src/patterns/fill/cells.ts

@@ -57,7 +57,8 @@ export default definePattern<Fill>({
       const x = (i % cols) * cell + gap / 2;
       const y = Math.floor(i / cols) * cell + gap / 2;
       const box = el("div", `position:absolute;left:${x}px;top:${y}px;width:${side}px;height:${side}px;border-radius:${Math.round(side * 0.18)}px;box-sizing:border-box;border:${Math.max(2, Math.round(side * 0.06))}px solid color-mix(in srgb, var(--kf-ink) 28%, transparent)`);
-      const fillEl = el("div", `position:absolute;inset:-1px;border-radius:inherit;background:var(--kf-accent);transform-origin:50% 50%`);
+      // 칠 토큰(fill·fillLine)을 둔 테마는 그 결로 — 없으면 강조색 꽉 찬 칸 그대로
+      const fillEl = el("div", `position:absolute;inset:-1px;border-radius:inherit;background:var(--kf-fill, var(--kf-accent));box-shadow:inset 0 0 0 ${Math.max(2, Math.round(side * 0.06))}px var(--kf-fill-line, transparent);transform-origin:50% 50%`);
       box.append(fillEl);
       grid.append(box);
       return { fillEl };
@@ -84,7 +85,9 @@ export default definePattern<Fill>({
     stops.push({ t: ctx.dur + 0.4, idx: recap[after.length % recap.length] });
     const stopAt = stops.map((x) => x.t);
     const zoomAt = (at[k - 1] ?? 0) + 0.25;
-    if (ctx.dur - zoomAt > 1.4) kit.stage.camera.pushIn(zoomAt, { scale: 1.07, dur: 0.9 });
+    // 머무는 짚개 테마는 이웃 장면이 첫 프레임부터 카메라를 잇는다 — 다가감을 장면 끝까지 늘여 그 움직임과 한 번으로 잇는다(사이가 뜨면 한 프레이즈에 두 번으로 센다)
+    const dwell = !!kit.slots.mark?.(document.createElement("div"), { ctx, seed: `${kit.seed}:mark` }).dwell;
+    if (ctx.dur - zoomAt > 1.4) kit.stage.camera.pushIn(zoomAt, { scale: 1.07, dur: dwell ? ctx.dur + 0.1 - zoomAt : 0.9 });
 
     const pos = (idx: number) => ({ x: (idx % cols) * cell - gap / 2, y: Math.floor(idx / cols) * cell - gap / 2 });
     return (t: number) => {

package/packages/director/src/scene.ts

@@ -41,9 +41,12 @@ function linesOf(glob: Record<string, unknown> | undefined, ctx: SceneCtx): Line
 
 const wordsOf = (lines: Line[], ctx: SceneCtx): SpokenWord[] => lines.flatMap((l) => (l.words ?? []).map((w) => ({ text: w.text, from: w.from - ctx.from, to: w.to - ctx.from })));
 
-// 낱말 시각 없이 줄 시각만 있는 자막(목소리 없이 자막만 단 프로젝트)
-const timedLines = (lines: Line[], ctx: SceneCtx): SpokenWord[] =>
-  lines.flatMap((l) => (l.from !== undefined && l.to !== undefined ? [{ text: l.text, from: l.from - ctx.from, to: l.to - ctx.from }] : []));
+// 낱말 시각 없이 줄만 있는 자막(목소리 없이 자막만 단 프로젝트) — 시각이 없는 줄은 화면 자막(toCues)처럼 장면 안 양끝을 조금 띄운 구간에 편다.
+// 빼면 패턴이 「자막이 말하는 순간」을 못 읽어 항목이 처음에 다 서고 그 뒤가 멈춘다
+const timedLines = (lines: Line[], ctx: SceneCtx): SpokenWord[] => {
+  const pad = Math.min(0.25, ctx.dur * 0.05);
+  return lines.map((l) => (l.from !== undefined && l.to !== undefined ? { text: l.text, from: l.from - ctx.from, to: l.to - ctx.from } : { text: l.text, from: pad, to: ctx.dur - pad }));
+};
 
 export function directed(pattern: Pattern<any>, d: Directed, deps: { makeStage: MakeStage; captions?: Record<string, unknown> }) {
   return {

package/packages/patterns/src/end/slam.ts

@@ -1,6 +1,6 @@
 import { applyStyle, clamp, combine, spring } from "@kasaframe/core";
 import { fitSize, textEm } from "@kasaframe/motion/moves";
-import { area, beatStops, cameraOk, dwells, fitOnce, glider, moving, node, readOver, reread, sceneDrop, slam, slotsOf } from "../kit.ts";
+import { area, beatStops, cameraOk, dwells, fitOnce, followSpoken, glider, moving, node, readOver, reread, sayTimes, sceneDrop, slam, slotsOf } from "../kit.ts";
 import type { EndContent } from "./lockup.ts";
 import type { Pattern } from "../types.ts";
 
@@ -60,14 +60,18 @@ const pattern: Pattern<EndContent> = {
     const at = di !== null ? ctx.beats.drop(di) : (hits.find((b) => b >= 0.1) ?? 0.12);
     const dropPaint = di !== null && slots.drop ? slots.drop(burst, { ctx, drop: di }) : null;
     if (di === null && kit.stage && cameraOk(ctx)) kit.stage.camera.impact(at, { amount: 0.04 });
-    const lineAt = at + 0.2;
-    const urlAt = lineAt + (c.line ? 0.35 : 0);
+    // 머무는 짚개 테마는 한 줄·주소를 자막·목소리가 말하는 순간에 붙이고, 카메라가 이름에서 그쪽으로 서지 않고 다가간다 — 쾅 뒤 다 선 끝 카드가 3초 넘게 섰다
+    const dwell = dwells(kit, ctx);
+    const [lineAt, urlAt] = dwell
+      ? sayTimes(kit, [c.line, c.url], at + 0.2, Math.max(at + 0.2, ctx.dur - 1))
+      : [at + 0.2, at + 0.2 + (c.line ? 0.35 : 0)];
+    if (dwell) followSpoken(kit, ctx, [{ at, el: stage }, ...(lineEl ? [{ at: lineAt, el: lineEl }] : []), ...(urlEl ? [{ at: urlAt, el: urlEl }] : [])], { reach: 0.25, zoom: 1.05 });
     const writeLine = lineEl ? slots.write(lineEl, { ctx, text: c.line!, at: lineAt, dur: 0.35, seed: `${kit.seed}:line` }) : null;
     const writeUrl = urlEl ? slots.write(urlEl, { ctx, text: c.url!, at: urlAt, dur: 0.3, seed: `${kit.seed}:url` }) : null;
     const landed = slots.land(name, { ctx, at, seed: `${kit.seed}:land` });
     // 앉으면 짚개가 이름·한 줄·주소를 짚는다(짚기 방식은 테마 짚음). 한 줄·주소가 없고 훑는 테마면 이름 글을 박마다 다시 짚는다
     const point = glider(host, [{ el: stage, text: c.title }, ...(lineEl ? [{ el: lineEl, text: c.line }] : []), ...(urlEl ? [{ el: urlEl, text: c.url }] : [])], { kit, ctx, from: at + 0.2 });
-    const again = line || dwells(kit, ctx) ? null : readOver(name, c.title, ctx);
+    const again = line || dwell ? null : readOver(name, c.title, ctx);
     const againStops = again ? beatStops(kit.hits, at + 0.2, ctx.dur) : [];
 
     return (t: number) => {
@@ -81,7 +85,7 @@ const pattern: Pattern<EndContent> = {
       ghost.style.clipPath = t < at ? `inset(0 ${((1 - clamp(t / Math.max(0.1, at - 0.16))) * 100).toFixed(2)}% 0 0)` : "";
       point(t);
       again?.(reread(t, againStops));
-      if (line) line.style.visibility = t >= lineAt ? "visible" : "hidden";
+      if (line) line.style.visibility = t >= Math.min(lineAt, urlAt) ? "visible" : "hidden";
       writeLine?.(t);
       writeUrl?.(t);
       if (urlEl) applyStyle(urlEl, t >= urlAt ? { scale: spring(t - urlAt, { from: 0.5, to: 1, stiffness: 320, damping: 14 }) } : { opacity: 0 });

package/packages/patterns/src/kit.ts

@@ -4,7 +4,7 @@ import { typeDuration, typeText } from "@kasaframe/motion";
 import { partial } from "@kasaframe/themes/slotkit";
 import type { MarkBox, MarkPaint } from "@kasaframe/themes/slots";
 import { keyCue, rollCues, slamCue, stopCues, withSfx } from "./sfx.ts";
-import type { Kit, ThemeSlots } from "./types.ts";
+import type { Kit, SpokenWord, ThemeSlots } from "./types.ts";
 
 // 패턴들이 같이 쓰는 몫. 모듈 맨 위에서 DOM 을 만지지 않는다 — 감독이 Node 에서 meta·fits 를 읽는다.
 
@@ -26,6 +26,17 @@ export const timesSign = (unit: string): boolean => /^[×✕✖xX]$/.test(unit.t
 /** 강조색 글 — 테마의 accentText(바탕 위에서 읽히는 강조색). 면은 accent, 글은 이것 */
 export const ACCENT_TEXT = "var(--kf-accent-text, var(--kf-accent))";
 
+/**
+ * 칠한 칸 — 진행·점유·지금처럼 「찼다」를 보이는 면(FILL)과 그 위 글(ON_FILL)·테두리(FILL_LINE·fillEdge). 테마가 칠 토큰(style.json colors
+ * fill·onFill·fillLine)을 주면 그 결(og-measure: 파랑/10 바탕·/45 테두리·accent 글 — 칠한 배지가 없는 세계), 없으면 강조색 꽉 찬 면과 onAccent 글
+ */
+export const FILL = "var(--kf-fill, var(--kf-accent))";
+export const ON_FILL = "var(--kf-on-fill, var(--kf-on-accent))";
+/** 칠한 칸 둘레 선 색 — 토큰이 없으면 강조색(원래 강조색으로 칠하던 테두리) */
+export const FILL_LINE = "var(--kf-fill-line, var(--kf-accent))";
+/** 칠한 면 안쪽 테두리 — 토큰이 없는 테마엔 안 보인다(면만 칠하던 그대로) */
+export const fillEdge = (px: number): string => `box-shadow:inset 0 0 0 ${px}px var(--kf-fill-line, transparent)`;
+
 /** 스타일·틀이 카메라를 끈 영상(cameraMove: off)이면 패턴은 카메라 대신 화면 안 강조로 */
 export const cameraOk = (ctx: SceneCtx): boolean => ctx.style.motion?.cameraMove !== "off";
 
@@ -405,6 +416,20 @@ export function keyPoints(say: readonly { text: string; from: number }[], from:
   return out;
 }
 
+/** 들리는 낱말 — 목소리 낱말 시각이 없으면(자막만) 자막 줄을 낱말로 나눠 줄 안에서 놓인 자리만큼의 시각으로 */
+export function spokenWords(kit: Kit): readonly SpokenWord[] {
+  if (kit.say.length) return kit.say;
+  return kit.lines.flatMap((l) => {
+    const n = Math.max(1, l.text.length);
+    let pos = 0;
+    return l.text.split(/\s+/).filter(Boolean).map((text) => {
+      const i = l.text.indexOf(text, pos);
+      pos = i + text.length;
+      return { text, from: l.from + ((l.to - l.from) * i) / n, to: l.from + ((l.to - l.from) * pos) / n };
+    });
+  });
+}
+
 /** 글 text 가 [from, to) 안에서 말해지는 시각 — 목소리 낱말이 있으면 그 글을 말하는 첫 낱말, 없으면 자막 줄 안에서 그 글이 놓인 자리만큼. 못 찾으면 null */
 export function heardAt(kit: Kit, text: string, from: number, to: number): number | null {
   if (kit.say.length) return kit.say.find((w) => w.from >= from - 0.05 && w.from < to && said(w.text, text))?.from ?? null;
@@ -449,24 +474,81 @@ export function sayTimes(kit: Kit, texts: readonly (string | undefined)[], from:
   });
 }
 
+// 카메라 움직임 하나는 천천히 떠나 천천히 선다 — 긴 구간에 한 번 걸면 앞뒤가 멈춘 화면이 된다(제목 하나뿐인 13초 장면이 2초 넘게 섰다).
+// STEP 초마다 두 배 길이의 다가감을 겹쳐 걸고 목표를 그 다가감이 끝날 시각의 경로 자리로 두면, 서는 데 없이 고른 빠르기로 간다
+const STEP = 0.8;
+
 /**
- * 지금 말하는 항목 쪽으로 다가가는 카메라 — 장면 첫 프레임부터 첫 항목 쪽으로, 항목이 말해질 때마다 그쪽으로 천천히 다가가 다음 항목까지,
- * 마지막 항목 뒤엔 장면 끝까지 한 번의 움직임으로 잇는다. 내용이 다 선 뒤 쉬는 구간을 뜻 있는 움직임으로 메운다(다가감의 이유가 그 순간 말하는 것).
- * 다가갈수록 조금씩 가까이(배율 1.02 씩, 1.08 까지). 머무는 짚개(dwell) 테마만 — 훑는 테마는 짚개가 쉬지 않는 몫을 진다. 카메라를 끈 영상엔 안 건다
+ * 지금 말하는 항목 쪽으로 다가가는 카메라 — 장면 첫 프레임부터 첫 항목(주인공) 쪽으로, 항목이 말해질 때마다 그 구간 동안 그쪽으로 고른 빠르기로 옮겨 가고,
+ * 배율은 장면 내내 고르게 가까워진다. 장면 끝까지 서지 않는 한 번의 움직임 — 내용이 다 선 뒤 쉬는 구간을 뜻 있는 움직임으로 메운다(다가감의 이유가 그 순간 말하는 것).
+ * 머무는 짚개(dwell) 테마만 — 훑는 테마는 짚개가 쉬지 않는 몫을 진다. 카메라를 끈 영상엔 안 건다.
+ * zoom 은 장면 끝 배율(기본 항목마다 1.02, 1.08 까지). reach < 1 이면 항목 가운데까지 가지 않고 화면 가운데에서 그 몫만큼만 — 내용이 안전 영역 위아래 끝까지 찬
+ * 장면(단계·시간축)은 항목에 끝까지 가거나 크게 다가가면 반대쪽 끝 글이 안전 영역 밖으로 밀린다
  */
-export function followSpoken(kit: Kit, ctx: SceneCtx, shots: readonly Focus[]): void {
+export function followSpoken(kit: Kit, ctx: SceneCtx, shots: readonly Focus[], o: { reach?: number; zoom?: number } = {}): void {
   if (!cameraOk(ctx) || !kit.stage || !dwells(kit, ctx)) return;
+  const stage = kit.stage;
+  const cam = stage.cam;
+  const reach = o.reach ?? 1;
   const sorted = [...shots].filter((s) => s.at < ctx.dur - 0.2).sort((a, b) => a.at - b.at);
   if (!sorted.length) return;
   // 첫 프레임부터 주인공 쪽으로 — 앞 장면의 다가감과 끊김 없이 이어져 한 번으로 센다(틀이 카메라를 프레이즈당 한 번 허락한다). 0 에서 시작하면
   // 첫 프레임엔 아직 안 움직여 사이가 뜬다. 아직 안 찍힌(빈) 항목 쪽으로 먼저 가면 화면이 비켜 내용이 안전 영역 밖으로 밀린다
-  const hero = kit.stage.cam.querySelector<HTMLElement>("[data-kf-hero]") ?? sorted[0].el;
+  const hero = cam.querySelector<HTMLElement>("[data-kf-hero]") ?? sorted[0].el;
   const list = [{ at: -0.05, el: hero }, ...sorted.filter((s) => s.at > 0.05)];
-  // 다음 다가감과 조금 겹쳐 잇는다 — 사이에 한 프레임이라도 서면 검사가 카메라를 두 번 움직인 것으로 센다
-  list.forEach((s, i) => {
-    const end = list[i + 1] ? list[i + 1].at + 0.1 : ctx.dur + 0.1;
-    kit.stage.camera.pushIn(s.at, { to: s.el, scale: Math.min(1.08, 1 + 0.02 * (i + 1)), dur: Math.max(0.4, end - s.at) });
-  });
+  const zoom = o.zoom ?? Math.min(1.08, 1 + 0.02 * list.length);
+  const mid = (): [number, number] => [cam.offsetWidth / 2, cam.offsetHeight / 2];
+  // 카메라가 재는 것과 같은 층 안 좌표(층 배율을 걷어 낸)로 잰 항목 가운데를 층 가운데 쪽으로 reach 만큼 당긴다. 크기도 넘겨 카메라가
+  // 항목이 화면 86% 안에 들게 배율을 누르게 한다 — 빼면 넓은 숫자판 끝 단위가 화면 밖으로 밀렸다
+  const spot = (el: HTMLElement): { x: number; y: number; w?: number; h?: number } => {
+    const r = el.getBoundingClientRect();
+    const [cx, cy] = mid();
+    if (r.width < 1 || r.height < 1) return { x: cx, y: cy };
+    const lr = cam.getBoundingClientRect();
+    const k = lr.width / (cam.offsetWidth || 1) || 1;
+    return { x: cx + ((r.left + r.width / 2 - lr.left) / k - cx) * reach, y: cy + ((r.top + r.height / 2 - lr.top) / k - cy) * reach, w: r.width / k, h: r.height / k };
+  };
+  // 장면 글 전체 상자(층 안 좌표) — 주인공만 가운데로 데려오면 옆 글(숫자판 밖 단위 따위)이 화면 밖으로 밀린다. 한 프레임에 한 번만 잰다
+  let boxAt = NaN;
+  let box: { l: number; t: number; r: number; b: number } | null = null;
+  const textBox = (t: number) => {
+    if (t === boxAt) return box;
+    boxAt = t;
+    box = null;
+    const lr = cam.getBoundingClientRect();
+    const k = lr.width / (cam.offsetWidth || 1) || 1;
+    for (const el of cam.querySelectorAll<HTMLElement>("*")) {
+      if (![...el.childNodes].some((n) => n.nodeType === 3 && n.textContent!.trim())) continue;
+      const r = el.getBoundingClientRect();
+      if (r.width < 1 || r.height < 1) continue;
+      const [l, top] = [(r.left - lr.left) / k, (r.top - lr.top) / k];
+      box = box ? { l: Math.min(box.l, l), t: Math.min(box.t, top), r: Math.max(box.r, l + r.width / k), b: Math.max(box.b, top + r.height / k) } : { l, t: top, r: l + r.width / k, b: top + r.height / k };
+    }
+    return box;
+  };
+  // 그 배율에서 글 상자가 가장자리 4% 띠 안으로 들게 초점을 묶는다(띠는 검사 layout.edge 와 같은 몫)
+  const keepIn = (f: number, lo: number, hi: number, size: number, sc: number): number => {
+    const [min, max] = [hi - (size * 0.96 - size / 2) / sc, lo + (size / 2 - size * 0.04) / sc];
+    return min <= max ? clamp(f, min, max) : (min + max) / 2;
+  };
+  // 경로 — 항목 차례마다 그 구간 동안 앞 항목 자리에서 그 항목 자리로
+  const path = (t: number, when: number, sc: number): { x: number; y: number; w?: number; h?: number } => {
+    let k = 0;
+    while (k + 1 < list.length && list[k + 1].at <= when) k++;
+    const u = clamp((when - list[k].at) / Math.max(0.1, (list[k + 1]?.at ?? ctx.dur) - list[k].at));
+    const [cx, cy] = mid();
+    const a = k ? spot(list[k - 1].el) : { x: cx, y: cy };
+    const b = spot(list[k].el);
+    const [x, y] = [a.x + (b.x - a.x) * u, a.y + (b.y - a.y) * u];
+    const tb = textBox(t);
+    if (!tb) return { x, y, w: b.w, h: b.h };
+    return { x: keepIn(x, tb.l, tb.r, cam.offsetWidth, sc), y: keepIn(y, tb.t, tb.b, cam.offsetHeight, sc), w: b.w, h: b.h };
+  };
+  for (let at = -0.05; at < ctx.dur; at += STEP) {
+    const when = at + STEP * 2;
+    const sc = 1 + (zoom - 1) * clamp((when + 0.05) / (ctx.dur + 0.05));
+    stage.camera.pushIn(at, { to: (t: number) => path(t, when, sc), scale: sc, dur: STEP * 2 });
+  }
 }
 
 // 요점 사이 옮김 — 스타일가이드 자리 옮김 300ms. 다음 요점이 그보다 가까우면 닿을 틈을 남기고 더 빨리
@@ -497,7 +579,7 @@ export function glider(host: HTMLElement, points: readonly Point[], o: { kit: Ki
   host.style.isolation = "isolate";
   const block = node(host, MARK_CSS);
   const shape = markOf(o.kit, o.ctx)?.(block) ?? plainMark(block);
-  const focus = shape.dwell ? (hub ? keyPoints(o.kit.say, o.from, points) : []) : null;
+  const focus = shape.dwell ? (hub ? keyPoints(spokenWords(o.kit), o.from, points) : []) : null;
   if (focus && !focus.length) {
     block.remove();
     return () => {};

package/packages/patterns/src/limit/gauge.ts

@@ -1,6 +1,6 @@
 import { applyStyle, clamp, spring } from "@kasaframe/core";
 import { fitSize, textEm } from "@kasaframe/motion/moves";
-import { area, decimalsOf, dwells, factRoll, fmt, followSpoken, glider, moving, node, sayTimes, slotsOf } from "../kit.ts";
+import { area, decimalsOf, dwells, factRoll, FILL, fillEdge, fmt, followSpoken, glider, moving, node, ON_FILL, sayTimes, slotsOf } from "../kit.ts";
 import type { Pattern } from "../types.ts";
 
 export interface LimitContent {
@@ -58,7 +58,7 @@ const pattern: Pattern<LimitContent> = {
     const row = vertical ? node(col, "position:relative;display:flex;justify-content:center;width:100%") : col;
     const line = Math.max(2, Math.round(3 * u));
     const gauge = node(row, `position:relative;width:${gw}px;height:${gh}px;background:var(--kf-raised);border:${line}px solid var(--kf-line);box-sizing:border-box`);
-    const fill = node(gauge, vertical ? "position:absolute;left:0;right:0;bottom:0;height:100%;background:var(--kf-accent);transform-origin:50% 100%;transform:scaleY(0)" : "position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--kf-accent);transform-origin:0 50%;transform:scaleX(0)");
+    const fill = node(gauge, `position:absolute;${vertical ? "left:0;right:0;bottom:0;height:100%;transform-origin:50% 100%;transform:scaleY(0)" : "left:0;top:0;bottom:0;width:100%;transform-origin:0 50%;transform:scaleX(0)"};background:${FILL};${fillEdge(line)}`);
     const danger = node(gauge, vertical ? `position:absolute;left:0;right:0;top:0;height:${(1 - wall) * 100}%;background:var(--kf-danger, var(--kf-accent));opacity:.28` : `position:absolute;left:${wall * 100}%;right:0;top:0;bottom:0;background:var(--kf-danger, var(--kf-accent));opacity:.28`);
     const bar = Math.max(4, Math.round(6 * u));
     const wallEl = node(
@@ -68,7 +68,7 @@ const pattern: Pattern<LimitContent> = {
         : `position:absolute;left:${wall * 100}%;top:-${Math.round(gh * 0.3)}px;bottom:-${Math.round(gh * 0.3)}px;width:${bar}px;margin-left:-${bar / 2}px;background:var(--kf-danger, var(--kf-ink))`,
     );
     const val = valText
-      ? node(gauge, vertical ? `position:absolute;left:0;right:0;display:flex;justify-content:center;font-family:var(--kf-font-mono);font-size:${valPx}px;font-weight:700;color:var(--kf-on-accent);white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.2` : `position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 ${Math.round(gh * 0.25)}px;font-family:var(--kf-font-mono);font-size:${valPx}px;font-weight:700;color:var(--kf-on-accent);white-space:nowrap;font-variant-numeric:tabular-nums`)
+      ? node(gauge, vertical ? `position:absolute;left:0;right:0;display:flex;justify-content:center;font-family:var(--kf-font-mono);font-size:${valPx}px;font-weight:700;color:${ON_FILL};white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.2` : `position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 ${Math.round(gh * 0.25)}px;font-family:var(--kf-font-mono);font-size:${valPx}px;font-weight:700;color:${ON_FILL};white-space:nowrap;font-variant-numeric:tabular-nums`)
       : null;
     const costCss = `font-family:var(--kf-font-sans);font-size:${costPx}px;font-weight:800;color:var(--kf-ink);border:${Math.max(3, Math.round(4 * u))}px solid var(--kf-danger, var(--kf-ink));padding:0.08em 0.45em;line-height:1.2;white-space:nowrap`;
     // 세로면 치르는 것은 계기 위 바깥, 위험 칸 바로 위 오른쪽에 — 계기 안에 두면 짚개 띠가 불투명한 계기 판 뒤로만 오가 화면이 안 바뀐다
@@ -87,7 +87,8 @@ const pattern: Pattern<LimitContent> = {
     const hitAt = heard ? heardLabel : hits.reduce((best, b) => (Math.abs(b - hitWant) < Math.abs(best - hitWant) && b > fillAt + 0.6 ? b : best), hitWant);
     const costAt = Math.max(hitAt + 0.1, heardCost);
     const markFrom = hitAt + 0.2;
-    followSpoken(kit, ctx, [{ at: hitAt, el: labelBox }, ...(cost ? [{ at: costAt, el: cost }] : [])]);
+    // 한계 문장·대가는 계기 위아래 끝이라 끝까지 다가가면 반대쪽 글(값·문장)이 화면 밖으로 밀린다
+    followSpoken(kit, ctx, [{ at: hitAt, el: labelBox }, ...(cost ? [{ at: costAt, el: cost }] : [])], { reach: 0.4 });
 
     // 한계 문장은 목소리가 말하는 순간 찍힌다(그 밖엔 처음부터)
     const writeLabel = slots.write(label, { ctx, text: c.label, at: heard ? Math.max(0, hitAt - labelDur) : 0, dur: labelDur, seed: `${kit.seed}:l` });

package/packages/patterns/src/steps/path.ts

@@ -1,6 +1,6 @@
 import { applyStyle, clamp, combine, spring } from "@kasaframe/core";
 import { fitSize, textEm } from "@kasaframe/motion/moves";
-import { area, moving, node, slotsOf, spaced } from "../kit.ts";
+import { area, FILL, FILL_LINE, fillEdge, followSpoken, moving, node, ON_FILL, slotsOf, spaced } from "../kit.ts";
 import type { Pattern } from "../types.ts";
 
 export interface StepsContent {
@@ -76,16 +76,19 @@ const pattern: Pattern<StepsContent> = {
       const [x, y] = cardPos(i);
       const card = node(host, `position:absolute;left:${x}px;top:${y}px;width:${cardW}px;height:${cardH}px;transform-origin:${vertical ? "0 50%" : "50% 0"}`);
       const panel = slots.panel(card, { ctx, at: enters[i], seed: `${kit.seed}:c${i}` });
-      const fill = node(card, "position:absolute;inset:0;background:var(--kf-accent);border-radius:var(--kf-radius-md)");
+      const edge = Math.max(2, Math.round(3 * u));
+      const fill = node(card, `position:absolute;inset:0;background:${FILL};${fillEdge(edge)};border-radius:var(--kf-radius-md)`);
+      // 차오르는 수위 — 칠 테두리 색 줄(토큰이 없는 테마엔 안 보인다). 옅은 칠은 차오름만으로는 화면이 거의 안 바뀐다
+      const level = node(card, `position:absolute;left:0;right:0;top:0;height:${edge}px;background:var(--kf-fill-line, transparent);visibility:hidden`);
       const face = (lit: boolean) => {
-        const f = node(card, `position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:${vertical ? "flex-start" : "center"};gap:${Math.round(detailPx * 0.4)}px;padding:0 ${Math.round(labelPx * 0.4)}px;box-sizing:border-box;color:${lit ? "var(--kf-on-accent)" : "var(--kf-ink)"}`);
+        const f = node(card, `position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:${vertical ? "flex-start" : "center"};gap:${Math.round(detailPx * 0.4)}px;padding:0 ${Math.round(labelPx * 0.4)}px;box-sizing:border-box;color:${lit ? ON_FILL : "var(--kf-ink)"}`);
         const label = node(f, `font-family:var(--kf-font-display);font-size:${labelPx}px;font-weight:${ctx.style.type?.weightDisplay ?? 800};line-height:1.08;word-break:keep-all;text-align:${vertical ? "left" : "center"};white-space:${vertical ? "nowrap" : "normal"}`);
         const detail = showDetail && s.detail ? node(f, `font-family:var(--kf-font-sans);font-size:${detailPx}px;line-height:1.3;opacity:.85;text-align:${vertical ? "left" : "center"};word-break:keep-all`) : null;
         return { f, label, detail };
       };
       const base = face(false);
       const lit = face(true);
-      return { card, panel, fill, base, lit, s };
+      return { card, panel, fill, level, base, lit, s };
     });
 
     const walkFrom = enters[n - 1] + 0.3;
@@ -100,6 +103,8 @@ const pattern: Pattern<StepsContent> = {
       ]),
     );
     const lands = dots.map((d, i) => slots.land(d, { ctx, at: enters[i], seed: `${kit.seed}:n${i}` }));
+    // 머무는 짚개 테마는 지금 단계 차례마다 카메라가 그 카드 쪽으로 다가간다
+    followSpoken(kit, ctx, cards.map((cd, i) => ({ at: turns[i], el: cd.card })), { reach: 0.15, zoom: 1.03 });
 
     return (t: number) => {
       moving("steps.path", ctx);
@@ -113,14 +118,17 @@ const pattern: Pattern<StepsContent> = {
         cards[i].panel(t);
         applyStyle(cards[i].card, { scale: spring(t - enters[i], { from: 0.82, to: 1, stiffness: 300, damping: 16 }) });
         const now = t >= turns[i];
-        dots[i].style.background = now ? "var(--kf-accent)" : "var(--kf-bg)";
-        dots[i].style.color = now ? "var(--kf-on-accent)" : "var(--kf-ink)";
-        dots[i].style.borderColor = now ? "var(--kf-accent)" : "var(--kf-ink)";
+        // 칠이 옅은 테마도 길이 마디 뒤로 비치지 않게 바탕 위에 칠한다
+        dots[i].style.background = now ? `linear-gradient(${FILL}, ${FILL}), var(--kf-bg)` : "var(--kf-bg)";
+        dots[i].style.color = now ? ON_FILL : "var(--kf-ink)";
+        dots[i].style.borderColor = now ? FILL_LINE : "var(--kf-ink)";
         // 그 단계 차례 내내 카드가 아래부터 차오른다 — 차례 끝자락엔 길이 다음 마디로 같이 이어진다
         const k = clamp((t - turns[i]) / Math.max(0.05, ends[i] - turns[i]));
         const clip = `inset(${((1 - k) * 100).toFixed(2)}% 0 0 0)`;
         cards[i].fill.style.clipPath = clip;
         cards[i].lit.f.style.clipPath = clip;
+        cards[i].level.style.visibility = k > 0 && k < 1 ? "visible" : "hidden";
+        cards[i].level.style.top = `${((1 - k) * 100).toFixed(2)}%`;
       });
       rails.forEach((r, i) => {
         // 회색 길은 뒤 마디가 서기 직전에 그어지고, 강조색 길은 앞 단계 차례 끝자락에 다음 마디까지 이어진다

package/packages/patterns/src/timeline/axis.ts

@@ -1,6 +1,6 @@
-import { applyStyle, clamp, spring } from "@kasaframe/core";
+import { applyStyle, clamp } from "@kasaframe/core";
 import { fitSize, textEm } from "@kasaframe/motion/moves";
-import { ACCENT_TEXT, area, decimalsOf, fmt, moving, node, slotsOf, spaced } from "../kit.ts";
+import { ACCENT_TEXT, area, decimalsOf, FILL, fillEdge, fmt, followSpoken, moving, node, ON_FILL, slotsOf, spaced } from "../kit.ts";
 import type { Pattern } from "../types.ts";
 
 export interface TimelineContent {
@@ -64,6 +64,8 @@ const pattern: Pattern<TimelineContent> = {
       ? `left:${axisX - trackT / 2}px;top:${a0}px;width:${trackT}px;height:${len}px`
       : `left:${a0}px;top:${axisY - trackT / 2}px;width:${len}px;height:${trackT}px`;
     const track = node(host, `position:absolute;${trackCss};background:var(--kf-raised);border:${Math.max(2, Math.round(2 * u))}px solid var(--kf-line);box-sizing:border-box;transform-origin:${vertical ? "50% 0" : "0 50%"}`);
+    const edge = Math.max(2, Math.round(3 * u));
+    const winPx = Math.round(chipPx * 0.95);
     const win = c.window ? (() => {
       const p0 = pos(c.window.from);
       const p1 = pos(c.window.to);
@@ -74,29 +76,72 @@ const pattern: Pattern<TimelineContent> = {
       // 세로 화면은 그 구간을 화면 폭 가득 옅게 칠한다 — 「이 시간대」가 축 옆 점선만으로는 작게 읽혔다
       if (vertical) host.prepend(node(host, `position:absolute;left:0;right:0;top:${a0 + len * p0}px;height:${len * (p1 - p0)}px;background:color-mix(in srgb, var(--kf-accent) 14%, transparent)`));
       const [lx, ly] = at((p0 + p1) / 2);
+      // 구간 이름은 눕히지 않는다 — 세로 화면은 오른쪽 딱지 줄에 두고 자리는 아래 줄 맞추기가 정한다
       const label = node(host, vertical
-        ? `position:absolute;left:${Math.max(chipPx * 1.2, lx - trackT * 0.5 - readPx * 3.6)}px;top:${ly}px;transform:translate(-100%,-50%) rotate(-90deg);transform-origin:100% 50%;font-family:var(--kf-font-display);font-size:${Math.round(chipPx * 1.1)}px;font-weight:800;color:${ACCENT_TEXT};white-space:nowrap`
+        ? `position:absolute;left:0;top:0;font-family:var(--kf-font-display);font-size:${winPx}px;font-weight:800;line-height:1.2;color:${ACCENT_TEXT};white-space:nowrap`
         : `position:absolute;left:${lx}px;top:${ly - trackT * 1.35 - chipPx * 1.75}px;transform:translate(-50%,-100%);font-family:var(--kf-font-sans);font-size:${chipPx}px;font-weight:700;color:${ACCENT_TEXT};white-space:nowrap`);
-      return { p0, p1, outline, label };
+      return { p0, p1, outline, label, y: ly };
     })() : null;
-    const done = node(track, `position:absolute;${vertical ? "left:0;right:0;top:0;height:100%" : "top:0;bottom:0;left:0;width:100%"};background:var(--kf-accent);transform-origin:${vertical ? "50% 0" : "0 50%"};transform:scale(0)`);
+    const done = node(track, `position:absolute;${vertical ? "left:0;right:0;top:0;height:100%" : "top:0;bottom:0;left:0;width:100%"};background:${FILL};${fillEdge(edge)};transform-origin:${vertical ? "50% 0" : "0 50%"};transform:scale(0)`);
+    // 축 끝 값 — 세로 화면은 왼쪽(지금 읽음값과 같은 줄, 오른쪽은 딱지 줄)
     const ends = [span.from, span.to].map((v, i) => {
       const [x, y] = at(i);
       return node(host, vertical
-        ? `position:absolute;left:${x + trackT * 0.7}px;top:${y}px;transform:translateY(${i ? "-100%" : "0"});font-family:var(--kf-font-mono);font-size:${Math.round(Math.max(52 * u, readPx * 0.8))}px;color:var(--kf-dim, var(--kf-ink));white-space:nowrap`
+        ? `position:absolute;left:${x - trackT / 2 - 10}px;top:${y}px;transform:translate(-100%, ${i ? "-100%" : "0"});font-family:var(--kf-font-mono);font-size:${Math.round(Math.max(44 * u, readPx * 0.8))}px;color:var(--kf-dim, var(--kf-ink));white-space:nowrap`
         : `position:absolute;left:${x}px;top:${y + trackT * 0.7}px;transform:translateX(${i ? "-100%" : "0"});font-family:var(--kf-font-mono);font-size:${Math.round(readPx * 0.8)}px;color:var(--kf-dim, var(--kf-ink));white-space:nowrap`, `${fmt(v, dec)}${unit ? ` ${unit}` : ""}`);
     });
-    const pins = marks.map((m, i) => {
-      const [x, y] = at(pos(m.at));
-      const r = Math.round(trackT * (m.hot ? 0.62 : 0.48));
-      const pin = node(host, `position:absolute;left:${x - r}px;top:${y - r}px;width:${r * 2}px;height:${r * 2}px;border-radius:50%;box-sizing:border-box;border:${Math.max(3, Math.round(r * 0.22))}px solid var(--kf-ink);background:var(--kf-bg)`);
-      const side = vertical ? 1 : i % 2 ? 1 : -1;
-      const chip = node(host, vertical
-        ? `position:absolute;left:${x + trackT * 1.0}px;top:${y}px;transform:translateY(-50%);padding:0.12em 0.4em;font-family:var(--kf-font-sans);font-size:${chipPx}px;font-weight:700;color:var(--kf-ink);background:var(--kf-raised);white-space:nowrap;line-height:1.2`
-        : `position:absolute;left:${x}px;top:${y + side * trackT * 1.25}px;transform:translate(-50%,${side < 0 ? "-100%" : "0"});padding:0.12em 0.4em;font-family:var(--kf-font-sans);font-size:${chipPx}px;font-weight:700;color:var(--kf-ink);background:var(--kf-raised);white-space:nowrap;line-height:1.2`);
-      return { m, pin, chip, p: pos(m.at) };
+
+    // 표시 — 축을 가로지르는 눈금 하나와 딱지를 잇는 선. 큰 동그라미는 뜻 없이 이웃 표시·딱지를 덮었다
+    const chipCss = `padding:0.12em 0.4em;font-family:var(--kf-font-sans);font-size:${chipPx}px;font-weight:700;color:var(--kf-ink);background:var(--kf-raised);white-space:nowrap;line-height:1.2`;
+    // 자리는 바깥 칸이 잡고 내려앉음(land)은 안쪽 딱지에 — land 가 transform 을 통째로 다시 쓴다
+    const pins = marks.map((m) => {
+      const anchor = node(host, "position:absolute;left:0;top:0");
+      return { m, p: pos(m.at), anchor, chip: node(anchor, chipCss) };
+    });
+    // 세로 화면 딱지 줄 — 바라는 자리(표시 높이·구간 가운데)에서 서로 안 겹치게 밀고, 아래로 넘치면 거꾸로 올린다
+    const chipX = vertical ? axisX + trackT / 2 + trackT * 0.55 : 0;
+    const rowGap = chipPx * 0.22;
+    const slots2 = [...pins.map((p) => ({ want: at(p.p)[1], h: chipPx * 1.44, el: p.anchor })), ...(vertical && win ? [{ want: win.y, h: winPx * 1.2, el: win.label }] : [])].sort((x, y) => x.want - y.want);
+    const ys = slots2.map((x) => x.want);
+    if (vertical) {
+      for (let i = 0; i < slots2.length; i++) ys[i] = Math.max(slots2[i].want, i ? ys[i - 1] + (slots2[i - 1].h + slots2[i].h) / 2 + rowGap : a0 + slots2[i].h / 2);
+      const bottom = a0 + len + chipPx;
+      for (let i = slots2.length - 1; i >= 0; i--) ys[i] = Math.min(ys[i], i < slots2.length - 1 ? ys[i + 1] - (slots2[i].h + slots2[i + 1].h) / 2 - rowGap : bottom - slots2[i].h / 2);
+    }
+    const yOf = new Map(slots2.map((x, i) => [x.el, ys[i]]));
+    const SVG = "http://www.w3.org/2000/svg";
+    const svg = host.ownerDocument.createElementNS(SVG, "svg");
+    svg.setAttribute("style", "position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none");
+    host.append(svg);
+    const ticks = pins.map((p, i) => {
+      const [x, y] = at(p.p);
+      const line = host.ownerDocument.createElementNS(SVG, "polyline");
+      line.setAttribute("fill", "none");
+      line.setAttribute("stroke-width", String(Math.max(3, Math.round(4 * u))));
+      line.setAttribute("stroke-linejoin", "round");
+      if (vertical) {
+        const cy = yOf.get(p.anchor)!;
+        const elbow = chipX - trackT * 0.25;
+        line.setAttribute("points", `${x - trackT / 2},${y} ${elbow},${y} ${elbow},${cy} ${chipX},${cy}`);
+        p.anchor.style.transform = `translate(${chipX}px, ${cy.toFixed(1)}px) translateY(-50%)`;
+      } else {
+        // 가로 화면은 딱지가 위아래 번갈아 — 눈금이 축을 가로질러 딱지까지 곧게
+        const side = i % 2 ? 1 : -1;
+        const cy = y + side * trackT * 1.25;
+        line.setAttribute("points", `${x},${y - side * trackT / 2} ${x},${cy}`);
+        p.anchor.style.transform = `translate(${x}px, ${cy}px) translate(-50%, ${side < 0 ? "-100%" : "0"})`;
+      }
+      svg.append(line);
+      return line;
     });
-    const head = node(host, `position:absolute;left:0;top:0;padding:0.1em 0.35em;font-family:var(--kf-font-mono);font-size:${readPx}px;font-weight:700;color:var(--kf-on-accent);background:var(--kf-accent);white-space:nowrap;font-variant-numeric:tabular-nums;visibility:hidden`);
+    if (vertical && win) win.label.style.transform = `translate(${chipX}px, ${yOf.get(win.label)!.toFixed(1)}px) translateY(-50%)`;
+    // 지금 줄 — 읽음값에서 축을 가로질러 딱지 줄 앞까지. 옅게 칠하는 테마는 지난 길이 차오르는 것만으로는 화면이 거의 안 바뀐다
+    const nowT = Math.max(2, Math.round(3 * u));
+    const nowLine = node(host, vertical
+      ? `position:absolute;left:${w * 0.03}px;top:0;width:${chipX - trackT * 0.25 - w * 0.03}px;height:${nowT}px;margin-top:-${nowT / 2}px;background:var(--kf-accent);visibility:hidden`
+      : `position:absolute;left:0;top:${axisY - trackT * 0.65}px;width:${nowT}px;height:${trackT * 1.3}px;margin-left:-${nowT / 2}px;background:var(--kf-accent);visibility:hidden`);
+    // 읽음값 칩은 지금 줄 위에 앉는다 — 옅은 칠도 줄이 비치지 않게 바탕 위에 겹쳐 칠한다
+    const head = node(host, `position:absolute;left:0;top:0;padding:0.1em 0.35em;font-family:var(--kf-font-mono);font-size:${readPx}px;font-weight:700;color:${ON_FILL};background:linear-gradient(${FILL}, ${FILL}), var(--kf-bg);${fillEdge(edge)};white-space:nowrap;font-variant-numeric:tabular-nums;visibility:hidden`);
 
     const hits = spaced(kit.hits.length ? kit.hits : [0], 0.3);
     const drawAt = 0;
@@ -107,35 +152,44 @@ const pattern: Pattern<TimelineContent> = {
 
     const writes = pins.map((p, i) => slots.write(p.chip, { ctx, text: p.m.label, at: pinAt[i], dur: 0.25, seed: `${kit.seed}:m${i}` }));
     const writeWin = win ? slots.write(win.label, { ctx, text: c.window!.label, at: walkFrom - 0.3, dur: 0.3, seed: `${kit.seed}:w` }) : null;
-    const lands = pins.map((p, i) => slots.land(p.pin, { ctx, at: pinAt[i], seed: `${kit.seed}:p${i}` }));
+    const lands = pins.map((p, i) => slots.land(p.chip, { ctx, at: pinAt[i], seed: `${kit.seed}:p${i}` }));
+    // 머무는 짚개 테마는 지금이 표시에 닿을 때마다 카메라가 그 딱지 쪽으로 다가간다
+    followSpoken(kit, ctx, pins.map((p) => ({ at: walkFrom + p.p * (walkEnd - walkFrom), el: p.anchor })), { reach: 0.15, zoom: 1.03 });
 
     return (t: number) => {
       moving("timeline.axis", ctx);
       const g = clamp((t - drawAt) / 0.3);
       track.style.transform = vertical ? `scaleY(${g.toFixed(4)})` : `scaleX(${g.toFixed(4)})`;
-      for (const e of ends) e.style.visibility = g >= 1 ? "visible" : "hidden";
       // 지금 — 고른 빠르기로 축 처음에서 끝까지
       const now = clamp((t - walkFrom) / (walkEnd - walkFrom));
       done.style.transform = vertical ? `scaleY(${now.toFixed(4)})` : `scaleX(${now.toFixed(4)})`;
       const [hx, hy] = at(now);
       head.style.visibility = t >= walkFrom ? "visible" : "hidden";
+      nowLine.style.visibility = head.style.visibility;
+      nowLine.style.transform = vertical ? `translateY(${hy.toFixed(1)}px)` : `translateX(${hx.toFixed(1)}px)`;
       head.textContent = `${fmt(span.from + (span.to - span.from) * now, dec)}${unit ? ` ${unit}` : ""}`;
       head.style.transform = vertical ? `translate(${(hx - trackT * 0.5 - 8).toFixed(1)}px, ${hy.toFixed(1)}px) translate(-100%, -50%)` : `translate(${hx.toFixed(1)}px, ${(hy - trackT * 0.5 - 8).toFixed(1)}px) translate(-50%, -100%)`;
+      // 세로 화면은 끝 값과 지금 읽음값이 같은 줄 — 지금이 그 끝 가까이 오면 끝 값을 비킨다(같은 값을 두 번 쓴다)
+      ends.forEach((e, i) => {
+        const near = vertical && Math.abs(hy - at(i)[1]) < readPx * 1.6 && t >= walkFrom;
+        e.style.visibility = g >= 1 && !near ? "visible" : "hidden";
+      });
       if (win) win.label.style.visibility = t >= walkFrom - 0.3 ? "visible" : "hidden";
       writeWin?.(t);
       pins.forEach((p, i) => {
         const on = t >= pinAt[i];
-        p.pin.style.visibility = on ? "visible" : "hidden";
         p.chip.style.visibility = on ? "visible" : "hidden";
+        ticks[i].style.visibility = on ? "visible" : "hidden";
         if (!on) return;
         writes[i](t);
-        applyStyle(p.pin, { scale: spring(t - pinAt[i], { from: 0.3, to: 1, stiffness: 320, damping: 14 }) * ((lands[i](t).scale as number | undefined) ?? 1) });
-        // 지금이 지나간 표시는 켜진다 — 강조 표시(hot)는 반전 칩으로
+        // 지금이 지나간 표시는 눈금이 켜진다 — 강조 표시(hot)는 딱지도 칠한 칸으로
         const passed = now >= p.p - 1e-6 && t >= walkFrom;
-        p.pin.style.background = passed ? "var(--kf-accent)" : "var(--kf-bg)";
-        p.pin.style.borderColor = passed ? "var(--kf-accent)" : "var(--kf-ink)";
-        p.chip.style.background = passed && p.m.hot ? "var(--kf-accent)" : "var(--kf-raised)";
-        p.chip.style.color = passed && p.m.hot ? "var(--kf-on-accent)" : "var(--kf-ink)";
+        ticks[i].setAttribute("stroke", passed ? "var(--kf-accent)" : "var(--kf-dim, var(--kf-ink))");
+        const hot = passed && p.m.hot;
+        p.chip.style.background = hot ? FILL : "var(--kf-raised)";
+        p.chip.style.color = hot ? ON_FILL : "var(--kf-ink)";
+        p.chip.style.boxShadow = hot ? `inset 0 0 0 ${edge}px var(--kf-fill-line, transparent)` : "";
+        applyStyle(p.chip, lands[i](t));
       });
     };
   },

package/packages/patterns/src/title/mask.ts

@@ -1,7 +1,7 @@
 import { applyStyle, clamp } from "@kasaframe/core";
 import { sweep } from "@kasaframe/motion";
 import { fitSize } from "@kasaframe/motion/moves";
-import { ACCENT_TEXT, area, beatStops, cameraOk, dwells, glider, moving, node, reread, riseName, slotsOf } from "../kit.ts";
+import { ACCENT_TEXT, area, beatStops, cameraOk, dwells, followSpoken, glider, moving, node, reread, riseName, sayTimes, slotsOf } from "../kit.ts";
 import type { Pattern } from "../types.ts";
 
 export interface TitleContent {
@@ -58,13 +58,17 @@ const pattern: Pattern<TitleContent> = {
     const nameEnd = nameAt + each * (count - 1) + 0.3;
     const settle = hits.find((b) => b >= nameEnd - 0.05) ?? nameEnd;
     const sweepAt = settle;
-    const subAt = sweepAt + 0.3;
+    // 머무는 짚개 테마는 부제를 자막·목소리가 말하는 순간에 세우고, 카메라가 이름에서 부제 쪽으로 서지 않고 다가간다 — 한 번에 길게 다가가면
+    // 앞뒤 느린 끝이 멈춘 화면이라 이름 하나뿐인 용어 장면이 2초 넘게 섰다. 이름 낱말을 말하는 순간에 나눠 세우면 짧은 장면은 낱말 사이가 도리어 멈춘다
+    const dwell = dwells(kit, ctx);
+    const subAt = dwell && sub ? sayTimes(kit, [c.sub], sweepAt + 0.3, Math.max(sweepAt + 0.3, ctx.dur - 1))[0] : sweepAt + 0.3;
     const subDur = Math.max(0.3, ctx.dur - subAt - 0.08);
-    if (cameraOk(ctx)) kit.stage?.camera.pushIn(settle, { to: name, scale: 1.07, dur: Math.max(0.6, ctx.dur - settle) });
+    if (dwell) followSpoken(kit, ctx, [{ at: settle, el: name }, ...(sub ? [{ at: subAt, el: sub }] : [])], { reach: 0.5, zoom: 1.1 });
+    else if (cameraOk(ctx)) kit.stage?.camera.pushIn(settle, { to: name, scale: 1.07, dur: Math.max(0.6, ctx.dur - settle) });
     // 이름이 서면 짚개가 이름과 위 작은 글·부제를 짚는다(짚기 방식은 테마 짚음). 작은 글이 없고 훑는 테마면 이름 글자를 박마다 다시 짚는다
     const markFrom = Math.min(settle, nameAt + 0.35);
     const point = glider(host, [{ el: name, text: c.title }, ...(kicker ? [{ el: kicker, text: c.kicker }] : []), ...(sub ? [{ el: sub, text: c.sub }] : [])], { kit, ctx, from: markFrom });
-    const again = !kicker && !sub && !dwells(kit, ctx) ? beatStops(kit.hits, markFrom, ctx.dur) : null;
+    const again = !kicker && !sub && !dwell ? beatStops(kit.hits, markFrom, ctx.dur) : null;
     const writeKicker = kicker ? slots.write(kicker, { ctx, text: c.kicker!, at: 0, dur: Math.min(0.35, nameEnd * 0.6), seed: `${kit.seed}:kicker` }) : null;
     const writeSub = sub ? slots.write(sub, { ctx, text: c.sub!, at: subAt, dur: subDur, seed: `${kit.seed}:sub` }) : null;
     const landed = slots.land(name, { ctx, at: nameEnd, seed: `${kit.seed}:land` });

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`). 그 위의 면·선·흐린 글은 바탕을 따라 자리를 지킨다.
 - 글꼴·모서리·빠르기·질감·선 굵기는 정본이 하나뿐이라 돌지 않는다(스타일가이드의 한글 글꼴 다섯 후보는 「비교용, 고르기 전엔 전역 글꼴을 안 바꾼다」).
@@ -78,5 +78,7 @@ export default {
 감독(`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/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

@@ -40,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",
@@ -62,6 +65,9 @@
       "accentText",
       "onAccent",
       "tint",
+      "fill",
+      "onFill",
+      "fillLine",
       "success",
       "danger",
       "warning"

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",