kasaframe 0.0.0-stage → 0.1.3

package/packages/motion/src/type.ts

@@ -0,0 +1,131 @@
+import { rand, safeTime } from "@kasaframe/core";
+import { typingFrames } from "./hangul.ts";
+
+export interface TypeOpts {
+  /** 첫 키를 누르는 시각(초) */
+  at?: number;
+  /** 초당 키 수. 한글은 자모 하나가 키 하나 */
+  cps?: number;
+  /** 키 간격을 시드 난수로 ±비율만큼 흔든다 — 사람 손 같게. 0 이면 고르게 */
+  jitter?: number;
+  seed?: number | string;
+  /** 띄어쓰기·문장부호 뒤에 쉬는 배수 */
+  pause?: { space?: number; comma?: number; stop?: number; newline?: number };
+  ime?: boolean;
+  /** 커서 깜빡임 주기(초). 0 이면 늘 보인다 */
+  blink?: number;
+}
+
+export interface TypeState {
+  /** 지금 화면에 보일 글 — 언제나 문자열 */
+  text: string;
+  keys: number;
+  total: number;
+  done: boolean;
+  /** 0..1 */
+  p: number;
+  /** 커서를 그릴지 */
+  caret: boolean;
+  /** 마지막 키를 누른 뒤 지난 초 — 키 누름 튐 연출에 */
+  sinceKey: number;
+  /** 다 치는 데 걸리는 초 */
+  duration: number;
+}
+
+interface Plan {
+  frames: string[];
+  times: number[];
+  duration: number;
+}
+
+const cache = new Map<string, Plan>();
+
+function planOf(text: string, o: Required<Omit<TypeOpts, "at" | "blink">>): Plan {
+  const key = JSON.stringify([text, o.cps, o.jitter, o.seed, o.pause, o.ime]);
+  const hit = cache.get(key);
+  if (hit) return hit;
+  const frames = typingFrames(text, { ime: o.ime });
+  const base = 1 / Math.max(0.1, o.cps);
+  const times: number[] = [0];
+  let t = 0;
+  for (let k = 1; k < frames.length; k++) {
+    if (k > 1) {
+      const typed = frames[k - 1];
+      const last = typed.slice(-1);
+      let mul = 1;
+      if (last === "\n") mul = o.pause.newline ?? 6;
+      else if (/[.!?…。]/.test(last)) mul = o.pause.stop ?? 5;
+      else if (/[,、·:;]/.test(last)) mul = o.pause.comma ?? 3;
+      else if (last === " ") mul = o.pause.space ?? 1.6;
+      const j = o.jitter > 0 ? 1 + (rand(o.seed, k) * 2 - 1) * o.jitter : 1;
+      t += base * mul * j;
+    }
+    times.push(t);
+  }
+  const plan = { frames, times, duration: t };
+  if (cache.size > 256) cache.clear();
+  cache.set(key, plan);
+  return plan;
+}
+
+/** 첫 키 시각 at 부터 한 키씩 친다. times[k] 는 at 기준으로 k 번째 키를 누르는 때 */
+export function typeText(text: string, t: number, opts: TypeOpts = {}): TypeState {
+  t = safeTime(t);
+  // 글이 아닌 값이 오면 빈 글 — String(NaN)·String(undefined) 가 그대로 화면에 찍히던 사고를 막는다
+  const src = typeof text === "string" ? text : typeof text === "number" && Number.isFinite(text) ? String(text) : "";
+  const o = {
+    cps: opts.cps ?? 16,
+    jitter: opts.jitter ?? 0.35,
+    seed: opts.seed ?? src,
+    pause: opts.pause ?? {},
+    ime: opts.ime ?? true,
+  };
+  const plan = planOf(src, o);
+  const local = t - (opts.at ?? 0);
+  const total = plan.frames.length - 1;
+  let k = 0;
+  if (local >= 0) {
+    let lo = 1;
+    let hi = total;
+    k = 0;
+    while (lo <= hi) {
+      const mid = (lo + hi) >> 1;
+      if (plan.times[mid] <= local + 1e-9) {
+        k = mid;
+        lo = mid + 1;
+      } else hi = mid - 1;
+    }
+  }
+  const done = k >= total;
+  const sinceKey = k > 0 ? local - plan.times[k] : Math.max(0, local);
+  const blink = opts.blink ?? 1.06;
+  // 치는 동안은 켜 두고 멈춰 있을 때만 깜빡인다 — 칠 때 깜빡이면 글자가 끊겨 보인다
+  const phase = (x: number) => Number.isFinite(x) && ((x % blink) + blink) % blink < blink / 2;
+  const caret = blink <= 0 || (k > 0 && !done) || phase(done ? local - plan.duration : local);
+  return {
+    text: plan.frames[k] ?? "",
+    keys: k,
+    total,
+    done,
+    p: total === 0 ? 1 : k / total,
+    caret,
+    sinceKey,
+    duration: plan.duration,
+  };
+}
+
+/** 여러 줄을 차례로 — 앞 줄이 끝나고 gap 초 뒤에 다음 줄 */
+export function typeLines(lines: string[], t: number, opts: TypeOpts & { gap?: number } = {}): (TypeState & { line: number })[] {
+  t = safeTime(t);
+  const out: (TypeState & { line: number })[] = [];
+  let at = opts.at ?? 0;
+  for (let i = 0; i < lines.length; i++) {
+    const s = typeText(lines[i], t, { ...opts, at, seed: `${opts.seed ?? ""}${i}` });
+    out.push({ ...s, line: i });
+    at += s.duration + (opts.gap ?? 0.35);
+  }
+  return out;
+}
+
+/** 다 치는 데 걸리는 초 — 장면 길이를 맞출 때 */
+export const typeDuration = (text: string, opts: TypeOpts = {}): number => typeText(text, Infinity, opts).duration;

package/packages/motion/src/ui.ts

@@ -0,0 +1,172 @@
+import { progress, toEase, type Ease, type EaseName, safeTime } from "@kasaframe/core";
+import { typeText, type TypeOpts } from "./type.ts";
+
+export interface CursorKey {
+  /** 이 자리에 닿는 시각(초) */
+  t: number;
+  x: number;
+  y: number;
+  /** 닿은 뒤 누른다 */
+  click?: boolean;
+}
+
+export interface CursorState {
+  x: number;
+  y: number;
+  /** 누르고 있는 중 — 커서를 살짝 줄인다 */
+  pressed: boolean;
+  /** 누른 자리에서 퍼지는 물결. 없으면 null */
+  ripple: { x: number; y: number; scale: number; opacity: number } | null;
+}
+
+/** 키 사이를 감속 곡선으로 옮긴다. 사람 손처럼 살짝 휘게 가운데를 옆으로 민다 */
+export function cursor(t: number, keys: CursorKey[], opts: { ease?: EaseName | Ease; arc?: number; pressDur?: number } = {}): CursorState {
+  t = safeTime(t);
+  if (keys.length === 0) return { x: 0, y: 0, pressed: false, ripple: null };
+  const ks = keys.slice().sort((a, b) => a.t - b.t);
+  const ease = toEase(opts.ease, toEase("inOutCubic"));
+  let x = ks[0].x;
+  let y = ks[0].y;
+  for (let i = 1; i < ks.length; i++) {
+    const a = ks[i - 1];
+    const b = ks[i];
+    if (t <= a.t) break;
+    // 앞 키에서 누른 시간만큼 기다렸다가 떠난다
+    const leave = a.t + (a.click ? (opts.pressDur ?? 0.14) + 0.08 : 0);
+    const p = ease(progress(t, leave, Math.max(0.05, b.t - leave)));
+    const bend = Math.sin(Math.PI * p) * (opts.arc ?? 0.12);
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    x = a.x + dx * p - dy * bend;
+    y = a.y + dy * p + dx * bend;
+  }
+  const press = opts.pressDur ?? 0.14;
+  let pressed = false;
+  let ripple: CursorState["ripple"] = null;
+  for (const k of ks) {
+    if (!k.click) continue;
+    const d = t - k.t;
+    if (d >= 0 && d < press) pressed = true;
+    if (d >= 0 && d < 0.6) {
+      const q = toEase("outCubic")(d / 0.6);
+      ripple = { x: k.x, y: k.y, scale: 0.2 + q, opacity: (1 - q) * 0.6 };
+    }
+  }
+  return { x, y, pressed, ripple };
+}
+
+/** 막대·수치가 자란다. values 마다 stagger 만큼 늦게 */
+export function grow(t: number, values: number[], opts: { at?: number; dur?: number; stagger?: number; ease?: EaseName | Ease; from?: number } = {}): number[] {
+  t = safeTime(t);
+  const ease = toEase(opts.ease, toEase("outCubic"));
+  return values.map((v, i) => {
+    const target = Number.isFinite(v) ? v : 0;
+    const from = opts.from ?? 0;
+    return from + (target - from) * ease(progress(t, (opts.at ?? 0) + i * (opts.stagger ?? 0.08), opts.dur ?? 0.9));
+  });
+}
+
+/** 선 그리기 진행도 — SVG stroke-dashoffset = 길이 × (1 - p) */
+export const draw = (t: number, opts: { at?: number; dur?: number; ease?: EaseName | Ease } = {}): number =>
+  toEase(opts.ease, toEase("inOutCubic"))(progress(t, opts.at ?? 0, opts.dur ?? 1));
+
+export interface CodeState {
+  lines: string[];
+  /** 지금 쓰는 줄(강조용). 다 나왔으면 -1 */
+  active: number;
+  done: boolean;
+}
+
+/** 코드 블록 — 줄 단위로 나타나거나(line) 타자로 친다(type) */
+export function codeReveal(code: string, t: number, opts: { at?: number; mode?: "line" | "type"; lps?: number } & TypeOpts = {}): CodeState {
+  t = safeTime(t);
+  const src = typeof code === "string" ? code : "";
+  const all = src.split("\n");
+  if ((opts.mode ?? "line") === "type") {
+    const st = typeText(src, t, { cps: 40, jitter: 0.2, pause: { newline: 3 }, ...opts });
+    const lines = st.text.split("\n");
+    return { lines, active: st.done ? -1 : lines.length - 1, done: st.done };
+  }
+  const local = t - (opts.at ?? 0);
+  const n = local < 0 ? 0 : Math.min(all.length, Math.floor(local * (opts.lps ?? 8)) + 1);
+  return { lines: all.slice(0, n), active: n < all.length ? n - 1 : -1, done: n >= all.length };
+}
+
+export interface TermStep {
+  cmd: string;
+  /** 명령 뒤에 나오는 출력 줄 */
+  out?: string | string[];
+  prompt?: string;
+  /** 앞 단계가 끝나고 이 명령을 치기 전에 쉬는 초 */
+  wait?: number;
+}
+
+export interface TermLine {
+  kind: "cmd" | "out";
+  prompt: string;
+  text: string;
+  /** 커서가 이 줄 끝에 있다 */
+  caret: boolean;
+}
+
+export interface TermState {
+  lines: TermLine[];
+  done: boolean;
+  /** 마지막 키를 누른 뒤 지난 초 */
+  sinceKey: number;
+}
+
+/**
+ * 터미널 창 + 입력. 명령은 타자로, 출력은 outDelay 뒤 줄마다 lineDelay 간격으로 나온다.
+ * 아직 안 온 줄은 아예 만들지 않는다 — 빈 줄을 그려 두면 자리가 비어 보인다.
+ */
+export function terminal(
+  t: number,
+  steps: TermStep[],
+  opts: { at?: number; prompt?: string; outDelay?: number; lineDelay?: number; maxLines?: number } & TypeOpts = {},
+): TermState {
+  t = safeTime(t);
+  const lines: TermLine[] = [];
+  let at = opts.at ?? 0;
+  let sinceKey = Infinity;
+  let done = true;
+  for (let i = 0; i < steps.length; i++) {
+    const s = steps[i];
+    at += s.wait ?? (i === 0 ? 0 : 0.5);
+    if (t < at) {
+      done = false;
+      lines.push({ kind: "cmd", prompt: s.prompt ?? opts.prompt ?? "$", text: "", caret: true });
+      break;
+    }
+    const st = typeText(s.cmd, t, { ...opts, at, seed: `${opts.seed ?? "term"}${i}` });
+    lines.push({ kind: "cmd", prompt: s.prompt ?? opts.prompt ?? "$", text: st.text, caret: !st.done });
+    sinceKey = Math.min(sinceKey, st.sinceKey);
+    if (!st.done) {
+      done = false;
+      break;
+    }
+    at += st.duration + (opts.outDelay ?? 0.25);
+    const outs = s.out === undefined ? [] : Array.isArray(s.out) ? s.out : s.out.split("\n");
+    for (let j = 0; j < outs.length; j++) {
+      const show = at + j * (opts.lineDelay ?? 0.06);
+      if (t < show) {
+        done = false;
+        break;
+      }
+      lines.push({ kind: "out", prompt: "", text: typeof outs[j] === "string" ? outs[j] : "", caret: false });
+    }
+    if (!done) break;
+    at += outs.length * (opts.lineDelay ?? 0.06);
+  }
+  const last = lines[lines.length - 1];
+  if (done && last) lines.push({ kind: "cmd", prompt: opts.prompt ?? "$", text: "", caret: true });
+  const max = opts.maxLines ?? 0;
+  return { lines: max > 0 ? lines.slice(-max) : lines, done, sinceKey: Number.isFinite(sinceKey) ? sinceKey : 0 };
+}
+
+/** 문자열이 화면에 찍히기 전 마지막 거름 — 이상한 값이면 빈 글 */
+export function safeText(v: unknown): string {
+  if (typeof v === "string") return v;
+  if (typeof v === "number" && Number.isFinite(v)) return String(v);
+  return "";
+}

package/packages/patterns/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@kasaframe/patterns",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./src/*.ts"
+  },
+  "dependencies": {
+    "@kasaframe/core": "0.0.0",
+    "@kasaframe/motion": "^0.0.0",
+    "@kasaframe/themes": "0.0.0"
+  }
+}

package/packages/patterns/src/bars/rank.ts

@@ -0,0 +1,119 @@
+import { applyStyle, clamp, combine } from "@kasaframe/core";
+import { fitSize, textEm } from "@kasaframe/motion/moves";
+import { area, beatStops, decimalsOf, factRoll, glider, node, slotsOf, spaced, moving } from "../kit.ts";
+import { cssColor, objectFor } from "../objects.ts";
+import type { Pattern } from "../types.ts";
+
+export interface BarsContent {
+  items: { label: string; value: number; unit?: string }[];
+  unit?: string;
+  highlight?: string;
+  source?: string;
+}
+
+/**
+ * 막대가 순위대로 박마다 한 줄씩 자라고 값이 같은 진행도로 굴러 오른다(막대 길이 = 값). 다 자라면 짚개가 강조 줄과 다른 줄을 번갈아 짚는다.
+ * 단위·이름이 객체 사전의 막대 물체면(지연 ms) 그 색·모서리. 자라는 시각을 장면 끝까지 펴서 쉬지 않는 몫을 막대가 진다.
+ */
+const pattern: Pattern<BarsContent> = {
+  id: "bars.rank",
+  type: "bars",
+  does: "막대가 순위대로 박마다 자라고 값이 굴러 오른다, 다 자라면 짚개가 강조 줄과 다른 줄을 번갈아 짚는다",
+  energy: ["mid"],
+  family: "grow",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.5, max: 9 },
+  themes: { "og-measure": 0.6, "debug-hud": 0.4 },
+  fits(c) {
+    const items = c?.items;
+    if (!Array.isArray(items) || items.length < 2) return "items 가 둘보다 적다";
+    if (items.length > 8) return "items 가 여덟을 넘는다";
+    for (const [i, it] of items.entries()) {
+      if (typeof it?.label !== "string" || !it.label.trim()) return `items[${i}].label 이 비었다`;
+      if (!Number.isFinite(it.value) || it.value < 0) return `items[${i}].value 가 0 이상 수가 아니다`;
+    }
+    if (!items.some((it) => it.value > 0)) return "값이 다 0 이다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const rows = [...c.items].sort((a, b) => b.value - a.value);
+    const n = rows.length;
+    const max = Math.max(...rows.map((r) => r.value));
+    const hot = c.highlight ? rows.findIndex((r) => r.label === c.highlight) : 0;
+    const obj = objectFor(c.unit) ?? objectFor(rows[0].unit) ?? null;
+    const barObj = obj?.shape2d.kind === "bar" ? obj : null;
+    const barColor = barObj ? cssColor(barObj.color) : "var(--kf-accent)";
+    const radius = barObj?.shape2d.radius === "pill" ? "999px" : "var(--kf-radius-sm)";
+
+    const gridH = h * (vertical ? 0.7 : 0.84);
+    const rowH = gridH / n;
+    const barH = Math.round(rowH * 0.56);
+    const fmtVal = (r: BarsContent["items"][number], text: string) => {
+      const unit = r.unit ?? c.unit ?? "";
+      return `${text}${unit ? ` ${unit}` : ""}`;
+    };
+    // 소수 자리는 줄끼리 같게 — 746 과 612.5 가 나란히면 746.0
+    const dec = Math.max(...rows.map((r) => decimalsOf(r.value)));
+    const finals = rows.map((r) => fmtVal(r, factRoll(Infinity, { from: 0, to: r.value, at: 0, dur: 1, decimals: dec }).text));
+    const labelPx = Math.round(Math.min(rowH * 0.36, fitSize(rows.reduce((a, r) => (textEm(r.label) > textEm(a) ? r.label : a), ""), w * (vertical ? 0.9 : 0.3), rowH, { hShare: 0.36, max: 72 * u, min: 30 * u })));
+    const valPx = Math.round(Math.min(barH * 0.62, labelPx * 1.15));
+    const labelW = vertical ? 0 : Math.round(Math.max(...rows.map((r) => textEm(r.label))) * labelPx + 32 * u);
+    const valW = Math.round(Math.max(...finals.map((f) => textEm(f))) * valPx * 1.05 + 24 * u);
+    const trackW = w * 0.94 - labelW - valW;
+    const x0 = w * 0.03;
+    const y0 = (h - gridH) / 2;
+
+    const host = node(root, "position:absolute;inset:0");
+    const hits = spaced(kit.hits.length ? kit.hits : [0], 0.3);
+    // 줄마다 자라기 시작하는 박 — 마지막 줄이 끝에서 강조할 틈(0.7초)을 남기고 다 자라게 편다
+    // 줄은 박마다 하나씩 0.75초에 자란다 — 장면 길이에 맞춰 늘이면 긴 장면에서 줄 사이가 멈춘 화면이 된다
+    const growDur = 0.75;
+    const starts: number[] = [];
+    for (const b of hits) if (starts.length < n && (!starts.length || b >= starts[starts.length - 1] + 0.32)) starts.push(b);
+    while (starts.length < n) starts.push((starts[starts.length - 1] ?? 0) + 0.4);
+    const hotAt = Math.max(...starts) + growDur;
+
+    const lines = rows.map((r, i) => {
+      const y = y0 + i * rowH;
+      const row = node(host, `position:absolute;left:${x0}px;top:${y}px;width:${w * 0.94}px;height:${rowH}px`);
+      const label = node(row, vertical
+        ? `position:absolute;left:0;top:0;font-family:var(--kf-font-sans);font-size:${labelPx}px;font-weight:600;color:var(--kf-ink);white-space:nowrap;line-height:1`
+        : `position:absolute;left:0;top:50%;width:${labelW - 16 * u}px;margin-top:-0.55em;text-align:right;font-family:var(--kf-font-sans);font-size:${labelPx}px;font-weight:600;color:var(--kf-ink);white-space:nowrap;line-height:1.1;min-height:1.1em`);
+      const barTop = vertical ? labelPx * 1.2 : (rowH - barH) / 2;
+      const track = node(row, `position:absolute;left:${labelW}px;top:${barTop}px;width:${trackW}px;height:${vertical ? Math.round(rowH - labelPx * 1.4) : barH}px`);
+      const bar = node(track, `position:absolute;left:0;top:0;bottom:0;width:${((r.value / max) * 100).toFixed(3)}%;background:${i === hot ? barColor : "var(--kf-dim)"};border-radius:${radius};transform-origin:0 50%`);
+      const val = node(row, `position:absolute;top:${barTop}px;height:${vertical ? Math.round(rowH - labelPx * 1.4) : barH}px;display:flex;align-items:center;font-family:var(--kf-font-mono);font-size:${valPx}px;font-weight:700;color:var(--kf-ink);font-variant-numeric:tabular-nums;white-space:nowrap`);
+      const writeLabel = slots.write(label, { ctx, text: r.label, at: starts[i], dur: 0.25, seed: `${kit.seed}:l${i}` });
+      const landed = slots.land(val, { ctx, at: starts[i] + growDur, seed: `${kit.seed}:v${i}` });
+      return { r, i, row, bar, val, writeLabel, landed };
+    });
+    const hotLine = lines[Math.max(0, hot)];
+    kit.stage?.hero(hotLine.val);
+    // 다 자라면 짚개가 강조 줄 ↔ 다른 줄을 박마다 번갈아 짚는다 — 강조 줄과 견주는 몫
+    const point = glider(host, [hotLine.row, ...lines.filter((L) => L !== hotLine).map((L) => L.row)], { hub: true, pad: 0.04 });
+    const hotLand = slots.land(hotLine.val, { ctx, at: hotAt, seed: `${kit.seed}:hot` });
+    const stops = beatStops(kit.hits, hotAt - 0.1, ctx.dur);
+
+    return (t: number) => {
+      moving("bars.rank", ctx);
+      for (const L of lines) {
+        const at = starts[L.i];
+        L.row.style.visibility = t >= at ? "visible" : "hidden";
+        if (t < at) continue;
+        L.writeLabel(t);
+        const roll = factRoll(t, { from: 0, to: L.r.value, at, dur: growDur, decimals: dec });
+        applyStyle(L.bar, { scaleX: Math.max(0.004, roll.p) });
+        L.val.textContent = fmtVal(L.r, roll.text);
+        L.val.style.left = `${labelW + trackW * (L.r.value / max) * roll.p + 16 * u}px`;
+        applyStyle(L.val, L.i === hotLine.i ? combine(L.landed(t), hotLand(t)) : L.landed(t));
+      }
+      point(t, stops);
+    };
+  },
+};
+
+export default pattern;

package/packages/patterns/src/before-after/shrink.ts

@@ -0,0 +1,127 @@
+import { applyStyle, clamp, spring } from "@kasaframe/core";
+import { fitSize } from "@kasaframe/motion/moves";
+import { ACCENT_TEXT, area, beatStops, decimalsOf, fmt, glider, moving, node, slotsOf } from "../kit.ts";
+import { cssColor, objectFor } from "../objects.ts";
+import type { BeforeAfter } from "./strike.ts";
+import type { Pattern } from "../types.ts";
+
+/**
+ * 덜어 내기 — 전 값을 후 값 크기의 칸 여러 개(배율만큼, 많으면 60칸으로 묶어)로 쌓아 보이고, 칸이 하나씩 빠지며 값이 후 값까지 내려온다.
+ * 남는 한 칸이 후 값 — 칸 모양·색은 객체 사전(KV 칸이면 KV 칸). 늘어나는 변화면 한 칸에서 배율만큼 쌓인다. 빠지는 빠르기는 박아 둔다(초당 24칸).
+ */
+const pattern: Pattern<BeforeAfter> = {
+  id: "before-after.shrink",
+  type: "before-after",
+  does: "전 값이 후 값 크기 칸 여러 개로 쌓이고, 칸이 하나씩 빠지며 값이 후 값까지 내려와 한 칸이 남는다",
+  energy: ["mid"],
+  family: "grow",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 3, max: 10 },
+  fits(c) {
+    for (const k of ["before", "after"] as const) {
+      const s = c?.[k];
+      if (!s || typeof s.label !== "string" || !s.label.trim()) return `${k}.label 이 비었다`;
+      if (!Number.isFinite(s.value) || (s.value as number) <= 0) return `${k}.value 가 양수가 아니다`;
+    }
+    if ((c.before.unit ?? "") !== (c.after.unit ?? "")) return "두 단위가 다르다";
+    const r = Math.max(c.before.value!, c.after.value!) / Math.min(c.before.value!, c.after.value!);
+    if (r < 2) return "배율이 2 아래 — 칸으로 덜어 낼 게 없다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const { before, after } = c;
+    const shrink = before.value! > after.value!;
+    const small = shrink ? after : before;
+    const big = shrink ? before : after;
+    const times = big.value! / small.value!;
+    const count = Math.min(60, Math.round(times));
+    const per = times / count;
+    const unit = before.unit ?? "";
+    const dec = Math.max(decimalsOf(before.value!), decimalsOf(after.value!));
+    const obj = objectFor(before.label) ?? objectFor(after.label) ?? objectFor(unit) ?? objectFor("KV 칸")!;
+
+    // 칸 격자 — 사전 모양의 비율로, 위 글 몫을 뺀 자리를 채운다
+    const textH = Math.round(h * (vertical ? 0.2 : 0.24));
+    const gw = w * 0.92;
+    const gh = h * 0.94 - textH;
+    const aspect = obj.shape2d.aspect;
+    // 칸이 가장 크게 서는 열 수를 고른다
+    let cols = 1;
+    let best = 0;
+    for (let k = 1; k <= count; k++) {
+      const r = Math.ceil(count / k);
+      const size = Math.min(gw / k, (gh / r) * aspect);
+      if (size > best) {
+        best = size;
+        cols = k;
+      }
+    }
+    const rows = Math.ceil(count / cols);
+    const cell = Math.min(gw / cols, (gh / rows) * aspect);
+    const cellH = cell / aspect;
+    const gap = Math.max(2, Math.round(cell * 0.08));
+    const x0 = (w - cols * cell) / 2;
+    const y0 = textH + (gh - rows * cellH) / 2;
+
+    const host = node(root, "position:absolute;inset:0");
+    const valPx = Math.round(Math.min(textH * 0.5, fitSize(`${fmt(big.value!, dec)} ${unit}`, w * 0.5, h)));
+    const labelPx = Math.round(Math.max(36 * u, valPx * 0.4));
+    const head = node(host, `position:absolute;left:0;right:0;top:${Math.round(h * 0.02)}px;display:flex;align-items:baseline;justify-content:center;gap:${Math.round(valPx * 0.3)}px`);
+    const label = node(head, `font-family:var(--kf-font-sans);font-size:${labelPx}px;font-weight:700;color:var(--kf-ink);white-space:nowrap`);
+    const val = node(head, `font-family:var(--kf-font-display);font-size:${valPx}px;font-weight:${ctx.style.type?.weightDisplay ?? 800};color:${ACCENT_TEXT};white-space:nowrap;font-variant-numeric:tabular-nums`);
+    const color = cssColor(obj.color);
+    const cells = Array.from({ length: count }, (_, i) => {
+      const x = x0 + (i % cols) * cell;
+      const y = y0 + Math.floor(i / cols) * cellH;
+      return node(host, `position:absolute;left:${x + gap / 2}px;top:${y + gap / 2}px;width:${cell - gap}px;height:${cellH - gap}px;background:${color};border-radius:${obj.shape2d.radius === "pill" ? "999px" : "var(--kf-radius-sm)"};transform-origin:50% 50%`);
+    });
+    kit.stage?.hero(cells[0]);
+    const firstX = x0 + cell / 2;
+    const firstY = y0 + cellH / 2;
+    const centerX = w / 2;
+    const centerY = textH + gh / 2;
+    const grown = Math.min(4, (gh * 0.6) / cellH);
+
+    // 시각 — 칸이 물결로 0.6초 안에 다 서고, 그다음 초당 24칸 빠진다(늘어나면 거꾸로 쌓인다)
+    const fillEnd = 0.6;
+    const rate = 24;
+    const moveFrom = fillEnd + 0.15;
+    const moveEnd = moveFrom + (count - 1) / rate;
+    const landedAt = moveEnd + 0.05;
+    const stops = beatStops(kit.hits, landedAt + 0.1, ctx.dur);
+    const point = glider(host, [cells[0], label, val], { hub: true });
+    const writeA = slots.write(label, { ctx, text: before.label, at: 0, dur: 0.3, seed: `${kit.seed}:a` });
+    const landed = slots.land(cells[0], { ctx, at: landedAt, seed: `${kit.seed}:land` });
+
+    return (t: number) => {
+      moving("before-after.shrink", ctx);
+      // 지금 남은(또는 쌓인) 칸 수
+      const moved = clamp(Math.floor((t - moveFrom) * rate + 1e-6), 0, count - 1);
+      const shown = t < moveFrom ? (shrink ? count : 1) : shrink ? count - moved : 1 + moved;
+      cells.forEach((el, i) => {
+        const appear = shrink ? (i / count) * fillEnd : 0;
+        const on = shrink ? t >= appear && i < shown : i < shown;
+        el.style.visibility = on ? "visible" : "hidden";
+        if (!on) return;
+        if (i === 0) {
+          // 남은 한 칸이 후 값 — 가운데로 나와 커진다
+          const k = spring(Math.max(0, t - landedAt), { from: 0, to: 1, stiffness: 180, damping: 18 });
+          applyStyle(el, { ...landed(t), x: (centerX - firstX) * (t >= landedAt ? k : 0), y: (centerY - firstY) * (t >= landedAt ? k : 0), scale: 1 + (grown - 1) * (t >= landedAt ? k : 0) });
+        } else applyStyle(el, { scale: shrink ? spring(t - appear, { from: 0.3, to: 1, stiffness: 320, damping: 16 }) : 1 });
+      });
+      // 값은 남은 칸 × 한 칸 값 — 다 덜면 후 값 글 그대로(사이 값은 늘 두 사실 사이)
+      const v = t >= landedAt ? after.value! : small.value! * per * shown;
+      val.textContent = `${fmt(clamp(v, Math.min(before.value!, after.value!), Math.max(before.value!, after.value!)), dec)}${unit ? ` ${unit}` : ""}`;
+      // 라벨은 전 → 후로 바뀐다
+      if (t >= landedAt) label.textContent = after.label;
+      else writeA(t);
+      point(t, stops);
+    };
+  },
+};
+
+export default pattern;