kasaframe 0.1.1 → 0.1.4

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;

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

@@ -0,0 +1,127 @@
+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 type { Pattern } from "../types.ts";
+
+export interface TermContent {
+  term: string;
+  full?: string;
+  ko?: string;
+  meaning?: string;
+}
+
+// 약자 글자마다 풀이 낱말 하나 — 「MLA」 와 「Multi-head Latent Attention」 처럼 낱말 첫 글자가 약자 글자와 차례로 맞을 때만
+function spell(term: string, full: string | undefined): string[] | null {
+  if (!full) return null;
+  const letters = Array.from(term.replace(/[^A-Za-z0-9]/g, ""));
+  const words = full.split(/\s+/).filter(Boolean);
+  if (letters.length < 2 || letters.length !== words.length) return null;
+  return words.every((wd, i) => wd[0]?.toUpperCase() === letters[i].toUpperCase()) ? words : null;
+}
+
+/**
+ * 용어 공개 — 약자가 크게 서고, 약자 글자마다 풀이 낱말이 그 글자에서 아래로 펴져 나온다(글자 → 낱말이 같은 첫 글자로 이어진다).
+ * 풀이가 약자와 안 맞으면 풀이 한 줄이 펴진다. 그다음 한국어 이름이 찍히고, 짚개가 약자와 풀이 낱말을 번갈아 박마다 짚는다.
+ */
+const pattern: Pattern<TermContent> = {
+  id: "term-reveal.expand",
+  type: "term-reveal",
+  does: "약자가 서고 글자마다 풀이 낱말이 펴진다, 한국어 이름이 찍히고 짚개가 약자와 풀이를 번갈아 짚는다",
+  energy: ["mid"],
+  family: "mask",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.4, max: 6 },
+  fits(c, info) {
+    if (typeof c?.term !== "string" || !c.term.trim()) return "term 이 비었다";
+    if ([...c.term].length > 8) return "term 이 8자를 넘는다 — 약자가 아니다";
+    if (!c.full && !c.ko && !(c.meaning && info?.policy !== "terms-only")) return "풀이(full·ko)가 없다";
+    if (c.full && [...c.full].length > 48) return "full 이 48자를 넘는다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const words = spell(c.term, c.full);
+    const showMeaning = !!c.meaning && kit.policy !== "terms-only" && kit.policy !== "none";
+
+    const termPx = fitSize(c.term, w * (vertical ? 0.8 : 0.6), h * (vertical ? 0.18 : 0.34), { hShare: 1, max: Math.round(380 * u), min: Math.round(90 * u) });
+    const host = node(root, "position:absolute;inset:0;display:flex;align-items:center;justify-content:center");
+    // 세로 화면은 줄 사이를 넓혀 위아래로도 화면을 쓴다(용어 한 줄은 가는 띠다)
+    // 풀이 낱말을 세로로 쌓지 않는 세로 화면(약자가 아니거나 풀이가 없다)은 용어·이름·뜻을 높이 절반 넘게 벌린다 — 붙여 두면 위쪽 ⅕ 에 몰린다
+    const loose = vertical && !(c.full && spell(c.term, c.full)) && !!(c.ko || (c.meaning && kit.policy !== "terms-only" && kit.policy !== "none"));
+    const col = node(host, `display:flex;flex-direction:column;align-items:center;${loose ? `height:${Math.round(h * 0.66)}px;justify-content:space-between` : `gap:${Math.round(termPx * (vertical ? 0.45 : 0.14))}px`};max-width:${w * 0.94}px`);
+    const termEl = node(col, `position:relative;font-family:var(--kf-font-display);font-size:${termPx}px;font-weight:${ctx.style.type?.weightDisplay ?? 800};line-height:1;letter-spacing:0.02em;color:var(--kf-ink);white-space:nowrap;display:flex`);
+    kit.stage?.hero(termEl);
+    // 글자 수 어림은 라틴 글꼴에서 넓게 잡혀 화면이 빈다 — 첫 프레임에 실제 폭을 재서 맞춘다
+    const fit = fitOnce(termEl, w * (vertical ? 0.92 : 0.7), h * (vertical ? 0.22 : 0.4), c.term);
+    const chars = Array.from(c.term).map((ch) => node(termEl, "display:inline-block;transform-origin:50% 100%", ch));
+
+    // 풀이 — 낱말 줄(약자와 맞으면 낱말마다, 아니면 한 덩이)
+    const fullText = c.full ?? "";
+    // 세로 화면은 낱말을 한 줄에 하나씩 — 한 줄로 펴면 폭에 눌려 작아진다
+    const stack = vertical && !!words;
+    const widest = stack ? words!.reduce((a, b) => (textEm(b) > textEm(a) ? b : a), "") : fullText;
+    const fullPx = fullText ? fitSize(widest, w * 0.86, h, { hShare: stack ? 0.1 : 0.09, max: Math.round((stack ? 120 : 84) * u), min: Math.round(34 * u) }) : 0;
+    const row = fullText
+      ? node(col, `position:relative;isolation:isolate;display:flex;flex-direction:${stack ? "column" : "row"};align-items:${stack ? "flex-start" : "center"};gap:${Math.round(fullPx * (stack ? 0.08 : 0.32))}px;font-family:var(--kf-font-sans);font-size:${fullPx}px;font-weight:700;color:var(--kf-ink);white-space:nowrap;line-height:1.2;${stack ? "" : "height:1.2em"}`)
+      : null;
+    const parts = row ? (words ?? [fullText]).map((wd) => {
+      const box = node(row, `position:relative;overflow:hidden;display:inline-block;${stack ? "height:1.2em" : ""}`);
+      const head = words ? node(box, `display:inline-block;color:${ACCENT_TEXT}`, wd[0]) : null;
+      const rest = node(box, "display:inline-block", words ? wd.slice(1) : wd);
+      return { box, head, rest, em: textEm(wd) };
+    }) : [];
+    // 작은 글도 틀 최소 글 크기(쇼츠 48px)를 넘게
+    const koPx = Math.round(Math.max(52 * u, (fullPx || termPx * 0.2) * 0.9));
+    const ko = c.ko ? node(col, `font-family:var(--kf-font-sans);font-size:${koPx}px;font-weight:600;color:${ACCENT_TEXT};white-space:nowrap;line-height:1.3;height:1.3em`) : null;
+    const meaning = showMeaning ? node(col, `font-family:var(--kf-font-sans);font-size:${Math.round(koPx * 0.8)}px;color:var(--kf-ink-soft, var(--kf-ink));text-align:center;line-height:1.35;max-width:${w * 0.8}px;word-break:keep-all`) : null;
+
+    const hits = kit.hits.length ? kit.hits : [0];
+    const termAt = kit.first ? -0.2 : (hits[0] ?? 0);
+    // 펴기는 약자가 서자마자 낱말마다 이어서 — 사이에 빈 틈이 있으면 화면이 선 것으로 읽힌다
+    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;
+    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 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;
+    const landed = slots.land(termEl, { ctx, at: termAt + 0.3, seed: `${kit.seed}:land` });
+
+    return (t: number) => {
+      moving("term-reveal.expand", ctx);
+      fit();
+      chars.forEach((ch, i) => {
+        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;
+        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);
+        pt.box.style.width = `${(p * pt.em * fullPx * 1.02).toFixed(1)}px`;
+        pt.box.style.visibility = p > 0 ? "visible" : "hidden";
+      });
+      // 풀이를 낱말 차례로 반전해 짚는다 — 펴기가 끝난 뒤 장면 끝까지
+      point(t, stops);
+      writeKo?.(t);
+      writeMeaning?.(t);
+    };
+  },
+};
+
+export default pattern;