kasaframe 0.0.0-stage → 0.1.1

package/packages/motion/src/moves/splitFlap.ts

@@ -0,0 +1,147 @@
+import { clamp, rand, safeTime } from "@kasaframe/core";
+import { div, lastIndex, mark } from "./fit.ts";
+
+export interface SplitFlapOpts {
+  /** 판에 차례로 올릴 글 — 줄은 \n 으로. 첫 글은 처음부터 떠 있다 */
+  texts: string[];
+  /** texts[i] 로 넘어가기 시작하는 시각(장면 초). texts[0] 의 시각은 처음 칸들이 넘어오는 때 */
+  times: number[];
+  /** 바뀌는 칸이 목표 글자 전에 몇 번 넘어가나 */
+  spins?: number;
+  /** 한 번 넘어가는 초 */
+  flip?: number;
+  /** 칸마다 늦춤(초) */
+  each?: number;
+  /** 칸 높이(px). 없으면 화면에 맞춘다 */
+  size?: number;
+  w?: number;
+  h?: number;
+  seed?: string | number;
+  scene?: string;
+}
+
+const DIGITS = "0123456789";
+const LATIN = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const HANGUL = "가나다라마바사아자차카타파하거너더러머버서어저처";
+
+// 숫자·라틴·한글 칸만 돌린다 — 쌍점·빈칸 같은 칸은 한 번에 넘어간다
+function spinSet(c: string): string {
+  if (/[0-9]/.test(c)) return DIGITS;
+  if (/[가-힣]/.test(c)) return HANGUL;
+  if (/[A-Za-z]/.test(c)) return LATIN;
+  return "";
+}
+
+/**
+ * 판 넘김 글자판 — 바뀌는 칸마다 위 반쪽이 아래로 접히며 글자가 몇 번 넘어간 뒤 목표 글자에 앉는다. 칸마다 조금씩 늦게. 판 위로 빛이 늘 지나간다.
+ * (Nothing Went Foom 10.6–11.7초 23:59:57 → 00:00:00 · 82–84초 출발 안내판)
+ */
+export function splitFlap(el: HTMLElement, o: SplitFlapOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const seed = o.seed ?? "flap";
+  const spins = o.spins ?? 3;
+  const flip = o.flip ?? 0.07;
+  const each = o.each ?? 0.035;
+  const grids = o.texts.map((s) => s.split("\n"));
+  const nRows = Math.max(...grids.map((g) => g.length));
+  const nCols = Math.max(...grids.flatMap((g) => g.map((r) => [...r].length)));
+  const wide = o.texts.some((s) => /[가-힣]/.test(s));
+  const cellW0 = wide ? 1 : 0.72;
+  const ch = o.size ?? Math.min((H * 0.7) / nRows / 1.12, (W * 0.8) / nCols / (cellW0 * 1.08));
+  const cw = ch * cellW0;
+  const gap = ch * 0.08;
+  const charAt = (k: number, r: number, c: number) => [...(grids[k][r] ?? "")][c] ?? " ";
+
+  const layer = div(doc, "position:absolute;inset:0;overflow:hidden");
+  const board = div(
+    doc,
+    `position:absolute;left:50%;top:50%;width:${nCols * (cw + gap) + gap}px;height:${nRows * (ch + gap) + gap}px;margin-left:${-(nCols * (cw + gap) + gap) / 2}px;margin-top:${-(nRows * (ch + gap) + gap) / 2}px;` +
+      `background:#050506;border-radius:${ch * 0.08}px;box-shadow:0 0 0 ${gap}px #050506`,
+  );
+  const gloss = div(doc, "position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);background-size:300% 100%");
+  layer.append(board);
+  el.append(layer);
+  const face = (top: boolean) =>
+    div(
+      doc,
+      `position:absolute;left:0;width:100%;height:50%;overflow:hidden;background:#1B1D22;${top ? "top:0;border-radius:6px 6px 0 0" : "top:50%;border-radius:0 0 6px 6px"}`,
+    );
+  const glyph = (top: boolean) =>
+    div(
+      doc,
+      `position:absolute;left:0;width:100%;height:${ch}px;${top ? "top:0" : `top:${-ch / 2}px`};display:flex;align-items:center;justify-content:center;` +
+        `font-family:var(--kf-font-mono);font-weight:700;font-size:${ch * 0.78}px;color:#F2F3F5;line-height:1`,
+    );
+  const cells: { c: number; r: number; parts: { box: HTMLDivElement; g: HTMLDivElement }[] }[] = [];
+  for (let r = 0; r < nRows; r++)
+    for (let c = 0; c < nCols; c++) {
+      const cell = div(doc, `position:absolute;left:${gap + c * (cw + gap)}px;top:${gap + r * (ch + gap)}px;width:${cw}px;height:${ch}px;perspective:${ch * 4}px`);
+      // 0 위(다음 글자) · 1 아래(지금 글자) · 2 접히는 위 덮개(지금 글자) · 3 펴지는 아래 덮개(다음 글자)
+      const parts = [true, false, true, false].map((top) => {
+        const box = face(top);
+        const g = glyph(top);
+        box.append(g);
+        box.style.transformOrigin = top ? "50% 100%" : "50% 0";
+        cell.append(box);
+        return { box, g };
+      });
+      const seam = div(doc, `position:absolute;left:0;right:0;top:50%;height:${Math.max(2, ch * 0.02)}px;margin-top:-1px;background:#050506`);
+      cell.append(seam);
+      board.append(cell);
+      cells.push({ c, r, parts });
+    }
+  board.append(gloss);
+
+  return (t: number) => {
+    t = safeTime(t);
+    const k = lastIndex(o.times, t);
+    let moving = false;
+    cells.forEach((cell, idx) => {
+      const from = k <= 0 ? " " : charAt(k - 1, cell.r, cell.c);
+      const to = k < 0 ? " " : charAt(k, cell.r, cell.c);
+      const local = k < 0 ? -1 : t - o.times[k] - idx * each;
+      // 넘어갈 차례: from → (돌림 글자 몇 개) → to. 같은 글자면 안 넘긴다
+      const seq = [from];
+      if (from !== to) {
+        const set = spinSet(to === " " ? from : to);
+        if (set) for (let s = 0; s < spins; s++) seq.push(set[Math.floor(rand(seed, k * 7919 + idx * 31 + s) * set.length)]);
+        seq.push(to);
+      }
+      const steps = seq.length - 1;
+      const u = local / flip;
+      const s = Math.floor(u);
+      const f = u - s;
+      const [top, bottom, flapTop, flapBottom] = cell.parts;
+      if (local < 0 || steps === 0 || s >= steps) {
+        const show = local < 0 ? from : to;
+        top.g.textContent = show;
+        bottom.g.textContent = show;
+        flapTop.box.style.display = "none";
+        flapBottom.box.style.display = "none";
+        return;
+      }
+      moving = true;
+      const cur = seq[s];
+      const nxt = seq[s + 1];
+      top.g.textContent = nxt;
+      bottom.g.textContent = cur;
+      flapTop.g.textContent = cur;
+      flapBottom.g.textContent = nxt;
+      // 앞 절반: 위 덮개가 0→-90° 로 접힌다 · 뒤 절반: 아래 덮개가 90°→0 으로 펴진다
+      const a = clamp(f * 2);
+      const b = clamp(f * 2 - 1);
+      flapTop.box.style.display = f < 0.5 ? "block" : "none";
+      flapTop.box.style.transform = `rotateX(${(-90 * a).toFixed(2)}deg)`;
+      flapTop.box.style.filter = `brightness(${(1 - 0.5 * a).toFixed(3)})`;
+      flapBottom.box.style.display = f >= 0.5 ? "block" : "none";
+      flapBottom.box.style.transform = `rotateX(${(90 * (1 - b)).toFixed(2)}deg)`;
+      flapBottom.box.style.filter = `brightness(${(0.6 + 0.4 * b).toFixed(3)})`;
+    });
+    // 판 위로 빛이 늘 지나가고 판이 조금씩 다가가 — 글자가 다 앉은 뒤에도 멈추지 않는다
+    gloss.style.backgroundPosition = `${(100 - ((t * 45) % 200)).toFixed(1)}% 0`;
+    board.style.transform = `scale(${(1 + 0.02 * t).toFixed(4)})`;
+    mark("splitFlap", o.scene, moving);
+  };
+}

package/packages/motion/src/moves/stepWords.ts

@@ -0,0 +1,117 @@
+import { clamp, ease, lerp, rand, safeTime } from "@kasaframe/core";
+import { div, lastIndex, mark } from "./fit.ts";
+import { lengths, pointAt, toD, type Pt } from "./path.ts";
+
+export interface StepWord {
+  text: string;
+  /** 딱지가 붙는 시각(장면 초) — 계단 한 칸이 그때 다 그려진다 */
+  at: number;
+  hot?: boolean;
+}
+
+export interface StepWordsOpts {
+  steps: StepWord[];
+  /** down: 계단을 내려간다 · up: 올라간다 */
+  dir?: "down" | "up";
+  /** 첫 칸 왼쪽 끝(무대 px) */
+  origin?: Pt;
+  /** 한 칸의 가로·세로(px) */
+  run?: number;
+  rise?: number;
+  size?: number;
+  w?: number;
+  h?: number;
+  seed?: string | number;
+  scene?: string;
+}
+
+const SVG = "http://www.w3.org/2000/svg";
+
+/**
+ * 계단을 타는 낱말 딱지 — 꺾인 선이 박마다 한 칸 그려지고 그 모서리에 흰 딱지가 톡 붙는다. 카메라는 새 딱지 쪽으로 따라간다.
+ * (Update Me 143–145초 「LOSS goes DOWN, DOWN」·「LINE goes UP, UP, UP!」)
+ */
+export function stepWords(el: HTMLElement, o: StepWordsOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const up = o.dir === "up";
+  const n = o.steps.length;
+  const run = o.run ?? W * 0.13;
+  const rise = (o.rise ?? H * 0.12) * (up ? -1 : 1);
+  const origin = o.origin ?? [W * 0.12, up ? H * 0.82 : H * 0.2];
+  const size = o.size ?? 96;
+  const seed = o.seed ?? "steps";
+  // 계단 꼭짓점: 가로로 한 칸 → 세로로 한 칸. 딱지는 세로 칸 끝(다음 가로 칸 시작)에 붙는다
+  const corners: Pt[] = [origin];
+  for (let i = 0; i < n; i++) {
+    const [x, y] = corners[corners.length - 1];
+    corners.push([x + run, y], [x + run, y + rise]);
+  }
+  const ends = o.steps.map((_, i) => 2 * (i + 1));
+  const cum = lengths(corners);
+  const layer = div(doc, "position:absolute;inset:0;overflow:hidden");
+  const cam = div(doc, "position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0");
+  layer.append(cam);
+  el.append(layer);
+  const svg = doc.createElementNS(SVG, "svg");
+  svg.setAttribute("viewBox", `0 0 ${W} ${H}`);
+  svg.style.cssText = "position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible";
+  const path = doc.createElementNS(SVG, "path");
+  path.setAttribute("fill", "none");
+  path.setAttribute("stroke", "var(--kf-ink)");
+  path.setAttribute("stroke-width", "12");
+  path.setAttribute("stroke-linejoin", "round");
+  path.setAttribute("stroke-linecap", "round");
+  path.setAttribute("d", toD(corners));
+  const L = cum[cum.length - 1];
+  path.setAttribute("stroke-dasharray", `${L} ${L}`);
+  const dot = doc.createElementNS(SVG, "circle");
+  dot.setAttribute("r", "16");
+  dot.setAttribute("fill", "var(--kf-accent)");
+  dot.setAttribute("stroke", "var(--kf-ink)");
+  dot.setAttribute("stroke-width", "5");
+  svg.append(path, dot);
+  cam.append(svg);
+  const tags = o.steps.map((s, i) => {
+    const tag = div(
+      doc,
+      `position:absolute;left:0;top:0;padding:.08em .28em;white-space:nowrap;font-family:var(--kf-font-display);font-weight:900;font-size:${size}px;line-height:1.05;` +
+        `border:5px solid var(--kf-ink);border-radius:.12em;box-shadow:.08em .08em 0 var(--kf-ink);transform-origin:0 50%;` +
+        `background:${s.hot ? "var(--kf-accent)" : "var(--kf-surface)"};color:${s.hot ? "var(--kf-on-accent)" : "var(--kf-ink)"}`,
+      s.text,
+    );
+    cam.append(tag);
+    return { tag, tilt: (rand(seed, i) - 0.5) * 6 };
+  });
+  const times = o.steps.map((s) => s.at);
+
+  return (t: number) => {
+    t = safeTime(t);
+    const k = lastIndex(times, t);
+    // 칸 i 는 at 앞 0.2초 동안 그려진다
+    let reach = 0;
+    o.steps.forEach((s, i) => {
+      const p = ease.inOutCubic(clamp((t - (s.at - 0.2)) / 0.2));
+      if (p > 0) reach = lerp(cum[ends[i] - 2], cum[ends[i]], p);
+    });
+    path.setAttribute("stroke-dashoffset", (L - reach).toFixed(1));
+    const hp = pointAt(corners, cum, reach);
+    dot.setAttribute("cx", hp.x.toFixed(1));
+    dot.setAttribute("cy", hp.y.toFixed(1));
+    tags.forEach((g, i) => {
+      const local = t - o.steps[i].at;
+      const p = clamp(local / 0.22);
+      const [cx, cy] = corners[ends[i]];
+      g.tag.style.opacity = local >= 0 ? "1" : "0";
+      g.tag.style.transform = `translate(${(cx + 28).toFixed(1)}px,${(cy - size * 0.62).toFixed(1)}px) rotate(${g.tilt.toFixed(2)}deg) scale(${ease.outBack(p).toFixed(4)})`;
+    });
+    // 카메라: 그리는 머리를 화면 가운데 쪽으로 천천히 따라간다
+    const fx = W * 0.5 - hp.x;
+    const fy = H * 0.5 - hp.y;
+    const follow = 0.85;
+    // 마지막 칸 뒤에도 떠다녀 멈추지 않는다
+    cam.style.transform = `translate(${(fx * follow + 24 * Math.sin(t * 1.4)).toFixed(1)}px,${(fy * follow + 14 * Math.sin(t * 1.9)).toFixed(1)}px) scale(${(1 + 0.03 * t).toFixed(4)})`;
+    mark("stepWords", o.scene, k < n - 1 || t - (times[n - 1] ?? 0) < 0.22);
+  };
+}

package/packages/motion/src/moves/strikeOut.ts

@@ -0,0 +1,98 @@
+import { clamp, ease, rand, safeTime } from "@kasaframe/core";
+import { mark } from "./fit.ts";
+import { lengths, toD, type Pt } from "./path.ts";
+
+export interface StrikeMark {
+  /** x: 엑스 두 획 · under: 밑줄 · circle: 동그라미 · line: 가운데 줄 긋기 */
+  kind: "x" | "under" | "circle" | "line";
+  /** 표시할 상자(무대 px) */
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  at: number;
+  /** 획 하나에 드는 초 */
+  dur?: number;
+}
+
+export interface StrikeOutOpts {
+  marks: StrikeMark[];
+  color?: string;
+  width?: number;
+  /** 초당 몇 번 획이 살짝 떨리는지(손그림 결) — 0 이면 가만히 */
+  boil?: number;
+  w?: number;
+  h?: number;
+  seed?: string | number;
+  scene?: string;
+}
+
+const SVG = "http://www.w3.org/2000/svg";
+
+// 획 하나 = 점 목록. 끝이 살짝 넘치고 시드로 조금 흔들린다
+function strokes(m: StrikeMark, seed: string | number, k: number): Pt[][] {
+  const j = (i: number, amp: number) => (rand(seed, k * 131 + i) - 0.5) * amp;
+  const { x, y, w, h } = m;
+  const line = (ax: number, ay: number, bx: number, by: number, i: number): Pt[] =>
+    Array.from({ length: 9 }, (_, s) => {
+      const u = -0.06 + (1.12 * s) / 8;
+      return [ax + (bx - ax) * u + j(i + s, 6), ay + (by - ay) * u + j(i + s + 40, 6)] as Pt;
+    });
+  if (m.kind === "x") return [line(x, y, x + w, y + h, 0), line(x + w, y, x, y + h, 100)];
+  if (m.kind === "under") return [line(x, y + h * 1.05, x + w, y + h * 1.02, 0)];
+  if (m.kind === "line") return [line(x, y + h * 0.55, x + w, y + h * 0.48, 0)];
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  return [
+    Array.from({ length: 41 }, (_, s) => {
+      const a = -1.9 + (2 * Math.PI * 1.08 * s) / 40;
+      const r = 1.08 + 0.06 * Math.sin(s * 0.7) + j(s, 0.04);
+      return [cx + (w / 2) * r * Math.cos(a), cy + (h / 2) * r * Math.sin(a)] as Pt;
+    }),
+  ];
+}
+
+/**
+ * 손으로 긋는 표시 — 엑스·밑줄·동그라미·가운데 줄이 획 순서대로 빠르게 그어지고 끝이 살짝 넘친다. 그은 뒤에도 손그림처럼 조금 떤다.
+ * (mexicat p(doom) 80.1–80.6초 도식 위 주황 X · Nothing Went Foom 155초 화이트보드의 빨간 X)
+ */
+export function strikeOut(el: HTMLElement, o: StrikeOutOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const seed = o.seed ?? "strike";
+  const svg = doc.createElementNS(SVG, "svg");
+  svg.setAttribute("viewBox", `0 0 ${W} ${H}`);
+  svg.style.cssText = "position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none";
+  el.append(svg);
+  const items = o.marks.flatMap((m, mi) =>
+    strokes(m, seed, 0).map((_, si) => {
+      const p = doc.createElementNS(SVG, "path");
+      p.setAttribute("fill", "none");
+      p.setAttribute("stroke", o.color ?? "var(--kf-accent)");
+      p.setAttribute("stroke-width", String(o.width ?? Math.max(8, Math.min(m.w, m.h) * 0.06)));
+      p.setAttribute("stroke-linecap", "round");
+      p.setAttribute("stroke-linejoin", "round");
+      svg.append(p);
+      const dur = m.dur ?? (m.kind === "circle" ? 0.32 : 0.14);
+      return { p, m, mi, si, at: m.at + si * (dur + 0.05), dur };
+    }),
+  );
+
+  return (t: number) => {
+    t = safeTime(t);
+    let moving = false;
+    const frame = o.boil === 0 ? 0 : Math.floor(Math.max(0, t) * (o.boil ?? 8));
+    for (const it of items) {
+      const pts = strokes(it.m, `${seed}-${it.mi}`, frame)[it.si];
+      const L = lengths(pts).at(-1) ?? 1;
+      const p = ease.outCubic(clamp((t - it.at) / it.dur));
+      if (p > 0 && p < 1) moving = true;
+      it.p.setAttribute("d", toD(pts));
+      it.p.setAttribute("stroke-dasharray", `${L.toFixed(1)} ${L.toFixed(1)}`);
+      it.p.setAttribute("stroke-dashoffset", ((1 - p) * L).toFixed(1));
+      it.p.setAttribute("opacity", p > 0 ? "1" : "0");
+    }
+    mark("strikeOut", o.scene, moving);
+  };
+}

package/packages/motion/src/moves/sunburst.ts

@@ -0,0 +1,58 @@
+import { clamp, ease, safeTime } from "@kasaframe/core";
+import { div, lastIndex, mark } from "./fit.ts";
+
+export interface SunburstOpts {
+  /** 빛살 가운데(px) */
+  x?: number;
+  y?: number;
+  /** 빛살 수 */
+  rays?: number;
+  /** [빛살, 사이] 두 색 */
+  colors?: [string, string];
+  /** 가운데 둥근 빛 색 — 투명이면 없음 */
+  glow?: string;
+  /** 도는 속도(도/초) */
+  speed?: number;
+  /** 박마다 빛살 한 칸씩 툭 도는 시각들 */
+  hits?: number[];
+  w?: number;
+  h?: number;
+  scene?: string;
+}
+
+/**
+ * 도는 햇살 줄무늬 — 반복 원뿔 그라데이션이 천천히 돌고 박마다 한 칸 툭 넘어간다. 가운데는 둥근 빛.
+ * 「터지는」 순간 뒤 바탕으로. (Retro Pixel 38.8·146.6초 · Update Me 38.7초)
+ */
+export function sunburst(el: HTMLElement, o: SunburstOpts = {}): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const cx = o.x ?? W / 2;
+  const cy = o.y ?? H / 2;
+  const rays = o.rays ?? 18;
+  const [a, b] = o.colors ?? ["var(--kf-accent)", "var(--kf-bg)"];
+  const span = 360 / rays;
+  // 어느 모서리까지든 닿게 — 가운데에서 가장 먼 모서리의 두 배 너비
+  const size = 2.1 * Math.max(Math.hypot(cx, cy), Math.hypot(W - cx, cy), Math.hypot(cx, H - cy), Math.hypot(W - cx, H - cy));
+  const wrap = div(doc, "position:absolute;inset:0;overflow:hidden");
+  const disc = div(
+    doc,
+    `position:absolute;left:${cx - size / 2}px;top:${cy - size / 2}px;width:${size}px;height:${size}px;border-radius:50%;` +
+      `background:repeating-conic-gradient(from 0deg, ${a} 0deg ${span / 2}deg, ${b} ${span / 2}deg ${span}deg)`,
+  );
+  const glow = div(doc, `position:absolute;left:${cx - size / 4}px;top:${cy - size / 4}px;width:${size / 2}px;height:${size / 2}px;border-radius:50%;background:radial-gradient(circle, ${o.glow ?? "rgba(255,255,255,.85)"} 0%, rgba(255,255,255,0) 45%)`);
+  wrap.append(disc, glow);
+  el.append(wrap);
+  const hits = o.hits ?? [];
+  return (t: number) => {
+    t = safeTime(t);
+    const k = lastIndex(hits, t);
+    const tick = k < 0 ? 0 : k + ease.outBack(clamp((t - hits[k]) / 0.18));
+    const deg = (o.speed ?? 10) * t + tick * span;
+    disc.style.transform = `rotate(${deg.toFixed(3)}deg)`;
+    const pulse = k < 0 ? 0 : Math.exp(-(t - hits[k]) / 0.15);
+    glow.style.transform = `scale(${(1 + 0.18 * pulse).toFixed(4)})`;
+    mark("sunburst", o.scene, true);
+  };
+}

package/packages/motion/src/moves/tickerRows.ts

@@ -0,0 +1,87 @@
+import { clamp, ease, safeTime } from "@kasaframe/core";
+import { div, mark, textEm } from "./fit.ts";
+
+export interface TickerRow {
+  text: string;
+  /** 줄머리 칩(없으면 칩 없이) */
+  label?: string;
+  /** 초당 px — 음수면 오른쪽으로. 없으면 줄마다 번갈아 */
+  speed?: number;
+  /** 기울기(도) — 기운 리본 */
+  angle?: number;
+  /** 띠 바탕(기본 surface). 리본은 var(--kf-accent) */
+  band?: string;
+  ink?: string;
+}
+
+export interface TickerRowsOpts {
+  rows: TickerRow[];
+  /** 첫 줄 윗변(px) */
+  top?: number;
+  rowH?: number;
+  gap?: number;
+  /** 줄이 차례로 미끄러져 들어오는 시각 */
+  at?: number;
+  w?: number;
+  h?: number;
+  dur?: number;
+  scene?: string;
+}
+
+/**
+ * 반대로 흐르는 띠 — 줄마다 같은 글을 이어 붙여 서로 다른 방향·빠르기로 흐르고, 줄머리에 칩이 붙는다. 기울인 줄은 리본이 된다.
+ * (Update Me 75.6–77.4초 뉴스 세 줄 · 88.9초 기운 리본)
+ */
+export function tickerRows(el: HTMLElement, o: TickerRowsOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const rowH = o.rowH ?? 120;
+  const gap = o.gap ?? 22;
+  const top = o.top ?? (H - o.rows.length * (rowH + gap) + gap) / 2;
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 30;
+  const fs = rowH * 0.46;
+  const layer = div(doc, "position:absolute;inset:0;overflow:hidden");
+  el.append(layer);
+  const rows = o.rows.map((r, i) => {
+    const speed = r.speed ?? (i % 2 ? -1 : 1) * (150 + 40 * i);
+    const unit = `${r.text}\u00a0\u00a0\u2022\u00a0\u00a0`;
+    const unitW = textEm(unit) * fs;
+    const reps = Math.ceil((W * 1.6 + Math.abs(speed) * dur) / unitW) + 2;
+    const band = div(
+      doc,
+      `position:absolute;left:${-W * 0.1}px;width:${W * 1.2}px;top:${top + i * (rowH + gap)}px;height:${rowH}px;overflow:hidden;` +
+        `background:${r.band ?? "var(--kf-surface)"};color:${r.ink ?? "var(--kf-ink)"};border-top:3px solid var(--kf-ink);border-bottom:3px solid var(--kf-ink);transform-origin:50% 50%`,
+    );
+    const strip = div(doc, `position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;white-space:nowrap;font-family:var(--kf-font-mono);font-weight:600;font-size:${fs}px`, unit.repeat(reps));
+    band.append(strip);
+    let chip: HTMLDivElement | null = null;
+    if (r.label) {
+      chip = div(
+        doc,
+        `position:absolute;left:${W * 0.1}px;top:0;height:100%;display:flex;align-items:center;padding:0 ${fs * 0.7}px;background:var(--kf-accent);color:var(--kf-on-accent);font-family:var(--kf-font-display);font-weight:900;font-size:${fs * 0.9}px;letter-spacing:.02em`,
+        r.label,
+      );
+      band.append(chip);
+    }
+    layer.append(band);
+    return { band, strip, speed, reps, unitW, angle: r.angle ?? 0 };
+  });
+
+  return (t: number) => {
+    t = safeTime(t);
+    let moving = false;
+    rows.forEach((r, i) => {
+      const local = t - at - i * 0.08;
+      const p = ease.outCubic(clamp(local / 0.3));
+      if (p < 1) moving = true;
+      // 띠 전체가 옆에서 밀려 들어오고, 안의 글은 그 뒤로도 늘 흐른다
+      const enterX = (1 - p) * (i % 2 ? W : -W) * 1.2;
+      r.band.style.transform = `translateX(${enterX.toFixed(1)}px) rotate(${r.angle}deg)`;
+      const x = -(r.reps * r.unitW) / 2 + r.speed * t;
+      r.strip.style.transform = `translateX(${x.toFixed(1)}px)`;
+    });
+    mark("tickerRows", o.scene, moving);
+  };
+}

package/packages/motion/src/moves/tokenPicker.ts

@@ -0,0 +1,114 @@
+import { clamp, ease, rand, safeTime } from "@kasaframe/core";
+import { div, lastIndex, mark, textEm } from "./fit.ts";
+
+export interface TokenStep {
+  /** 입력 칸에 붙는 글(앞 빈칸 포함해 그대로) */
+  token: string;
+  /** 후보와 확률 — 뽑힌 것(token 과 같은 글)은 켜진다. 쓰는 쪽이 준다(지어내지 않는다) */
+  cands: [string, number][];
+}
+
+export interface TokenPickerOpts {
+  steps: TokenStep[];
+  /** 토큰마다 입력 칸에 붙는 시각(장면 초) */
+  times: number[];
+  /** 입력 칸 앞 표시 */
+  prompt?: string;
+  size?: number;
+  w?: number;
+  h?: number;
+  seed?: string | number;
+  scene?: string;
+}
+
+/**
+ * 다음 토큰 고르기 — 입력 칸 위로 후보 목록과 확률 막대가 잠깐 끓다가 뽑힌 후보가 강조색으로 켜지고, 그 토큰이 입력 칸에 붙는다.
+ * (mexicat p(doom) 16.8–19.0초 「Chat → ChatGPT,」)
+ */
+export function tokenPicker(el: HTMLElement, o: TokenPickerOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const n = Math.min(o.steps.length, o.times.length);
+  const full = o.steps.slice(0, n).map((s) => s.token).join("");
+  // 다 친 글이 칸 안에 들도록 — 고정폭 글자 0.6em 으로 어림
+  const fitW = (W * 0.9) / ((textEm(o.prompt ?? ">") + 0.3 + full.length * 0.6 + 1.2) || 1);
+  const size = o.size ?? Math.min(110, fitW);
+  const seed = o.seed ?? "tokens";
+  const boxW = Math.min(W * 0.9, (textEm(o.prompt ?? ">") + 0.3 + full.length * 0.6 + 1.2) * size);
+  const boxX = (W - boxW) / 2;
+  const boxY = H * 0.56;
+  const layer = div(doc, "position:absolute;inset:0;overflow:hidden");
+  el.append(layer);
+  const field = div(
+    doc,
+    `position:absolute;left:${boxX}px;top:${boxY}px;width:${boxW}px;height:${size * 1.7}px;display:flex;align-items:center;gap:.3em;padding:0 .4em;box-sizing:border-box;` +
+      `border:3px solid var(--kf-line);border-radius:14px;background:var(--kf-surface);font-family:var(--kf-font-mono);font-size:${size}px;color:var(--kf-accent);white-space:pre`,
+  );
+  const promptEl = div(doc, "color:var(--kf-dim)", o.prompt ?? ">");
+  const typed = div(doc, "");
+  const caret = div(doc, `width:.08em;height:1em;background:var(--kf-accent)`);
+  field.append(promptEl, typed, caret);
+  layer.append(field);
+  const rowH = size * 0.6;
+  const maxC = Math.max(1, ...o.steps.map((s) => s.cands.length));
+  const panel = div(
+    doc,
+    `position:absolute;top:${boxY - rowH * (maxC + 1.6)}px;width:${size * 7.4}px;padding:${rowH * 0.3}px ${rowH * 0.5}px;box-sizing:border-box;` +
+      `border:2px solid var(--kf-line);border-radius:10px;background:var(--kf-raised);font-family:var(--kf-font-mono);font-size:${rowH * 0.6}px;color:var(--kf-ink-soft)`,
+  );
+  const head = div(doc, `height:${rowH}px;color:var(--kf-dim)`, "p(next | context)");
+  panel.append(head);
+  const rows = Array.from({ length: maxC }, () => {
+    const row = div(doc, `display:flex;align-items:center;gap:${rowH * 0.4}px;height:${rowH}px`);
+    const label = div(doc, `width:42%;overflow:hidden;white-space:pre`);
+    const track = div(doc, `flex:1;height:${rowH * 0.3}px;background:var(--kf-line);border-radius:4px;overflow:hidden`);
+    const bar = div(doc, "height:100%;width:0;background:var(--kf-dim)");
+    track.append(bar);
+    const num = div(doc, `width:3.4em;text-align:right`);
+    row.append(label, track, num);
+    panel.append(row);
+    return { row, label, bar, num };
+  });
+  layer.append(panel);
+  // 입력 글 폭은 글자 수로 어림(고정폭 0.6em) — 후보 상자를 커서 위에 둔다
+  const caretX = (text: string) => boxX + size * 0.4 + (textEm(o.prompt ?? ">") + 0.3) * size + text.length * 0.6 * size;
+
+  return (t: number) => {
+    t = safeTime(t);
+    const k = lastIndex(o.times.slice(0, n), t);
+    const text = o.steps.slice(0, k + 1).map((s) => s.token).join("");
+    typed.textContent = text;
+    caret.style.opacity = Math.floor(t * 2.2) % 2 === 0 || t - (o.times[k] ?? -9) < 0.4 ? "1" : "0.15";
+    // 다음 토큰 — 붙기 0.32초 전부터 후보가 끓고, 0.08초 전에 하나가 켜진다
+    const j = k + 1 < n ? k + 1 : -1;
+    const local = j >= 0 ? t - (o.times[j] - 0.32) : -1;
+    const show = j >= 0 && local >= 0;
+    panel.style.display = show ? "block" : "none";
+    if (show) {
+      const step = o.steps[j];
+      const pick = ease.outCubic(clamp((local - 0.24) / 0.08));
+      const x = Math.min(W - size * 7.6, Math.max(W * 0.04, caretX(text) - size * 1.2));
+      panel.style.left = `${x.toFixed(1)}px`;
+      panel.style.transform = `translateY(${((1 - ease.outCubic(clamp(local / 0.1))) * 18).toFixed(1)}px)`;
+      rows.forEach((r, i) => {
+        const c = step.cands[i];
+        r.row.style.visibility = c ? "inherit" : "hidden";
+        if (!c) return;
+        const chosen = c[0] === step.token || (i === 0 && !step.cands.some((q) => q[0] === step.token));
+        // 끓는 동안 막대가 흔들리다 실제 확률에 앉는다
+        const wob = (1 - pick) * (rand(seed, j * 97 + i * 7 + Math.floor(local * 30)) - 0.5) * 0.3;
+        const p = Math.max(0, Math.min(1, c[1] + wob));
+        r.label.textContent = `${chosen && pick > 0.5 ? "\u25b8 " : "  "}${c[0]}`;
+        r.bar.style.width = `${(p * 100).toFixed(1)}%`;
+        r.bar.style.background = chosen && pick > 0 ? "var(--kf-accent)" : "var(--kf-dim)";
+        r.num.textContent = p.toFixed(2);
+        r.row.style.color = chosen && pick > 0 ? "var(--kf-accent)" : "var(--kf-ink-soft)";
+      });
+    }
+    // 입력 칸이 박 사이에도 조금씩 다가가 멈추지 않는다
+    layer.style.transform = `scale(${(1 + 0.025 * t).toFixed(4)})`;
+    layer.style.transformOrigin = "50% 60%";
+    mark("tokenPicker", o.scene, show);
+  };
+}