kasaframe 0.1.5 → 0.1.7

package/packages/patterns/src/quote/karaoke.ts

@@ -1,6 +1,6 @@
 import { applyStyle, clamp, spring } from "@kasaframe/core";
 import { fitSize, textEm } from "@kasaframe/motion/moves";
-import { ACCENT_TEXT, area, beatStops, glider, moving, node, slotsOf } from "../kit.ts";
+import { ACCENT_TEXT, area, glider, inverseOver, markOf, moving, node, slotsOf } from "../kit.ts";
 import type { Pattern, SpokenWord } from "../types.ts";
 
 export interface QuoteContent {
@@ -80,14 +80,23 @@ const pattern: Pattern<QuoteContent> = {
     const mark = node(col, `font-family:var(--kf-font-display);font-size:${Math.round(px * 1.4)}px;line-height:.6;height:${Math.round(px * 0.6)}px;font-weight:900;color:${ACCENT_TEXT}`, "“");
     const body = node(col, `font-family:var(--kf-font-display);font-size:${px}px;font-weight:${ctx.style.type?.weightDisplay ?? 800};line-height:1.3;color:var(--kf-ink);word-break:keep-all`);
     kit.stage?.hero(body);
+    const shape = markOf(kit, ctx);
     const spans = words.map((wd, i) => {
       const sp = body.ownerDocument.createElement("span");
       sp.style.cssText = "position:relative;white-space:nowrap";
       sp.textContent = wd;
-      const hi = node(sp, "position:absolute;left:-0.08em;right:-0.08em;top:0.02em;bottom:0.02em;padding:0 0.08em;background:var(--kf-accent);color:var(--kf-on-accent);white-space:nowrap;visibility:hidden", wd);
       body.append(sp);
       if (i < words.length - 1) body.append(body.ownerDocument.createTextNode(" "));
-      return { sp, hi };
+      // 읽는 낱말 반전 칸 — 테마가 짚는 칸 모양을 정했으면 그 칸(반전 짚음)
+      if (shape) return { sp, paint: inverseOver(sp, wd, shape) };
+      const hi = node(sp, "position:absolute;left:-0.08em;right:-0.08em;top:0.02em;bottom:0.02em;padding:0 0.08em;background:var(--kf-accent);color:var(--kf-on-accent);white-space:nowrap;visibility:hidden", wd);
+      return {
+        sp,
+        paint: (k: number) => {
+          hi.style.visibility = k > 0 ? "visible" : "hidden";
+          hi.style.clipPath = `inset(0 ${((1 - k) * 100).toFixed(2)}% 0 0)`;
+        },
+      };
     });
     const whoText = [c.who, c.role].filter(Boolean).join(" · ");
     const who = whoText ? node(col, `align-self:flex-end;font-family:var(--kf-font-sans);font-size:${whoPx}px;font-weight:600;color:var(--kf-ink-soft, var(--kf-ink));white-space:nowrap;line-height:1.3;height:1.3em`) : null;
@@ -101,24 +110,20 @@ const pattern: Pattern<QuoteContent> = {
     const times = kit.say.length ? timing(words, kit.say, readFrom, ctx.dur - 0.05) : even(words, readFrom, readTo);
     const readEnd = times[times.length - 1][1];
     const whoAt = Math.min(Math.max(readFrom, ctx.dur - whoDur - 0.6), readEnd);
-    // 다 읽은 뒤엔 짚개가 문장 ↔ 누가 말했는지를 박마다 번갈아 짚는다(누가 없으면 낱말을 차례로)
-    const point = glider(host, who ? [body, who] : spans.map((x) => x.sp), { hub: !!who, pad: 0.06 });
-    const stops = beatStops(kit.hits, readEnd + 0.05, ctx.dur);
+    // 다 읽으면 짚개가 문장부터 짚는다(머무는 테마는 목소리가 누가를 말할 때만 그리로). 누가가 없으면 훑는 테마만 낱말을 차례로 — 머무는 테마엔 주인공이 없다
+    const point = glider(host, who ? [{ el: body, text: c.text }, { el: who, text: whoText }] : spans.map((x) => ({ el: x.sp })), { kit, ctx, from: readEnd + 0.05, hub: !!who, pad: 0.06 });
     const writeWho = who ? slots.write(who, { ctx, text: whoText, at: whoAt, dur: whoDur, seed: `${kit.seed}:who` }) : null;
 
     return (t: number) => {
       moving("quote.karaoke", ctx);
       applyStyle(mark, { scale: spring(t, { from: 0.4, to: 1, stiffness: 260, damping: 14 }) });
+      // 짚는 동안은 낱말 반전 칸을 걷는다 — 두 강조가 겹치면 무엇을 짚는지 흐려진다
       spans.forEach((s, i) => {
         const [a, b] = times[i];
-        const k = clamp((t - a) / Math.max(0.05, b - a));
-        s.hi.style.visibility = k > 0 ? "visible" : "hidden";
-        s.hi.style.clipPath = `inset(0 ${((1 - k) * 100).toFixed(2)}% 0 0)`;
+        s.paint(t >= readEnd + 0.05 ? 0 : clamp((t - a) / Math.max(0.05, b - a)));
       });
       writeWho?.(t);
-      // 짚는 동안은 낱말 반전 칸을 걷는다 — 두 강조가 겹치면 무엇을 짚는지 흐려진다
-      if (t >= readEnd + 0.05) spans.forEach((x) => (x.hi.style.visibility = "hidden"));
-      point(t, stops);
+      point(t);
     };
   },
 };

package/packages/patterns/src/sfx.ts

@@ -0,0 +1,80 @@
+import { cue } from "@kasaframe/core";
+import type { ThemeSlots } from "./types.ts";
+
+// 패턴이 부르는 테마 슬롯에 소리 자리를 단다 — 테마 슬롯도 패턴 기본 슬롯도 같은 자리에서 소리가 나고, 장면·테마 코드는 그대로다
+
+/** 글 찍기 소리 간격(초) — 글자마다 내면 1초에 열 번이 넘어 밀도 상한에 다 잘린다 */
+const TYPE_EVERY = 0.09;
+const TYPE_MAX = 10;
+
+export function withSfx<S extends ThemeSlots>(s: S): S {
+  const out: ThemeSlots = { ...s };
+  if (s.panel)
+    out.panel = (el, o) => {
+      const paint = s.panel!(el, o);
+      return (t) => {
+        cue("appear", t - o.at, { source: `panel:${o.seed}@${o.at.toFixed(3)}`, scene: o.ctx.id, weight: 0.8, minor: true });
+        paint(t);
+      };
+    };
+  if (s.land)
+    out.land = (el, o) => {
+      const style = s.land!(el, o);
+      return (t) => {
+        cue("land", t - o.at, { source: `land:${o.seed}@${o.at.toFixed(3)}`, scene: o.ctx.id });
+        return style(t);
+      };
+    };
+  if (s.write)
+    out.write = (el, o) => {
+      const paint = s.write!(el, o);
+      const n = Math.min(TYPE_MAX, Math.max(1, Math.floor(o.dur / TYPE_EVERY)));
+      return (t) => {
+        const k = Math.floor((t - o.at) / TYPE_EVERY);
+        for (const j of [k - 1, k]) if (j >= 0 && j < n) cue("type", t - o.at - j * TYPE_EVERY, { source: `write:${o.seed}:${j}@${o.at.toFixed(3)}`, scene: o.ctx.id, minor: true });
+        paint(t);
+      };
+    };
+  if (s.drop)
+    out.drop = (el, o) => {
+      const burst = s.drop!(el, o);
+      const at = o.ctx.beats.drop(o.drop);
+      return (t) => {
+        cue("drop", t - at, { source: `slot-drop:${o.drop}`, scene: o.ctx.id });
+        return burst(t);
+      };
+    };
+  return out as S;
+}
+
+/** 쾅 앉는 순간 — kit slam 이 부른다 */
+export const slamCue = (t: number, at: number): void => cue("land", t - at, { source: `slam@${at.toFixed(3)}` });
+
+/** 짚개가 요점(핵심 값)으로 옮겨 가는 순간 딸깍 — 요점만 짚으니 잔소리가 아니다 */
+export const keyCue = (t: number, at: number): void => cue("select", t - at, { source: `glider@${at.toFixed(3)}`, weight: 0.8 });
+
+/** 박마다 훑는 짚개가 주인공(핵심 값)에 닿는 순간 딸깍 — 곁가지에 닿는 것은 잔소리. 첫 정지점은 짚개가 나타나는 자리라 빼고 */
+export function stopCues(t: number, stops: readonly number[], key: (k: number) => boolean = () => true): void {
+  for (let j = 1; j < stops.length - 1; j++)
+    if (t >= stops[j] && t < stops[j] + 0.2) cue("select", t - stops[j], { source: `glider@${stops[j].toFixed(3)}`, weight: 0.8, minor: !key(j) });
+}
+
+/**
+ * 숫자 굴림이 째깍거리는 시각 — 진행도 p(x)(감속)가 k/n 을 지나는 x 에. 빨리 구르는 앞은 촘촘, 앉기 전은 띄엄띄엄(슬롯 머신처럼).
+ * p 는 단조라 이분법으로 거꾸로 푼다
+ */
+export function rollCues(t: number, o: { at: number; dur: number; p: (x: number) => number; n?: number }): void {
+  if (t < o.at || t > o.at + o.dur + 0.2) return;
+  const n = o.n ?? Math.max(3, Math.min(10, Math.round(o.dur / 0.12)));
+  for (let k = 1; k <= n; k++) {
+    let lo = 0;
+    let hi = 1;
+    for (let i = 0; i < 24; i++) {
+      const mid = (lo + hi) / 2;
+      if (o.p(mid) < k / n) lo = mid;
+      else hi = mid;
+    }
+    const at = o.at + hi * o.dur;
+    cue(k === n ? "land" : "tick", t - at, { source: `roll:${k}@${o.at.toFixed(3)}`, weight: k === n ? 0.8 : 0.7, minor: k !== n });
+  }
+}

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/term-reveal/chips.ts

@@ -1,12 +1,13 @@
 import { applyStyle, clamp, spring } from "@kasaframe/core";
 import { fitSize, textEm } from "@kasaframe/motion/moves";
-import { ACCENT_TEXT, area, inverseOver, moving, node, slotsOf } from "../kit.ts";
+import { ACCENT_TEXT, area, dwells, followSpoken, glider, inverseOver, markOf, moving, node, sayTimes, slotsOf } from "../kit.ts";
 import type { TermContent } from "./expand.ts";
 import type { Pattern } from "../types.ts";
 
 /**
  * 용어 해부 — 약자가 큰 판 위에 서고, 풀이 낱말이 박마다 하나씩 판 아래 칩으로 톡 붙는다(첫 글자는 강조색 — 약자 글자와 같은 글자).
  * 다 붙으면 한국어 이름이 판 아래에 찍히고, 판이 아래부터 강조색으로 차올라 장면 끝까지 그 용어를 짚는다.
+ * 테마가 짚는 칸 모양을 정했으면 판을 칠하지 않는다 — 짚개가 약자부터 짚는다(머무는 테마는 목소리가 풀이·한국어 이름을 말할 때만 그리로).
  */
 const pattern: Pattern<TermContent> = {
   id: "term-reveal.chips",
@@ -42,11 +43,15 @@ const pattern: Pattern<TermContent> = {
     const col = node(host, `display:flex;flex-direction:column;align-items:center;gap:${Math.round(h * 0.035)}px`);
     const board = node(col, `position:relative;width:${boardW}px;height:${boardH}px`);
     const panel = slots.panel(board, { ctx, at: 0, seed: `${kit.seed}:board` });
-    const fill = node(board, "position:absolute;inset:0;background:var(--kf-accent);border-radius:var(--kf-radius-md)");
+    const mark = markOf(kit, ctx);
+    const fill = mark ? null : node(board, "position:absolute;inset:0;background:var(--kf-accent);border-radius:var(--kf-radius-md)");
     const face = (lit: boolean) =>
       node(board, `position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--kf-font-display);font-size:${termPx}px;font-weight:${ctx.style.type?.weightDisplay ?? 800};letter-spacing:0.04em;color:${lit ? "var(--kf-on-accent)" : "var(--kf-ink)"}`, c.term);
-    face(false);
-    const lit = face(true);
+    const plain = face(false);
+    const lit = mark ? null : face(true);
+    // 짚개가 잴 약자 글 상자 — 판 전체가 아니라 글자에 칸이 앉게
+    const termText = mark ? node(plain, "position:relative", c.term) : null;
+    if (termText) plain.firstChild!.remove();
     kit.stage?.hero(board);
     const row = words.length ? node(col, `display:flex;flex-direction:${vertical ? "column" : "row"};align-items:center;gap:${Math.round(chipPx * 0.35)}px;min-height:${Math.round(chipPx * 1.5)}px`) : null;
     const chips = words.map((wd) => {
@@ -57,17 +62,25 @@ const pattern: Pattern<TermContent> = {
     });
     const koBox = c.ko ? node(col, `position:relative;font-family:var(--kf-font-sans);font-size:${koPx}px;font-weight:700;white-space:nowrap;line-height:1.3;height:1.3em`) : null;
     const ko = koBox ? node(koBox, "color:var(--kf-ink)") : null;
-    const koMark = koBox ? inverseOver(koBox, c.ko!) : null;
+    const koMark = koBox && !mark ? inverseOver(koBox, c.ko!) : null;
+    // 짚개가 이름 자리를 찍히기 전부터 짚는다 — 빈 상자는 폭이 0 이라 칸이 점으로 줄어든다
+    if (koBox && mark) koBox.style.cssText += `;min-width:${Math.round(textEm(c.ko!) * koPx)}px;text-align:center`;
 
-    const hits = kit.hits.length ? kit.hits : [0];
     const boardAt = kit.first ? -0.3 : 0;
-    const chipAt = words.map((_, i) => hits.find((b) => b >= 0.12 + i * 0.3) ?? 0.2 + i * 0.3);
-    const koAt = (chipAt[chipAt.length - 1] ?? 0.2) + 0.3;
+    // 머무는 짚개 테마는 풀이 칩·한국어 이름을 목소리가 그것을 말할 때 붙인다(못 들으면 판이 열린 뒤부터 장면 끝 무렵까지 박에 붙여 고르게) —
+    // 처음에 몰아 띄우면 남은 시간이 빈다. 붙을 때마다 카메라가 그쪽으로 다가간다. 훑는 테마는 0.3초 간격 박에 붙인다(판 차오름이 끝까지 간다)
+    const hits = kit.hits.length ? kit.hits : [0];
+    const times = dwells(kit, ctx) ? sayTimes(kit, [...words, c.ko], 0.12, Math.max(0.6, ctx.dur - 0.9)) : null;
+    const chipAt = words.map((_, i) => times?.[i] ?? hits.find((b) => b >= 0.12 + i * 0.3) ?? 0.2 + i * 0.3);
+    const koAt = c.ko && times ? times[words.length] : (chipAt[chipAt.length - 1] ?? 0.2) + 0.3;
+    followSpoken(kit, ctx, [...chips.map((el, i) => ({ at: chipAt[i], el })), ...(koBox ? [{ at: koAt, el: koBox }] : [])]);
     const koDur = c.ko ? clamp([...c.ko].length * 0.05, 0.25, 0.6) : 0;
     // 판이 열리는 것만으로는 밝은 바탕에서 화면이 바뀐 것으로 안 읽힌다 — 차오름을 곧바로 시작한다
     const fillFrom = 0;
     const writeKo = ko ? slots.write(ko, { ctx, text: c.ko!, at: koAt, dur: koDur, seed: `${kit.seed}:ko` }) : null;
     const lands = chips.map((ch, i) => slots.land(ch, { ctx, at: chipAt[i], seed: `${kit.seed}:c${i}` }));
+    // 판이 열리면 짚개가 약자부터 짚고, 머무는 테마는 목소리가 풀이·한국어 이름을 말할 때만 그리로 옮긴다 — 칠한 판이 차오르던 몫
+    const point = termText ? glider(host, [{ el: termText, text: c.term }, ...(row ? [{ el: row, text: words.join(" ") }] : []), ...(koBox ? [{ el: koBox, text: c.ko }] : [])], { kit, ctx, from: boardAt + 0.2 }) : null;
 
     return (t: number) => {
       moving("term-reveal.chips", ctx);
@@ -81,8 +94,9 @@ const pattern: Pattern<TermContent> = {
       // 판은 칩이 붙기 시작할 때부터 장면 끝까지 차오른다 — 용어를 짚는 몫
       const k = clamp((t - fillFrom) / Math.max(0.3, ctx.dur - fillFrom - 0.05));
       const clip = `inset(${((1 - k) * 100).toFixed(2)}% 0 0 0)`;
-      fill.style.clipPath = clip;
-      lit.style.clipPath = clip;
+      if (fill) fill.style.clipPath = clip;
+      if (lit) lit.style.clipPath = clip;
+      point?.(t);
       writeKo?.(t);
       koMark?.((t - koAt - koDur) / Math.max(0.2, ctx.dur - koAt - koDur - 0.05));
     };

package/packages/patterns/src/term-reveal/expand.ts

@@ -1,6 +1,6 @@
 import { applyStyle, clamp, ease, progress } from "@kasaframe/core";
 import { fitSize, textEm } from "@kasaframe/motion/moves";
-import { ACCENT_TEXT, area, beatStops, fitOnce, glider, moving, node, slotsOf } from "../kit.ts";
+import { ACCENT_TEXT, area, dwells, fitOnce, followSpoken, glider, moving, node, sayTimes, slotsOf } from "../kit.ts";
 import type { Pattern } from "../types.ts";
 
 export interface TermContent {
@@ -21,12 +21,12 @@ function spell(term: string, full: string | undefined): string[] | null {
 
 /**
  * 용어 공개 — 약자가 크게 서고, 약자 글자마다 풀이 낱말이 그 글자에서 아래로 펴져 나온다(글자 → 낱말이 같은 첫 글자로 이어진다).
- * 풀이가 약자와 안 맞으면 풀이 한 줄이 펴진다. 그다음 한국어 이름이 찍히고, 짚개가 약자와 풀이 낱말을 번갈아 박마다 짚는다.
+ * 풀이가 약자와 안 맞으면 풀이 한 줄이 펴진다. 그다음 한국어 이름이 찍히고, 짚개가 약자부터 짚는다(머무는 테마는 목소리가 풀이 낱말·이름을 말할 때만 그리로).
  */
 const pattern: Pattern<TermContent> = {
   id: "term-reveal.expand",
   type: "term-reveal",
-  does: "약자가 서고 글자마다 풀이 낱말이 펴진다, 한국어 이름이 찍히고 짚개가 약자와 풀이를 번갈아 짚는다",
+  does: "약자가 서고 글자마다 풀이 낱말이 펴진다, 한국어 이름이 찍히고 짚개가 약자부터 짚는다",
   energy: ["mid"],
   family: "mask",
   camera: ["none"],
@@ -83,17 +83,21 @@ const pattern: Pattern<TermContent> = {
     // 펴기는 약자가 서자마자 낱말마다 이어서 — 사이에 빈 틈이 있으면 화면이 선 것으로 읽힌다
     const unfoldAt = termAt + 0.06 * Math.max(0, chars.length - 1) + 0.2;
     const each = parts.length > 1 ? 0.3 : 0;
-    const unfoldEnd = unfoldAt + each * Math.max(0, parts.length - 1) + 0.35;
-    const koAt = parts.length ? unfoldEnd : termAt + 0.2;
     const koDur = c.ko ? clamp([...c.ko].length * 0.05, 0.25, 0.6) : 0;
-    const meanAt = koAt + koDur;
+    // 머무는 짚개 테마는 풀이 낱말·한국어 이름·뜻을 목소리가 그것을 말할 때 펴고 찍는다(못 들으면 약자가 선 뒤부터 장면 끝 무렵까지 박에 붙여 고르게).
+    // 펴지고 찍힐 때마다 카메라가 그쪽으로 다가간다. 훑는 테마는 약자가 서자마자 낱말마다 0.3초 간격으로 이어 편다
+    const said = dwells(kit, ctx) ? sayTimes(kit, [...parts.map((_, i) => (words ?? [fullText])[i]), c.ko, c.meaning], unfoldAt, Math.max(unfoldAt + 0.3, ctx.dur - 0.9)) : null;
+    const partAt = parts.map((_, i) => said?.[i] ?? unfoldAt + i * each);
+    const unfoldEnd = unfoldAt + each * Math.max(0, parts.length - 1) + 0.35;
+    const koAt = said && (parts.length || kit.say.length || kit.lines.length) ? said[parts.length] : parts.length ? unfoldEnd : termAt + 0.2;
+    const meanAt = Math.max(koAt + koDur, said?.[parts.length + 1] ?? 0);
+    followSpoken(kit, ctx, [...parts.map((p, i) => ({ at: partAt[i], el: p.box })), ...(ko ? [{ at: koAt, el: ko }] : []), ...(meaning ? [{ at: meanAt, el: meaning }] : [])]);
     const meanDur = meaning ? clamp([...c.meaning!].length * 0.035, 0.4, 1.2) : 0;
     // 짚음은 첫 낱말이 다 펴지자마자 — 펴기와 겹쳐 장면 끝까지 이어진다
     // 풀이 낱말이 없으면(약자가 아닌 용어) 펼 것이 없다 — 용어가 서자마자 짚기 시작한다
-    const markFrom = parts.length ? unfoldAt + Math.max(each, 0.3) : termAt + 0.06 * Math.max(0, chars.length - 1) + 0.12;
-    // 짚개 — 약자와 풀이 낱말·한국어 이름을 번갈아 짚는다(약자 → 낱말 → 약자 → 다음 낱말 …). 빠르기는 박이 정한다
-    const point = glider(host, [termEl, ...parts.map((p) => p.box), ...(ko ? [ko] : [])], { hub: true });
-    const stops = beatStops(kit.hits, markFrom, ctx.dur);
+    const markFrom = parts.length ? partAt[0] + Math.max(each, 0.3) : termAt + 0.06 * Math.max(0, chars.length - 1) + 0.12;
+    // 짚개 — 약자부터 짚고, 머무는 테마는 목소리가 풀이 낱말·한국어 이름(풀이·이름이 없으면 뜻)을 말할 때만 그리로 옮긴다
+    const point = glider(host, [{ el: termEl, text: c.term }, ...parts.map((p, i) => ({ el: p.box, text: (words ?? [fullText])[i] })), ...(ko ? [{ el: ko, text: c.ko }] : []), ...(meaning && !parts.length && !ko ? [{ el: meaning, text: c.meaning }] : [])], { kit, ctx, from: markFrom });
 
     const writeKo = ko ? slots.write(ko, { ctx, text: c.ko!, at: koAt, dur: koDur, seed: `${kit.seed}:ko` }) : null;
     const writeMeaning = meaning ? slots.write(meaning, { ctx, text: c.meaning!, at: meanAt, dur: meanDur, seed: `${kit.seed}:m` }) : null;
@@ -106,18 +110,18 @@ const pattern: Pattern<TermContent> = {
         const p = ease.outExpo(progress(t, termAt + i * 0.06, 0.3));
         applyStyle(ch, { y: (1 - p) * termPx * 0.4, opacity: p });
         // 약자 글자는 제 낱말이 펴질 때 강조색으로 — 글자와 낱말이 이어진다
-        const k = words ? clamp((t - (unfoldAt + i * each)) / 0.2) : 0;
+        const k = words ? clamp((t - ((partAt[i] ?? unfoldAt))) / 0.2) : 0;
         ch.style.color = k > 0.5 ? ACCENT_TEXT : "var(--kf-ink)";
       });
       applyStyle(termEl, landed(t));
       parts.forEach((pt, i) => {
         // 고른 빠르기로 편다 — 감속 끝자락이 길면 그 사이가 멈춘 화면이 된다
-        const p = progress(t, unfoldAt + i * each, 0.3);
+        const p = progress(t, (partAt[i] ?? unfoldAt), 0.3);
         pt.box.style.width = `${(p * pt.em * fullPx * 1.02).toFixed(1)}px`;
         pt.box.style.visibility = p > 0 ? "visible" : "hidden";
       });
       // 풀이를 낱말 차례로 반전해 짚는다 — 펴기가 끝난 뒤 장면 끝까지
-      point(t, stops);
+      point(t);
       writeKo?.(t);
       writeMeaning?.(t);
     };

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, glider, node, riseName, slotsOf, moving } 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 {
@@ -12,12 +12,12 @@ export interface TitleContent {
 
 /**
  * 이름이 글자마다 아래에서 가림막을 뚫고 올라와 서고(드러냄), 카메라가 그 이름으로 한 번 다가간다 — 다가감의 이유가 드러냄이다.
- * 다가가는 동안 밑줄·부제가 서고, 짚개가 이름과 작은 글을 박마다 번갈아 짚는다.
+ * 다가가는 동안 밑줄·부제가 서고, 작은 글이 있으면 짚개가 이름부터 짚는다(머무는 테마는 목소리가 작은 글을 말할 때만 그리로).
  */
 const pattern: Pattern<TitleContent> = {
   id: "title.mask",
   type: "title",
-  does: "이름이 글자마다 가림막을 뚫고 서고, 다가가는 동안 짚개가 이름과 작은 글을 번갈아 짚는다",
+  does: "이름이 글자마다 가림막을 뚫고 서고, 다가가는 동안 짚개가 이름부터 짚는다",
   energy: ["mid"],
   family: "mask",
   camera: ["pushIn"],
@@ -58,20 +58,25 @@ 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) });
-    // 이름이 선 뒤엔 짚개가 이름 ↔ 위 작은 글·부제를 박마다 번갈아 짚는다(카메라를 끈 영상에서도 쉬지 않는 몫, 장면이 길어도 박이 빠르기를 정한다)
-    const point = glider(host, [name, ...(kicker ? [kicker] : []), ...(sub ? [sub] : [])], { hub: true });
-    const stops = beatStops(kit.hits, Math.min(settle, nameAt + 0.35), ctx.dur);
+    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 && !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` });
 
     return (t: number) => {
       moving("title.mask", ctx);
-      paintName(t, { riseAt: nameAt, each, fill: 0 });
-      point(t, stops);
+      paintName(t, { riseAt: nameAt, each, fill: 0, up: again ? reread(t, again) : undefined });
+      point(t);
       applyStyle(name, landed(t));
 
       applyStyle(bar, sweep(t, { at: sweepAt, dur: 0.3 }));

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

@@ -7,7 +7,7 @@ const pattern: Pattern<TitleContent> = {
   ...endSlam,
   id: "title.slam",
   type: "title",
-  does: "옅은 자리표 이름이 먼저 서고 드롭에 꽉 찬 이름이 쾅 내려앉는다, 부제·작은 글이 붙고 짚개가 번갈아 짚는다",
+  does: "옅은 자리표 이름이 먼저 서고 드롭에 꽉 찬 이름이 쾅 내려앉는다, 부제·작은 글이 붙고 짚개가 이름부터 짚는다",
   purposes: { prefer: ["promo", "launch", "ad", "mv"] },
   fits(c, info) {
     if (typeof c?.title !== "string" || !c.title.trim() || [...c.title].length > 16) return "title 이 비었거나 16자를 넘는다";

package/packages/patterns/src/types.ts

@@ -40,6 +40,7 @@ export interface Kit {
   seed: string;
   hits: number[];
   say: SpokenWord[];
+  lines: SpokenWord[];
   slots: ThemeSlots;
   stage: StageLike;
   policy: TextPolicy;