kasaframe 0.0.0-stage → 0.1.1

package/packages/motion/src/hangul.ts

@@ -0,0 +1,129 @@
+/** 두벌식 자판 기준 한글 조합. 타자 움직임이 키 하나마다 화면에 보일 글자를 만든다 */
+
+const S_BASE = 0xac00;
+const S_END = 0xd7a3;
+const V_COUNT = 21;
+const T_COUNT = 28;
+
+export const INITIALS = "ㄱㄲㄴㄷㄸㄹㅁㅂㅃㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎ";
+export const VOWELS = "ㅏㅐㅑㅒㅓㅔㅕㅖㅗㅘㅙㅚㅛㅜㅝㅞㅟㅠㅡㅢㅣ";
+/** 0 번은 받침 없음 */
+export const FINALS = " ㄱㄲㄳㄴㄵㄶㄷㄹㄺㄻㄼㄽㄾㄿㅀㅁㅂㅄㅅㅆㅇㅈㅊㅋㅌㅍㅎ";
+
+/** 두 키로 치는 겹모음 */
+const VOWEL_PARTS: Record<string, [string, string]> = {
+  ㅘ: ["ㅗ", "ㅏ"],
+  ㅙ: ["ㅗ", "ㅐ"],
+  ㅚ: ["ㅗ", "ㅣ"],
+  ㅝ: ["ㅜ", "ㅓ"],
+  ㅞ: ["ㅜ", "ㅔ"],
+  ㅟ: ["ㅜ", "ㅣ"],
+  ㅢ: ["ㅡ", "ㅣ"],
+};
+
+/** 두 키로 치는 겹받침 */
+const FINAL_PARTS: Record<string, [string, string]> = {
+  ㄳ: ["ㄱ", "ㅅ"],
+  ㄵ: ["ㄴ", "ㅈ"],
+  ㄶ: ["ㄴ", "ㅎ"],
+  ㄺ: ["ㄹ", "ㄱ"],
+  ㄻ: ["ㄹ", "ㅁ"],
+  ㄼ: ["ㄹ", "ㅂ"],
+  ㄽ: ["ㄹ", "ㅅ"],
+  ㄾ: ["ㄹ", "ㅌ"],
+  ㄿ: ["ㄹ", "ㅍ"],
+  ㅀ: ["ㄹ", "ㅎ"],
+  ㅄ: ["ㅂ", "ㅅ"],
+};
+
+const COMBINE_FINAL: Record<string, string> = Object.fromEntries(
+  Object.entries(FINAL_PARTS).map(([whole, [a, b]]) => [a + b, whole]),
+);
+
+export interface Syllable {
+  /** 초성·중성·종성 호환 자모. 받침 없으면 final 은 "" */
+  initial: string;
+  vowel: string;
+  final: string;
+}
+
+export const isSyllable = (ch: string): boolean => {
+  const c = ch.codePointAt(0) ?? 0;
+  return ch.length === 1 && c >= S_BASE && c <= S_END;
+};
+
+export function decompose(ch: string): Syllable | null {
+  if (!isSyllable(ch)) return null;
+  const s = ch.charCodeAt(0) - S_BASE;
+  const t = s % T_COUNT;
+  const v = ((s - t) / T_COUNT) % V_COUNT;
+  const l = Math.floor(s / (V_COUNT * T_COUNT));
+  return { initial: INITIALS[l], vowel: VOWELS[v], final: t === 0 ? "" : FINALS[t] };
+}
+
+/** 모르는 자모가 오면 null — 호출하는 쪽이 원래 글자를 그대로 쓴다(undefined 가 화면에 새지 않게) */
+export function compose(initial: string, vowel: string, final = ""): string | null {
+  const l = INITIALS.indexOf(initial);
+  const v = VOWELS.indexOf(vowel);
+  const t = final === "" ? 0 : FINALS.indexOf(final);
+  if (l < 0 || v < 0 || t < 0 || (final !== "" && t === 0)) return null;
+  return String.fromCharCode(S_BASE + (l * V_COUNT + v) * T_COUNT + t);
+}
+
+/** ㄸ·ㅃ·ㅉ 는 받침이 될 수 없다 */
+export const canBeFinal = (consonant: string): boolean => consonant !== " " && FINALS.includes(consonant);
+
+/** 받침 + 다음 초성이 겹받침이 되는가 — 두벌식 입력기의 도깨비불 */
+export const joinFinal = (final: string, next: string): string | null => COMBINE_FINAL[final + next] ?? null;
+
+/** 한 음절을 칠 때 키마다 보이는 모양. 「닭」→ ㄷ, 다, 달, 닭 */
+export function syllableSteps(ch: string): string[] {
+  const d = decompose(ch);
+  if (!d) return [ch];
+  const steps: string[] = [d.initial];
+  const vp = VOWEL_PARTS[d.vowel];
+  if (vp) steps.push(compose(d.initial, vp[0]) ?? ch);
+  steps.push(compose(d.initial, d.vowel) ?? ch);
+  if (d.final) {
+    const fp = FINAL_PARTS[d.final];
+    if (fp) steps.push(compose(d.initial, d.vowel, fp[0]) ?? ch);
+    steps.push(ch);
+  }
+  return steps;
+}
+
+/**
+ * 글 전체를 칠 때 키마다 보이는 화면 글. 0 번은 빈 글, 마지막은 원문 그대로.
+ * ime 면 다음 음절 초성이 앞 음절 받침으로 먼저 붙었다가(가 → 간 → 가나) 모음이 오면 떨어진다 — 실제 입력기가 그렇다.
+ */
+export function typingFrames(text: string, opts: { ime?: boolean } = {}): string[] {
+  const ime = opts.ime ?? true;
+  const chars = Array.from(text);
+  const frames: string[] = [""];
+  let done = "";
+  for (let i = 0; i < chars.length; i++) {
+    const ch = chars[i];
+    const steps = syllableSteps(ch);
+    const prev = i > 0 ? decompose(chars[i - 1]) : null;
+    const cur = decompose(ch);
+    for (let k = 0; k < steps.length; k++) {
+      if (k === 0 && ime && prev && cur) {
+        const carry = carryForm(prev, cur.initial);
+        if (carry) {
+          frames.push(done.slice(0, done.length - chars[i - 1].length) + carry);
+          continue;
+        }
+      }
+      frames.push(done + steps[k]);
+    }
+    done += ch;
+  }
+  if (frames[frames.length - 1] !== text) frames.push(text);
+  return frames;
+}
+
+function carryForm(prev: Syllable, consonant: string): string | null {
+  if (prev.final === "") return canBeFinal(consonant) ? compose(prev.initial, prev.vowel, consonant) : null;
+  const joined = joinFinal(prev.final, consonant);
+  return joined ? compose(prev.initial, prev.vowel, joined) : null;
+}

package/packages/motion/src/impact.ts

@@ -0,0 +1,100 @@
+import { clamp, emit, noise1, progress, toEase, type Beats, type MotionRules, type PulseOpts, type Style, safeTime } from "@kasaframe/core";
+
+interface Tagged {
+  source?: string;
+  scene?: string;
+  emit?: boolean;
+}
+
+export interface ShakeOpts extends Tagged {
+  at: number;
+  dur?: number;
+  /** 최대 흔들림(px). rules 가 있으면 rules.shake.maxPx 를 넘지 않는다 */
+  px?: number;
+  /** 초당 흔들림 */
+  freq?: number;
+  seed?: number | string;
+  rules?: MotionRules;
+}
+
+/** 감쇠하는 흔들림. 잡음은 시드 고정이라 탭마다 같은 궤적 */
+export function shake(t: number, opts: ShakeOpts): Style {
+  t = safeTime(t);
+  const dur = opts.dur ?? 0.45;
+  const local = t - opts.at;
+  if (local < 0 || local >= dur) return {};
+  const max = opts.rules ? Math.min(opts.px ?? opts.rules.shake.maxPx, opts.rules.shake.maxPx) : (opts.px ?? 12);
+  const amp = max * (1 - local / dur) ** 2;
+  const f = opts.freq ?? 26;
+  const seed = opts.seed ?? opts.source ?? "shake";
+  const x = noise1(`${seed}x`, local * f) * amp;
+  const y = noise1(`${seed}y`, local * f) * amp * 0.7;
+  if (opts.emit !== false) emit({ kind: "shake", source: opts.source ?? "shake", scene: opts.scene, value: amp });
+  return { x, y, rotate: noise1(`${seed}r`, local * f * 0.6) * amp * 0.04 };
+}
+
+export interface DropBurstOpts extends Tagged {
+  /** 드롭 시각. beats·drop 을 주면 거기서 잰 시각을 쓴다 — 드롭 아닌 곳에서 터지지 않게 */
+  at?: number;
+  beats?: Beats;
+  drop?: number;
+  px?: number;
+  rules?: MotionRules;
+  seed?: number | string;
+}
+
+export interface DropBurstState {
+  /** 흰 섬광 덮개의 불투명도 0..1 */
+  flash: number;
+  /** 충격파 고리 — 지름 배율과 불투명도 */
+  ring: { scale: number; opacity: number };
+  /** 화면 전체(카메라 틀)에 줄 흔들림 */
+  shake: Style;
+  /** 내용에 줄 한 번 튐 */
+  punch: Style;
+  p: number;
+}
+
+export function dropBurst(t: number, opts: DropBurstOpts): DropBurstState {
+  t = safeTime(t);
+  const at = opts.beats && opts.drop !== undefined ? opts.beats.drop(opts.drop) : opts.at;
+  if (at === undefined || !Number.isFinite(at)) throw new Error("dropBurst: at 이나 beats·drop 을 준다");
+  const source = opts.source ?? "dropBurst";
+  const local = t - at;
+  const p = progress(t, at, 0.9);
+  const flash = local < 0 ? 0 : local < 0.04 ? 1 : clamp(1 - (local - 0.04) / 0.22) ** 2;
+  if (opts.emit !== false) emit({ kind: "flash", source, scene: opts.scene, value: flash });
+  const rp = toEase("outCubic")(progress(t, at, 0.7));
+  const ring = local < 0 ? { scale: 0, opacity: 0 } : { scale: 0.2 + 2.6 * rp, opacity: (1 - rp) * 0.9 };
+  const kick = local < 0 ? 0 : Math.exp(-local / 0.12) * Math.cos(local * 28);
+  return {
+    flash,
+    ring,
+    shake: shake(t, { at, px: opts.px, rules: opts.rules, seed: opts.seed ?? source, source, scene: opts.scene, emit: opts.emit }),
+    punch: local < 0 || local > 0.8 ? {} : { scale: 1 + 0.08 * kick },
+    p,
+  };
+}
+
+export interface BeatPulseOpts extends PulseOpts {
+  beats: Beats;
+  /** 박에서 커지는 정도 */
+  amount?: number;
+  rules?: MotionRules;
+}
+
+/** 박 펄스 — style.json 의 beatPulse 를 따른다. 기본(drops-only)이면 드롭 구간 밖에선 늘 그대로 */
+export function beatPulse(t: number, opts: BeatPulseOpts): Style & { v: number } {
+  t = safeTime(t);
+  const rule = opts.rules?.beatPulse ?? "drops-only";
+  if (rule === "off") return { v: 0 };
+  const v = opts.beats.pulse(t, {
+    every: opts.every ?? (rule === "downbeats" ? "downbeat" : "beat"),
+    decay: opts.decay,
+    within: opts.within ?? (rule === "drops-only" ? "drops" : "all"),
+    source: opts.source ?? "beatPulse",
+    scene: opts.scene,
+    emit: opts.emit,
+  });
+  return { v, scale: 1 + (opts.amount ?? 0.05) * v };
+}

package/packages/motion/src/index.ts

@@ -0,0 +1,17 @@
+export { compose, decompose, isSyllable, syllableSteps, typingFrames } from "./hangul.ts";
+export { typeText, typeLines, typeDuration } from "./type.ts";
+export type { TypeOpts, TypeState } from "./type.ts";
+export { enter, exit, inOut, stagger, MOVES } from "./enter.ts";
+export type { MoveName, MoveOpts, Side, StaggerOpts } from "./enter.ts";
+export { counter, sweep, words, letters } from "./text.ts";
+export type { CounterOpts, SweepOpts, WordState } from "./text.ts";
+export { transition, TRANSITIONS } from "./transition.ts";
+export type { TransitionName, TransitionOpts, TransitionState } from "./transition.ts";
+export { shake, dropBurst, beatPulse } from "./impact.ts";
+export type { ShakeOpts, DropBurstOpts, DropBurstState, BeatPulseOpts } from "./impact.ts";
+export { camera, breathe, flyPath } from "./camera.ts";
+export type { CameraOpts, BreatheOpts, FlyKey, Vec3 } from "./camera.ts";
+export { sparkles, burst } from "./particles.ts";
+export type { Particle, SparkleOpts, BurstOpts } from "./particles.ts";
+export { cursor, grow, draw, codeReveal, terminal, safeText } from "./ui.ts";
+export type { CursorKey, CursorState, CodeState, TermStep, TermLine, TermState } from "./ui.ts";

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

@@ -0,0 +1,90 @@
+import { clamp, ease, noise1, rand, safeTime } from "@kasaframe/core";
+import { mark } from "./fit.ts";
+
+export interface BrushWipeOpts {
+  /** 덮기 시작 시각 — at + dur/2 에 화면이 다 덮인다(그때 장면을 바꾼다) */
+  at: number;
+  dur?: number;
+  /** 붓 획(띠) 수 */
+  strokes?: number;
+  color?: string;
+  /** 띠 기울기(도) */
+  angle?: number;
+  seed?: string | number;
+  w?: number;
+  h?: number;
+  scene?: string;
+}
+
+/**
+ * 붓 획 덮기 — 굵은 붓 띠 몇 줄이 번갈아(홀짝 반대 방향) 화면을 덮고, 같은 방향으로 꼬리가 빠지며 걷힌다. 머리·꼬리는 시드 잡음으로
+ * 거칠고 띠 안엔 마른 붓 줄무늬. 다 덮인 at + dur/2 에 뒤 장면을 바꾼다. (OtherReality p(doom) 38.3–38.8초)
+ */
+export function brushWipe(el: HTMLElement, o: BrushWipeOpts): (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;z-index:50`;
+  el.append(canvas);
+  const g = canvas.getContext("2d")!;
+  const n = o.strokes ?? 5;
+  const dur = o.dur ?? 0.8;
+  const seed = o.seed ?? "brush";
+  const color = o.color ?? "#5b3fd9";
+  const D = Math.hypot(W, H) * 1.08;
+  const bandH = (D / n) * 1.18;
+  const L = D * 1.2;
+  const cover = dur * 0.36;
+  const lag = (dur * 0.5 - cover) / Math.max(1, n - 1);
+  const angle = ((o.angle ?? -7) * Math.PI) / 180;
+  return (t: number) => {
+    t = safeTime(t);
+    g.clearRect(0, 0, W, H);
+    if (t < o.at || t > o.at + dur + 0.05) {
+      mark("brushWipe", o.scene, false);
+      return;
+    }
+    g.save();
+    g.translate(W / 2, H / 2);
+    g.rotate(angle);
+    for (let j = 0; j < n; j++) {
+      const head = ease.inOutCubic(clamp((t - o.at - j * lag) / cover));
+      const tail = ease.inOutCubic(clamp((t - o.at - dur * 0.5 - j * lag) / cover));
+      if (head <= 0 || tail >= 1) continue;
+      const dir = j % 2 ? -1 : 1;
+      const yc = -D / 2 + (j + 0.5) * (D / n);
+      const steps = 24;
+      const edge = (p: number, side: number, k: number) => {
+        // 붓 끝의 들쭉날쭉 — 띠 높이를 따라 잡음, 끝 근처 털은 더 길게
+        const yy = k / steps;
+        const jag = (noise1(`${seed}:${j}:${side}`, yy * 6) - 0.5) * 70 + (rand(seed, j * 1000 + side * 100 + k) - 0.5) * 26;
+        return dir * (-L / 2 + L * p) + dir * jag * (p > 0 && p < 1 ? 1 : 0);
+      };
+      g.fillStyle = color;
+      g.globalAlpha = 1;
+      g.beginPath();
+      for (let k = 0; k <= steps; k++) g.lineTo(edge(head, 0, k), yc - bandH / 2 + (bandH * k) / steps);
+      for (let k = steps; k >= 0; k--) g.lineTo(edge(tail, 1, k), yc - bandH / 2 + (bandH * k) / steps);
+      g.closePath();
+      g.fill();
+      // 마른 붓 줄무늬 — 띠 안에서 밝은 결 몇 줄
+      g.globalAlpha = 0.18;
+      g.fillStyle = "#ffffff";
+      const a = Math.min(edge(head, 0, 12), edge(tail, 1, 12));
+      const b = Math.max(edge(head, 0, 12), edge(tail, 1, 12));
+      for (let s = 0; s < 9; s++) {
+        const r = (k: number) => rand(seed, j * 97 + s * 7 + k);
+        const y = yc - bandH / 2 + bandH * (0.08 + 0.84 * r(0));
+        const x0 = a + (b - a) * r(1) * 0.4;
+        const x1 = b - (b - a) * r(2) * 0.4;
+        g.fillRect(Math.min(x0, x1), y, Math.abs(x1 - x0), 2 + 5 * r(3));
+      }
+    }
+    g.restore();
+    g.globalAlpha = 1;
+    mark("brushWipe", o.scene, true);
+  };
+}

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

@@ -0,0 +1,111 @@
+import { rand, safeTime } from "@kasaframe/core";
+import { div, lastIndex, mark } from "./fit.ts";
+import { springSteps } from "./liquidTab.ts";
+
+export interface CloneArrayOpts {
+  /** 수가 두 배가 되는 시각들 — 처음엔 하나, 박마다 1→2→4→8… */
+  hits: number[];
+  /** 하나를 짓는다(복제마다 한 번씩, i 는 복제 번호). (t) => void 를 돌려주면 장면 초로 칠한다 */
+  build: (el: HTMLElement, i: number) => ((t: number) => void) | void;
+  /** 하나의 원래 크기(px) — 처음 한 개일 때 이 크기 */
+  item: { w: number; h: number };
+  /** 최대 개수 — 넘으면 더 늘지 않는다 */
+  max?: number;
+  /** 바깥 복제가 작아지고 흐려지는 정도(0–1) */
+  falloff?: number;
+  /** 화면에서 쓰는 몫 */
+  share?: number;
+  x?: number;
+  y?: number;
+  stiffness?: number;
+  damping?: number;
+  w?: number;
+  h?: number;
+  scene?: string;
+}
+
+/**
+ * 복제가 줄지어 늘어난다 — 박마다 수가 두 배, 새 복제는 부모 자리에서 튀어나와 격자의 바깥 칸으로 스프링을 타고 간다.
+ * 칸은 가운데에서 가까운 차례로 채워 바깥일수록 작고 흐리다. (Escape Velocity 115.5–116.5초 · mexicat 1→2→4→8)
+ */
+export function cloneArray(el: HTMLElement, o: CloneArrayOpts): (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 max = o.max ?? 64;
+  const share = o.share ?? 0.9;
+  const fall = o.falloff ?? 0.45;
+  const counts = [1];
+  for (const _ of o.hits) counts.push(Math.min(max, counts[counts.length - 1] * 2));
+  // 개수마다 격자 — 가로를 더 넓게, 칸은 가운데에서 가까운 차례
+  const layouts = counts.map((n) => {
+    let cols = 1;
+    while (cols * Math.ceil(n / cols) < n || (cols / Math.ceil(n / cols)) * (o.item.w / o.item.h) < W / H) {
+      if (cols >= n) break;
+      cols++;
+    }
+    const rows = Math.ceil(n / cols);
+    const cell = Math.min((W * share) / cols / o.item.w, (H * share) / rows / o.item.h, 1);
+    const slots: { x: number; y: number; d: number }[] = [];
+    for (let r = 0; r < rows; r++)
+      for (let c = 0; c < cols; c++) {
+        const x = cx + (c - (cols - 1) / 2) * o.item.w * cell;
+        const y = cy + (r - (rows - 1) / 2) * o.item.h * cell;
+        slots.push({ x, y, d: Math.hypot((x - cx) / W, (y - cy) / H) });
+      }
+    slots.sort((a, b) => a.d - b.d || a.x - b.x || a.y - b.y);
+    const far = Math.max(1e-6, slots[n - 1].d);
+    return { cell, slots: slots.slice(0, n).map((s) => ({ ...s, k: s.d / far })) };
+  });
+  const total = counts[counts.length - 1];
+  const sp = { stiffness: o.stiffness ?? 240, damping: o.damping ?? 20 };
+  const clones = Array.from({ length: total }, (_, i) => {
+    const box = div(doc, `position:absolute;left:0;top:0;width:${o.item.w}px;height:${o.item.h}px;transform-origin:50% 50%;will-change:transform`);
+    const inner = div(doc, "position:absolute;inset:0");
+    box.append(inner);
+    el.append(box);
+    const paint = o.build(inner, i) ?? null;
+    // 몇 번째 박에 태어나나 — 그 박 전 개수의 자리(i - 전 개수)가 부모
+    const born = counts.findIndex((n) => n > i);
+    const parent = born > 0 ? i - counts[born - 1] : 0;
+    return { box, paint, born, parent, phase: rand("clone", i) * 6.28 };
+  });
+  type Key = "x" | "y" | "s" | "a";
+  const valAt = (i: number, key: Key, lv: number): number => {
+    const L = layouts[lv];
+    const s = L.slots[i];
+    if (key === "x") return s.x;
+    if (key === "y") return s.y;
+    if (key === "s") return L.cell * (1 - fall * s.k * 0.6);
+    return 1 - fall * s.k;
+  };
+  const track = (i: number, key: Key) => {
+    const c = clones[i];
+    const steps = [];
+    for (let lv = Math.max(1, c.born); lv < layouts.length; lv++) steps.push({ at: o.hits[lv - 1], to: valAt(i, key, lv) });
+    // 태어날 때는 부모의 그 박 직전 자리에서 출발
+    return { steps, from: valAt(c.born > 0 ? c.parent : i, key, Math.max(0, c.born - 1)) };
+  };
+  const tracks = clones.map((_, i) => ({ x: track(i, "x"), y: track(i, "y"), s: track(i, "s"), a: track(i, "a") }));
+  return (t: number) => {
+    t = safeTime(t);
+    const lv = lastIndex(o.hits, t) + 1;
+    clones.forEach((c, i) => {
+      if (c.born > lv) {
+        c.box.style.visibility = "hidden";
+        return;
+      }
+      c.box.style.visibility = "visible";
+      const v = (k: Key) => springSteps(t, tracks[i][k].steps, { from: tracks[i][k].from, ...sp });
+      // 자리 잡은 복제도 조금씩 숨 쉰다 — 같은 꼴이 여럿이면 가만할 때 화면이 굳어 보인다
+      const bob = Math.sin(t * 3.1 + c.phase) * 4 * v("s");
+      c.box.style.opacity = Math.max(0, Math.min(1, v("a"))).toFixed(3);
+      c.box.style.transform = `translate(${(v("x") - o.item.w / 2).toFixed(1)}px, ${(v("y") - o.item.h / 2 + bob).toFixed(1)}px) scale(${Math.max(0.01, v("s")).toFixed(4)})`;
+      c.box.style.zIndex = String(total - i);
+      if (c.paint) c.paint(t);
+    });
+    mark("cloneArray", o.scene, lv > 0 && t < o.hits[lv - 1] + 0.4);
+  };
+}

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

@@ -0,0 +1,81 @@
+import { safeTime } from "@kasaframe/core";
+import { div, mark } from "./fit.ts";
+import { springSteps } from "./liquidTab.ts";
+
+export interface CurtainsOpts {
+  /** 열림 정도(0 닫힘 … 1 열림)가 바뀌는 시각 */
+  steps: { at: number; open: number }[];
+  color?: string;
+  /** 주름 하나 너비(px) */
+  fold?: number;
+  /** 위 가림막(물결 테두리) — false 면 없음 */
+  valance?: boolean;
+  trim?: string;
+  stiffness?: number;
+  damping?: number;
+  w?: number;
+  h?: number;
+  scene?: string;
+}
+
+/**
+ * 무대 막 — 두 폭이 바깥으로 모이며(주름이 좁아진다) 열리고, 안쪽 가장자리는 묶인 자리(높이 62%)에서 잘록하게 휜다.
+ * 주름은 늘 조금 흔들린다. 처음·끝을 감싸는 데. (Heibel 1·155초 · Retro Pixel 1·157초)
+ */
+export function curtains(el: HTMLElement, o: CurtainsOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const color = o.color ?? "#b3122a";
+  const fold = o.fold ?? 70;
+  const trim = o.trim ?? "#e2b54a";
+  const hw = W / 2 + 40;
+  const sp = { stiffness: o.stiffness ?? 90, damping: o.damping ?? 16 };
+  // 주름 — 어두운 골과 밝은 등성이를 되풀이, 위는 더 어둡게
+  const velvet =
+    `linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 80%, rgba(0,0,0,.35) 100%),` +
+    `repeating-linear-gradient(90deg, color-mix(in srgb, ${color} 55%, black) 0px, ${color} ${fold * 0.3}px, color-mix(in srgb, ${color} 75%, white) ${fold * 0.5}px, ${color} ${fold * 0.7}px, color-mix(in srgb, ${color} 55%, black) ${fold}px)`;
+  const halves = ([-1, 1] as const).map((side) => {
+    const part = div(
+      doc,
+      `position:absolute;top:0;${side < 0 ? "left" : "right"}:0;width:${hw}px;height:${H}px;background:${velvet};` +
+        `border-bottom:14px solid ${trim};box-sizing:border-box;transform-origin:${side < 0 ? "0%" : "100%"} 0%;z-index:60`,
+    );
+    el.append(part);
+    return { side, part };
+  });
+  if (o.valance !== false) {
+    const vh = H * 0.11;
+    const scallop = vh * 0.9;
+    const top = div(
+      doc,
+      `position:absolute;left:0;top:0;width:${W}px;height:${vh + scallop / 2}px;z-index:61;` +
+        `background:linear-gradient(180deg, color-mix(in srgb, ${color} 60%, black), ${color});` +
+        `-webkit-mask:radial-gradient(${scallop / 2}px at 50% ${vh}px, #000 98%, transparent) 0 0/${scallop}px 100%, linear-gradient(#000,#000) 0 0/100% ${vh}px no-repeat;` +
+        `mask:radial-gradient(${scallop / 2}px at 50% ${vh}px, #000 98%, transparent) 0 0/${scallop}px 100%, linear-gradient(#000,#000) 0 0/100% ${vh}px no-repeat`,
+    );
+    el.append(top);
+  }
+  const pts = 28;
+  return (t: number) => {
+    t = safeTime(t);
+    const p = Math.max(0, Math.min(1.05, springSteps(t, o.steps.map((s) => ({ at: s.at, to: s.open })), { from: o.steps[0]?.open ?? 0, ...sp })));
+    for (const { side, part } of halves) {
+      const sway = Math.sin(t * 1.7 + side) * 0.6;
+      // 열수록 폭이 모여 좁아진다 — 너비는 그대로 두고 scaleX 로 접어야 주름도 같이 좁아진다
+      const gather = 1 - 0.8 * p;
+      part.style.transform = `scaleX(${gather.toFixed(4)}) skewX(${(sway * (1 - p * 0.5)).toFixed(3)}deg)`;
+      const inner = side < 0 ? hw : 0;
+      const outer = side < 0 ? 0 : hw;
+      const edge: string[] = [];
+      for (let k = 0; k <= pts; k++) {
+        const y = (k / pts) * H;
+        const tie = Math.exp(-(((y / H - 0.62) / 0.3) ** 2));
+        // 안쪽 가장자리를 바깥으로 당긴다 — 묶인 높이에서 가장 많이
+        edge.push(`${(inner + side * hw * 0.55 * p * tie).toFixed(1)}px ${y.toFixed(1)}px`);
+      }
+      part.style.clipPath = `polygon(${outer}px 0px, ${edge.join(", ")}, ${outer}px ${H}px)`;
+    }
+    mark("curtains", o.scene, o.steps.some((s) => t >= s.at && t < s.at + 0.6));
+  };
+}

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.5 } : { 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.03 * Math.sin(t * 1.7)).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,34 @@
+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 });
+}