kasaframe 0.0.0-stage → 0.1.3

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;

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

@@ -0,0 +1,144 @@
+import { applyStyle, clamp, spring } from "@kasaframe/core";
+import { fitSize, textEm } from "@kasaframe/motion/moves";
+import { ACCENT_TEXT, area, decimalsOf, fmt, moving, node, slotsOf, spaced } from "../kit.ts";
+import type { Pattern } from "../types.ts";
+
+export interface TimelineContent {
+  span?: { from: number; to: number; unit?: string };
+  marks: { at: number; label: string; hot?: boolean }[];
+  window?: { from: number; to: number; label: string };
+}
+
+/**
+ * 시간 축 — 축이 그어지고 표시가 차례로 꽂힌 뒤, 「지금」이 축 처음에서 끝까지 걸어간다. 지나온 길은 강조색으로 차고,
+ * 읽음값이 그 시각을 찍고, 지나친 표시가 켜지고, 칠할 구간(window)은 지나가는 만큼 칠해진다 — 움직이는 것이 곧 시간이다.
+ */
+const pattern: Pattern<TimelineContent> = {
+  id: "timeline.axis",
+  type: "timeline",
+  does: "축이 그어지고 표시가 꽂힌 뒤, 지금이 축을 걸어가며 지난 길·구간이 칠해지고 표시가 켜진다",
+  energy: ["low", "mid"],
+  family: "draw",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.6, max: 9 },
+  themes: { "og-measure": 0.4, "debug-hud": 0.4 },
+  fits(c) {
+    const marks = c?.marks;
+    if (!Array.isArray(marks) || marks.length < 1) return "marks 가 없다";
+    if (marks.length > 8) return "marks 가 여덟을 넘는다";
+    for (const [i, m] of marks.entries()) {
+      if (!Number.isFinite(m?.at)) return `marks[${i}].at 이 수가 아니다`;
+      if (typeof m.label !== "string" || !m.label.trim() || [...m.label].length > 14) return `marks[${i}].label 이 비었거나 14자를 넘는다`;
+    }
+    const span = c.span ?? { from: Math.min(...marks.map((m) => m.at)), to: Math.max(...marks.map((m) => m.at)) };
+    if (!(span.to > span.from)) return "span 이 비었다(from < to)";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const marks = [...c.marks].sort((a, b) => a.at - b.at);
+    const span = c.span ?? { from: marks[0].at, to: marks[marks.length - 1].at };
+    const unit = c.span?.unit ?? "";
+    const dec = Math.max(decimalsOf(span.from), decimalsOf(span.to));
+    const pos = (v: number) => clamp((v - span.from) / (span.to - span.from));
+
+    // 축 — 가로 화면은 가운데 가로줄(딱지는 위아래 번갈아), 세로 화면은 왼쪽 세로줄(딱지는 오른쪽)
+    const len = vertical ? h * 0.86 : w * 0.88;
+    // 세로 화면은 축을 굵게 — 가는 축에 작은 딱지면 폭의 ⅖ 만 쓰고 비어 보였다
+    const trackT = Math.round((vertical ? w : h) * (vertical ? 0.14 : 0.08));
+    const a0 = vertical ? h * 0.07 : w * 0.06;
+    // 세로 축 왼쪽엔 「지금」 읽음값과 구간 이름이 설 자리를 남긴다
+    const axisX = vertical ? w * 0.36 : 0;
+    const axisY = vertical ? 0 : h * 0.5;
+    const at = (p: number): [number, number] => (vertical ? [axisX, a0 + len * p] : [a0 + len * p, axisY]);
+    const longest = marks.reduce((x, m) => (textEm(m.label) > textEm(x) ? m.label : x), "");
+    const chipPx = fitSize(longest, vertical ? w * 0.5 : Math.min(len / Math.max(2, Math.ceil(marks.length / 2)) * 0.9, w * 0.3), h, { hShare: vertical ? 0.08 : 0.07, max: Math.round((vertical ? 130 : 72) * u), min: Math.round((vertical ? 52 : 30) * u) });
+
+    const readPx = Math.round(Math.max((vertical ? 52 : 36) * u, trackT * (vertical ? 0.42 : 0.5)));
+
+    const host = node(root, "position:absolute;inset:0");
+    const trackCss = vertical
+      ? `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 win = c.window ? (() => {
+      const p0 = pos(c.window.from);
+      const p1 = pos(c.window.to);
+      const css = vertical
+        ? `left:0;right:0;top:${p0 * 100}%;height:${(p1 - p0) * 100}%`
+        : `top:0;bottom:0;left:${p0 * 100}%;width:${(p1 - p0) * 100}%`;
+      const outline = node(track, `position:absolute;${css};outline:${Math.max(3, Math.round(4 * u))}px dashed var(--kf-accent);outline-offset:${Math.round(trackT * 0.25)}px`);
+      // 세로 화면은 그 구간을 화면 폭 가득 옅게 칠한다 — 「이 시간대」가 축 옆 점선만으로는 작게 읽혔다
+      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:${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 };
+    })() : 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 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}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 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`);
+
+    const hits = spaced(kit.hits.length ? kit.hits : [0], 0.3);
+    const drawAt = 0;
+    const pinAt = pins.map((_, i) => Math.min(hits[i + 1] ?? 0.3 + i * 0.3, 0.3 + i * 0.3));
+    // 지금은 첫 프레임 바로 뒤부터 걷는다 — 축이 그어지는 것만으로는 화면이 바뀐 것으로 안 읽힌다. 표시는 지금이 닿기 전에 박마다 꽂힌다
+    const walkFrom = 0.12;
+    const walkEnd = ctx.dur - 1 / ctx.meta.fps;
+
+    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}` }));
+
+    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";
+      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%)`;
+      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";
+        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)는 반전 칩으로
+        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)";
+      });
+    };
+  },
+};
+
+export default pattern;

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

@@ -0,0 +1,85 @@
+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 type { Pattern } from "../types.ts";
+
+export interface TitleContent {
+  title: string;
+  sub?: string;
+  kicker?: string;
+}
+
+/**
+ * 이름이 글자마다 아래에서 가림막을 뚫고 올라와 서고(드러냄), 카메라가 그 이름으로 한 번 다가간다 — 다가감의 이유가 드러냄이다.
+ * 다가가는 동안 밑줄·부제가 서고, 짚개가 이름과 작은 글을 박마다 번갈아 짚는다.
+ */
+const pattern: Pattern<TitleContent> = {
+  id: "title.mask",
+  type: "title",
+  does: "이름이 글자마다 가림막을 뚫고 서고, 다가가는 동안 짚개가 이름과 작은 글을 번갈아 짚는다",
+  energy: ["mid"],
+  family: "mask",
+  camera: ["pushIn"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2, max: 6 },
+  fits(c) {
+    if (typeof c?.title !== "string" || !c.title.trim()) return "title 이 비었다";
+    if ([...c.title].length > 18) return "title 이 18자를 넘는다";
+    if (c.sub && [...c.sub].length > 40) return "sub 가 40자를 넘는다";
+    if (c.kicker && [...c.kicker].length > 24) return "kicker 가 24자를 넘는다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    // 다가갈 자리를 남긴다 — 이름이 안전 영역 86% 를 넘으면 카메라가 다가가지 못하고 물러난다
+    const titlePx = fitSize(c.title, w * 0.8, h * (vertical ? 0.2 : 0.4), { hShare: 1, max: Math.round(420 * u), min: Math.round(80 * u) });
+    const smallPx = Math.round(Math.max(40 * u, titlePx * 0.16));
+    const subPx = Math.round(Math.max(44 * u, titlePx * 0.2));
+    const weight = ctx.style.type?.weightDisplay ?? 800;
+
+    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(titlePx * 0.12)}px;max-width:${w * 0.92}px`);
+    const kicker = c.kicker ? node(col, `font-family:var(--kf-font-mono);font-size:${smallPx}px;letter-spacing:.06em;color:${ACCENT_TEXT};white-space:nowrap;min-height:1.2em;line-height:1.2`) : null;
+    const name = node(col, `position:relative;display:flex;font-family:var(--kf-font-display);font-size:${titlePx}px;font-weight:${weight};line-height:1;letter-spacing:-0.03em;color:var(--kf-ink);white-space:pre`);
+    kit.stage?.hero(name);
+    const paintName = riseName(name, c.title, ctx);
+    const count = Array.from(c.title).length;
+    const bar = node(col, `width:100%;height:${Math.round(titlePx * 0.07)}px;background:var(--kf-accent);margin-top:${Math.round(titlePx * 0.02)}px`);
+    const sub = c.sub ? node(col, `font-family:var(--kf-font-sans);font-size:${subPx}px;font-weight:600;color:var(--kf-ink-soft, var(--kf-ink));text-align:center;line-height:1.3;min-height:1.3em;word-break:keep-all`) : null;
+
+    // 시각 — 글자는 첫 박부터 고르게, 다가감은 이름이 다 선 박에서 장면 끝까지, 그 사이를 위 작은 글·밑줄·부제가 채운다
+    const hits = kit.hits.length ? kit.hits : [0];
+    const each = clamp(0.5 / count, 0.03, 0.08);
+    // 영상 첫 장면이면 첫 프레임부터 이름이 거의 서 있게 조금 앞당긴다
+    const nameAt = kit.first ? -0.2 : (hits[0] ?? 0);
+    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;
+    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);
+    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);
+      applyStyle(name, landed(t));
+
+      applyStyle(bar, sweep(t, { at: sweepAt, dur: 0.3 }));
+      bar.style.visibility = t >= sweepAt ? "visible" : "hidden";
+      writeKicker?.(t);
+      writeSub?.(t);
+    };
+  },
+};
+
+export default pattern;

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

@@ -0,0 +1,23 @@
+import endSlam from "../end/slam.ts";
+import type { TitleContent } from "./mask.ts";
+import type { Pattern } from "../types.ts";
+
+// 이름이 서는 순간을 드롭에 — 끝 카드 쾅과 같은 그림(옅은 자리표 → 쾅 → 짚개)으로, 부제는 한 줄 자리, 위 작은 글은 칩 자리에
+const pattern: Pattern<TitleContent> = {
+  ...endSlam,
+  id: "title.slam",
+  type: "title",
+  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자를 넘는다";
+    if (c.sub && [...c.sub].length > 40) return "sub 가 40자를 넘는다";
+    if (c.kicker && [...c.kicker].length > 24) return "kicker 가 24자를 넘는다";
+    return endSlam.fits ? endSlam.fits({ title: c.title }, info) : true;
+  },
+  build(root, ctx, c, kit) {
+    return endSlam.build(root, ctx, { title: c.title, line: c.sub, url: c.kicker }, kit);
+  },
+};
+
+export default pattern;

package/packages/patterns/src/toggle-sim/switch.ts

@@ -0,0 +1,92 @@
+import { clamp } from "@kasaframe/core";
+import { fitSize, textEm } from "@kasaframe/motion/moves";
+import { ACCENT_TEXT, area, beatStops, decimalsOf, fmt, moving, node, slotsOf } from "../kit.ts";
+import type { Pattern } from "../types.ts";
+
+export interface ToggleContent {
+  knob: string;
+  states: { label: string; value?: number; unit?: string; note?: string }[];
+}
+
+/**
+ * 스위치를 바꾸면 결과가 바뀐다 — 칸 나뉜 스위치의 손잡이(본문 글색 — 옅은 강조색 테마에서도 옮겨 가는 게 읽히게)가 박 정지점마다 다음 상태로 옮겨 가고, 큰 값은 손잡이가 가까운 상태의 값을,
+ * 아래 막대는 두 상태 값 사이를 손잡이와 같은 진행도로 오간다(지나는 값은 두 사실 사이). 손잡이는 정지점 사이를 내내 움직여 서지 않는다.
+ */
+const pattern: Pattern<ToggleContent> = {
+  id: "toggle-sim.switch",
+  type: "toggle-sim",
+  does: "스위치 손잡이가 박마다 다음 상태로 옮겨 가고, 큰 값과 막대가 그 상태 값으로 바뀐다",
+  energy: ["mid"],
+  family: "morph",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.4, max: 10 },
+  themes: { "og-measure": 0.4, "kawaii-sticker": 0.3 },
+  fits(c) {
+    if (typeof c?.knob !== "string" || !c.knob.trim()) return "knob 이 비었다";
+    const st = c.states;
+    if (!Array.isArray(st) || st.length < 2 || st.length > 3) return "states 가 둘·셋이 아니다";
+    for (const [i, s] of st.entries()) if (typeof s?.label !== "string" || !s.label.trim() || [...s.label].length > 10) return `states[${i}].label 이 비었거나 10자를 넘는다`;
+    if (st.some((s) => s.value !== undefined && !Number.isFinite(s.value))) return "value 가 수가 아니다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const st = c.states;
+    const n = st.length;
+    const numeric = st.every((s) => Number.isFinite(s.value));
+    const dec = numeric ? Math.max(...st.map((s) => decimalsOf(s.value!))) : 0;
+    const max = numeric ? Math.max(...st.map((s) => Math.abs(s.value!)), 1e-9) : 1;
+    const showNote = kit.policy !== "terms-only" && kit.policy !== "none";
+    const texts = st.map((s) => (numeric ? `${fmt(s.value!, dec)}${s.unit ? ` ${s.unit}` : ""}` : s.label));
+
+    const swW = w * (vertical ? 0.9 : 0.72);
+    const swH = Math.round(h * (vertical ? 0.11 : 0.14));
+    const segPx = fitSize(st.reduce((a, s) => (textEm(s.label) > textEm(a) ? s.label : a), ""), (swW / n) * 0.8, swH, { hShare: 0.5, max: Math.round(80 * u), min: Math.round(30 * u) });
+    const bigPx = Math.round(Math.min((w * 0.8) / Math.max(...texts.map((x) => textEm(x))), h * (vertical ? 0.16 : 0.26)));
+    const knobPx = Math.round(Math.max(40 * u, segPx * 0.8));
+
+    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(swH * 0.4)}px`);
+    const knob = node(col, `font-family:var(--kf-font-sans);font-size:${knobPx}px;font-weight:700;color:var(--kf-ink-soft, var(--kf-ink));white-space:nowrap;line-height:1.2;height:1.2em`);
+    const sw = node(col, `position:relative;width:${swW}px;height:${swH}px;border-radius:999px;background:var(--kf-raised);box-shadow:inset 0 0 0 ${Math.max(3, Math.round(4 * u))}px var(--kf-line)`);
+    const thumb = node(sw, `position:absolute;top:${Math.round(swH * 0.08)}px;bottom:${Math.round(swH * 0.08)}px;left:0;width:${swW / n - swH * 0.16}px;border-radius:999px;background:var(--kf-ink)`);
+    const segs = st.map((s, i) => node(sw, `position:absolute;top:0;bottom:0;left:${(i * swW) / n}px;width:${swW / n}px;display:flex;align-items:center;justify-content:center;font-family:var(--kf-font-sans);font-size:${segPx}px;font-weight:800;white-space:nowrap`, s.label));
+    const big = node(col, `font-family:var(--kf-font-display);font-size:${bigPx}px;font-weight:${ctx.style.type?.weightDisplay ?? 800};color:${ACCENT_TEXT};line-height:1.05;white-space:nowrap;font-variant-numeric:tabular-nums;height:1.05em`);
+    const track = numeric ? node(col, `position:relative;width:${swW}px;height:${Math.round(swH * 0.7)}px;background:var(--kf-raised);box-shadow:inset 0 0 0 2px var(--kf-line)`) : null;
+    // 막대는 진한 강조색(accentText) — 옅은 강조색 테마에서 오가는 길이가 화면 변화로 읽히게
+    const fill = track ? node(track, `position:absolute;left:0;top:0;bottom:0;width:100%;background:${ACCENT_TEXT};transform-origin:0 50%`) : null;
+    const note = showNote && st.some((s) => s.note) ? node(col, `font-family:var(--kf-font-sans);font-size:${Math.round(knobPx * 0.8)}px;color:var(--kf-ink-soft, var(--kf-ink));white-space:nowrap;line-height:1.3;height:1.3em`) : null;
+    kit.stage?.hero(sw);
+
+    // 상태는 0.6초 넘게 띄운 박마다 바뀐다 — 처음 상태에서 시작해 차례로 돌고, 마지막 정지점은 장면 밖
+    const stops = beatStops(kit.hits, 0, ctx.dur, 0.6);
+    const writeKnob = slots.write(knob, { ctx, text: c.knob, at: 0, dur: 0.3, seed: `${kit.seed}:knob` });
+
+    return (t: number) => {
+      moving("toggle-sim.switch", ctx);
+      writeKnob(t);
+      let j = 0;
+      while (j + 1 < stops.length && stops[j + 1] <= t) j++;
+      const a = t < stops[0] ? 0 : j % n;
+      const b = t < stops[0] ? 0 : (j + 1) % n;
+      const p = t < stops[0] ? 0 : 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 pos = a + (b - a) * e;
+      thumb.style.transform = `translateX(${(pos * (swW / n) + swH * 0.08).toFixed(1)}px)`;
+      const near = Math.round(pos);
+      segs.forEach((s, i) => (s.style.color = i === near ? "var(--kf-bg)" : "var(--kf-ink)"));
+      big.textContent = texts[near];
+      if (fill) {
+        // 막대는 두 상태 값 사이를 손잡이와 같은 진행도로 — 지나는 값은 늘 두 사실 사이
+        const v = st[a].value! + (st[b].value! - st[a].value!) * e;
+        fill.style.transform = `scaleX(${clamp(Math.abs(v) / max).toFixed(4)})`;
+      }
+      if (note) note.textContent = st[near].note ?? "";
+    };
+  },
+};
+
+export default pattern;

package/packages/patterns/src/trend/columns.ts

@@ -0,0 +1,108 @@
+import { applyStyle, clamp, spring } from "@kasaframe/core";
+import { fitSize } from "@kasaframe/motion/moves";
+import { ACCENT_TEXT, area, beatStops, decimalsOf, fmt, moving, node, slotsOf } from "../kit.ts";
+import type { TrendContent } from "./draw.ts";
+import type { Pattern } from "../types.ts";
+
+/**
+ * 변화를 기둥으로 — 점마다 기둥이 왼쪽부터 물결로 솟고(길이 = 값), 솟는 기둥 위 읽음값은 그 점의 값만 찍는다(지어낸 값 없음).
+ * 다 솟으면 끝 기둥 ↔ 가장 높은·낮은 기둥·짚을 점을 박마다 번갈아 짚는다(짚힌 기둥만 또렷). 솟는 물결은 2.4초 안으로 박아 둔다.
+ */
+const pattern: Pattern<TrendContent> = {
+  id: "trend.columns",
+  type: "trend",
+  does: "점마다 기둥이 왼쪽부터 물결로 솟고, 다 솟으면 끝·가장 높은·낮은 기둥을 번갈아 또렷하게 짚는다",
+  energy: ["mid", "high"],
+  family: "grow",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.6, max: 9 },
+  themes: { "og-measure": 0.4, "riso-zine": 0.3 },
+  fits(c) {
+    const pts = c?.points;
+    if (!Array.isArray(pts) || pts.length < 3) return "points 가 셋보다 적다";
+    if (pts.length > 16) return "기둥은 열여섯까지 — 더 많으면 trend.draw";
+    for (const [i, p] of pts.entries()) if (!Number.isFinite(p?.y) || p.y < 0 || typeof p.x !== "string") return `points[${i}] 가 {x: 글, y: 0 이상 수} 가 아니다`;
+    if (c.mark && !pts.some((p) => p.x === c.mark!.x)) return `mark.x "${c.mark.x}" 가 points 에 없다`;
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const pts = c.points;
+    const n = pts.length;
+    const unit = c.unit ?? "";
+    const dec = Math.max(...pts.map((p) => decimalsOf(p.y)));
+    const max = Math.max(...pts.map((p) => p.y), 1e-9);
+    const text = (i: number) => `${fmt(pts[i].y, dec)}${unit ? ` ${unit}` : ""}`;
+    // 값 글은 기둥 칸 폭 안에 — 가장 긴 값 기준
+    const longest = pts.map((_, i) => text(i)).reduce((a, b) => (b.length > a.length ? b : a), "");
+    const valPx = Math.round(Math.max(24 * u, Math.min(64 * u, fitSize(longest, ((w * 0.92) / n) * 0.95, h, { hShare: 0.06 }))));
+    const axisPx = Math.round(Math.max(26 * u, valPx * 0.7));
+
+    const cx = w * 0.04;
+    const cw = w * 0.92;
+    const top = valPx * 2.6;
+    const base = h * 0.94 - axisPx * 1.6;
+    const ch = base - top;
+    const slot = cw / n;
+    const bw = slot * 0.7;
+    const host = node(root, "position:absolute;inset:0");
+    node(host, `position:absolute;left:${cx}px;width:${cw}px;top:${base}px;height:${Math.max(2, Math.round(3 * u))}px;background:var(--kf-line)`);
+    const mi = c.mark ? pts.findIndex((p) => p.x === c.mark!.x) : -1;
+    const cols = pts.map((p, i) => {
+      const hh = Math.max(4, (p.y / max) * ch);
+      const x = cx + slot * i + (slot - bw) / 2;
+      const col = node(host, `position:absolute;left:${x}px;top:${base - hh}px;width:${bw}px;height:${hh}px;background:${i === n - 1 || i === mi ? ACCENT_TEXT : "var(--kf-dim)"};transform-origin:50% 100%;border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0`);
+      const val = node(host, `position:absolute;left:${x + bw / 2}px;top:${base - hh - valPx * 1.4}px;transform:translateX(-50%);font-family:var(--kf-font-mono);font-size:${valPx}px;font-weight:700;color:var(--kf-ink);white-space:nowrap;visibility:hidden`, text(i));
+      return { col, val, x, hh };
+    });
+    const xl = [0, n - 1].map((i) => node(host, `position:absolute;top:${base + axisPx * 0.4}px;left:${cols[i].x + (i ? bw : 0)}px;transform:translateX(${i ? "-100%" : "0"});font-family:var(--kf-font-mono);font-size:${axisPx}px;color:var(--kf-dim, var(--kf-ink));white-space:nowrap`, pts[i].x));
+    const chip = mi >= 0 ? node(host, `position:absolute;left:${cols[mi].x + bw / 2}px;top:${Math.max(0, base - cols[mi].hh - valPx * 2.8)}px;transform:translateX(-50%);padding:0.1em 0.4em;font-family:var(--kf-font-sans);font-size:${Math.round(valPx * 0.9)}px;font-weight:800;color:var(--kf-on-accent);background:var(--kf-accent);white-space:nowrap;visibility:hidden`) : null;
+    kit.stage?.hero(cols[n - 1].col);
+
+    // 물결 — 기둥마다 0.45초에 솟고, 다음 기둥은 앞 기둥보다 (2.4 - 0.45)/n 늦게
+    const rise = 0.45;
+    const lag = Math.min(0.22, (2.4 - rise) / n);
+    const startOf = (i: number) => 0.1 + i * lag;
+    const doneAt = startOf(n - 1) + rise;
+    const order = pts.map((p, i) => i);
+    const hiI = order.reduce((a, i) => (pts[i].y > pts[a].y ? i : a), 0);
+    const loI = order.reduce((a, i) => (pts[i].y < pts[a].y ? i : a), 0);
+    const picks = [...new Set([n - 1, hiI, loI, ...(mi >= 0 ? [mi] : [])])];
+    const stops = beatStops(kit.hits, doneAt, ctx.dur);
+    const writeChip = chip ? slots.write(chip, { ctx, text: c.mark!.label, at: startOf(mi) + rise, dur: 0.3, seed: `${kit.seed}:mark` }) : null;
+
+    return (t: number) => {
+      moving("trend.columns", ctx);
+      cols.forEach((cl, i) => {
+        const k = clamp((t - startOf(i)) / rise);
+        cl.col.style.visibility = k > 0 ? "visible" : "hidden";
+        applyStyle(cl.col, { scaleY: Math.max(0.01, k < 1 ? k : spring(t - startOf(i) - rise, { from: 1.04, to: 1, stiffness: 300, damping: 16 })) });
+        // 값은 다 솟은 기둥에만 — 솟는 동안 지어낸 값을 찍지 않는다
+        cl.val.style.visibility = k >= 1 && (picks.includes(i) || n <= 6) ? "visible" : "hidden";
+      });
+      for (const e of xl) e.style.visibility = t >= 0.1 ? "visible" : "hidden";
+      if (chip) chip.style.visibility = t >= startOf(mi) + rise ? "visible" : "hidden";
+      writeChip?.(t);
+      // 짚기 — 끝 기둥 ↔ 가장 높은·낮은·짚을 기둥을 박마다 번갈아. 짚힌 기둥은 또렷하고 나머지는 옅어지며, 옮겨 가는 동안 내내 서서히 바뀐다
+      if (t >= stops[0]) {
+        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 seq = (k: number) => picks[k % 2 === 0 ? 0 : 1 + (((k - 1) / 2) % Math.max(1, picks.length - 1))] ?? picks[0];
+        const a = seq(j);
+        const b = seq(j + 1);
+        cols.forEach((cl, i) => {
+          const near = (i === a ? 1 - e : 0) + (i === b ? e : 0);
+          cl.col.style.opacity = (0.35 + 0.65 * near).toFixed(3);
+          cl.val.style.visibility = near > 0.5 || n <= 6 ? "visible" : "hidden";
+        });
+      }
+    };
+  },
+};
+
+export default pattern;