kasaframe 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,109 @@
+import { rand, safeTime } from "@kasaframe/core";
+import { div, mark } from "./fit.ts";
+
+export interface PointSphereOpts {
+  /** 가운데(px) · 반지름(px) */
+  x?: number;
+  y?: number;
+  r?: number;
+  /** 점 개수 */
+  count?: number;
+  color?: string;
+  /** 도는 속도(라디안/초) */
+  spin?: number;
+  /** 앞으로 기운 각(라디안) */
+  tilt?: number;
+  /** 위도선을 따라 감기는 낱말들 — 앞쪽은 또렷하게, 뒤쪽은 흐리게 */
+  words?: string[];
+  /** 낱말 위도(-1 아래 … 1 위) */
+  lat?: number;
+  wordSize?: number;
+  wordColor?: string;
+  w?: number;
+  h?: number;
+  seed?: string | number;
+  scene?: string;
+}
+
+/**
+ * 점 구와 위도선 글 — 피보나치 구 점들을 t 로 돌려 원근으로 찍고(앞일수록 크고 밝게), 위도선 위 낱말 상자가 같이 돌며 감긴다.
+ * (Livera 쇼릴 10.3–11초 · Nothing Went Foom 30.5–33초)
+ */
+export function pointSphere(el: HTMLElement, o: PointSphereOpts = {}): (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 R = o.r ?? Math.min(W, H) * 0.36;
+  const n = o.count ?? 1400;
+  const color = o.color ?? "#f5c56b";
+  const seed = o.seed ?? "sphere";
+  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`;
+  el.append(canvas);
+  const g = canvas.getContext("2d")!;
+  const golden = Math.PI * (3 - Math.sqrt(5));
+  const pts = Array.from({ length: n }, (_, i) => {
+    const y = 1 - (2 * (i + 0.5)) / n;
+    const rr = Math.sqrt(1 - y * y);
+    const a = i * golden;
+    return { x: rr * Math.cos(a), y, z: rr * Math.sin(a), s: 0.6 + 0.8 * rand(seed, i) };
+  });
+  const words = o.words ?? [];
+  const lat = Math.max(-0.95, Math.min(0.95, o.lat ?? 0));
+  const ring = div(doc, "position:absolute;left:0;top:0;pointer-events:none");
+  const spans = words.map((wd) => {
+    const s = div(doc, `position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--kf-font-display);font-weight:800;font-size:${o.wordSize ?? 54}px;letter-spacing:.06em;color:${o.wordColor ?? "#ffffff"};transform-origin:50% 50%`, wd);
+    ring.append(s);
+    return s;
+  });
+  el.append(ring);
+  const focal = R * 3.2;
+  const proj = (x: number, y: number, z: number) => {
+    const k = focal / (focal - z * R);
+    return { px: cx + x * R * k, py: cy - y * R * k, k };
+  };
+  return (t: number) => {
+    t = safeTime(t);
+    const spin = (o.spin ?? 0.45) * t;
+    const tilt = o.tilt ?? 0.35;
+    const cs = Math.cos(spin);
+    const ss = Math.sin(spin);
+    const ct = Math.cos(tilt);
+    const st = Math.sin(tilt);
+    const rot = (x: number, y: number, z: number) => {
+      const x1 = x * cs + z * ss;
+      const z1 = -x * ss + z * cs;
+      return { x: x1, y: y * ct - z1 * st, z: y * st + z1 * ct };
+    };
+    g.clearRect(0, 0, W, H);
+    g.fillStyle = color;
+    for (const p of pts) {
+      const q = rot(p.x, p.y, p.z);
+      const { px, py, k } = proj(q.x, q.y, q.z);
+      const front = (q.z + 1) / 2;
+      g.globalAlpha = 0.15 + 0.85 * front;
+      const size = (2.2 + 4.2 * front) * p.s * k;
+      g.fillRect(px - size / 2, py - size / 2, size, size);
+    }
+    g.globalAlpha = 1;
+    // 낱말 — 위도선 위에 고르게 놓고 구와 같이 돈다. 뒤로 돌아가면 흐려지고 작아진다
+    const rr = Math.sqrt(1 - lat * lat) * 1.08;
+    spans.forEach((s, i) => {
+      const a = (i / Math.max(1, spans.length)) * Math.PI * 2;
+      const q = rot(rr * Math.sin(a), lat, rr * Math.cos(a));
+      const { px, py, k } = proj(q.x, q.y, q.z);
+      const front = (q.z + 1) / 2;
+      const yaw = Math.atan2(q.x, q.z);
+      // 뒤로 돌아간 낱말은 숨긴다 — 흐리게 남기면 거울 글씨가 겹쳐 읽히지도 않고 대비만 낮다
+      s.style.display = front < 0.42 ? "none" : "block";
+      s.style.opacity = (0.35 + 0.65 * Math.min(1, (front - 0.42) / 0.3)).toFixed(3);
+      s.style.transform = `translate(${px.toFixed(1)}px, ${py.toFixed(1)}px) translate(-50%, -50%) perspective(900px) rotateY(${((yaw * 180) / Math.PI).toFixed(2)}deg) scale(${k.toFixed(3)})`;
+      s.style.zIndex = String(Math.round(front * 100));
+    });
+    mark("pointSphere", o.scene, true);
+  };
+}

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

@@ -0,0 +1,73 @@
+import { clamp, ease, rand, safeTime } from "@kasaframe/core";
+import { div, fitSize, lastIndex, mark } from "./fit.ts";
+
+export interface RansomOpts {
+  text: string;
+  /** 글자가 차례로 붙기 시작하는 시각 */
+  at?: number;
+  /** 글자 모양을 다시 뽑는 시각(박). 없으면 초당 rate 번 */
+  hits?: number[];
+  rate?: number;
+  palette?: string[];
+  size?: number;
+  w?: number;
+  h?: number;
+  seed?: string | number;
+  scene?: string;
+}
+
+const PALETTE = ["#FF6B2C", "#7CF0D6", "#FFD84D", "#B48CFF", "#FF5FA2", "#F2F3F5"];
+
+/**
+ * 오려 붙인 글자 — 글자마다 색·크기·기울기·굵기·대소문자를 시드로 뽑고, 몇 글자는 색종이 조각 위에 앉는다. 박마다 다시 뽑아 표정이 바뀐다.
+ * (Where No Map Goes 5.5–6.3초 「WHeRE」)
+ */
+export function ransomLetters(el: HTMLElement, o: RansomOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const pal = o.palette?.length ? o.palette : PALETTE;
+  const seed = o.seed ?? o.text;
+  const at = o.at ?? 0;
+  const px = o.size ?? fitSize(o.text, W, H, { share: 0.66, hShare: 0.42 });
+  const layer = div(doc, "position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center");
+  const row = div(doc, `display:flex;align-items:center;white-space:nowrap;font-family:var(--kf-font-display);font-size:${px}px;line-height:1`);
+  layer.append(row);
+  el.append(layer);
+  const letters = [...o.text].map((c) => {
+    const box = div(doc, "position:relative;display:inline-block;padding:0 .04em;margin:0 .02em");
+    const paper = div(doc, "position:absolute;inset:-.06em -.02em;border-radius:.04em");
+    const glyph = div(doc, "position:relative", c === " " ? "\u00a0" : c);
+    box.append(paper, glyph);
+    row.append(box);
+    return { box, paper, glyph, c };
+  });
+
+  return (t: number) => {
+    t = safeTime(t);
+    const roll = o.hits?.length ? Math.max(0, lastIndex(o.hits, t)) : Math.floor(Math.max(0, t) * (o.rate ?? 6));
+    let moving = false;
+    letters.forEach((l, i) => {
+      const local = t - at - i * 0.05;
+      const p = clamp(local / 0.18);
+      if (p < 1) moving = true;
+      const r = (k: number) => rand(seed, roll * 977 + i * 31 + k);
+      const color = pal[Math.floor(r(1) * pal.length)];
+      const onPaper = r(2) < 0.35;
+      const latin = /[a-z]/i.test(l.c);
+      l.glyph.textContent = latin ? (r(3) < 0.5 ? l.c.toUpperCase() : l.c.toLowerCase()) : l.c === " " ? "\u00a0" : l.c;
+      l.glyph.style.color = onPaper ? "#0E0F12" : color;
+      l.glyph.style.fontWeight = String(r(4) < 0.5 ? 900 : 560);
+      l.paper.style.background = onPaper ? color : "transparent";
+      l.paper.style.transform = `rotate(${((r(5) - 0.5) * 10).toFixed(2)}deg)`;
+      const s = (0.85 + 0.3 * r(6)) * ease.outBack(p);
+      const rot = (r(7) - 0.5) * 16;
+      const dy = (r(8) - 0.5) * px * 0.14;
+      l.box.style.opacity = p > 0 ? "1" : "0";
+      l.box.style.transform = `translateY(${dy.toFixed(1)}px) rotate(${rot.toFixed(2)}deg) scale(${s.toFixed(4)})`;
+    });
+    // 줄 전체도 조금씩 다가간다 — 글자 모양이 안 바뀌는 사이에도 멈추지 않게
+    row.style.transform = `scale(${(1 + 0.025 * t).toFixed(4)}) rotate(${(1.5 * Math.sin(t * 2.1)).toFixed(2)}deg)`;
+    mark("ransomLetters", o.scene, moving);
+  };
+}

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

@@ -0,0 +1,143 @@
+import { safeTime } from "@kasaframe/core";
+import { mark } from "./fit.ts";
+import { springSteps } from "./liquidTab.ts";
+
+export type MorphShape = "circle" | "triangle" | "square" | "diamond" | "star" | "hexagon" | "heart";
+
+export interface ShapeMorphOpts {
+  /** 도형이 바뀌는 시각과 도형 — 보통 박마다 */
+  steps: { at: number; shape: MorphShape }[];
+  /** 가운데(px) · 반지름(px) */
+  x?: number;
+  y?: number;
+  r?: number;
+  color?: string;
+  /** 둘레를 도는 점 개수 — 같은 모양을 1.6배로 따라 그린다. 0 이면 없음 */
+  orbit?: number;
+  orbitScale?: number;
+  orbitDot?: number;
+  /** 둘레 점이 도는 속도(도/초) — 도형이 가만할 때도 화면이 멈추지 않게 */
+  spin?: number;
+  /** 꼭짓점 수 — 모든 도형을 같은 수로 다시 뽑아야 섞인다 */
+  points?: number;
+  stiffness?: number;
+  damping?: number;
+  w?: number;
+  h?: number;
+  scene?: string;
+}
+
+const TAU = Math.PI * 2;
+
+// 도형 윤곽을 가운데에서 본 각 → 반지름(단위 원 기준)으로 — 각이 같은 점끼리 섞으면 꼬이지 않고 변신한다
+function polyRadius(verts: [number, number][], a: number): number {
+  const dx = Math.cos(a);
+  const dy = Math.sin(a);
+  let best = Infinity;
+  for (let i = 0; i < verts.length; i++) {
+    const [x1, y1] = verts[i];
+    const [x2, y2] = verts[(i + 1) % verts.length];
+    const ex = x2 - x1;
+    const ey = y2 - y1;
+    const den = dx * ey - dy * ex;
+    if (Math.abs(den) < 1e-9) continue;
+    const s = (x1 * ey - y1 * ex) / den;
+    const u = (x1 * dy - y1 * dx) / den;
+    if (s > 0 && u >= -1e-9 && u <= 1 + 1e-9) best = Math.min(best, s);
+  }
+  return Number.isFinite(best) ? best : 1;
+}
+
+// 하트 곡선(x=16sin³s, y=13cos s−5cos2s−2cos3s−cos4s)을 64점으로 — 가운데를 조금 아래로 두어야 위 오목한 곳까지 한 번에 닿는다
+const HEART: [number, number][] = Array.from({ length: 64 }, (_, k) => {
+  const s = (k / 64) * TAU;
+  const x = 16 * Math.sin(s) ** 3;
+  const y = -(13 * Math.cos(s) - 5 * Math.cos(2 * s) - 2 * Math.cos(3 * s) - Math.cos(4 * s));
+  return [x / 17, (y - 1) / 17];
+});
+
+function regular(n: number, rot = -Math.PI / 2, inner?: number): [number, number][] {
+  const out: [number, number][] = [];
+  const m = inner ? n * 2 : n;
+  for (let i = 0; i < m; i++) {
+    const r = inner && i % 2 ? inner : 1;
+    const a = rot + (i * TAU) / m;
+    out.push([r * Math.cos(a), r * Math.sin(a)]);
+  }
+  return out;
+}
+
+function radius(shape: MorphShape, a: number): number {
+  switch (shape) {
+    case "circle":
+      return 1;
+    case "triangle":
+      return polyRadius(regular(3), a) * 1.15;
+    case "square":
+      return polyRadius(regular(4, -Math.PI / 4), a) * 1.05;
+    case "diamond":
+      return polyRadius(regular(4), a);
+    case "hexagon":
+      return polyRadius(regular(6), a);
+    case "star":
+      return polyRadius(regular(5, -Math.PI / 2, 0.45), a) * 1.1;
+    case "heart":
+      return polyRadius(HEART, a) * 1.05;
+  }
+}
+
+/**
+ * 도형 변신 — 원 → 삼각형 → 별 → 사각형 …, 모든 도형을 같은 수의 점으로(가운데에서 같은 각) 다시 뽑아 박마다 스프링으로 섞는다.
+ * 둘레의 점들도 같은 모양으로 1.6배 크게 따라 변하며 돈다. (Livera 15초 쇼릴 5.6–7.5초)
+ */
+export function shapeMorph(el: HTMLElement, o: ShapeMorphOpts): (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 R = o.r ?? Math.min(W, H) * 0.24;
+  const n = o.points ?? 96;
+  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 poly = doc.createElementNS(NS, "polygon");
+  poly.setAttribute("fill", o.color ?? "var(--kf-ink)");
+  svg.append(poly);
+  const orbitN = o.orbit ?? 18;
+  const dots = Array.from({ length: orbitN }, () => {
+    const c = doc.createElementNS(NS, "circle");
+    c.setAttribute("r", String(o.orbitDot ?? 7));
+    c.setAttribute("fill", o.color ?? "var(--kf-ink)");
+    svg.append(c);
+    return c;
+  });
+  el.append(svg);
+  const angles = Array.from({ length: n }, (_, i) => -Math.PI / 2 + (i * TAU) / n);
+  // 점마다 도형별 반지름 걸음 — 목표가 박마다 바뀌는 값이라 springSteps 그대로
+  const tracks = angles.map((a) => o.steps.map((s) => ({ at: s.at, to: radius(s.shape, a) })));
+  const sp = { stiffness: o.stiffness ?? 260, damping: o.damping ?? 18 };
+  const rAt = (rs: number[], a: number) => {
+    const u = ((((a + Math.PI / 2) / TAU) * n) % n + n) % n;
+    const i = Math.floor(u);
+    const f = u - i;
+    return rs[i] * (1 - f) + rs[(i + 1) % n] * f;
+  };
+  return (t: number) => {
+    t = safeTime(t);
+    const rs = tracks.map((tr) => springSteps(t, tr, sp));
+    poly.setAttribute("points", angles.map((a, i) => `${(cx + R * rs[i] * Math.cos(a)).toFixed(1)},${(cy + R * rs[i] * Math.sin(a)).toFixed(1)}`).join(" "));
+    const spin = ((o.spin ?? 40) * Math.PI) / 180;
+    const k = o.orbitScale ?? 1.6;
+    dots.forEach((d, j) => {
+      const a = -Math.PI / 2 + (j * TAU) / orbitN + spin * t;
+      const rr = R * k * rAt(rs, a);
+      d.setAttribute("cx", (cx + rr * Math.cos(a)).toFixed(1));
+      d.setAttribute("cy", (cy + rr * Math.sin(a)).toFixed(1));
+    });
+    mark("shapeMorph", o.scene, o.steps.some((s, i) => i > 0 && t >= s.at && t < s.at + 0.4));
+  };
+}

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

@@ -0,0 +1,89 @@
+import { clamp, ease, safeTime } from "@kasaframe/core";
+import { div, fitSize, lastIndex, mark } from "./fit.ts";
+
+export interface SlamWordsOpts {
+  words: string[];
+  /** 낱말마다 쾅 하는 시각(장면 초) — 보통 ctx.beats 의 박. words 보다 짧으면 남는 낱말은 안 나온다 */
+  hits: number[];
+  w?: number;
+  h?: number;
+  /** [바탕, 글] — 낱말마다 돌아가며 뒤집힌다 */
+  palettes?: [string, string][];
+  weight?: number;
+  scene?: string;
+}
+
+const PALETTES: [string, string][] = [
+  ["var(--kf-bg)", "var(--kf-ink)"],
+  ["var(--kf-accent)", "var(--kf-on-accent)"],
+];
+
+/**
+ * 박마다 낱말 하나가 화면을 꽉 채우며 쾅 — 1.22배에서 내려앉고, 글자는 바닥에서 꼬리를 끌며 차례로 솟고, 바탕색이 뒤집힌다.
+ * 다음 박까지는 다가가며 옆으로 흘러 멈추지 않는다. (mexicat 「I'm Upping My P(doom)」 59–60초의 훅)
+ */
+export function slamWords(el: HTMLElement, o: SlamWordsOpts): (t: number) => void {
+  const doc = el.ownerDocument;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const pals = o.palettes?.length ? o.palettes : PALETTES;
+  const layer = div(doc, "position:absolute;inset:0;overflow:hidden");
+  el.append(layer);
+  const words = o.words.slice(0, o.hits.length).map((text) => {
+    const px = fitSize(text, W, H, { share: 0.9, hShare: 0.72 });
+    const box = div(
+      doc,
+      `position:absolute;left:50%;top:50%;display:flex;white-space:nowrap;font-family:var(--kf-font-display);font-size:${px}px;` +
+        `font-weight:${o.weight ?? 900};line-height:.9;letter-spacing:-.04em;transform-origin:50% 50%`,
+    );
+    const letters = [...text].map((c) => {
+      const span = doc.createElement("span");
+      span.style.cssText = "position:relative;display:inline-block";
+      span.textContent = c === " " ? "\u00a0" : c;
+      // 솟는 글자 아래로 남는 세로 꼬리 — 글자색에서 투명으로
+      const tail = div(
+        doc,
+        "position:absolute;left:10%;right:10%;top:86%;height:1.2em;transform-origin:50% 0;" +
+          "background:repeating-linear-gradient(90deg,currentColor 0 .045em,transparent .045em .14em);" +
+          "-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)",
+      );
+      span.append(tail);
+      box.append(span);
+      return { span, tail };
+    });
+    layer.append(box);
+    return { box, letters, px };
+  });
+
+  return (t: number) => {
+    t = safeTime(t);
+    const k = lastIndex(o.hits, t);
+    const [bg, ink] = pals[Math.max(0, k) % pals.length];
+    layer.style.background = bg;
+    words.forEach((wd, i) => {
+      if (i !== k) {
+        wd.box.style.display = "none";
+        return;
+      }
+      const local = t - o.hits[i];
+      wd.box.style.display = "flex";
+      wd.box.style.color = ink;
+      const land = ease.outCubic(clamp(local / 0.2));
+      const after = Math.max(0, local - 0.2);
+      // 박 사이에도 다가가며 옆으로 흘러야 0.1초 멈춤에 안 걸린다(짧은 낱말일수록 움직임이 작게 보인다)
+      const scale = (1.22 - 0.22 * land) * (1 + 0.16 * after);
+      const dx = (i % 2 ? -1 : 1) * W * 0.05 * after;
+      wd.box.style.transform = `translate(calc(-50% + ${dx.toFixed(1)}px),-50%) scale(${scale.toFixed(4)})`;
+      const each = Math.min(0.035, 0.12 / wd.letters.length);
+      wd.letters.forEach((l, j) => {
+        const p = clamp((local - j * each) / 0.16);
+        const e = ease.outCubic(p);
+        l.span.style.opacity = p > 0 ? "1" : "0";
+        l.span.style.transform = `translateY(${((1 - e) * wd.px * 0.7).toFixed(1)}px)`;
+        l.tail.style.transform = `scaleY(${(1 - e).toFixed(3)})`;
+        l.tail.style.opacity = (0.8 * (1 - e)).toFixed(3);
+      });
+      mark("slamWords", o.scene, local < 0.25);
+    });
+  };
+}

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

@@ -0,0 +1,114 @@
+import { clamp, rand, safeTime, toEase, type Ease, type EaseName } from "@kasaframe/core";
+import { mark } from "./fit.ts";
+import { curve, lengths, pointAt, type Pt } from "./path.ts";
+
+export interface SparkTrailOpts {
+  /** 지나는 점들(무대 px). smooth 면 곡선으로 잇는다 */
+  points: Pt[];
+  smooth?: boolean;
+  at?: number;
+  dur?: number;
+  ease?: EaseName | Ease;
+  /** 선이 남는 길이(초). 없으면 끝까지 남는다 — 도화선처럼 타 들어가게 하려면 0.4 쯤 */
+  tail?: number;
+  color?: string;
+  width?: number;
+  sparks?: number;
+  w?: number;
+  h?: number;
+  seed?: string | number;
+  scene?: string;
+}
+
+/**
+ * 불씨가 끄는 선 — 빛나는 점 하나가 불티를 흘리며 경로를 지나가고 그 뒤로 선이 남는다. 꼬리 쪽일수록 식어 어둡다.
+ * 다 그린 뒤에도 불씨가 끝에서 숨 쉬어 멈추지 않는다. (mexicat p(doom) 97·102·145초의 불씨)
+ */
+export function sparkTrail(el: HTMLElement, o: SparkTrailOpts): (t: number) => void {
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  const cv = el.ownerDocument.createElement("canvas");
+  cv.width = W;
+  cv.height = H;
+  cv.style.cssText = "position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none";
+  el.append(cv);
+  const g = cv.getContext("2d")!;
+  const pts = o.smooth === false ? o.points : curve(o.points);
+  const cum = lengths(pts);
+  const L = cum[cum.length - 1] || 1;
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 1.2;
+  const ez = toEase(o.ease ?? "inOutCubic");
+  // 스타일 색은 장면이 처음 그려질 때 읽는다 — build 때는 아직 변수가 안 걸렸을 수 있다
+  let color = o.color ?? "";
+  const lw = o.width ?? 9;
+  const nSparks = o.sparks ?? 70;
+  const seed = o.seed ?? "spark";
+  const sAt = (u: number) => L * ez(clamp((u - at) / dur));
+
+  return (t: number) => {
+    t = safeTime(t);
+    g.clearRect(0, 0, W, H);
+    if (t < at) return;
+    if (!color) color = getComputedStyle(el.ownerDocument.documentElement).getPropertyValue("--kf-accent").trim() || "#ff6b2c";
+    const head = sAt(t);
+    const from = o.tail !== undefined ? Math.max(0, sAt(t - o.tail)) : 0;
+    g.lineCap = "round";
+    g.lineJoin = "round";
+    g.strokeStyle = color;
+    g.shadowColor = color;
+    g.shadowBlur = lw * 2.5;
+    // 꼬리에서 머리로 갈수록 밝게 — 조각마다 투명도를 올린다
+    const chunks = 48;
+    for (let c = 0; c < chunks; c++) {
+      const a = from + ((head - from) * c) / chunks;
+      const b = from + ((head - from) * (c + 1)) / chunks;
+      if (b <= a) continue;
+      const f = (c + 1) / chunks;
+      g.globalAlpha = 0.25 + 0.75 * f * f;
+      g.lineWidth = lw * (0.7 + 0.3 * f);
+      g.beginPath();
+      const p0 = pointAt(pts, cum, a);
+      g.moveTo(p0.x, p0.y);
+      for (let i = 0; i < pts.length; i++) if (cum[i] > a && cum[i] < b) g.lineTo(pts[i][0], pts[i][1]);
+      const p1 = pointAt(pts, cum, b);
+      g.lineTo(p1.x, p1.y);
+      g.stroke();
+    }
+    g.shadowBlur = 0;
+    // 불티 — 머리가 지나간 자리에서 태어나 0.45초 동안 튀며 식는다
+    for (let i = 0; i < nSparks; i++) {
+      const born = at + (dur * i) / nSparks;
+      const age = t - born;
+      if (age < 0 || age > 0.45) continue;
+      const p = pointAt(pts, cum, sAt(born));
+      const ang = p.angle + Math.PI + (rand(seed, i) - 0.5) * 2.2;
+      const v = 120 + 260 * rand(seed, i + 500);
+      const x = p.x + Math.cos(ang) * v * age;
+      const y = p.y + Math.sin(ang) * v * age + 260 * age * age;
+      g.globalAlpha = (1 - age / 0.45) * 0.9;
+      g.fillStyle = i % 3 ? color : "#fff4e0";
+      g.beginPath();
+      g.arc(x, y, 1.6 + 2.2 * rand(seed, i + 900), 0, Math.PI * 2);
+      g.fill();
+    }
+    // 머리 — 번진 빛 + 흰 속. 다 그린 뒤에도 숨 쉰다
+    const hp = pointAt(pts, cum, head);
+    const breath = 1 + 0.18 * Math.sin(t * 9);
+    const r = lw * 6 * breath;
+    const grad = g.createRadialGradient(hp.x, hp.y, 0, hp.x, hp.y, r);
+    grad.addColorStop(0, "rgba(255,244,224,1)");
+    grad.addColorStop(0.25, color);
+    grad.addColorStop(1, "rgba(0,0,0,0)");
+    g.globalAlpha = 1;
+    g.fillStyle = grad;
+    g.beginPath();
+    g.arc(hp.x, hp.y, r, 0, Math.PI * 2);
+    g.fill();
+    g.fillStyle = "#fff";
+    g.beginPath();
+    g.arc(hp.x, hp.y, lw * 0.9, 0, Math.PI * 2);
+    g.fill();
+    mark("sparkTrail", o.scene, t < at + dur);
+  };
+}

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

@@ -0,0 +1,91 @@
+import { rand, safeTime } from "@kasaframe/core";
+import { mark } from "./fit.ts";
+
+export interface SpeedLinesOpts {
+  /** radial 가운데로 모이는 집중선 · horizontal 옆으로 흐르는 속도선 */
+  kind?: "radial" | "horizontal";
+  count?: number;
+  color?: string;
+  /** 비워 두는 가운데 반지름(화면 짧은 변의 몫) — radial */
+  inner?: number;
+  /** 손그림처럼 끓는 횟수(초당) — 12 면 만화 결 */
+  boil?: number;
+  /** 가장 굵은 선(px) */
+  width?: number;
+  /** horizontal 의 흐름 속도(px/초) — 음수면 오른쪽으로 */
+  speed?: number;
+  x?: number;
+  y?: number;
+  seed?: string | number;
+  w?: number;
+  h?: number;
+  scene?: string;
+}
+
+/**
+ * 집중선·속도선 — 선마다 각도·길이·굵기를 시드로 뽑고 초당 12번 새로 뽑아 끓는다(손그림 결). 선은 바깥이 굵고 안쪽이 뾰족한 쐐기.
+ * (Where No Map Goes 33–38초 · Update Me 32.4초)
+ */
+export function speedLines(el: HTMLElement, o: SpeedLinesOpts = {}): (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 kind = o.kind ?? "radial";
+  const n = o.count ?? (kind === "radial" ? 110 : 46);
+  const seed = o.seed ?? "speed";
+  const boil = o.boil ?? 12;
+  const cx = o.x ?? W / 2;
+  const cy = o.y ?? H / 2;
+  const maxW = o.width ?? 16;
+  const color = o.color ?? "#ffffff";
+  return (t: number) => {
+    t = safeTime(t);
+    const f = Math.floor(t * boil);
+    g.clearRect(0, 0, W, H);
+    g.fillStyle = color;
+    if (kind === "radial") {
+      const outer = Math.hypot(W, H) * 0.6;
+      const inner = Math.min(W, H) * (o.inner ?? 0.3);
+      for (let i = 0; i < n; i++) {
+        const r = (k: number) => rand(seed, f * 9973 + i * 7 + k);
+        const a = r(0) * Math.PI * 2;
+        const rin = inner * (0.75 + 0.7 * r(1));
+        const half = (maxW * (0.25 + r(2))) / 2 / outer;
+        g.globalAlpha = 0.55 + 0.45 * r(3);
+        g.beginPath();
+        g.moveTo(cx + rin * Math.cos(a), cy + rin * Math.sin(a));
+        g.lineTo(cx + outer * Math.cos(a + half), cy + outer * Math.sin(a + half));
+        g.lineTo(cx + outer * Math.cos(a - half), cy + outer * Math.sin(a - half));
+        g.closePath();
+        g.fill();
+      }
+    } else {
+      const speed = o.speed ?? 2600;
+      for (let i = 0; i < n; i++) {
+        const r = (k: number) => rand(seed, i * 11 + k);
+        const len = W * (0.12 + 0.4 * r(0));
+        const y = H * r(1);
+        const thick = maxW * (0.15 + 0.85 * r(2));
+        // 흐름은 끊김 없이(t 에 비례), 굵기·밝기만 끓인다
+        const span = W + len;
+        const x = ((((r(3) * span - t * speed * (0.7 + 0.6 * r(4))) % span) + span) % span) - len;
+        const jitter = rand(seed, f * 977 + i);
+        g.globalAlpha = 0.35 + 0.55 * jitter;
+        g.beginPath();
+        g.moveTo(x, y);
+        g.lineTo(x + len, y - thick / 2);
+        g.lineTo(x + len, y + thick / 2);
+        g.closePath();
+        g.fill();
+      }
+    }
+    g.globalAlpha = 1;
+    mark("speedLines", o.scene, true);
+  };
+}