kasaframe 0.0.0-stage → 0.1.3

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

@@ -0,0 +1,125 @@
+import { applyStyle, clamp, combine, ease, progress, spring } from "@kasaframe/core";
+import { textEm } from "@kasaframe/motion/moves";
+import { ACCENT_TEXT, area, beatStops, cameraOk, decimalsOf, factRoll, glider, node, slotsOf, moving } from "../kit.ts";
+import type { Pattern } from "../types.ts";
+
+interface Side {
+  label: string;
+  value?: number;
+  unit?: string;
+  note?: string;
+}
+
+export interface BeforeAfter {
+  before: Side;
+  after: Side;
+  change?: string;
+  better?: "lower" | "higher";
+  source?: string;
+}
+
+const show = (s: Side, dec: number): string =>
+  s.value === undefined ? s.label : `${factRoll(Infinity, { from: 0, to: s.value, at: 0, dur: 1, decimals: dec }).text}${s.unit ? ` ${s.unit}` : ""}`;
+
+/**
+ * 전 값이 서고 손 획으로 그어진 뒤(이제 아니다), 후 값이 같은 자리 아래에서 열리며 전 값에서 후 값으로 굴러간다(바뀜 그 자체).
+ * 앉으면 바뀐 정도 글이 붙고 카메라가 후 값으로 다가간다 — 다가감의 이유가 드러냄이다.
+ */
+const pattern: Pattern<BeforeAfter> = {
+  id: "before-after.strike",
+  type: "before-after",
+  does: "전 값이 그어지고 후 값이 전에서 후로 굴러 열린다, 바뀐 정도가 붙고 후 값으로 다가간다",
+  energy: ["mid", "high"],
+  family: "mask",
+  camera: ["pushIn"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.6, max: 7 },
+  themes: { "riso-zine": 0.4, "og-measure": 0.4 },
+  fits(c) {
+    for (const k of ["before", "after"] as const) {
+      const s = c?.[k];
+      if (!s || typeof s.label !== "string" || !s.label.trim()) return `${k}.label 이 비었다`;
+      if (s.value !== undefined && !Number.isFinite(s.value)) return `${k}.value 가 수가 아니다`;
+      if ([...show(s, 0)].length > 14) return `${k} 화면 글이 14자를 넘는다`;
+    }
+    if (c.change && [...c.change].length > 12) return "change 가 12자를 넘는다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const { before, after } = c;
+    const numeric = before.value !== undefined && after.value !== undefined && (before.unit ?? "") === (after.unit ?? "");
+    const dec = numeric ? Math.max(decimalsOf(before.value!), decimalsOf(after.value!)) : 0;
+    const beforeText = show(before, numeric ? decimalsOf(before.value!) : 0);
+    const afterText = show(after, dec);
+    const weight = ctx.style.type?.weightDisplay ?? 800;
+
+    // 다가갈 자리를 남긴다 — 후 값은 폭 66% 까지
+    const bigPx = Math.round(Math.min((w * (vertical ? 0.8 : 0.66)) / textEm(afterText), h * (vertical ? 0.22 : 0.3)));
+    const smallPx = Math.round(Math.min(bigPx * 0.42, (w * 0.7) / textEm(beforeText)));
+    const tagPx = Math.round(Math.max(36 * u, bigPx * 0.16));
+
+    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(bigPx * 0.12)}px`);
+    const beforeTag = node(col, `font-family:var(--kf-font-sans);font-size:${tagPx}px;font-weight:600;color:var(--kf-dim, var(--kf-ink));white-space:nowrap;height:${Math.round(tagPx * 1.2)}px;line-height:1.2`);
+    // 줄마다 높이를 박아 둔다 — 굴림·글 찍기가 세로 배치를 흔들지 않게
+    const beforeBox = node(col, `position:relative;height:${Math.round(smallPx * 1.05)}px`);
+    const beforeNum = node(beforeBox, `font-family:var(--kf-font-display);font-size:${smallPx}px;font-weight:${weight};line-height:1;color:var(--kf-ink);white-space:nowrap;font-variant-numeric:tabular-nums`, beforeText);
+    const bigK = Math.min(2.4, (bigPx * 0.8) / smallPx);
+    beforeBox.style.transformOrigin = "50% 50%";
+    beforeBox.style.zIndex = "2";
+    const strike = node(beforeBox, `position:absolute;left:-4%;right:-4%;top:52%;height:${Math.max(6, Math.round(smallPx * 0.1))}px;margin-top:-${Math.max(3, Math.round(smallPx * 0.05))}px;background:var(--kf-danger, var(--kf-accent));transform-origin:0 50%;transform:rotate(-4deg)`);
+    const afterBox = node(col, `position:relative;overflow:hidden;height:${Math.round(bigPx * 1.08)}px;display:flex;align-items:center`);
+    const afterNum = node(afterBox, `font-family:var(--kf-font-display);font-size:${bigPx}px;font-weight:${weight};line-height:1;letter-spacing:-0.02em;color:${ACCENT_TEXT};white-space:pre;font-variant-numeric:tabular-nums;text-align:center;height:${bigPx}px;width:${Math.round(textEm(afterText) * bigPx * 0.98)}px`);
+    const foot = node(col, `display:flex;align-items:center;gap:${Math.round(tagPx * 0.6)}px;height:${Math.round(tagPx * 1.8)}px`);
+    const afterTag = node(foot, `font-family:var(--kf-font-sans);font-size:${tagPx}px;font-weight:600;color:var(--kf-ink);white-space:nowrap`);
+    const change = c.change ? node(foot, `font-family:var(--kf-font-mono);font-size:${Math.round(tagPx * 1.25)}px;font-weight:700;color:var(--kf-ink);border:3px solid var(--kf-accent);padding:0.02em 0.35em;border-radius:var(--kf-radius-sm);white-space:nowrap`) : null;
+    kit.stage?.hero(afterBox);
+
+    const hits = kit.hits.length ? kit.hits : [0];
+    // 전 값은 오래 세워 두지 않는다 — 첫 박들 안에서 그어진다
+    const strikeAt = hits.find((b) => b >= 0.3 && b <= 0.55) ?? 0.35;
+    const openAt = strikeAt + 0.25;
+    // 굴림은 2.4초 안 — 장면이 길다고 느리게 구르면 끝자리가 서는 사이가 멈춘 화면이다
+    const landWant = clamp(ctx.dur - 1.3, openAt + 0.6, openAt + 2.4);
+    const land = [...hits].reverse().find((b) => b <= landWant && b >= openAt + 0.6) ?? landWant;
+    const changeAt = land + 0.05;
+
+    const writeBefore = slots.write(beforeTag, { ctx, text: before.label, at: 0, dur: 0.3, seed: `${kit.seed}:bt` });
+    const writeAfter = slots.write(afterTag, { ctx, text: after.label, at: openAt, dur: 0.35, seed: `${kit.seed}:at` });
+    const writeChange = change ? slots.write(change, { ctx, text: c.change!, at: changeAt, dur: 0.3, seed: `${kit.seed}:ch` }) : null;
+    const landed = slots.land(afterNum, { ctx, at: land, seed: `${kit.seed}:land` });
+    if (cameraOk(ctx)) kit.stage?.camera.pushIn(land, { to: afterBox, scale: 1.1, dur: Math.max(0.6, ctx.dur - land) });
+    // 앉은 뒤엔 짚개가 후 값 ↔ 바뀐 정도·전 값을 박마다 번갈아 짚는다
+    const point = glider(host, [afterBox, ...(change ? [change] : []), beforeBox], { hub: true });
+    const stops = beatStops(kit.hits, land + 0.1, ctx.dur);
+
+    return (t: number) => {
+      moving("before-after.strike", ctx);
+      writeBefore(t);
+      writeAfter(t);
+      writeChange?.(t);
+      if (change) change.style.visibility = t >= changeAt ? "visible" : "hidden";
+      applyStyle(strike, { scaleX: ease.outCubic(progress(t, strikeAt, 0.25)), rotate: -4 });
+      strike.style.visibility = t >= strikeAt ? "visible" : "hidden";
+      // 그어진 전 값은 물러난다 — 지워지진 않는다(비교가 남아야 한다)
+      // 전 값이 처음엔 주인공 크기로 들어와 그어진 뒤 제자리(작은 줄)로 물러난다 — 첫 순간을 비워 두지 않는다
+      const shrink = ease.inOutCubic(progress(t, strikeAt + 0.1, 0.4));
+      const enterK = spring(t, { from: 0.8, to: 1, stiffness: 260, damping: 18 });
+      applyStyle(beforeBox, { scale: (bigK + (1 - bigK) * shrink) * enterK, y: (1 - shrink) * bigPx * 0.7 });
+      applyStyle(beforeNum, { opacity: 1 - 0.5 * clamp((t - strikeAt - 0.25) / 0.3) });
+      afterBox.style.visibility = t >= openAt ? "visible" : "hidden";
+      const r = numeric ? factRoll(t, { from: before.value!, to: after.value!, at: openAt, dur: land - openAt, decimals: dec }) : null;
+      const shown = t >= land || !r ? afterText : `${r.text}${after.unit ? ` ${after.unit}` : ""}`;
+      afterNum.textContent = shown;
+      // 굴리는 동안 긴 글은 같은 폭에 줄여 넣는다 — 상자가 출렁이지 않게
+      afterNum.style.fontSize = `${Math.round(bigPx * Math.min(1, textEm(afterText) / textEm(shown)))}px`;
+      point(t, stops);
+      applyStyle(afterNum, combine({ y: (1 - ease.outExpo(progress(t, openAt, 0.35))) * bigPx * 1.1 }, landed(t)));
+    };
+  },
+};
+
+export default pattern;

package/packages/patterns/src/code/terminal.ts

@@ -0,0 +1,133 @@
+import { clamp, spring, applyStyle } from "@kasaframe/core";
+import { typeText } from "@kasaframe/motion";
+import { area, beatStops, glider, moving, node, slotsOf } from "../kit.ts";
+import type { Pattern } from "../types.ts";
+
+export interface CodeContent {
+  kind?: "terminal" | "code";
+  lines?: { cmd?: string; out?: string }[];
+  code?: string;
+  lang?: string;
+}
+
+interface Row {
+  text: string;
+  /** 명령 줄이면 프롬프트와 함께 자모 단위로 쳐진다, 출력·코드 줄은 줄째 선다 */
+  typed: boolean;
+}
+
+const rowsOf = (c: CodeContent): Row[] => {
+  if (c.lines?.length) return c.lines.flatMap((l) => [...(l.cmd ? [{ text: l.cmd, typed: true }] : []), ...(l.out ? l.out.split("\n").map((t) => ({ text: t, typed: false })) : [])]);
+  return (c.code ?? "").replace(/\s+$/, "").split("\n").map((t) => ({ text: t, typed: false }));
+};
+
+/**
+ * 명령·코드 — 창 판 안에서 명령은 자모 단위로 쳐지고(블록 커서가 끝을 따라간다), 출력·코드 줄은 흘러 찍힌다. 지금 줄 뒤엔 강조색 칸이 글과 함께 늘어난다.
+ * 다 서면 짚개가 마지막 줄(결과)과 다른 줄을 박마다 번갈아 짚는다. 치는 빠르기는 박아 둔다(명령 초당 36타·출력 90자) — 장면이 길다고 느리게 치지 않는다.
+ */
+const pattern: Pattern<CodeContent> = {
+  id: "code.terminal",
+  type: "code",
+  does: "창 판 안에서 명령이 쳐지고 출력이 흘러 찍히며 지금 줄이 짚이고, 다 서면 짚개가 결과 줄과 다른 줄을 번갈아 짚는다",
+  energy: ["mid"],
+  family: "type",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.4, max: 10 },
+  themes: { "kasaterm-cells": 0.7, "debug-hud": 0.5 },
+  fits(c) {
+    const rows = rowsOf(c ?? {});
+    if (!rows.length || rows.every((r) => !r.text.trim())) return "lines·code 가 비었다";
+    if (rows.length > 12) return "줄이 열둘을 넘는다";
+    if (rows.some((r) => [...r.text].length > 64)) return "한 줄이 64자를 넘는다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const rows = rowsOf(c);
+    const terminal = (c.kind ?? (c.lines?.length ? "terminal" : "code")) === "terminal";
+    const longest = Math.max(...rows.map((r) => [...r.text].length + (r.typed ? 2 : 0)), 12);
+    const winW = w * (vertical ? 0.94 : 0.86);
+    const winH = h * (vertical ? 0.66 : 0.84);
+    const barH = Math.round(Math.max(40 * u, winH * 0.08));
+    // 세로 화면은 줄을 정한 칸 수에서 접어 글을 키운다 — 가장 긴 줄을 한 줄에 넣으면 글이 작아 창 위쪽 몇 줄만 찬다(폰 터미널처럼)
+    const wrap = vertical ? Math.max(16, Math.min(24, longest)) : Infinity;
+    const rowsOn = (r: Row) => (vertical ? Math.max(1, Math.ceil(([...r.text].length + (r.typed ? 2 : 0)) / wrap)) : 1);
+    const lineCount = rows.reduce((a, r) => a + rowsOn(r), 0);
+    // 고정폭 글꼴 한 칸 0.6em — 가장 긴 줄(세로면 접는 칸 수)이 창 폭에, 줄 수가 창 높이에 들게
+    const px = Math.round(Math.max(22 * u, Math.min((winW * 0.9) / (Math.min(longest, wrap) * 0.6), ((winH - barH) * 0.86) / (Math.max(lineCount, 4) * 1.45), (vertical ? 96 : 88) * u)));
+
+    const host = node(root, "position:absolute;inset:0;display:flex;align-items:center;justify-content:center");
+    const win = node(host, `position:relative;width:${winW}px;height:${winH}px`);
+    const panel = slots.panel(win, { ctx, at: 0, seed: `${kit.seed}:win` });
+    const bar = node(win, `position:absolute;left:0;right:0;top:0;height:${barH}px;display:flex;align-items:center;gap:${Math.round(barH * 0.22)}px;padding:0 ${Math.round(barH * 0.4)}px;box-sizing:border-box;border-bottom:2px solid var(--kf-line);font-family:var(--kf-font-mono);font-size:${Math.round(barH * 0.42)}px;color:var(--kf-dim, var(--kf-ink))`);
+    bar.textContent = terminal ? "terminal" : c.lang ?? "code";
+    const body = node(win, `position:absolute;left:${Math.round(px * 1.2)}px;right:${Math.round(px)}px;top:${barH + Math.round(px * 0.8)}px;bottom:${Math.round(px)}px;font-family:var(--kf-font-mono);font-size:${px}px;line-height:1.45;color:var(--kf-ink);${vertical ? `white-space:pre-wrap;word-break:break-all` : "white-space:pre"}`);
+    kit.stage?.hero(win);
+    const lines = rows.map((r) => {
+      const line = node(body, vertical ? `position:relative;min-height:1.45em;width:max-content;max-width:${(wrap * 0.6).toFixed(2)}em` : `position:relative;height:1.45em;width:max-content;max-width:100%`);
+      const prompt = r.typed ? node(line, `display:inline;color:var(--kf-accent-text, var(--kf-accent))`, "$ ") : null;
+      const text = node(line, "display:inline");
+      return { r, line, prompt, text };
+    });
+    const cursor = node(body, `position:absolute;left:0;top:0;width:0.6em;height:1.2em;background:var(--kf-on-accent);visibility:hidden`);
+
+    // 시각 — 명령은 초당 36타로 쳐지고, 출력·코드 줄은 초당 90자로 흘러 찍힌다. 줄 사이는 0.04초 — 박을 기다리면 그 사이가 멈춘 화면이다
+    const cps = (r: Row) => (r.typed ? 36 : 90);
+    const starts: number[] = [];
+    let at = 0.1;
+    for (const r of rows) {
+      starts.push(at);
+      at += Math.max(0.18, typeText(r.text || " ", Infinity, { cps: cps(r), jitter: 0, ime: r.typed }).duration) + 0.04;
+    }
+    const doneAt = at;
+    const result = lines[lines.length - 1];
+    const point = glider(body, [result.line, ...lines.slice(0, -1).map((l) => l.line)], { hub: true, pad: 0.15 });
+    // 지금 줄 — 치거나 찍히는 줄 뒤에 강조색 칸이 붙어 글과 함께 늘어난다(작은 글 치기만으로는 화면이 바뀐 것으로 안 읽힌다)
+    const nowBar = node(body, "position:absolute;left:0;top:0;background:var(--kf-accent);z-index:-1;visibility:hidden");
+    body.style.isolation = "isolate";
+    const stops = beatStops(kit.hits, doneAt, ctx.dur);
+    const lands = lines.map((l, i) => slots.land(l.line, { ctx, at: starts[i], seed: `${kit.seed}:l${i}` }));
+
+    return (t: number) => {
+      moving("code.terminal", ctx);
+      panel(t);
+      let cur: { line: HTMLElement; chars: number } | null = null;
+      lines.forEach((l, i) => {
+        const on = t >= starts[i];
+        l.line.style.visibility = on ? "visible" : "hidden";
+        if (!on) return;
+        // 명령은 자모 단위로(한글 조합), 출력은 글자째 흘러 찍힌다 — 다 찍히면 원문 그대로
+        const s = typeText(l.r.text, t, { at: starts[i], cps: cps(l.r), jitter: 0, ime: l.r.typed });
+        l.text.textContent = s.text;
+        if (l.r.typed && !s.done) cur = { line: l.line, chars: [...s.text].length + 2 };
+        if (s.done) applyStyle(l.line, lands[i](t));
+      });
+      let k = -1;
+      starts.forEach((s0, i) => (t >= s0 ? (k = i) : 0));
+      const live = t < doneAt && k >= 0 ? lines[k] : null;
+      nowBar.style.visibility = live ? "visible" : "hidden";
+      lines.forEach((l) => {
+        const on = l === live;
+        l.text.style.color = on ? "var(--kf-on-accent)" : "";
+        if (l.prompt) l.prompt.style.color = on ? "var(--kf-on-accent)" : "var(--kf-accent-text, var(--kf-accent))";
+      });
+      if (live) {
+        const extra = live.r.typed && cur ? px * 0.7 : 0;
+        nowBar.style.transform = `translate(${(-px * 0.25).toFixed(1)}px, ${(live.line.offsetTop - px * 0.1).toFixed(1)}px)`;
+        nowBar.style.width = `${(live.line.offsetWidth + px * 0.5 + extra).toFixed(1)}px`;
+        nowBar.style.height = `${(live.line.offsetHeight + px * 0.2).toFixed(1)}px`;
+      }
+      // 블록 커서는 치는 줄의 끝을 따라간다 — 다 치면 결과 줄 끝에서 짚개에 자리를 내준다
+      const c2 = cur as { line: HTMLElement; chars: number } | null;
+      cursor.style.visibility = c2 && t < doneAt ? "visible" : "hidden";
+      // 접힌 줄은 몇째 줄 몇째 칸인지로 센다(고정폭이라 한 줄 = wrap 칸)
+      if (c2) cursor.style.transform = `translate(${((c2.chars % wrap) * 0.6).toFixed(2)}em, ${(c2.line.offsetTop / px + Math.floor(c2.chars / wrap) * 1.45 + 0.12).toFixed(3)}em)`;
+      point(t, stops);
+    };
+  },
+};
+
+export default pattern;

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

@@ -0,0 +1,142 @@
+import { applyStyle, clamp, spring } from "@kasaframe/core";
+import { fitSize, textEm } from "@kasaframe/motion/moves";
+import { ACCENT_TEXT, area, decimalsOf, factRoll, moving, node, slotsOf } from "../kit.ts";
+import type { Pattern } from "../types.ts";
+
+interface Side {
+  label: string;
+  value?: number;
+  unit?: string;
+  note?: string;
+}
+
+export interface CompareContent {
+  a: Side;
+  b: Side;
+  better?: "lower" | "higher";
+  ratio?: string;
+}
+
+const ratioText = (a: number, b: number): string => {
+  const hi = Math.max(a, b);
+  const lo = Math.min(a, b);
+  if (lo <= 0) return "";
+  const r = hi / lo;
+  return `×${r >= 10 ? Math.round(r) : r.toFixed(1)}`;
+};
+
+/**
+ * 둘 대비 — 두 막대가 차례로 자라며 값이 같은 진행도로 굴러 오른다(막대 높이 = 값). 다 서면 작은 쪽 한 덩이가 큰 막대 안에
+ * 아래부터 하나씩 쌓이며 배율을 센다(×57 이면 57칸) — 움직이는 것이 곧 배율이다. 배율이 2 아래면 나은 쪽이 강조색으로 차오른다.
+ */
+const pattern: Pattern<CompareContent> = {
+  id: "compare.bars",
+  type: "compare",
+  does: "두 막대가 차례로 자라며 값이 굴러 오르고, 작은 쪽 한 덩이가 큰 막대를 채우며 배율을 센다",
+  energy: ["mid"],
+  family: "grow",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.4, max: 7 },
+  themes: { "og-measure": 0.5, "debug-hud": 0.3 },
+  fits(c) {
+    for (const k of ["a", "b"] as const) {
+      const s = c?.[k];
+      if (!s || typeof s.label !== "string" || !s.label.trim()) return `${k}.label 이 비었다`;
+      if (!Number.isFinite(s.value) || (s.value as number) < 0) return `${k}.value 가 0 이상 수가 아니다 — 값 없는 대비는 다른 패턴으로`;
+      if ([...s.label].length > 16) return `${k}.label 이 16자를 넘는다`;
+    }
+    if ((c.a.unit ?? "") !== (c.b.unit ?? "")) return "두 단위가 다르다 — 막대 높이로 견줄 수 없다";
+    if (Math.max(c.a.value!, c.b.value!) <= 0) return "값이 다 0 이다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const sides = [c.a, c.b];
+    const max = Math.max(c.a.value!, c.b.value!);
+    const dec = Math.max(decimalsOf(c.a.value!), decimalsOf(c.b.value!));
+    const unit = c.a.unit ?? "";
+    const win = c.better === "lower" ? (c.a.value! <= c.b.value! ? 0 : 1) : c.better === "higher" ? (c.a.value! >= c.b.value! ? 0 : 1) : -1;
+    const ratio = c.ratio ?? ratioText(c.a.value!, c.b.value!);
+
+    const barW = Math.round(w * (vertical ? 0.36 : 0.24));
+    const gap = Math.round(w * (vertical ? 0.1 : 0.12));
+    const labelPx = Math.round(Math.min(fitSize(sides.reduce((x, s) => (textEm(s.label) > textEm(x) ? s.label : x), ""), barW * 1.3, h, { hShare: 0.06, max: 72 * u, min: 32 * u }), 72 * u));
+    const finals = sides.map((s) => `${factRoll(Infinity, { from: 0, to: s.value!, at: 0, dur: 1, decimals: dec }).text}${unit ? ` ${unit}` : ""}`);
+    // 값은 고정폭 글꼴이라 글자마다 0.62em 으로 잰다 — 막대 폭 1.3배(옆 막대와 안 겹치는 몫) 안에
+    const valPx = Math.round(Math.max(28 * u, Math.min(140 * u, h * 0.1, (Math.min(barW * 1.3, barW + gap * 0.8) * 0.95) / (0.62 * Math.max(...finals.map((f) => [...f].length))))));
+    const ratioPx = Math.round(Math.min(valPx * 1.3, 180 * u));
+    const top = ratioPx * 1.5 + valPx * 1.3;
+    const maxH = h * 0.92 - top - labelPx * 1.6;
+    const x0 = (w - (barW * 2 + gap)) / 2;
+    const base = h * 0.96 - labelPx * 1.6;
+
+    const host = node(root, "position:absolute;inset:0");
+    const ratioEl = ratio ? node(host, `position:absolute;left:0;right:0;top:${Math.round(h * 0.04)}px;text-align:center;font-family:var(--kf-font-display);font-size:${ratioPx}px;font-weight:${ctx.style.type?.weightDisplay ?? 800};color:${ACCENT_TEXT};line-height:1.1;height:1.1em`) : null;
+    const cols = sides.map((s, i) => {
+      const x = x0 + i * (barW + gap);
+      const hBar = (s.value! / max) * maxH;
+      const bar = node(host, `position:absolute;left:${x}px;top:${base - hBar}px;width:${barW}px;height:${Math.max(2, hBar)}px;background:var(--kf-raised);box-shadow:inset 0 0 0 ${Math.max(3, Math.round(4 * u))}px var(--kf-dim);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;transform-origin:50% 100%;overflow:hidden`);
+      const fill = node(bar, "position:absolute;left:0;right:0;bottom:0;top:0;background:var(--kf-accent);transform-origin:50% 100%;transform:scaleY(0)");
+      const val = node(host, `position:absolute;left:${x - Math.min(barW * 0.15, gap * 0.4)}px;width:${barW + Math.min(barW * 0.3, gap * 0.8)}px;text-align:center;font-family:var(--kf-font-mono);font-size:${valPx}px;font-weight:700;color:var(--kf-ink);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2`);
+      const label = node(host, `position:absolute;left:${x - barW * 0.3}px;width:${barW * 1.6}px;top:${base + labelPx * 0.3}px;text-align:center;font-family:var(--kf-font-sans);font-size:${labelPx}px;font-weight:700;color:var(--kf-ink);white-space:nowrap;line-height:1.2;height:1.2em`);
+      return { s, bar, fill, val, label, hBar };
+    });
+    node(host, `position:absolute;left:${x0 - gap * 0.3}px;width:${barW * 2 + gap * 1.6}px;top:${base}px;height:${Math.max(2, Math.round(3 * u))}px;background:var(--kf-ink);opacity:.4`);
+    if (win >= 0) kit.stage?.hero(cols[win].bar);
+    // 배율을 센다 — 큰 막대 안에 작은 쪽 한 덩이가 아래부터 하나씩 쌓여 배율만큼 찬다(×57 이면 57칸, 많으면 60칸으로 묶는다)
+    const big = c.a.value! >= c.b.value! ? 0 : 1;
+    const small = 1 - big;
+    const times = sides[small].value! > 0 ? sides[big].value! / sides[small].value! : 0;
+    const count = times >= 2 ? Math.min(60, Math.round(times)) : 0;
+    const cells = Array.from({ length: count }, (_, i) =>
+      node(cols[big].bar, `position:absolute;left:0;right:0;bottom:${((i / count) * 100).toFixed(3)}%;height:calc(${(100 / count).toFixed(3)}% - ${count > 30 ? 1 : 2}px);background:var(--kf-accent);visibility:hidden`),
+    );
+
+    const hits = kit.hits.length ? kit.hits : [0];
+    const growDur = clamp(ctx.dur * 0.24, 0.6, 1.2);
+    const aAt = hits[0] ?? 0;
+    const bWant = aAt + growDur * 0.7;
+    const bAt = hits.find((b) => b >= bWant - 0.1) ?? bWant;
+    const grown = bAt + growDur;
+    // 세기는 작은 막대가 자라는 동안 시작한다 — 작은 쪽이 아주 작으면 그 자람은 화면에서 안 보여 멈춘 시간이 된다
+    const fillFrom = bAt + 0.2;
+    const starts = [aAt, bAt];
+
+    const writes = cols.map((col, i) => slots.write(col.label, { ctx, text: col.s.label, at: starts[i], dur: 0.3, seed: `${kit.seed}:l${i}` }));
+    const writeRatio = ratioEl ? slots.write(ratioEl, { ctx, text: ratio, at: grown, dur: 0.3, seed: `${kit.seed}:r` }) : null;
+    const lands = cols.map((col, i) => slots.land(col.val, { ctx, at: starts[i] + growDur, seed: `${kit.seed}:v${i}` }));
+
+    return (t: number) => {
+      moving("compare.bars", ctx);
+      cols.forEach((col, i) => {
+        const on = t >= starts[i];
+        for (const e of [col.bar, col.val, col.label]) e.style.visibility = on ? "visible" : "hidden";
+        if (!on) return;
+        writes[i](t);
+        const r = factRoll(t, { from: 0, to: col.s.value!, at: starts[i], dur: growDur, decimals: dec });
+        applyStyle(col.bar, { scaleY: Math.max(0.01, r.p) });
+        col.val.textContent = `${r.text}${unit ? ` ${unit}` : ""}`;
+        col.val.style.top = `${base - col.hBar * r.p - valPx * 1.3}px`;
+        applyStyle(col.val, lands[i](t));
+        // 배율이 2 아래면 셀 칸이 없다 — 나은 쪽 막대가 아래부터 강조색으로 차올라 끝까지 짚는다
+        if (!count) {
+          const k = i === win || win < 0 ? clamp((t - fillFrom) / Math.max(0.3, ctx.dur - fillFrom - 0.05)) : 0;
+          col.fill.style.transform = `scaleY(${k.toFixed(4)})`;
+        } else if (i === small) col.fill.style.transform = `scaleY(${t >= fillFrom ? 1 : 0})`;
+        col.val.style.color = i === win && t >= fillFrom ? ACCENT_TEXT : "var(--kf-ink)";
+      });
+      const counted = count ? Math.min(count, Math.floor(clamp((t - fillFrom) / Math.max(0.3, ctx.dur - fillFrom - 0.15)) * count + 1e-6)) : 0;
+      cells.forEach((cell, i) => (cell.style.visibility = i < counted ? "visible" : "hidden"));
+      if (ratioEl && count) {
+        // 세는 동안은 센 만큼, 다 세면 받은 배율 글 그대로
+        ratioEl.textContent = counted >= count ? ratio : `×${Math.max(1, Math.round((counted / count) * times))}`;
+      } else writeRatio?.(t);
+      if (ratioEl) applyStyle(ratioEl, t >= grown ? { scale: spring(t - grown, { from: 1.25, to: 1, stiffness: 280, damping: 16 }) } : { opacity: 0 });
+    };
+  },
+};
+
+export default pattern;

package/packages/patterns/src/compare/duel.ts

@@ -0,0 +1,103 @@
+import { applyStyle, clamp, combine, spring } from "@kasaframe/core";
+import { fitSize, textEm } from "@kasaframe/motion/moves";
+import { ACCENT_TEXT, area, cadence, decimalsOf, factRoll, moving, node, slotsOf } from "../kit.ts";
+import type { CompareContent } from "./bars.ts";
+import type { Pattern } from "../types.ts";
+
+/**
+ * 맞대결 — 두 카드가 박마다 하나씩 톡 붙고(값이 있으면 그 안에서 굴러 오른다), 가운데 「vs」가 선다.
+ * 다 서면 나은 쪽 카드가 아래부터 강조색으로 차올라 장면 끝까지 그쪽을 짚고, 진 쪽은 물러난다. 값이 없는 대비(낱말 대 낱말)도 그린다.
+ */
+const pattern: Pattern<CompareContent> = {
+  id: "compare.duel",
+  type: "compare",
+  does: "두 카드가 박마다 붙고 값이 굴러 오른 뒤, 나은 쪽 카드가 강조색으로 차오른다",
+  energy: ["mid", "high"],
+  family: "pop",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.2, max: 7 },
+  themes: { "kawaii-sticker": 0.5, "riso-zine": 0.3 },
+  fits(c) {
+    for (const k of ["a", "b"] as const) {
+      const s = c?.[k];
+      if (!s || typeof s.label !== "string" || !s.label.trim()) return `${k}.label 이 비었다`;
+      if ([...s.label].length > 14) return `${k}.label 이 14자를 넘는다`;
+      if (s.value !== undefined && !Number.isFinite(s.value)) return `${k}.value 가 수가 아니다`;
+    }
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const sides = [c.a, c.b];
+    const numeric = sides.every((s) => Number.isFinite(s.value));
+    const dec = numeric ? Math.max(...sides.map((s) => decimalsOf(s.value!))) : 0;
+    const win = numeric && c.better ? (c.better === "lower" ? (c.a.value! <= c.b.value! ? 0 : 1) : c.a.value! >= c.b.value! ? 0 : 1) : 1;
+    const finals = sides.map((s) => (s.value !== undefined ? `${factRoll(Infinity, { from: 0, to: s.value, at: 0, dur: 1, decimals: dec }).text}${s.unit ? ` ${s.unit}` : ""}` : ""));
+
+    const gap = Math.round((vertical ? h : w) * 0.08);
+    const cardW = vertical ? w * 0.86 : (w * 0.92 - gap) / 2;
+    const cardH = vertical ? (h * 0.86 - gap) / 2 : h * 0.72;
+    const labelPx = fitSize(sides.reduce((x, s) => (textEm(s.label) > textEm(x) ? s.label : x), ""), cardW * 0.8, cardH, { hShare: numeric ? 0.18 : 0.3, max: Math.round(130 * u), min: Math.round(40 * u) });
+    const valPx = numeric ? Math.round(Math.max(36 * u, Math.min((cardW * 0.82) / (0.62 * Math.max(...finals.map((f) => [...f].length))), cardH * 0.28))) : 0;
+    const vsPx = Math.round(Math.min(gap * 0.62, 120 * u));
+
+    const hits = kit.hits.length ? kit.hits : [0];
+    const enters = cadence(hits, 2);
+    const host = node(root, "position:absolute;inset:0");
+    const pos = (i: number): [number, number] =>
+      vertical ? [(w - cardW) / 2, h * 0.07 + i * (cardH + gap)] : [w * 0.04 + i * (cardW + gap), (h - cardH) / 2];
+    const cards = sides.map((s, i) => {
+      const [x, y] = pos(i);
+      const card = node(host, `position:absolute;left:${x}px;top:${y}px;width:${cardW}px;height:${cardH}px;transform-origin:50% 60%`);
+      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;align-items:center;justify-content:center;gap:${Math.round(labelPx * 0.25)}px;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.1;white-space:nowrap;height:1.1em`);
+        const val = numeric ? node(f, `font-family:var(--kf-font-mono);font-size:${valPx}px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.2`) : null;
+        return { f, label, val };
+      };
+      return { s, card, panel, fill, base: face(false), lit: face(true) };
+    });
+    const vs = node(host, `position:absolute;left:${vertical ? w / 2 : w * 0.04 + cardW + gap / 2}px;top:${vertical ? h * 0.07 + cardH + gap / 2 : h / 2}px;transform:translate(-50%,-50%);font-family:var(--kf-font-display);font-size:${vsPx}px;font-weight:900;color:${ACCENT_TEXT};line-height:1`, "vs");
+    kit.stage?.hero(cards[win].card);
+
+    const roll = clamp(ctx.dur * 0.2, 0.5, 1);
+    const fillFrom = enters[1] + 0.3;
+    const writes = cards.flatMap((cd, i) => [cd.base, cd.lit].map((v) => slots.write(v.label, { ctx, text: cd.s.label, at: enters[i] + 0.05, dur: 0.25, seed: `${kit.seed}:l${i}` })));
+
+    return (t: number) => {
+      moving("compare.duel", ctx);
+      writes.forEach((wr) => wr(t));
+      cards.forEach((cd, i) => {
+        const on = t >= enters[i];
+        cd.card.style.visibility = on ? "visible" : "hidden";
+        if (!on) return;
+        cd.panel(t);
+        const out = i !== win ? 1 - 0.4 * clamp((t - fillFrom) / 0.4) : 1;
+        // 카드는 화면의 30% 를 넘어 transform 을 걸면 검사가 카메라로 본다 — 가림막을 걷어 붙이고, 진 쪽은 옅어지기만
+        const open = clamp(spring(t - enters[i], { from: 0, to: 1, stiffness: 300, damping: 18 }));
+        cd.card.style.clipPath = open >= 1 ? "" : `inset(${((1 - open) * 50).toFixed(2)}% ${((1 - open) * 50).toFixed(2)}% round 24px)`;
+        cd.card.style.opacity = out.toFixed(3);
+        if (numeric) {
+          const r = factRoll(t, { from: 0, to: cd.s.value!, at: enters[i], dur: roll, decimals: dec });
+          const txt = `${r.text}${cd.s.unit ? ` ${cd.s.unit}` : ""}`;
+          cd.base.val!.textContent = txt;
+          cd.lit.val!.textContent = txt;
+        }
+        // 나은 쪽이 아래부터 차오른다 — 장면 끝까지
+        const k = i === win ? clamp((t - fillFrom) / Math.max(0.3, ctx.dur - fillFrom - 0.05)) : 0;
+        const clip = `inset(${((1 - k) * 100).toFixed(2)}% 0 0 0)`;
+        cd.fill.style.clipPath = clip;
+        cd.lit.f.style.clipPath = clip;
+      });
+      vs.style.visibility = t >= enters[1] ? "visible" : "hidden";
+      applyStyle(vs, t >= enters[1] ? { scale: spring(t - enters[1], { from: 2, to: 1, stiffness: 300, damping: 14 }) } : {});
+    };
+  },
+};
+
+export default pattern;

package/packages/patterns/src/end/lockup.ts

@@ -0,0 +1,85 @@
+import { applyStyle, clamp, combine, spring } from "@kasaframe/core";
+import { fitSize, textEm } from "@kasaframe/motion/moves";
+import { area, beatStops, fitOnce, glider, moving, node, riseName, slotsOf } from "../kit.ts";
+import type { Pattern } from "../types.ts";
+
+export interface EndContent {
+  title: string;
+  line?: string;
+  url?: string;
+  /** assets 기준 그림 */
+  logo?: string;
+}
+
+/**
+ * 끝 카드 — 로고가 앉고 이름이 글자마다 서고, 한 줄·주소가 찍히는 동안 짚개가 이름 → 한 줄 → 주소를 박마다 옮겨 다닌다.
+ */
+const pattern: Pattern<EndContent> = {
+  id: "end.lockup",
+  type: "end",
+  does: "로고가 앉고 이름이 서고 한 줄·주소가 찍히는 동안, 짚개가 이름·한 줄·주소를 박마다 옮겨 다닌다",
+  energy: ["low", "mid"],
+  family: "mask",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 1.6, max: 6 },
+  fits(c) {
+    if (typeof c?.title !== "string" || !c.title.trim()) return "title 이 비었다";
+    if ([...c.title].length > 20) return "title 이 20자를 넘는다";
+    if (c.line && [...c.line].length > 40) return "line 이 40자를 넘는다";
+    if (c.url && [...c.url].length > 40) return "url 이 40자를 넘는다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    // 어림 크기는 첫 프레임 폭 맞춤(fitOnce — 폭 86%·높이 18%/30%)보다 넉넉히 작게 — 맞춤이 실제로 줄이면 첫 프레임이 언제냐에 따라 크기가 갈린다
+    const titlePx = fitSize(c.title, w * (vertical ? 0.8 : 0.84), h * (vertical ? 0.17 : 0.26), { hShare: 1, max: Math.round((vertical ? 320 : 300) * u), min: Math.round(72 * u) });
+    // 작은 글도 틀 최소 글 크기(쇼츠 48px)를 넘게. 세로 화면은 한 줄·주소도 폭을 넉넉히 쓴다
+    const linePx = vertical && c.line ? Math.round(Math.max(52 * u, Math.min(titlePx * 0.7, (w * 0.86) / textEm(c.line)))) : Math.round(Math.max(52 * u, titlePx * 0.22));
+    const urlPx = vertical && c.url ? Math.round(Math.max(52 * u, Math.min(titlePx * 0.5, (w * 0.8) / textEm(c.url)))) : Math.round(Math.max(52 * u, titlePx * 0.18));
+    const logoPx = Math.round(titlePx * 1.1);
+
+    const host = node(root, "position:absolute;inset:0;display:flex;align-items:center;justify-content:center");
+    // 세로 화면은 이름·한 줄·주소를 위아래로 벌려 세운다(높이의 ⅗) — 가운데 한 덩이로 모으면 위쪽 ⅕ 에만 몰려 아래가 빈다
+    const spread = vertical && (c.line || c.url || c.logo);
+    const col = node(host, `display:flex;flex-direction:column;align-items:center;${spread ? `height:${Math.round(h * 0.7)}px;justify-content:space-between` : `gap:${Math.round(titlePx * (vertical ? 0.5 : 0.16))}px`}`);
+    const logo = c.logo ? node(col, `width:${logoPx}px;height:${logoPx}px;background:center/contain no-repeat url("${ctx.asset(c.logo)}")`) : null;
+    const name = node(col, `position:relative;display:flex;font-family:var(--kf-font-display);font-size:${titlePx}px;font-weight:${ctx.style.type?.weightDisplay ?? 800};line-height:1;letter-spacing:-0.02em;color:var(--kf-ink)`);
+    kit.stage?.hero(name);
+    const paintName = riseName(name, c.title, ctx);
+    const line = c.line ? node(col, `font-family:var(--kf-font-sans);font-size:${linePx}px;font-weight:600;color:var(--kf-ink-soft, var(--kf-ink));text-align:center;line-height:1.3;height:1.3em;white-space:nowrap`) : null;
+    const url = c.url ? node(col, `font-family:var(--kf-font-mono);font-size:${urlPx}px;color:var(--kf-dim, var(--kf-ink));line-height:1.3;height:1.3em;white-space:nowrap`) : null;
+
+    const count = Array.from(c.title).length;
+    const each = clamp(0.4 / count, 0.025, 0.07);
+    const logoAt = 0;
+    const nameAt = logo ? 0.15 : kit.first ? -0.2 : 0;
+    const nameEnd = nameAt + each * (count - 1) + 0.3;
+    const lineAt = nameEnd;
+    const lineDur = line ? clamp([...c.line!].length * 0.03, 0.25, 0.6) : 0;
+    const urlAt = lineAt + lineDur;
+    const urlDur = url ? clamp([...c.url!].length * 0.03, 0.25, 0.6) : 0;
+    // 짚개는 이름이 서자마자 이름 → 한 줄 → 주소를 박마다 옮겨 다닌다 — 장면이 길어도 빠르기는 박이 정해 화면이 서지 않는다
+    const point = glider(host, [name, line, url].filter((e): e is HTMLDivElement => !!e), { hub: true });
+    const fit = fitOnce(name, w * 0.86, h * (vertical ? 0.18 : 0.3), c.title);
+    const stops = beatStops(kit.hits, nameEnd - 0.15, ctx.dur);
+
+    const writeLine = line ? slots.write(line, { ctx, text: c.line!, at: lineAt, dur: lineDur, seed: `${kit.seed}:line` }) : null;
+    const writeUrl = url ? slots.write(url, { ctx, text: c.url!, at: urlAt, dur: urlDur, seed: `${kit.seed}:url` }) : null;
+    const logoLand = logo ? slots.land(logo, { ctx, at: logoAt + 0.2, seed: `${kit.seed}:logo` }) : null;
+
+    return (t: number) => {
+      moving("end.lockup", ctx);
+      if (logo && logoLand) applyStyle(logo, combine({ scale: spring(t - logoAt, { from: 0.6, to: 1, stiffness: 280, damping: 16 }) }, logoLand(t)));
+      fit();
+      paintName(t, { riseAt: nameAt, each, fill: 0 });
+      point(t, stops);
+      writeLine?.(t);
+      writeUrl?.(t);
+    };
+  },
+};
+
+export default pattern;