kasaframe 0.0.0-stage → 0.1.3

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

@@ -0,0 +1,126 @@
+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 type { Pattern, SpokenWord } from "../types.ts";
+
+export interface QuoteContent {
+  text: string;
+  who?: string;
+  role?: string;
+}
+
+const norm = (s: string) => s.replace(/[^\p{L}\p{N}]/gu, "").toLowerCase();
+
+// 들리는 낱말 시각을 문장 낱말에 차례로 짝짓는다 — 못 맞추면 글자 수 비율로 고르게
+function timing(words: string[], say: SpokenWord[], from: number, to: number): [number, number][] {
+  const out: [number, number][] = [];
+  let k = 0;
+  for (const wd of words) {
+    const key = norm(wd);
+    let hit = -1;
+    for (let j = k; j < Math.min(say.length, k + 4); j++) if (key && norm(say[j].text).includes(key.slice(0, 2))) { hit = j; break; }
+    if (hit < 0) return even(words, from, to);
+    out.push([say[hit].from, say[hit].to]);
+    k = hit + 1;
+  }
+  return out;
+}
+
+function even(words: string[], from: number, to: number): [number, number][] {
+  const total = words.reduce((a, w) => a + [...w].length, 0) || 1;
+  let at = from;
+  return words.map((w) => {
+    const d = ((to - from) * [...w].length) / total;
+    const r: [number, number] = [at, at + d];
+    at += d;
+    return r;
+  });
+}
+
+/**
+ * 인용 — 문장은 처음부터 다 떠 있고, 들리는 낱말(kit.say)마다 반전 칸이 그 낱말을 왼쪽부터 채운다(내레이션이 없으면 글자 수 비율로).
+ * 끝자락에 누가 말했는지가 찍힌다. 움직이는 것은 「지금 읽는 낱말」 하나.
+ */
+const pattern: Pattern<QuoteContent> = {
+  id: "quote.karaoke",
+  type: "quote",
+  does: "문장이 떠 있고 들리는 낱말마다 반전 칸이 채워 간다, 끝에 누가 말했는지가 찍힌다",
+  energy: ["low", "mid"],
+  family: "type",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.4, max: 10 },
+  fits(c) {
+    if (typeof c?.text !== "string" || !c.text.trim()) return "text 가 비었다";
+    if ([...c.text].length > 60) return "text 가 60자를 넘는다";
+    if (c.text.trim().split(/\s+/).length < 2) return "낱말이 하나뿐이다 — words 로";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const words = c.text.trim().split(/\s+/);
+    // 줄 수를 어림해 글 크기를 고른다 — 넓이에 맞춰 두세 줄
+    const em = textEm(c.text);
+    const boxW = w * (vertical ? 0.88 : 0.84);
+    const boxH = h * (vertical ? 0.5 : 0.56);
+    let px = 40 * u;
+    for (let s = Math.round(210 * u); s >= 40 * u; s -= 4) {
+      const lines = Math.ceil((em * s * 1.08) / boxW);
+      if (lines * s * 1.3 <= boxH && lines <= 4) {
+        px = s;
+        break;
+      }
+    }
+    const whoPx = Math.round(Math.max(36 * u, px * 0.34));
+
+    const host = node(root, "position:absolute;inset:0;display:flex;align-items:center;justify-content:center");
+    const col = node(host, `display:flex;flex-direction:column;align-items:flex-start;gap:${Math.round(px * 0.3)}px;width:${boxW}px`);
+    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 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 };
+    });
+    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;
+
+    const whoDur = whoText ? clamp([...whoText].length * 0.04, 0.3, 0.7) : 0;
+    // 첫 프레임부터 읽기 시작한다 — 문장이 다 떠 있는 채로 서 있으면 멈춘 화면이다
+    const readFrom = 0;
+    // 목소리가 없으면 말하는 빠르기(글자당 0.13초)로 읽는다 — 장면 길이에 맞춰 늘이면 긴 장면에서 칸이 기어가 멈춘 화면이 된다
+    const chars = words.reduce((a, wd) => a + [...wd].length, 0);
+    const readTo = Math.min(ctx.dur - 0.05, Math.max(1.2, chars * 0.13));
+    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 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)`;
+      });
+      writeWho?.(t);
+      // 짚는 동안은 낱말 반전 칸을 걷는다 — 두 강조가 겹치면 무엇을 짚는지 흐려진다
+      if (t >= readEnd + 0.05) spans.forEach((x) => (x.hi.style.visibility = "hidden"));
+      point(t, stops);
+    };
+  },
+};
+
+export default pattern;

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

@@ -0,0 +1,22 @@
+import { wordsSlam } from "../words/moves.ts";
+import type { QuoteContent } from "./karaoke.ts";
+import type { Pattern } from "../types.ts";
+
+// 짧고 센 한 마디 — 낱말이 박마다 하나씩 띠를 꽉 채우며 쾅(낱말 리듬과 같은 그림). 누가 말했는지는 소리·자막으로 간다
+const pattern: Pattern<QuoteContent> = {
+  ...(wordsSlam as unknown as Pattern<QuoteContent>),
+  id: "quote.slam",
+  type: "quote",
+  does: "짧은 한 마디의 낱말이 박마다 하나씩 띠를 꽉 채우며 쾅",
+  fits(c) {
+    const ws = (c?.text ?? "").trim().split(/\s+/).filter(Boolean);
+    if (ws.length < 2 || ws.length > 6) return "낱말이 둘에서 여섯이 아니다 — 긴 문장은 quote.karaoke";
+    if (ws.some((x) => [...x].length > 10)) return "낱말 하나가 10자를 넘는다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    return wordsSlam.build(root, ctx, { words: c.text.trim().split(/\s+/) }, kit);
+  },
+};
+
+export default pattern;

package/packages/patterns/src/screen/focus.ts

@@ -0,0 +1,85 @@
+import { applyStyle, clamp, spring } from "@kasaframe/core";
+import { area, beatStops, moving, node, slotsOf } from "../kit.ts";
+import type { Pattern } from "../types.ts";
+
+export interface ScreenContent {
+  /** assets 기준 화면 그림 */
+  asset: string;
+  /** 짚을 곳 — box 는 그림 기준 [x, y, w, h] 0..1 */
+  focus?: { label?: string; box?: [number, number, number, number] }[];
+}
+
+/**
+ * 제품 화면 짚기 — 화면 그림이 판 위에 서고, 둘레를 어둡게 한 밝은 창이 짚을 곳(box)마다 박에 맞춰 옮겨 간다. 창 위엔 그곳 딱지.
+ * 창은 정지점 사이를 내내 움직이고 마지막 정지점은 장면 밖이라 서지 않는다 — 움직이는 것은 「지금 볼 곳」 하나.
+ */
+const pattern: Pattern<ScreenContent> = {
+  id: "screen.focus",
+  type: "screen",
+  does: "화면 그림 위에서 둘레를 어둡게 한 밝은 창이 짚을 곳마다 박에 맞춰 옮겨 가고 딱지가 붙는다",
+  energy: ["low", "mid"],
+  family: "morph",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.4, max: 10 },
+  fits(c) {
+    if (typeof c?.asset !== "string" || !c.asset.trim()) return "asset 이 비었다";
+    const f = (c.focus ?? []).filter((x) => Array.isArray(x?.box) && x.box.length === 4 && x.box.every((v) => Number.isFinite(v) && v >= 0 && v <= 1));
+    if (!f.length) return "box 가 있는 focus 가 없다 — 어디를 짚을지 지어낼 수 없다";
+    if ((c.focus ?? []).some((x) => x?.label && [...x.label].length > 16)) return "focus 딱지가 16자를 넘는다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const spots = (c.focus ?? []).filter((x) => Array.isArray(x.box) && x.box.length === 4);
+    // 화면 판 — 16:9 그림을 안전 영역에 맞춘다(세로 화면은 폭에 맞춘다)
+    const fw = Math.min(w * 0.94, (h * (vertical ? 0.6 : 0.86) * 16) / 9);
+    const fh = (fw * 9) / 16;
+    const host = node(root, "position:absolute;inset:0;display:flex;align-items:center;justify-content:center");
+    const frame = node(host, `position:relative;width:${fw}px;height:${fh}px;overflow:hidden;border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lift);border:${Math.max(3, Math.round(5 * u))}px solid var(--kf-ink)`);
+    node(frame, `position:absolute;inset:0;background:center/cover no-repeat url("${ctx.asset(c.asset)}")`);
+    const hole = node(frame, `position:absolute;left:0;top:0;width:0;height:0;border-radius:var(--kf-radius-sm);box-shadow:0 0 0 ${Math.round(fw * 2)}px rgba(0,0,0,.55), inset 0 0 0 ${Math.max(4, Math.round(6 * u))}px var(--kf-accent);visibility:hidden`);
+    const chipPx = Math.round(Math.max(30 * u, Math.min(56 * u, fh * 0.07)));
+    const chip = node(frame, `position:absolute;left:0;top:0;padding:0.1em 0.45em;font-family:var(--kf-font-sans);font-size:${chipPx}px;font-weight:800;color:var(--kf-on-accent);background:var(--kf-accent);white-space:nowrap;visibility:hidden`);
+    kit.stage?.hero(frame);
+
+    const openAt = 0;
+    const stops = beatStops(kit.hits, 0.35, ctx.dur, 0.7);
+    const rectOf = (k: number) => {
+      const [x, y, bw, bh] = spots[k % spots.length].box!;
+      return { x: x * fw, y: y * fh, w: Math.max(bw * fw, 40 * u), h: Math.max(bh * fh, 40 * u) };
+    };
+
+    return (t: number) => {
+      moving("screen.focus", ctx);
+      applyStyle(frame, { scale: spring(t - openAt, { from: 0.86, to: 1, stiffness: 240, damping: 20 }) });
+      if (t < stops[0]) {
+        hole.style.visibility = "hidden";
+        chip.style.visibility = "hidden";
+        return;
+      }
+      let j = 0;
+      while (j + 1 < stops.length && stops[j + 1] <= t) j++;
+      const p = clamp((t - stops[j]) / Math.max(1e-3, (stops[j + 1] ?? stops[j] + 1) - stops[j]));
+      const e = 0.7 * p + 0.3 * p * p * (3 - 2 * p);
+      // 첫 창은 화면 전체에서 첫 곳으로 좁혀 들어온다
+      const a = j === 0 ? { x: 0, y: 0, w: fw, h: fh } : rectOf(j - 1);
+      const b = rectOf(j);
+      const mix = (k: "x" | "y" | "w" | "h") => a[k] + (b[k] - a[k]) * e;
+      hole.style.visibility = "visible";
+      hole.style.transform = `translate(${mix("x").toFixed(1)}px, ${mix("y").toFixed(1)}px)`;
+      hole.style.width = `${mix("w").toFixed(1)}px`;
+      hole.style.height = `${mix("h").toFixed(1)}px`;
+      const label = spots[(e > 0.5 ? j : Math.max(0, j - 1)) % spots.length].label ?? "";
+      chip.textContent = label;
+      chip.style.visibility = label ? "visible" : "hidden";
+      // 딱지는 창 위(위가 모자라면 아래)
+      const top = mix("y") - chipPx * 1.6 < 0 ? mix("y") + mix("h") + chipPx * 0.3 : mix("y") - chipPx * 1.6;
+      chip.style.transform = `translate(${Math.min(mix("x"), fw - chipPx * [...label].length * 0.9).toFixed(1)}px, ${top.toFixed(1)}px)`;
+    };
+  },
+};
+
+export default pattern;

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

@@ -0,0 +1,137 @@
+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 type { Pattern } from "../types.ts";
+
+export interface StepsContent {
+  steps: { label: string; detail?: string }[];
+}
+
+/**
+ * 순서 — 번호 마디가 길 위에 차례로 서고 마디 사이 길이 그어진다. 다 서면 「지금 단계」가 첫 마디부터 걸어간다:
+ * 그 단계 카드가 아래부터 강조색으로 차오르고, 차례가 끝나면 길이 다음 마디까지 강조색으로 이어진다. 움직임이 곧 진행이다.
+ */
+const pattern: Pattern<StepsContent> = {
+  id: "steps.path",
+  type: "steps",
+  does: "번호 마디가 길 위에 서고, 지금 단계가 첫 마디부터 걸어가며 카드가 차오르고 길이 이어진다",
+  energy: ["mid"],
+  family: "draw",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.6, max: 9 },
+  themes: { "kasaterm-cells": 0.4, "riso-zine": 0.3 },
+  fits(c) {
+    const steps = c?.steps;
+    if (!Array.isArray(steps) || steps.length < 2) return "steps 가 둘보다 적다";
+    if (steps.length > 6) return "steps 가 여섯을 넘는다";
+    for (const [i, s] of steps.entries()) if (typeof s?.label !== "string" || !s.label.trim() || [...s.label].length > 16) return `steps[${i}].label 이 비었거나 16자를 넘는다`;
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const steps = c.steps;
+    const n = steps.length;
+    const showDetail = kit.policy !== "terms-only" && kit.policy !== "none";
+
+    // 마디 자리 — 가로면 한 줄, 세로면 왼쪽 세로 길
+    const cell = vertical ? (h * 0.94) / n : (w * 0.96) / n;
+    const R = Math.round(Math.min(cell * (vertical ? 0.28 : 0.2), (vertical ? w : h) * 0.09));
+    const railT = Math.max(6, Math.round(R * 0.3));
+    const center = (i: number): [number, number] => (vertical ? [R * 1.2, h * 0.03 + cell * (i + 0.5)] : [w * 0.02 + cell * (i + 0.5), h * 0.3]);
+    const cardW = vertical ? w - R * 3 : cell * 0.9;
+    const cardH = vertical ? cell * 0.84 : h * 0.5;
+    const cardPos = (i: number): [number, number] => {
+      const [x, y] = center(i);
+      return vertical ? [R * 2.6, y - cardH / 2] : [x - cardW / 2, y + R * 1.5];
+    };
+    const pieces = steps.flatMap((s) => s.label.split(/\s+/));
+    const longest = pieces.reduce((a, p) => (textEm(p) > textEm(a) ? p : a), "");
+    const labelPx = fitSize(longest, cardW * 0.82, cardH, { hShare: vertical ? 0.42 : 0.2, max: Math.round(110 * u), min: Math.round(34 * u) });
+    const detailPx = Math.round(Math.max(28 * u, labelPx * 0.42));
+
+    const hits = spaced(kit.hits.length ? kit.hits : [0], 0.3);
+    const enters = steps.map((_, i) => hits[i] ?? i * 0.35);
+
+    const host = node(root, "position:absolute;inset:0");
+    // 길 — 마디 사이 칸마다 회색 바탕 + 강조색 진행
+    const rails = steps.slice(1).map((_, i) => {
+      const [x0, y0] = center(i);
+      const [x1, y1] = center(i + 1);
+      const css = vertical
+        ? `left:${x0 - railT / 2}px;top:${y0}px;width:${railT}px;height:${y1 - y0}px`
+        : `left:${x0}px;top:${y0 - railT / 2}px;width:${x1 - x0}px;height:${railT}px`;
+      const base = node(host, `position:absolute;${css};background:var(--kf-line);transform-origin:${vertical ? "50% 0" : "0 50%"}`);
+      const prog = node(base, `position:absolute;inset:0;background:var(--kf-accent);transform-origin:${vertical ? "50% 0" : "0 50%"}`);
+      return { base, prog };
+    });
+    const dots = steps.map((_, i) => {
+      const [x, y] = center(i);
+      const d = 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.12))}px solid var(--kf-ink);background:var(--kf-bg);display:flex;align-items:center;justify-content:center;font-family:var(--kf-font-mono);font-size:${Math.round(R * 0.9)}px;font-weight:700;color:var(--kf-ink)`, String(i + 1));
+      return d;
+    });
+    const cards = steps.map((s, i) => {
+      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 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 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 };
+    });
+
+    const walkFrom = enters[n - 1] + 0.3;
+    const turn = Math.max(0.35, (ctx.dur - walkFrom) / n);
+    const turns = steps.map((_, i) => walkFrom + i * turn);
+    const ends = turns.map((t0, i) => (i + 1 < n ? turns[i + 1] : ctx.dur - 1 / ctx.meta.fps));
+
+    const writes = cards.flatMap((cd, i) =>
+      [cd.base, cd.lit].flatMap((v) => [
+        slots.write(v.label, { ctx, text: cd.s.label, at: enters[i] + 0.05, dur: 0.25, seed: `${kit.seed}:l${i}` }),
+        ...(v.detail ? [slots.write(v.detail, { ctx, text: cd.s.detail!, at: enters[i] + 0.15, dur: 0.35, seed: `${kit.seed}:d${i}` })] : []),
+      ]),
+    );
+    const lands = dots.map((d, i) => slots.land(d, { ctx, at: enters[i], seed: `${kit.seed}:n${i}` }));
+
+    return (t: number) => {
+      moving("steps.path", ctx);
+      writes.forEach((wr) => wr(t));
+      steps.forEach((_, i) => {
+        const on = t >= enters[i];
+        dots[i].style.visibility = on ? "visible" : "hidden";
+        cards[i].card.style.visibility = on ? "visible" : "hidden";
+        if (!on) return;
+        applyStyle(dots[i], combine({ scale: spring(t - enters[i], { from: 0.4, to: 1, stiffness: 320, damping: 15 }) }, lands[i](t)));
+        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)";
+        // 그 단계 차례 내내 카드가 아래부터 차오른다 — 차례 끝자락엔 길이 다음 마디로 같이 이어진다
+        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;
+      });
+      rails.forEach((r, i) => {
+        // 회색 길은 뒤 마디가 서기 직전에 그어지고, 강조색 길은 앞 단계 차례 끝자락에 다음 마디까지 이어진다
+        const g = clamp((t - (enters[i + 1] - 0.28)) / 0.28);
+        r.base.style.transform = vertical ? `scaleY(${g.toFixed(4)})` : `scaleX(${g.toFixed(4)})`;
+        const span = ends[i] - turns[i];
+        const p = clamp((t - (turns[i] + span * 0.7)) / Math.max(0.05, span * 0.3));
+        r.prog.style.transform = vertical ? `scaleY(${p.toFixed(4)})` : `scaleX(${p.toFixed(4)})`;
+      });
+    };
+  },
+};
+
+export default pattern;

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

@@ -0,0 +1,111 @@
+import { applyStyle, clamp, spring } from "@kasaframe/core";
+import { fitSize, textEm } from "@kasaframe/motion/moves";
+import { ACCENT_TEXT, area, moving, node, slotsOf } from "../kit.ts";
+import type { StepsContent } from "./path.ts";
+import type { Pattern } from "../types.ts";
+
+/**
+ * 한 번에 한 단계 — 지금 단계 카드가 화면을 크게 차지하고 아래에서 걷혀 올라오며 바뀐다. 그 단계 차례 동안 카드가 아래부터 차오르고,
+ * 차례가 끝나면 번호 딱지가 위 줄(지나온 단계)에 붙는다. 움직임이 곧 진행 — 몇 번째인지·얼마나 왔는지.
+ */
+const pattern: Pattern<StepsContent> = {
+  id: "steps.stack",
+  type: "steps",
+  does: "지금 단계 카드가 크게 바뀌며 차오르고, 끝난 단계는 위 줄에 번호 딱지로 쌓인다",
+  energy: ["low", "mid"],
+  family: "stack",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.4, max: 10 },
+  themes: { "debug-hud": 0.3, "og-measure": 0.3 },
+  fits(c) {
+    const steps = c?.steps;
+    if (!Array.isArray(steps) || steps.length < 2) return "steps 가 둘보다 적다";
+    if (steps.length > 6) return "steps 가 여섯을 넘는다";
+    for (const [i, s] of steps.entries()) if (typeof s?.label !== "string" || !s.label.trim() || [...s.label].length > 16) return `steps[${i}].label 이 비었거나 16자를 넘는다`;
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const steps = c.steps;
+    const n = steps.length;
+    const showDetail = kit.policy !== "terms-only" && kit.policy !== "none";
+
+    const rowH = Math.round(h * (vertical ? 0.1 : 0.16));
+    const chipW = (w * 0.92 - (n - 1) * 12 * u) / n;
+    const cardW = w * (vertical ? 0.9 : 0.84);
+    const cardH = h * (vertical ? 0.56 : 0.6);
+    const cardX = (w - cardW) / 2;
+    const cardY = rowH + (h - rowH - cardH) / 2;
+    const longest = steps.reduce((a, s) => (textEm(s.label) > textEm(a) ? s.label : a), "");
+    const labelPx = fitSize(longest, cardW * 0.84, cardH, { hShare: 0.26, max: Math.round(180 * u), min: Math.round(48 * u) });
+    const numPx = Math.round(labelPx * 0.62);
+    const chipPx = Math.round(Math.min(rowH * 0.36, (chipW * 0.9) / Math.max(3, textEm(longest) * 0.8 + 2)));
+
+    const hits = kit.hits.length ? kit.hits : [0];
+    const turn = ctx.dur / n;
+    const turns = steps.map((_, i) => {
+      const want = i * turn;
+      return i === 0 ? 0 : (hits.find((b) => Math.abs(b - want) < turn * 0.25) ?? want);
+    });
+    const ends = turns.map((t0, i) => (i + 1 < n ? turns[i + 1] : ctx.dur - 1 / ctx.meta.fps));
+    const host = node(root, "position:absolute;inset:0");
+    const chips = steps.map((s, i) =>
+      node(host, `position:absolute;left:${w * 0.04 + i * (chipW + 12 * u)}px;top:0;width:${chipW}px;height:${rowH}px;box-sizing:border-box;border:${Math.max(2, Math.round(3 * u))}px solid var(--kf-line);display:flex;align-items:center;justify-content:center;gap:0.4em;font-family:var(--kf-font-sans);font-size:${chipPx}px;font-weight:700;color:var(--kf-dim, var(--kf-ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 0.4em`, `${i + 1}  ${s.label}`),
+    );
+    // 카드 자리 — 늘 보이는 그릇에 카드를 겹쳐 둔다(주인공 표시·내용 상자 재기가 숨은 카드를 잡지 않게)
+    const deck = node(host, `position:absolute;left:${cardX}px;top:${cardY}px;width:${cardW}px;height:${cardH}px`);
+    const cards = steps.map((s, i) => {
+      const card = node(deck, `position:absolute;inset:0;z-index:${i + 1}`);
+      const panel = slots.panel(card, { ctx, at: turns[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 face = (lit: boolean) => {
+        const f = node(card, `position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:${Math.round(labelPx * 0.2)}px;padding:0 ${Math.round(labelPx * 0.5)}px;box-sizing:border-box;color:${lit ? "var(--kf-on-accent)" : "var(--kf-ink)"}`);
+        node(f, `font-family:var(--kf-font-mono);font-size:${numPx}px;font-weight:700;color:${lit ? "var(--kf-on-accent)" : ACCENT_TEXT}`, `${String(i + 1).padStart(2, "0")} / ${String(n).padStart(2, "0")}`);
+        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`);
+        const detail = showDetail && s.detail ? node(f, `font-family:var(--kf-font-sans);font-size:${Math.round(labelPx * 0.32)}px;line-height:1.3;opacity:.85;word-break:keep-all`) : null;
+        return { f, label, detail };
+      };
+      return { s, card, panel, fill, base: face(false), lit: face(true) };
+    });
+    kit.stage?.hero(deck);
+
+    const writes = cards.flatMap((cd, i) =>
+      [cd.base, cd.lit].flatMap((v) => [
+        slots.write(v.label, { ctx, text: cd.s.label, at: turns[i] + 0.05, dur: 0.3, seed: `${kit.seed}:l${i}` }),
+        ...(v.detail ? [slots.write(v.detail, { ctx, text: cd.s.detail!, at: turns[i] + 0.2, dur: 0.4, seed: `${kit.seed}:d${i}` })] : []),
+      ]),
+    );
+    const lands = chips.map((ch, i) => slots.land(ch, { ctx, at: ends[i], seed: `${kit.seed}:k${i}` }));
+
+    return (t: number) => {
+      moving("steps.stack", ctx);
+      writes.forEach((wr) => wr(t));
+      cards.forEach((cd, i) => {
+        // 지금 단계와 그 바로 앞(걷혀 올라오는 동안 밑에 깔린 것)만 보인다
+        const on = t >= turns[i] && (i + 1 >= n || t < turns[i + 1] + 0.35);
+        cd.card.style.visibility = on ? "visible" : "hidden";
+        if (!on) return;
+        cd.panel(t);
+        // 카드는 화면의 30% 를 넘어 transform 대신 가림막을 아래에서 위로 걷는다(검사가 카메라로 보지 않게)
+        const open = i === 0 && kit.first ? 1 : clamp(spring(t - turns[i], { from: 0, to: 1, stiffness: 260, damping: 22 }));
+        cd.card.style.clipPath = open >= 1 ? "" : `inset(${((1 - open) * 100).toFixed(2)}% 0 0 0)`;
+        const k = clamp((t - turns[i] - 0.2) / Math.max(0.1, ends[i] - turns[i] - 0.2));
+        const clip = `inset(${((1 - k) * 100).toFixed(2)}% 0 0 0)`;
+        cd.fill.style.clipPath = clip;
+        cd.lit.f.style.clipPath = clip;
+      });
+      chips.forEach((ch, i) => {
+        const done = t >= ends[i] - 1e-6 || (i === n - 1 && t >= ends[i] - 0.3);
+        const now = t >= turns[i] && !done;
+        ch.style.background = done ? "var(--kf-accent)" : now ? "var(--kf-raised)" : "transparent";
+        ch.style.color = done ? "var(--kf-on-accent)" : now ? "var(--kf-ink)" : "var(--kf-dim, var(--kf-ink))";
+        applyStyle(ch, done ? lands[i](t) : {});
+      });
+    };
+  },
+};
+
+export default pattern;

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

@@ -0,0 +1,92 @@
+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 type { TermContent } from "./expand.ts";
+import type { Pattern } from "../types.ts";
+
+/**
+ * 용어 해부 — 약자가 큰 판 위에 서고, 풀이 낱말이 박마다 하나씩 판 아래 칩으로 톡 붙는다(첫 글자는 강조색 — 약자 글자와 같은 글자).
+ * 다 붙으면 한국어 이름이 판 아래에 찍히고, 판이 아래부터 강조색으로 차올라 장면 끝까지 그 용어를 짚는다.
+ */
+const pattern: Pattern<TermContent> = {
+  id: "term-reveal.chips",
+  type: "term-reveal",
+  does: "약자가 판 위에 서고 풀이 낱말이 박마다 칩으로 붙은 뒤, 한국어 이름이 찍히고 판이 차오른다",
+  energy: ["mid", "high"],
+  family: "pop",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.2, max: 6 },
+  fits(c, info) {
+    if (typeof c?.term !== "string" || !c.term.trim()) return "term 이 비었다";
+    if ([...c.term].length > 8) return "term 이 8자를 넘는다 — 약자가 아니다";
+    const words = (c.full ?? "").split(/\s+/).filter(Boolean);
+    if (words.length < 2 && !c.ko) return "풀이 낱말이 둘보다 적고 한국어 이름도 없다";
+    if (words.length > 5) return "풀이 낱말이 다섯을 넘는다";
+    if (info?.policy === "none" && !c.ko) return "글 정책 none";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const words = (c.full ?? "").split(/\s+/).filter(Boolean);
+    const boardW = w * (vertical ? 0.88 : 0.62);
+    const boardH = h * (vertical ? 0.3 : 0.44);
+    const termPx = fitSize(c.term, boardW * 0.8, boardH, { hShare: 0.7, max: Math.round(360 * u), min: Math.round(90 * u) });
+    const chipLong = words.reduce((a, b) => (textEm(b) > textEm(a) ? b : a), "");
+    const chipPx = words.length ? fitSize(chipLong, (vertical ? w * 0.8 : w * 0.92 / words.length) * 0.8, h, { hShare: 0.07, max: Math.round(80 * u), min: Math.round(32 * u) }) : 0;
+    const koPx = Math.round(Math.max(44 * u, termPx * 0.24));
+
+    const host = node(root, "position:absolute;inset:0;display:flex;align-items:center;justify-content:center");
+    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 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);
+    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) => {
+      const chip = node(row!, `position:relative;padding:0.15em 0.5em;font-family:var(--kf-font-sans);font-size:${chipPx}px;font-weight:700;color:var(--kf-ink);background:var(--kf-raised);border:${Math.max(2, Math.round(3 * u))}px solid var(--kf-line);white-space:nowrap;line-height:1.2`);
+      node(chip, `display:inline;color:${ACCENT_TEXT}`, wd[0]);
+      node(chip, "display:inline", wd.slice(1));
+      return chip;
+    });
+    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 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;
+    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}` }));
+
+    return (t: number) => {
+      moving("term-reveal.chips", ctx);
+      panel(t);
+      const open = clamp(spring(t - boardAt, { from: 0, to: 1, stiffness: 260, damping: 22 }));
+      board.style.clipPath = open >= 1 ? "" : `inset(${((1 - open) * 50).toFixed(2)}% 0 round 12px)`;
+      chips.forEach((ch, i) => {
+        ch.style.visibility = t >= chipAt[i] ? "visible" : "hidden";
+        if (t >= chipAt[i]) applyStyle(ch, { scale: spring(t - chipAt[i], { from: 0.4, to: 1, stiffness: 320, damping: 14 }) * ((lands[i](t).scale as number | undefined) ?? 1), rotate: (i % 2 ? 2 : -2) * spring(t - chipAt[i], { from: 4, to: 0, stiffness: 200, damping: 14 }) });
+      });
+      // 판은 칩이 붙기 시작할 때부터 장면 끝까지 차오른다 — 용어를 짚는 몫
+      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;
+      writeKo?.(t);
+      koMark?.((t - koAt - koDur) / Math.max(0.2, ctx.dur - koAt - koDur - 0.05));
+    };
+  },
+};
+
+export default pattern;