kasaframe 0.1.1 → 0.1.4

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;

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

@@ -0,0 +1,140 @@
+import { applyStyle, clamp } from "@kasaframe/core";
+import { fitSize } from "@kasaframe/motion/moves";
+import { partial } from "@kasaframe/themes/slotkit";
+import { ACCENT_TEXT, area, decimalsOf, fmt, moving, node, slotsOf } from "../kit.ts";
+import type { Pattern } from "../types.ts";
+
+export interface TrendContent {
+  points: { x: string; y: number }[];
+  unit?: string;
+  mark?: { x: string; label: string };
+}
+
+const SVG = "http://www.w3.org/2000/svg";
+
+/**
+ * 변화 — 선이 고른 빠르기로 그어지며 아래 면이 같이 찬다. 머리의 읽음값은 지나친 점의 값만 찍는다(점 사이 지어낸 값 없음).
+ * 짚을 점(mark)에 닿으면 세로 줄과 딱지가 서고, 끝 점에 닿으면 끝 값이 크게 앉는다.
+ */
+const pattern: Pattern<TrendContent> = {
+  id: "trend.draw",
+  type: "trend",
+  does: "선이 그어지며 아래 면이 차고, 머리 읽음값이 지나친 점의 값을 찍고, 짚을 점에 줄과 딱지가 선다",
+  energy: ["mid"],
+  family: "draw",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.6, max: 9 },
+  themes: { "og-measure": 0.5, "debug-hud": 0.5 },
+  fits(c) {
+    const pts = c?.points;
+    if (!Array.isArray(pts) || pts.length < 3) return "points 가 셋보다 적다";
+    if (pts.length > 24) return "points 가 스물넷을 넘는다";
+    for (const [i, p] of pts.entries()) if (!Number.isFinite(p?.y) || typeof p.x !== "string") return `points[${i}] 가 {x: 글, y: 수} 가 아니다`;
+    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 lo = Math.min(0, ...pts.map((p) => p.y));
+    const hi = Math.max(...pts.map((p) => p.y));
+    const last = `${fmt(pts[n - 1].y, dec)}${unit ? ` ${unit}` : ""}`;
+    const bigPx = fitSize(last, w * 0.5, h, { hShare: vertical ? 0.1 : 0.16, max: Math.round(200 * u), min: Math.round(56 * u) });
+    const axisPx = Math.round(Math.max(28 * u, bigPx * 0.26));
+
+    const cx = w * 0.04;
+    const cw = w * 0.92;
+    const ctop = bigPx * 1.5;
+    const ch = h * 0.94 - ctop - axisPx * 1.8;
+    const xy = pts.map((p, i): [number, number] => [cx + (cw * i) / (n - 1), ctop + ch * (1 - (p.y - lo) / (hi - lo || 1))]);
+
+    const host = node(root, "position:absolute;inset:0");
+    const big = node(host, `position:absolute;right:${w * 0.04}px;top:0;font-family:var(--kf-font-display);font-size:${bigPx}px;font-weight:${ctx.style.type?.weightDisplay ?? 800};color:${ACCENT_TEXT};line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums`);
+    kit.stage?.hero(big);
+    const svg = host.ownerDocument.createElementNS(SVG, "svg");
+    svg.setAttribute("style", "position:absolute;inset:0;width:100%;height:100%;overflow:visible");
+    host.append(svg);
+    const base = host.ownerDocument.createElementNS(SVG, "line");
+    for (const [k, v] of Object.entries({ x1: cx, y1: ctop + ch, x2: cx + cw, y2: ctop + ch })) base.setAttribute(k, String(v));
+    base.setAttribute("stroke", "var(--kf-line)");
+    base.setAttribute("stroke-width", String(Math.max(2, Math.round(3 * u))));
+    const fillPoly = host.ownerDocument.createElementNS(SVG, "polygon");
+    fillPoly.setAttribute("fill", "var(--kf-accent)");
+    fillPoly.setAttribute("opacity", "0.28");
+    const linePoly = host.ownerDocument.createElementNS(SVG, "polyline");
+    linePoly.setAttribute("fill", "none");
+    linePoly.setAttribute("stroke", "var(--kf-accent)");
+    linePoly.setAttribute("stroke-width", String(Math.round(10 * u)));
+    linePoly.setAttribute("stroke-linejoin", "round");
+    linePoly.setAttribute("stroke-linecap", "round");
+    svg.append(base, fillPoly, linePoly);
+    const dotR = Math.round(12 * u);
+    const dots = xy.map(([x, y]) => {
+      const d = host.ownerDocument.createElementNS(SVG, "circle");
+      d.setAttribute("cx", String(x));
+      d.setAttribute("cy", String(y));
+      d.setAttribute("r", String(dotR));
+      d.setAttribute("fill", "var(--kf-bg)");
+      d.setAttribute("stroke", "var(--kf-accent)");
+      d.setAttribute("stroke-width", String(Math.round(5 * u)));
+      d.setAttribute("visibility", "hidden");
+      svg.append(d);
+      return d;
+    });
+    const head = node(host, `position:absolute;left:0;top:0;padding:0.1em 0.35em;font-family:var(--kf-font-mono);font-size:${axisPx}px;font-weight:700;color:var(--kf-on-accent);background:var(--kf-accent);white-space:nowrap;font-variant-numeric:tabular-nums`);
+    const xl = [0, n - 1].map((i) => node(host, `position:absolute;top:${ctop + ch + axisPx * 0.4}px;left:${xy[i][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 mi = c.mark ? pts.findIndex((p) => p.x === c.mark!.x) : -1;
+    const markEl = mi >= 0 ? (() => {
+      const [x, y] = xy[mi];
+      const rule = node(host, `position:absolute;left:${x - 2}px;top:${ctop}px;width:4px;height:${ch}px;background:var(--kf-ink);opacity:.5;transform-origin:50% 100%`);
+      const chip = node(host, `position:absolute;left:${x}px;top:${Math.max(ctop, y - axisPx * 3.2)}px;transform:translateX(${mi > n / 2 ? "-105%" : "5%"});padding:0.12em 0.4em;font-family:var(--kf-font-sans);font-size:${Math.round(axisPx * 1.2)}px;font-weight:700;color:var(--kf-on-accent);background:var(--kf-accent);white-space:nowrap`);
+      return { rule, chip };
+    })() : null;
+
+    const drawFrom = 0.1;
+    // 끝 값이 앉는 몫(쓰기 0.3초 + 앉기)만 남기고 선이 장면을 거의 다 쓴다
+    const drawEnd = ctx.dur - 0.25;
+    const at = (i: number) => drawFrom + ((drawEnd - drawFrom) * i) / (n - 1);
+    const markAt = mi >= 0 ? at(mi) : Infinity;
+    const writeMark = markEl ? slots.write(markEl.chip, { ctx, text: c.mark!.label, at: markAt, dur: 0.3, seed: `${kit.seed}:mark` }) : null;
+    const writeBig = slots.write(big, { ctx, text: last, at: drawEnd - 0.2, dur: 0.3, seed: `${kit.seed}:big` });
+    const landed = slots.land(big, { ctx, at: drawEnd + 0.1, seed: `${kit.seed}:land` });
+
+    return (t: number) => {
+      moving("trend.draw", ctx);
+      // 고른 빠르기로 — 점 사이 거리가 아니라 점 차례로 시각을 나눠 점마다 같은 몫
+      const q = clamp((t - drawFrom) / (drawEnd - drawFrom)) * (n - 1);
+      const k = Math.floor(q);
+      const f = q - k;
+      const drawn: [number, number][] = xy.slice(0, k + 1).map((p) => [p[0], p[1]]);
+      if (k < n - 1) drawn.push(...partial([xy[k], xy[k + 1]], f).slice(1));
+      const ptsAttr = drawn.map((p) => `${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(" ");
+      linePoly.setAttribute("points", t >= drawFrom ? ptsAttr : "");
+      const tail = drawn[drawn.length - 1];
+      fillPoly.setAttribute("points", t >= drawFrom ? `${cx},${ctop + ch} ${ptsAttr} ${tail[0].toFixed(1)},${ctop + ch}` : "");
+      dots.forEach((d, i) => d.setAttribute("visibility", t >= at(i) ? "visible" : "hidden"));
+      const passed = Math.min(n - 1, Math.max(0, Math.floor(q + 1e-6)));
+      head.textContent = `${fmt(pts[passed].y, dec)}${unit ? ` ${unit}` : ""}`;
+      head.style.transform = `translate(${tail[0].toFixed(1)}px, ${(tail[1] - dotR * 2).toFixed(1)}px) translate(${tail[0] > cx + cw * 0.8 ? "-100%" : "-50%"}, -100%)`;
+      head.style.visibility = t >= drawFrom && t < drawEnd + 0.3 ? "visible" : "hidden";
+      for (const e of xl) e.style.visibility = t >= drawFrom ? "visible" : "hidden";
+      if (markEl) {
+        markEl.rule.style.visibility = t >= markAt ? "visible" : "hidden";
+        markEl.chip.style.visibility = t >= markAt ? "visible" : "hidden";
+        applyStyle(markEl.rule, { scaleY: clamp((t - markAt) / 0.25) });
+        writeMark?.(t);
+      }
+      writeBig(t);
+      applyStyle(big, landed(t));
+      big.style.visibility = t >= drawEnd - 0.2 ? "visible" : "hidden";
+    };
+  },
+};
+
+export default pattern;