kasaframe 0.0.0-stage → 0.1.3

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

@@ -0,0 +1,191 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { brushWipe } from "./brushWipe.ts";
+import { echoStack } from "./echoStack.ts";
+import { div } from "./fit.ts";
+import { flood } from "./flood.ts";
+import { ghostStack } from "./ghostStack.ts";
+import { gridFloor } from "./gridFloor.ts";
+import { irisBlades } from "./irisBlades.ts";
+import { ledBoard } from "./ledBoard.ts";
+import { neonSign } from "./neonSign.ts";
+import { ransomLetters } from "./ransomLetters.ts";
+import { slamWords } from "./slamWords.ts";
+import { speedLines } from "./speedLines.ts";
+import { splitFlap } from "./splitFlap.ts";
+import { sunburst } from "./sunburst.ts";
+import { truchet } from "./truchet.ts";
+
+// 메뉴(menu.ts)의 이름을 장면에 실제로 건다 — 무대(lib/stage.ts)가 부른다. 수마다 예시 장면에서 검사를 넘긴 값을 기본으로 박아 두어,
+// 뼈대가 고른 수를 그대로 둬도 kf check 를 넘는다. 낱말만 바꿔 쓰면 된다.
+
+type Paint = (t: number) => void;
+
+const color = (ctx: SceneCtx, key: string, fallback: string): string => {
+  const v = ctx.style?.colors?.[key];
+  return typeof v === "string" && v ? v : fallback;
+};
+
+// 상대휘도(WCAG) — #rgb·#rrggbb 만. 못 읽으면 NaN
+function lum(hex: string): number {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return NaN;
+  const h = m[1].length === 3 ? [...m[1]].map((c) => c + c).join("") : m[1];
+  const ch = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255).map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * ch[0] + 0.7152 * ch[1] + 0.0722 * ch[2];
+}
+
+// 오려 붙인 글자는 한 색이 글자색(바탕 위)도 되고 색종이(검은 글자 밑)도 된다 — 둘 다 3:1 을 넘는 가운데 밝기(0.12–0.3)만 쓴다.
+// 밝은 테마·어두운 테마 어디서나 읽힌다. 테마 강조색이 그 안이면 앞에 둔다
+const RANSOM = ["#E4572E", "#2E86DE", "#16A085", "#8E44AD", "#C0392B", "#D35400"];
+
+/** 장면 안 박 — 빠른 곡은 박을 묶어 간격 gap 넘게. 잰 시각 그대로(BPM 을 곱하지 않는다) */
+export function hitTimes(ctx: SceneCtx, gap = 0.4): number[] {
+  const b = ctx.beats.beats.filter((x) => x >= 0 && x < ctx.dur);
+  if (b.length < 2) return b.length ? b : [0];
+  const step = (b[b.length - 1] - b[0]) / (b.length - 1);
+  const every = Math.max(1, Math.ceil(gap / Math.max(step, 1e-3)));
+  const out = b.filter((_, i) => i % every === 0);
+  // 첫 박이 늦으면 첫 화면이 빈다 — 0 에 하나 세운다
+  if (out[0] > 0.12) out.unshift(0);
+  return out;
+}
+
+const cycle = (words: readonly string[], n: number): string[] => Array.from({ length: n }, (_, i) => words[i % words.length]);
+
+// 한 수를 창(박 n 개)마다 새로 세운다 — 박이 쌓일수록 작아지는 수(메아리·네온)를 긴 장면에서도 같은 크기로 되풀이한다
+function windows(host: HTMLElement, hits: readonly number[], per: number, make: (el: HTMLElement, hits: number[], k: number) => Paint): Paint {
+  const starts: number[] = [];
+  const paints: { el: HTMLElement; paint: Paint }[] = [];
+  for (let i = 0, k = 0; i < hits.length; i += per, k++) {
+    const el = div(host.ownerDocument, "position:absolute;inset:0");
+    host.append(el);
+    starts.push(hits[i]);
+    paints.push({ el, paint: make(el, hits.slice(i, i + per), k) });
+  }
+  return (t) => {
+    let k = 0;
+    while (k + 1 < starts.length && starts[k + 1] <= t) k++;
+    paints.forEach((p, i) => {
+      p.el.style.display = i === k ? "block" : "none";
+      if (i === k) p.paint(t);
+    });
+  };
+}
+
+/** 바탕 수 — el 은 화면 전체. still(기본)은 정지라 그리는 함수가 없다(null). 모르는 이름도 still */
+export function dressBg(name: string, el: HTMLElement, ctx: SceneCtx): Paint | null {
+  const { width: w, height: h } = ctx.meta;
+  const hits = hitTimes(ctx);
+  const bg = color(ctx, "bg", "#0b0b0f");
+  const accent = color(ctx, "accent", "#ff5a1f");
+  const soft = color(ctx, "accentSoft", accent);
+  const line = color(ctx, "line", "#888");
+  el.style.background = bg;
+  switch (name) {
+    case "sunburst":
+      // 글 뒤에 깔리니 바탕에 강조색을 조금만 섞은 두 색 — 박마다 툭 도는 줄무늬가 진하면 화면 대부분이 한꺼번에 꺾여 섬광 검사(frame.flash)에 걸린다
+      return sunburst(el, { w, h, hits, rays: h > w ? 16 : 20, colors: [`color-mix(in srgb, ${accent} 14%, ${bg})`, bg], glow: "transparent", speed: 10, scene: ctx.id });
+    case "speedLines":
+      return speedLines(el, { w, h, kind: "radial", color: soft, inner: 0.36, boil: 8, scene: ctx.id });
+    case "gridFloor":
+      return gridFloor(el, { w, h, color: soft, speed: 1.4, glow: 0, scene: ctx.id });
+    case "truchet":
+      return truchet(el, { w, h, hits, cell: Math.round(Math.min(w, h) / 9), bg, line, accent: soft, share: 0.3, scene: ctx.id });
+    default:
+      // 바탕색 위 아주 옅은 점 — 서 있는 질감이라 화면이 비어 보이지 않을 뿐 아무것도 뜻하지 않으니 움직이지 않는다.
+      // 바탕색은 무대 상자에 맡긴다(장면이 마디마다 바탕색을 바꿀 수 있게)
+      el.style.background = "";
+      el.style.backgroundImage = `radial-gradient(circle, color-mix(in srgb, ${line} 55%, transparent) 1.5px, transparent 2px)`;
+      el.style.backgroundSize = `${Math.round(Math.min(w, h) / 24)}px ${Math.round(Math.min(w, h) / 24)}px`;
+      return null;
+  }
+}
+
+/**
+ * 글 수 — el 은 안전 영역 상자(w×h). words 를 차례로 돌려 쓴다. bigWord(무대 기본)거나 모르면 null — 무대가 큰 낱말을 세운다.
+ * 박마다 내용이 바뀌어(새 낱말·새 벌·판 넘김) 같은 구도 검사(layout.static)를 수가 스스로 넘는다
+ */
+export function dressText(name: string, el: HTMLElement, ctx: SceneCtx, o: { words: readonly string[]; w: number; h: number; ready?: boolean }): Paint | null {
+  const given = [...new Set(o.words.map((x) => x.trim()).filter(Boolean))];
+  const words = given.length ? given : ["kasaframe"];
+  const { w, h } = o;
+  const hits = hitTimes(ctx);
+  // 첫 프레임부터 글이 서 있어야 하는 장면(훅) — 첫 박을 장면 앞으로 당겨 이미 내려앉은 낱말로 시작한다
+  if (o.ready && hits[0] <= 0.15) hits[0] = -0.3;
+  const scene = ctx.id;
+  switch (name) {
+    case "slamWords": {
+      // 화면 폭을 채운 낱말이 1초에 두 번 바뀌면 섬광 세 번을 넘는다(frame.flash) — 1.2초 넘는 간격마다
+      const slams = hitTimes(ctx, 1.2);
+      if (o.ready && slams[0] <= 0.15) slams[0] = -0.3;
+      // 낱말 판은 가운데 띠(높이 55%)에 옅은 강조색으로 — 화면 전체를 뒤집으면 판이 바뀌는 박마다 화면 대부분이 한꺼번에
+      // 밝기가 꺾여 섬광 검사(frame.flash)에 걸린다. 띠가 보여야 긴 낱말 하나뿐인 세로 화면도 비어 보이지 않는다(layout.fill)
+      const bh = Math.round(h * 0.55);
+      const band = div(el.ownerDocument, `position:absolute;left:0;top:${Math.round((h - bh) / 2)}px;width:${w}px;height:${bh}px`);
+      el.append(band);
+      return slamWords(band, { words: cycle(words, slams.length), hits: slams, w, h: bh, palettes: [["color-mix(in srgb, var(--kf-accent) 10%, transparent)", "var(--kf-ink)"], ["color-mix(in srgb, var(--kf-accent) 24%, transparent)", "var(--kf-ink)"]], scene });
+    }
+    case "echoStack":
+      return windows(el, hits, 4, (box, hs, k) => echoStack(box, { word: words[k % words.length], hits: hs, dir: k % 2 ? "back" : "down", w, h, scene }));
+    case "splitFlap": {
+      const times = hits.filter((_, i) => i % 2 === 0);
+      const texts = cycle(words, times.length);
+      // 판에 같은 글이 이어 오르면 넘어가지 않는다 — 낱말이 하나면 판 넘김 대신 글자판을 비웠다 채운다
+      if (words.length === 1) texts.forEach((_, i) => i % 2 && (texts[i] = " ".repeat([...words[0]].length)));
+      return splitFlap(el, { texts, times, w, h, scene });
+    }
+    case "ghostStack": {
+      const times = hits.filter((_, i) => i % 2 === 0);
+      const lines = cycle(words, Math.max(4, times.length + 2)).map((text, i) => ({ text, at: times[i] ?? ctx.dur + i, hot: [0] }));
+      return ghostStack(el, { lines, visible: 3, w, h, scene });
+    }
+    case "ransomLetters": {
+      const accent = color(ctx, "accent", "");
+      const l = lum(accent);
+      const palette = l >= 0.12 && l <= 0.3 ? [accent, ...RANSOM] : RANSOM;
+      return windows(el, hits, 6, (box, hs, k) => ransomLetters(box, { text: words[k % words.length], at: Math.max(0, hs[0] - 0.02), hits: hs, palette, w, h, seed: `${scene}:${k}`, scene }));
+    }
+    case "neonSign": {
+      // 네온은 어두운 판 위에서 산다 — 밝은 테마에서도 간판 판을 깐다
+      const plate = div(el.ownerDocument, `position:absolute;inset:0;border-radius:${Math.round(Math.min(w, h) * 0.06)}px;background:#0a090d`);
+      el.append(plate);
+      const neon = color(ctx, "accent", "#FF4F7A");
+      return windows(plate, hits, 6, (box, hs, k) => neonSign(box, { text: words[k % words.length], at: hs[0] + 0.02, color: neon, w, h, seed: `${scene}:${k}`, scene }));
+    }
+    case "ledBoard": {
+      const text = cycle(words, 3).join("  ");
+      // 글이 장면 끝에서야 다 지나가는 빠르기 — 일찍 다 지나가면 빈 판이 멈춘 화면이 된다. 판 칸 수 = 폭 ÷ (판 높이/18), 글 폭은 16점 글꼴 0.6em 어림
+      const cols = Math.floor((w * 18) / (h * 0.4));
+      const speed = (cols + text.length * 16 * 0.6) / (ctx.dur + 0.3);
+      return ledBoard(el, { text, mode: "scroll", speed, at: 0, x: 0, y: h * 0.3, w, h: h * 0.4, stageW: w, stageH: h, color: color(ctx, "accent", "#FFB23E"), scene });
+    }
+    default:
+      return null;
+  }
+}
+
+/**
+ * 장면 경계를 걸치는 덮기 — out 은 장면 끝에서 덮고, in 은 다음 장면 처음에 걷힌다. 다 덮인 채 서 있는 시간은 0.05초 안팎 —
+ * 한 색 화면이 0.1초를 넘으면 멈춤 검사(frame.freeze)에 걸린다. 조리개는 끝까지 닫지 않고 바늘구멍에서 되돌아 연다. 두 장면이 경계의 영상 시각을 같은 씨앗으로 써서
+ * 앞 장면 마지막 프레임과 뒤 장면 첫 프레임이 같은 덮개로 이어진다. el 은 화면 전체, 맨 위 층
+ */
+export function dressWipe(name: string, el: HTMLElement, ctx: SceneCtx, side: "in" | "out"): Paint | null {
+  const { width: w, height: h } = ctx.meta;
+  const B = side === "out" ? ctx.dur : 0;
+  const seed = `${name}@${(ctx.from + B).toFixed(3)}`;
+  const accent = color(ctx, "accent", "#5b3fd9");
+  const ink = color(ctx, "ink", "#111111");
+  switch (name) {
+    case "brushWipe":
+      return brushWipe(el, { w, h, at: B - 0.35, dur: 0.7, strokes: 5, color: accent, seed, scene: ctx.id });
+    case "irisBlades":
+      // 다 열린 육각 구멍이 화면 모서리까지 덮게 — 변까지 거리가 대각선 반을 넘어야 모서리에 날이 안 남는다
+      return irisBlades(el, { w, h, color: ink, seam: "rgba(255,255,255,.3)", radius: (Math.hypot(w, h) / 2 / Math.cos(Math.PI / 6)) * 1.04, stiffness: 260, damping: 32, steps: [{ at: B - 100, open: 1 }, { at: B - 0.32, open: 0 }, { at: B - 0.02, open: 1 }], scene: ctx.id });
+    case "flood": {
+      const zero = { x: w / 2, y: h / 2, w: 0, h: 0, radius: 0 };
+      return flood(el, { w, h, x: w / 2, y: h / 2, color: accent, steps: [{ at: B - 100, shape: zero }, { at: B - 0.28, shape: "cover" }, { at: B - 0.02, shape: zero }], scene: ctx.id });
+    }
+    default:
+      return null;
+  }
+}

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

@@ -0,0 +1,70 @@
+import { clamp, ease, safeTime } from "@kasaframe/core";
+import { div, fitSize, mark } from "./fit.ts";
+
+export interface EchoStackOpts {
+  word: string;
+  /** 메아리가 한 벌씩 생기는 시각(장면 초) — 첫 시각에 원본 */
+  hits: number[];
+  /** down: 아래로 줄줄이 · back: 뒤로 작아지며 겹친다 */
+  dir?: "down" | "back";
+  size?: number;
+  w?: number;
+  h?: number;
+  scene?: string;
+}
+
+/**
+ * 같은 낱말의 메아리 — 박마다 한 벌씩 앞 벌에서 미끄러져 나와 쌓이고, 멀어질수록 외곽선만 남으며 흐려진다. 새 벌은 잠깐 강조색.
+ * (ESCAPE VELOCITY 272.5–274초 「BACK」 다섯 줄 · mexicat 60초 숫자 잔상)
+ */
+export function echoStack(el: HTMLElement, o: EchoStackOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const n = o.hits.length;
+  const back = o.dir === "back";
+  const px = o.size ?? fitSize(o.word, W, H, back ? { share: 0.7, hShare: 0.44 } : { share: 0.62, hShare: 1.12 / Math.max(1, n) });
+  // 벌 사이를 촘촘히 — 메아리가 한 덩어리로 읽히게
+  const lh = px * 0.74;
+  const layer = div(doc, "position:absolute;inset:0;overflow:hidden");
+  const block = div(doc, `position:absolute;left:50%;top:50%;width:0;height:0;font-family:var(--kf-font-display);font-weight:900;font-size:${px}px;line-height:${lh}px;letter-spacing:-.03em;white-space:nowrap`);
+  layer.append(block);
+  el.append(layer);
+  const copies = o.hits.map((_, i) => {
+    const c = div(doc, `position:absolute;left:0;top:0;transform-origin:50% 50%;z-index:${n - i}`, o.word);
+    if (i > 0 && i % 2 === 1) Object.assign(c.style, { color: "transparent", webkitTextStroke: ".025em var(--kf-ink)" });
+    block.append(c);
+    return c;
+  });
+
+  return (t: number) => {
+    t = safeTime(t);
+    let moving = false;
+    copies.forEach((c, i) => {
+      const local = t - o.hits[i];
+      const p = ease.outCubic(clamp(local / 0.16));
+      if (local < 0) {
+        c.style.opacity = "0";
+        return;
+      }
+      if (local < 0.16) moving = true;
+      const fade = 1 - (0.8 * i) / Math.max(1, n);
+      c.style.opacity = (p * fade).toFixed(3);
+      const hotNow = local < 0.25 && i > 0;
+      if (i % 2 === 0) c.style.color = hotNow ? "var(--kf-accent)" : "var(--kf-ink)";
+      else c.style.webkitTextStroke = `.025em ${hotNow ? "var(--kf-accent)" : "var(--kf-ink)"}`;
+      if (back) {
+        const s = 0.84 ** (i - 1 + p);
+        const y = -(i - 1 + p) * px * 0.2;
+        c.style.transform = `translate(-50%,${(-lh / 2 + y).toFixed(1)}px) scale(${(i === 0 ? 1 : s).toFixed(4)})`;
+      } else {
+        const y = (i - (n - 1) / 2) * lh - (1 - p) * lh * 0.6;
+        const x = (i - (n - 1) / 2) * px * 0.06;
+        c.style.transform = `translate(calc(-50% + ${x.toFixed(1)}px),${(y - lh / 2).toFixed(1)}px)`;
+      }
+    });
+    // 묶음 전체가 옆으로 흔들리며 흘러 다음 박까지 서지 않는다 — 위아래로 퍼지거나 커지면 끝 벌이 화면 밖으로 잘린다
+    block.style.transform = `translate(${(W * 0.07 * Math.sin(t * 1.9)).toFixed(1)}px,0) scale(${(1 + 0.02 * t).toFixed(4)})`;
+    mark("echoStack", o.scene, moving);
+  };
+}

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

@@ -0,0 +1,70 @@
+import { emit } from "@kasaframe/core";
+
+// 수들이 같이 쓰는 도우미. build 때는 장면이 숨어 있어 글 폭을 잴 수 없다 — 글자 수로 어림한다.
+
+/** 글 폭을 글자 크기(em) 단위로 어림 — 한글·한자 1, 라틴 0.62, 빈칸 0.3 */
+export function textEm(text: string): number {
+  return [...text].reduce((a, c) => a + (/[ᄀ-ᇿ㄰-㆏가-힯一-鿿]/.test(c) ? 1 : c === " " ? 0.3 : 0.62), 0) || 1;
+}
+
+/** 폭 `w` 의 `share` 몫, 높이 `h` 의 `hShare` 몫 안에 드는 글자 크기(px) */
+export function fitSize(text: string, w: number, h: number, o: { share?: number; hShare?: number; max?: number; min?: number } = {}): number {
+  const byW = (w * (o.share ?? 0.86)) / textEm(text);
+  const byH = h * (o.hShare ?? 0.62);
+  return Math.round(Math.max(o.min ?? 24, Math.min(o.max ?? 2000, byW, byH)));
+}
+
+/** 시각 목록에서 t 에 켜져 있는 칸 — 첫 시각 전이면 -1 */
+export function lastIndex(times: readonly number[], t: number): number {
+  let k = -1;
+  for (let i = 0; i < times.length; i++) if (times[i] <= t) k = i;
+  return k;
+}
+
+export function div(doc: Document, css: string, text?: string): HTMLDivElement {
+  const d = doc.createElement("div");
+  d.style.cssText = css;
+  if (text !== undefined) d.textContent = text;
+  return d;
+}
+
+/** 움직이는 동안 검사용 기록을 남긴다 — 같은 수를 이어지는 장면에 되풀이하면 motion.repeat 가 잡는다 */
+export function mark(name: string, scene: string | undefined, active: boolean): void {
+  if (active) emit({ kind: "move", source: name, scene, name: `move:${name}`, value: 1 });
+}
+
+/**
+ * 띠 글 — 낱말 조각들(pieces, 한 바퀴)을 이어 붙여 흐르게 하되, 화면 끝에 걸친 조각은 끝에 닿기 전에 흐려져 사라진다(양 끝 흐림).
+ * 글이 잘린 채 화면 끝에 머물면 검사가 text.offscreen 으로 잡는다 — 그래서 한 줄 대신 낱말마다 따로 둔다(긴 줄 하나면 늘 끝에 걸려 안 보인다).
+ * cycles 는 화면을 덮는 바퀴 수, em 은 조각 폭 어림(px, 처음 보일 때 잰 폭으로 바뀐다).
+ * 반환 함수: offset(띠 안 px, 흐른 거리) · toScreen(띠 안 x → 화면 x) · view(화면에서 보이는 [왼쪽, 오른쪽]) · fade(흐려지는 폭 px)
+ */
+export function strip(host: HTMLElement, pieces: readonly string[], cycles: number, guess: (piece: string) => number): (offset: number, toScreen: (x: number) => number, view: [number, number], fade: number) => void {
+  const doc = host.ownerDocument;
+  const spans = Array.from({ length: cycles * pieces.length }, (_, k) => {
+    const s = doc.createElement("span");
+    s.textContent = pieces[k % pieces.length];
+    s.style.cssText = "position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:pre";
+    host.append(s);
+    return s;
+  });
+  let widths: number[] | null = null;
+  return (offset, toScreen, view, fade) => {
+    // 조각 폭은 글꼴이 걸린 뒤 처음 보일 때 잰다(build 때는 장면이 숨어 있다)
+    if (!widths && spans[0].offsetWidth) widths = pieces.map((_, i) => spans[i].offsetWidth);
+    const ws = widths ?? pieces.map(guess);
+    const lap = ws.reduce((a, b) => a + b, 0) || 1;
+    const total = lap * cycles;
+    let acc = 0;
+    spans.forEach((s, k) => {
+      const w = ws[k % pieces.length];
+      const x = ((((offset + acc) % total) + total) % total) - lap;
+      acc += w;
+      const a = toScreen(x);
+      const b = toScreen(x + w);
+      const edge = Math.min(Math.min(a, b) - view[0], view[1] - Math.max(a, b));
+      s.style.left = `${x.toFixed(1)}px`;
+      s.style.opacity = Math.max(0, Math.min(1, edge / fade)).toFixed(3);
+    });
+  };
+}

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

@@ -0,0 +1,61 @@
+import { safeTime } from "@kasaframe/core";
+import { div, mark } from "./fit.ts";
+import { springSteps, type SpringStep } from "./liquidTab.ts";
+
+export type FloodShape = "dot" | "cover" | { x: number; y: number; w: number; h: number; radius?: number };
+
+export interface FloodOpts {
+  /** 점이 생기고 덮기가 퍼져 나가는 자리(px) */
+  x?: number;
+  y?: number;
+  /** 모양이 바뀌는 시각과 모양 — "dot" 작은 점 · "cover" 화면을 넘치게 덮기 · 상자(다음 장면의 액자 자리) */
+  steps: { at: number; shape: FloodShape }[];
+  color?: string;
+  /** 점 지름(px) */
+  dot?: number;
+  w?: number;
+  h?: number;
+  stiffness?: number;
+  damping?: number;
+  scene?: string;
+}
+
+/**
+ * 덮고 오므리기 — 점 하나가 화면 밖까지 넘치게 퍼져 덮었다가, 다음 장면의 모양(알약·액자)으로 오므라든다.
+ * 덮을 때는 대각선의 1.1배까지 0.3초쯤 — 짧으면 한 프레임에 화면 반이 바뀌어 튄다. (twoclipping 공개 영상 1.4·22.6초)
+ */
+export function flood(el: HTMLElement, o: FloodOpts): (t: number) => void {
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const ox = o.x ?? W / 2;
+  const oy = o.y ?? H / 2;
+  const dot = o.dot ?? 28;
+  // 퍼지는 점에서 가장 먼 모서리까지의 1.1배 — 어느 자리에서 시작해도 모서리가 남지 않게
+  const reach = 1.1 * Math.max(Math.hypot(ox, oy), Math.hypot(W - ox, oy), Math.hypot(ox, H - oy), Math.hypot(W - ox, H - oy));
+  const rect = (s: FloodShape) =>
+    s === "dot" ? { x: ox, y: oy, w: dot, h: dot, r: dot / 2 } : s === "cover" ? { x: ox, y: oy, w: reach * 2, h: reach * 2, r: reach } : { x: s.x + s.w / 2, y: s.y + s.h / 2, w: s.w, h: s.h, r: s.radius ?? 28 };
+  const rects = o.steps.map((s) => ({ at: s.at, ...rect(s.shape) }));
+  const track = (k: "x" | "y" | "w" | "h" | "r"): SpringStep[] => rects.map((r) => ({ at: r.at, to: r[k] }));
+  const tracks = { x: track("x"), y: track("y"), w: track("w"), h: track("h"), r: track("r") };
+  const shape = div(el.ownerDocument, `position:absolute;left:0;top:0;background:${o.color ?? "var(--kf-ink)"};will-change:transform`);
+  el.append(shape);
+  const first = o.steps[0]?.at ?? 0;
+  const sp = { stiffness: o.stiffness ?? 240, damping: o.damping ?? 30, from: 0 };
+  return (t: number) => {
+    t = safeTime(t);
+    if (t < first) {
+      shape.style.display = "none";
+      return;
+    }
+    shape.style.display = "block";
+    const v = (k: keyof typeof tracks) => springSteps(t, tracks[k], { ...sp, from: tracks[k][0].to });
+    const w = Math.max(0, v("w"));
+    const h = Math.max(0, v("h"));
+    const r = Math.max(0, Math.min(v("r"), w / 2, h / 2));
+    shape.style.width = `${w.toFixed(1)}px`;
+    shape.style.height = `${h.toFixed(1)}px`;
+    shape.style.borderRadius = `${r.toFixed(1)}px`;
+    shape.style.transform = `translate(${(v("x") - w / 2).toFixed(1)}px, ${(v("y") - h / 2).toFixed(1)}px)`;
+    mark("flood", o.scene, o.steps.some((s) => t >= s.at && t < s.at + 0.45));
+  };
+}

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

@@ -0,0 +1,88 @@
+import { clamp, ease, safeTime } from "@kasaframe/core";
+import { div, fitSize, lastIndex, mark } from "./fit.ts";
+
+export interface GhostLine {
+  text: string;
+  /** 이 줄이 채워지기 시작하는 시각(장면 초) — 보통 박 */
+  at: number;
+  /** 강조색으로 채울 낱말 번호(빈칸으로 나눈) */
+  hot?: number[];
+}
+
+export interface GhostStackOpts {
+  lines: GhostLine[];
+  /** 한 화면에 보이는 줄 수 */
+  visible?: number;
+  /** 한 줄을 채우는 가장 짧은 초 — 다음 줄 박이 있으면 그 박까지 같은 빠르기로 채운다 */
+  fill?: number;
+  w?: number;
+  h?: number;
+  scene?: string;
+}
+
+/**
+ * 외곽선 유령이 먼저 깔리고 부를 때 채워진다 — 다음 줄은 속 빈 외곽선으로 미리 보이고, 제 박에 왼쪽부터 채워지며 묶음이 한 줄씩 위로 밀린다.
+ * (mexicat p(doom) 116.5–118.7초 「BREAKING THROUGH EACH SAFETY FENCE」)
+ */
+export function ghostStack(el: HTMLElement, o: GhostStackOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const vis = o.visible ?? 3;
+  const fillDur = o.fill ?? 0.22;
+  const longest = o.lines.reduce((a, l) => (l.text.length > a.length ? l.text : a), "");
+  const px = fitSize(longest, W, H, { share: 0.92, hShare: 0.86 / vis });
+  const lh = px * 0.94;
+  const layer = div(doc, "position:absolute;inset:0;overflow:hidden");
+  const stack = div(doc, `position:absolute;left:${W * 0.04}px;top:0;width:${W * 0.92}px;font-family:var(--kf-font-display);font-weight:900;font-size:${px}px;line-height:${lh}px;letter-spacing:-.035em;white-space:nowrap`);
+  layer.append(stack);
+  el.append(layer);
+  const rows = o.lines.map((l, i) => {
+    const row = div(doc, `position:absolute;left:0;top:${i * lh}px;height:${lh}px`);
+    // 유령 줄도 읽혀야 한다 — 가는 반투명 외곽선은 밝은 바탕에서 대비 1.2:1 로 검사(text.contrast)에 걸렸다
+    const ghost = div(doc, "position:absolute;left:0;top:0;color:transparent;-webkit-text-stroke:.03em var(--kf-ink);opacity:.85");
+    const full = div(doc, "position:absolute;left:0;top:0;color:var(--kf-ink)");
+    l.text.split(" ").forEach((w, j, all) => {
+      const span = doc.createElement("span");
+      span.textContent = j < all.length - 1 ? `${w} ` : w;
+      if (l.hot?.includes(j)) span.style.color = "var(--kf-accent)";
+      full.append(span);
+    });
+    ghost.textContent = l.text;
+    row.append(ghost, full);
+    stack.append(row);
+    return { row, ghost, full };
+  });
+  const times = o.lines.map((l) => l.at);
+  // 마지막 줄은 다음 박이 없다 — 앞 줄들의 박 간격만큼 채운다
+  const gap = times.length > 1 ? (times[times.length - 1] - times[0]) / (times.length - 1) : fillDur;
+
+  return (t: number) => {
+    t = safeTime(t);
+    const k = lastIndex(times, t);
+    // 채워지는 줄이 아래에서 둘째 칸에 오도록 — 박마다 0.2초 만에 한 줄 밀린다
+    const target = (i: number) => Math.max(0, i - (vis - 2));
+    const prev = target(Math.max(0, k - 1));
+    const cur = target(Math.max(0, k));
+    const p = k < 0 ? 1 : ease.outCubic(clamp((t - times[k]) / 0.2));
+    const scroll = prev + (cur - prev) * p;
+    // 박 사이에도 묶음이 천천히 떠올라 멈추지 않는다
+    const drift = 14 * t;
+    const top = H / 2 - (vis * lh) / 2 - scroll * lh - drift;
+    stack.style.transform = `translateY(${top.toFixed(1)}px)`;
+    rows.forEach((r, i) => {
+      // 유령은 앞 줄이 채워질 때 나타난다
+      const ghostAt = i === 0 ? times[0] - 0.3 : times[i - 1];
+      r.ghost.style.opacity = (0.85 * clamp((t - ghostAt) / 0.15)).toFixed(3);
+      // 다음 줄 박까지 같은 빠르기로 채운다 — 읽어 나가는 빠르기. 0.2초 만에 다 채우면 다음 박까지 화면이 선다
+      const span = Math.max(fillDur, times[i + 1] !== undefined ? times[i + 1] - times[i] : gap);
+      const f = clamp((t - times[i]) / span);
+      r.full.style.clipPath = `inset(0 ${((1 - f) * 100).toFixed(2)}% 0 0)`;
+      r.row.style.display = i < cur - 1 || i > k + 1 ? "none" : "block";
+      // 위로 밀려 나가는 줄은 화면 끝에 닿기 전에 흐려진다 — 잘린 글이 남지 않게(검사 text.offscreen)
+      const y = top + i * lh;
+      r.row.style.opacity = Math.max(0, Math.min(1, y / (lh * 0.3), (H - y - lh) / (lh * 0.3))).toFixed(3);
+    });
+    mark("ghostStack", o.scene, k >= 0 && t - times[k] < fillDur);
+  };
+}

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

@@ -0,0 +1,100 @@
+import { safeTime } from "@kasaframe/core";
+import { mark } from "./fit.ts";
+
+export interface GridFloorOpts {
+  /** 지평선 높이(화면 높이의 몫) */
+  horizon?: number;
+  /** 소실점 가로 자리(px) */
+  vx?: number;
+  color?: string;
+  /** 빛 번짐(px) — 0 이면 없음 */
+  glow?: number;
+  /** 앞으로 흐르는 속도(칸/초) */
+  speed?: number;
+  /** 세로선 수(한쪽) */
+  columns?: number;
+  /** 가로선 수 */
+  rows?: number;
+  /** 천장에도 같은 모눈 — 터널 */
+  tunnel?: boolean;
+  lineWidth?: number;
+  w?: number;
+  h?: number;
+  scene?: string;
+}
+
+/**
+ * 원근 모눈 바닥 — 가로선 간격이 깊이(z)를 따라 좁아지고 z 를 t 로 흘려 앞으로 달린다. tunnel 이면 천장도.
+ * 두께 있는 글은 같이 내보내는 extrude() 를 text-shadow 에. (mexicat p(doom) 47.8–49.3초 · Where No Map Goes 14.8·65.4초)
+ */
+export function gridFloor(el: HTMLElement, o: GridFloorOpts = {}): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const canvas = doc.createElement("canvas");
+  canvas.width = W;
+  canvas.height = H;
+  canvas.style.cssText = `position:absolute;left:0;top:0;width:${W}px;height:${H}px;pointer-events:none`;
+  el.append(canvas);
+  const g = canvas.getContext("2d")!;
+  const hy = H * (o.horizon ?? 0.42);
+  const vx = o.vx ?? W / 2;
+  const cols = o.columns ?? 14;
+  const rows = o.rows ?? 22;
+  const color = o.color ?? "#3BE7FF";
+  // 카메라 높이·초점 — 가장 가까운 가로선(z=1)이 화면 아래 끝에 오게
+  const near = 1;
+  const far = rows;
+  const floorSpan = H - hy;
+  const ceilSpan = hy;
+  return (t: number) => {
+    t = safeTime(t);
+    g.clearRect(0, 0, W, H);
+    g.strokeStyle = color;
+    g.lineWidth = o.lineWidth ?? 2.5;
+    g.shadowColor = color;
+    g.shadowBlur = o.glow ?? 14;
+    const scroll = (t * (o.speed ?? 2.4)) % 1;
+    const planes: [number, number][] = [[1, floorSpan]];
+    if (o.tunnel) planes.push([-1, ceilSpan]);
+    for (const [sign, span] of planes) {
+      // 가로선 — z 가 near..far, 화면 높이는 1/z 에 비례
+      for (let k = 0; k <= rows; k++) {
+        const z = near + k - scroll;
+        if (z < near * 0.6 || z > far) continue;
+        const y = hy + (sign * span * near) / z;
+        g.globalAlpha = Math.min(1, 1.6 - z / far);
+        g.beginPath();
+        g.moveTo(0, y);
+        g.lineTo(W, y);
+        g.stroke();
+      }
+      // 세로선 — 소실점에서 화면 끝 너머로 퍼진다
+      g.globalAlpha = 0.85;
+      for (let c = -cols; c <= cols; c++) {
+        const x = vx + (c / cols) * W * 1.6;
+        g.beginPath();
+        g.moveTo(vx, hy);
+        g.lineTo(x, hy + sign * span);
+        g.stroke();
+      }
+    }
+    g.globalAlpha = 1;
+    g.shadowBlur = 0;
+    mark("gridFloor", o.scene, true);
+  };
+}
+
+/**
+ * 두께 있는 글 — text-shadow 를 1px 씩 n 겹, 뒤로 갈수록 어둡게. 원근 바닥 위로 날아가는 글에. `el.style.textShadow = extrude(14, "#ff7a00")`
+ */
+export function extrude(n: number, color: string, o: { dx?: number; dy?: number; shade?: number } = {}): string {
+  const dx = o.dx ?? 1;
+  const dy = o.dy ?? 1;
+  const shade = o.shade ?? 55;
+  return Array.from({ length: n }, (_, i) => {
+    const k = i + 1;
+    const dark = Math.round(20 + (shade * k) / n);
+    return `${(dx * k).toFixed(1)}px ${(dy * k).toFixed(1)}px 0 color-mix(in srgb, ${color} ${100 - dark}%, black)`;
+  }).join(", ");
+}