kasaframe 0.0.0-stage → 0.1.1

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,79 @@
+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`);
+    const ghost = div(doc, "position:absolute;left:0;top:0;color:transparent;-webkit-text-stroke:.022em var(--kf-ink);opacity:.5");
+    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);
+
+  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;
+    stack.style.transform = `translateY(${(H / 2 - (vis * lh) / 2 - scroll * lh - drift).toFixed(1)}px)`;
+    rows.forEach((r, i) => {
+      // 유령은 앞 줄이 채워질 때 나타난다
+      const ghostAt = i === 0 ? times[0] - 0.3 : times[i - 1];
+      r.ghost.style.opacity = (0.5 * clamp((t - ghostAt) / 0.15)).toFixed(3);
+      const f = ease.outCubic(clamp((t - times[i]) / fillDur));
+      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";
+    });
+    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(", ");
+}

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

@@ -0,0 +1,109 @@
+import { clamp, rand, safeTime, spring } from "@kasaframe/core";
+import { div, mark } from "./fit.ts";
+
+export interface ImageSwarmOpts {
+  /** 카드 그림들 — 모자라면 돌려 쓰고, 없으면 colors 로 칠한 카드 */
+  srcs?: string[];
+  colors?: string[];
+  /** 카드 안을 짓는다(그림 대신·위에 글 등) */
+  build?: (card: HTMLElement, i: number) => void;
+  count?: number;
+  /** 앉을 격자 */
+  grid: { cols: number; rows: number; x?: number; y?: number; w?: number; h?: number; gap?: number };
+  /** 흩어진 구름에서 격자로 모이기 시작하는 시각 */
+  gatherAt: number;
+  /** 카드마다 늦춤(초) */
+  stagger?: number;
+  /** 다시 흩어지는 시각 */
+  scatterAt?: number;
+  /** 한 장만 커져 화면을 채운다(다음 장면으로) */
+  hero?: { index: number; at: number };
+  radius?: number;
+  seed?: string | number;
+  w?: number;
+  h?: number;
+  scene?: string;
+}
+
+/**
+ * 그림 카드 떼 — 카드마다 흩어진 자리·기울기·깊이(시드)가 있어 구름처럼 떠다니다가, 차례로 스프링을 타고 벽돌 격자로 앉는다.
+ * 다시 흩어지거나 한 장만 커져 다음 장면이 된다. (Cosmos 공개 영상 1.5–3.6·20.5–22·34초)
+ */
+export function imageSwarm(el: HTMLElement, o: ImageSwarmOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const gx = o.grid.x ?? W * 0.06;
+  const gy = o.grid.y ?? H * 0.12;
+  const gw = o.grid.w ?? W - gx * 2;
+  const gh = o.grid.h ?? H - gy * 1.4;
+  const gap = o.grid.gap ?? 14;
+  const cw = (gw - gap * (o.grid.cols - 1)) / o.grid.cols;
+  const ch = (gh - gap * (o.grid.rows - 1)) / o.grid.rows;
+  const n = Math.min(o.count ?? o.grid.cols * o.grid.rows, o.grid.cols * o.grid.rows);
+  const seed = o.seed ?? "swarm";
+  const colors = o.colors ?? ["#ff6b6b", "#ffd93d", "#6bcB77", "#4d96ff", "#c77dff", "#ff9a3c"];
+  const layer = div(doc, "position:absolute;inset:0;overflow:hidden");
+  el.append(layer);
+  const cards = Array.from({ length: n }, (_, i) => {
+    const r = (k: number) => rand(seed, i * 13 + k);
+    const card = div(doc, `position:absolute;left:0;top:0;width:${cw}px;height:${ch}px;border-radius:${o.radius ?? 10}px;overflow:hidden;background:${colors[i % colors.length]};box-shadow:0 10px 30px rgba(0,0,0,.25);will-change:transform`);
+    if (o.srcs?.length) {
+      const img = doc.createElement("img");
+      img.src = o.srcs[i % o.srcs.length];
+      img.style.cssText = "width:100%;height:100%;object-fit:cover;display:block";
+      card.append(img);
+    }
+    o.build?.(card, i);
+    layer.append(card);
+    // 벽돌 격자 — 홀수 줄은 4분의 1 칸 밀어 줄눈이 엇갈리게
+    const col = i % o.grid.cols;
+    const row = Math.floor(i / o.grid.cols);
+    const home = { x: gx + col * (cw + gap) + (row % 2 ? (cw + gap) / 4 : 0), y: gy + row * (ch + gap) };
+    const depth = r(0);
+    return {
+      card,
+      home,
+      cloud: { x: W * (-0.1 + 1.2 * r(1)) - cw / 2, y: H * (-0.1 + 1.2 * r(2)) - ch / 2, rot: (r(3) - 0.5) * 50, s: 0.55 + 0.75 * depth, blur: (1 - depth) * 4 },
+      drift: { x: (r(4) - 0.5) * 120, y: (r(5) - 0.5) * 80, phase: r(6) * 6.28 },
+      order: r(7),
+    };
+  });
+  const stagger = o.stagger ?? 0.025;
+  return (t: number) => {
+    t = safeTime(t);
+    let moving = false;
+    cards.forEach((c, i) => {
+      // 구름 자리 — 천천히 떠다닌다(닫힌 식이라 t 만으로)
+      const fx = c.cloud.x + c.drift.x * Math.sin(t * 0.9 + c.drift.phase);
+      const fy = c.cloud.y + c.drift.y * Math.cos(t * 0.7 + c.drift.phase);
+      const start = o.gatherAt + c.order * stagger * n;
+      let g = spring(t - start, { stiffness: 140, damping: 17 });
+      if (o.scatterAt !== undefined) g -= spring(t - o.scatterAt - c.order * stagger * n * 0.5, { stiffness: 120, damping: 15 });
+      const x = fx + (c.home.x - fx) * g;
+      const y = fy + (c.home.y - fy) * g;
+      let rot = c.cloud.rot * (1 - g);
+      let s = c.cloud.s + (1 - c.cloud.s) * g;
+      let opacity = 1;
+      let tx = x;
+      let ty = y;
+      if (o.hero && t >= o.hero.at) {
+        const k = spring(t - o.hero.at, { stiffness: 160, damping: 20 });
+        if (i === o.hero.index) {
+          // 화면을 채운 뒤에도 천천히 다가간다 — 다음 장면이 된 카드가 멈춘 단색 화면이 되지 않게
+          const big = Math.max(W / cw, H / ch) * (1.02 + 0.12 * (t - o.hero.at));
+          tx = x + (W / 2 - cw / 2 - x) * k;
+          ty = y + (H / 2 - ch / 2 - y) * k;
+          s = s + (big - s) * k;
+          rot = rot * (1 - k);
+          c.card.style.zIndex = "99";
+        } else opacity = 1 - clamp(k * 1.4);
+      }
+      c.card.style.opacity = opacity.toFixed(3);
+      c.card.style.filter = g < 0.98 ? `blur(${(c.cloud.blur * (1 - g)).toFixed(2)}px)` : "";
+      c.card.style.transform = `translate(${tx.toFixed(1)}px, ${ty.toFixed(1)}px) rotate(${rot.toFixed(2)}deg) scale(${s.toFixed(4)})`;
+      if (Math.abs(1 - g) > 0.01 && g > 0.01) moving = true;
+    });
+    mark("imageSwarm", o.scene, moving);
+  };
+}

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

@@ -0,0 +1,19 @@
+// 영상에서 모은 연출 수 — docs/references/opus-videos.md. 수마다 3–5초 예시: examples/moves/<이름>/
+export * from "./fit.ts";
+export * from "./slamWords.ts";
+export * from "./sunburst.ts";
+export * from "./speedLines.ts";
+export * from "./gridFloor.ts";
+export * from "./truchet.ts";
+export * from "./pointSphere.ts";
+export * from "./shapeMorph.ts";
+export * from "./panelPop.ts";
+export * from "./imageSwarm.ts";
+export * from "./liquidTab.ts";
+export * from "./brushWipe.ts";
+export * from "./paperTear.ts";
+export * from "./irisBlades.ts";
+export * from "./flood.ts";
+export * from "./cloneArray.ts";
+export * from "./curtains.ts";
+export * from "./morphBox.ts";

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

@@ -0,0 +1,113 @@
+import { safeTime } from "@kasaframe/core";
+import { mark } from "./fit.ts";
+import { springSteps } from "./liquidTab.ts";
+
+export interface IrisBladesOpts {
+  /** 조리개 가운데(px) */
+  x?: number;
+  y?: number;
+  /** 열림 정도가 바뀌는 시각 — 0 닫힘 · 1 완전히 열림(구멍 반지름 = radius) */
+  steps: { at: number; open: number }[];
+  /** 다 열렸을 때 구멍 반지름(px). 안 주면 화면 대각선의 반 — 다 열리면 화면이 드러난다 */
+  radius?: number;
+  /** 몸통 반지름(px) — 주면 날이 둥근 렌즈 안에만 있고 테두리 고리가 생긴다. 안 주면 화면 전체를 덮는다 */
+  housing?: number;
+  blades?: number;
+  color?: string;
+  /** 날 사이 금 색 */
+  seam?: string;
+  /** 닫힐수록 날이 도는 각(도) */
+  twist?: number;
+  w?: number;
+  h?: number;
+  stiffness?: number;
+  damping?: number;
+  scene?: string;
+}
+
+/**
+ * 여섯 날 조리개 — 날마다 곧은 가장자리가 구멍의 변을 이루고 그 너머로 길게 뻗어 서로 겹친다. 열림 정도를 스프링으로 옮기며
+ * 닫힐수록 날이 돈다. 둥근 구멍만 여는 GL circleopen 과 달리 날이 보인다. (twoclipping 공개 영상 2.3–3.2초)
+ */
+export function irisBlades(el: HTMLElement, o: IrisBladesOpts): (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 n = o.blades ?? 6;
+  const R = o.radius ?? Math.hypot(W, H) / 2;
+  const far = Math.hypot(W, H) * 1.5;
+  const twist = ((o.twist ?? 40) * Math.PI) / 180;
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = doc.createElementNS(NS, "svg");
+  svg.setAttribute("width", String(W));
+  svg.setAttribute("height", String(H));
+  svg.setAttribute("viewBox", `0 0 ${W} ${H}`);
+  svg.style.cssText = "position:absolute;left:0;top:0;overflow:visible";
+  const g = doc.createElementNS(NS, "g");
+  if (o.housing) {
+    const id = `iris-clip-${Math.round(cx)}-${Math.round(cy)}-${Math.round(o.housing)}`;
+    const defs = doc.createElementNS(NS, "defs");
+    const clip = doc.createElementNS(NS, "clipPath");
+    clip.setAttribute("id", id);
+    const c = doc.createElementNS(NS, "circle");
+    c.setAttribute("cx", String(cx));
+    c.setAttribute("cy", String(cy));
+    c.setAttribute("r", String(o.housing));
+    clip.append(c);
+    defs.append(clip);
+    svg.append(defs);
+    g.setAttribute("clip-path", `url(#${id})`);
+  }
+  svg.append(g);
+  const polys = Array.from({ length: n }, (_, i) => {
+    const p = doc.createElementNS(NS, "polygon");
+    p.setAttribute("fill", o.color ?? "var(--kf-ink)");
+    p.setAttribute("stroke", o.seam ?? "rgba(255,255,255,.28)");
+    p.setAttribute("stroke-width", "3");
+    p.setAttribute("stroke-linejoin", "round");
+    // 날마다 아주 조금 다른 밝기 — 겹친 날이 한 덩어리로 뭉개지지 않게
+    p.style.filter = `brightness(${(0.92 + 0.16 * (i % 2)).toFixed(2)})`;
+    g.append(p);
+    return p;
+  });
+  let ring: SVGCircleElement | null = null;
+  if (o.housing) {
+    ring = doc.createElementNS(NS, "circle");
+    ring.setAttribute("cx", String(cx));
+    ring.setAttribute("cy", String(cy));
+    ring.setAttribute("r", String(o.housing));
+    ring.setAttribute("fill", "none");
+    ring.setAttribute("stroke", o.color ?? "var(--kf-ink)");
+    ring.setAttribute("stroke-width", "14");
+    svg.append(ring);
+  }
+  el.append(svg);
+  const steps = o.steps.map((s) => ({ at: s.at, to: s.open }));
+  const step = (2 * Math.PI) / n;
+  return (t: number) => {
+    t = safeTime(t);
+    const open = Math.max(0, springSteps(t, steps, { stiffness: o.stiffness ?? 200, damping: o.damping ?? 24 }));
+    const r = Math.max(0.5, R * open);
+    const rot = twist * (1 - Math.min(1, open));
+    // 꼭짓점 V_i 와 그 변의 방향·바깥 법선을 각으로 바로 셈한다 — 닫혀 r→0 이어도 방향이 흐트러지지 않는다
+    polys.forEach((p, i) => {
+      const a = i * step + rot - Math.PI / 2;
+      const vx = cx + r * Math.cos(a);
+      const vy = cy + r * Math.sin(a);
+      const dir = a + Math.PI / 2 + step / 2;
+      const nor = a + step / 2;
+      const edge = 2 * r * Math.sin(step / 2);
+      const back = 0.15 * edge + 2;
+      // 날의 곧은 변은 다음 꼭짓점 너머 화면 밖까지 — 짧으면 거의 닫혔을 때 먼 구석이 덮이지 않는다
+      const fwd = far;
+      const p0 = [vx - back * Math.cos(dir), vy - back * Math.sin(dir)];
+      const p1 = [vx + fwd * Math.cos(dir), vy + fwd * Math.sin(dir)];
+      const p2 = [p1[0] + far * Math.cos(nor), p1[1] + far * Math.sin(nor)];
+      const p3 = [p0[0] + far * Math.cos(nor), p0[1] + far * Math.sin(nor)];
+      p.setAttribute("points", [p0, p1, p2, p3].map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join(" "));
+    });
+    mark("irisBlades", o.scene, o.steps.some((s) => t >= s.at && t < s.at + 0.5));
+  };
+}

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

@@ -0,0 +1,94 @@
+import { clamp, ease, safeTime } from "@kasaframe/core";
+import { div, mark } from "./fit.ts";
+
+export interface KaraokeLine {
+  /** 낱말들(빈칸으로 나눈 가사 한 줄) */
+  words: string[];
+  /** 낱말마다 부르기 시작하는 시각(장면 초). 없으면 from–to 를 글자 수로 나눈다 */
+  times?: number[];
+  from?: number;
+  to?: number;
+}
+
+export interface KaraokeLineOpts {
+  lines: KaraokeLine[];
+  size?: number;
+  /** 띠 가운데 높이(px) — 기본 화면 아래 12% */
+  y?: number;
+  /** 줄이 부르기 전에 미리 떠 있는 초 */
+  lead?: number;
+  w?: number;
+  h?: number;
+  scene?: string;
+}
+
+/**
+ * 부른 데까지 차오르는 가사 띠 — 줄은 부르기 전에 미리 읽히게 떠 있고, 낱말마다 부르는 동안 왼쪽부터 강조색이 찬다. 줄이 끝나면 위로 빠진다.
+ * (Claude Pop p(doom) 38.8–41초 아래 띠 · Crab Walk 아래 줄 · Moonlight in Code 「부르기 2프레임 전에 읽히게」)
+ */
+export function karaokeLine(el: HTMLElement, o: KaraokeLineOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const size = o.size ?? 64;
+  const y = o.y ?? H * 0.88;
+  const lead = o.lead ?? 0.3;
+  const layer = div(doc, "position:absolute;inset:0;overflow:hidden;pointer-events:none");
+  el.append(layer);
+  // 낱말 시각 — 없으면 줄 길이를 글자 수 비율로 편다
+  const timed = o.lines.map((l) => {
+    if (l.times && l.times.length >= l.words.length) return { words: l.words, times: l.times, end: l.to ?? l.times[l.times.length - 1] + 0.6 };
+    const from = l.from ?? 0;
+    const to = l.to ?? from + 2;
+    const total = l.words.reduce((a, w) => a + w.length, 0) || 1;
+    let acc = 0;
+    const times = l.words.map((w) => {
+      const s = from + ((to - from) * acc) / total;
+      acc += w.length;
+      return s;
+    });
+    return { words: l.words, times, end: to };
+  });
+  const rows = timed.map((l) => {
+    const band = div(
+      doc,
+      `position:absolute;left:50%;top:${y}px;display:flex;gap:.3em;white-space:nowrap;padding:.22em .6em;border-radius:.5em;` +
+        `background:rgba(10,10,14,.72);font-family:var(--kf-font-display);font-weight:800;font-size:${size}px;line-height:1.1;color:rgba(242,243,245,.55)`,
+    );
+    const words = l.words.map((w) => {
+      const span = div(doc, "position:relative;display:inline-block", w);
+      const fill = div(doc, "position:absolute;left:0;top:0;color:var(--kf-accent)", w);
+      span.append(fill);
+      band.append(span);
+      return fill;
+    });
+    layer.append(band);
+    return { band, words };
+  });
+
+  return (t: number) => {
+    t = safeTime(t);
+    let moving = false;
+    rows.forEach((r, i) => {
+      const l = timed[i];
+      const start = l.times[0] - lead;
+      const next = timed[i + 1] ? timed[i + 1].times[0] - lead : l.end + 0.3;
+      const inP = ease.outCubic(clamp((t - start) / 0.2));
+      const outP = ease.inCubic(clamp((t - next) / 0.2));
+      const shown = t >= start && outP < 1;
+      r.band.style.display = shown ? "flex" : "none";
+      if (!shown) return;
+      if (inP < 1 || outP > 0) moving = true;
+      r.band.style.opacity = (inP * (1 - outP)).toFixed(3);
+      r.band.style.transform = `translate(-50%, ${(-50 + 40 * (1 - inP) - 60 * outP).toFixed(1)}%)`;
+      r.words.forEach((f, j) => {
+        const a = l.times[j];
+        const b = Math.min(l.times[j + 1] ?? l.end, a + 0.6);
+        const p = clamp((t - a) / Math.max(0.05, b - a));
+        if (p > 0 && p < 1) moving = true;
+        f.style.clipPath = `inset(0 ${((1 - p) * 100).toFixed(2)}% 0 0)`;
+      });
+    });
+    mark("karaokeLine", o.scene, moving);
+  };
+}

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

@@ -0,0 +1,94 @@
+import { safeTime } from "@kasaframe/core";
+import { div, mark } from "./fit.ts";
+
+export interface LedBoardOpts {
+  text: string;
+  /** scroll: 오른쪽에서 흘러 들어와 지나간다 · type: 왼쪽부터 한 칸씩 찍힌다 */
+  mode?: "scroll" | "type";
+  at?: number;
+  /** 초당 몇 칸(점 열) */
+  speed?: number;
+  /** 글자 높이(점 줄 수) */
+  rows?: number;
+  /** 판(무대 px) */
+  x?: number;
+  y?: number;
+  w?: number;
+  h?: number;
+  color?: string;
+  stageW?: number;
+  stageH?: number;
+  scene?: string;
+}
+
+/**
+ * LED 점 글판 — 글을 점 격자로 찍어 켜진 점만 번지게 칠한다. 흘러가거나(scroll) 한 칸씩 찍힌다(type). 꺼진 점도 희미하게 보인다.
+ * (Ghost in the Booth 12.5–15초 극장 앞 글판)
+ */
+export function ledBoard(el: HTMLElement, o: LedBoardOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const SW = o.stageW ?? 1920;
+  const SH = o.stageH ?? 1080;
+  const bw = o.w ?? SW * 0.9;
+  const bh = o.h ?? SH * 0.36;
+  const bx = o.x ?? (SW - bw) / 2;
+  const by = o.y ?? (SH - bh) / 2;
+  const rows = o.rows ?? 16;
+  const pitch = bh / (rows + 2);
+  const cols = Math.floor(bw / pitch);
+  const color = o.color ?? "#FFB23E";
+  const at = o.at ?? 0;
+  const speed = o.speed ?? 40;
+  const wrap = div(doc, `position:absolute;left:${bx}px;top:${by}px;width:${bw}px;height:${bh}px;background:#0B0B0D;border-radius:${pitch}px;box-shadow:0 0 0 ${pitch * 0.6}px #1A1A1F`);
+  const cv = doc.createElement("canvas");
+  cv.width = Math.round(bw);
+  cv.height = Math.round(bh);
+  cv.style.cssText = "position:absolute;inset:0;width:100%;height:100%";
+  wrap.append(cv);
+  el.append(wrap);
+  const g = cv.getContext("2d")!;
+  // 글자 점 지도 — 글꼴이 다 받아진 뒤(처음 그릴 때) 한 번 찍는다
+  let map: Uint8Array | null = null;
+  let mapW = 0;
+  const raster = () => {
+    const font = getComputedStyle(doc.documentElement).getPropertyValue("--kf-font-mono").trim() || "monospace";
+    const off = doc.createElement("canvas");
+    const fx = off.getContext("2d")!;
+    fx.font = `700 ${rows}px ${font}`;
+    mapW = Math.ceil(fx.measureText(o.text).width) + 2;
+    off.width = mapW;
+    off.height = rows;
+    fx.font = `700 ${rows}px ${font}`;
+    fx.textBaseline = "middle";
+    fx.fillStyle = "#fff";
+    fx.fillText(o.text, 1, rows / 2 + 1);
+    const data = fx.getImageData(0, 0, mapW, rows).data;
+    map = new Uint8Array(mapW * rows);
+    for (let i = 0; i < mapW * rows; i++) map[i] = data[i * 4 + 3] > 110 ? 1 : 0;
+  };
+
+  return (t: number) => {
+    t = safeTime(t);
+    if (!map) raster();
+    const local = Math.max(0, t - at);
+    const typing = o.mode === "type";
+    const shift = typing ? 0 : Math.floor(cols - local * speed);
+    const shown = typing ? Math.floor(local * speed) : Infinity;
+    g.clearRect(0, 0, cv.width, cv.height);
+    const r = pitch * 0.36;
+    for (let cy = 0; cy < rows; cy++)
+      for (let cx = 0; cx < cols; cx++) {
+        const mx = cx - shift;
+        const on = t >= at && mx >= 0 && mx < mapW && mx < shown && map![cy * mapW + mx] === 1;
+        g.fillStyle = on ? color : "rgba(255,255,255,.06)";
+        if (on) {
+          g.shadowColor = color;
+          g.shadowBlur = pitch * 0.9;
+        } else g.shadowBlur = 0;
+        g.beginPath();
+        g.arc(pitch * (cx + 0.5), pitch * (cy + 1.5), r, 0, Math.PI * 2);
+        g.fill();
+      }
+    mark("ledBoard", o.scene, t >= at);
+  };
+}