kasaframe 0.1.1 → 0.1.4

package/themes/ink-wash/effects.ts

@@ -0,0 +1,574 @@
+// 테마 ink-wash 전용 효과 — 정보가 화선지에 먹으로 스며 나타난다. 숫자는 젖은 먹으로 번졌다 마르며 또렷해지고, 요청은 붓 한 획.
+// 같은 t 면 같은 화면, 난수는 rand(seed, i) 로만. 먹은 끊지 않고 60fps 로 흐른다(만화·리소와 다른 결).
+import { clamp, noise1, rand, randRange, type SceneCtx, type Style } from "@kasaframe/core";
+import { dropBurst, type DropBurstState } from "@kasaframe/motion";
+
+export type { SceneCtx };
+
+type Pt = [number, number];
+type Area = [x: number, y: number, w: number, h: number];
+
+const color = (ctx: SceneCtx, key: string): string => ctx.style.colors[key] ?? key;
+
+function rgba(hex: string, a: number): string {
+  const h = hex.replace("#", "");
+  const n = parseInt(h.length === 3 ? h.replace(/./g, (c) => c + c) : h.slice(0, 6), 16);
+  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${clamp(a).toFixed(3)})`;
+}
+
+const smooth = (u: number): number => {
+  const x = clamp(u);
+  return x * x * (3 - 2 * x);
+};
+
+const areas = new WeakMap<CanvasRenderingContext2D, Area>();
+
+// 먹이 놓이는 자리만큼만 캔버스 — 한 장면에 번짐·획이 열 개 넘게 생기니 화면 전체 캔버스면 메모리를 먹는다
+function canvas(el: HTMLElement, ctx: SceneCtx, area: Area, blend = "multiply"): CanvasRenderingContext2D {
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const x0 = Math.max(-160, Math.floor(area[0]));
+  const y0 = Math.max(-160, Math.floor(area[1]));
+  const x1 = Math.min(W + 160, Math.ceil(area[0] + area[2]));
+  const y1 = Math.min(H + 160, Math.ceil(area[1] + area[3]));
+  const w = Math.max(1, x1 - x0);
+  const h = Math.max(1, y1 - y0);
+  const c = document.createElement("canvas");
+  c.width = w;
+  c.height = h;
+  c.style.cssText = `position:absolute;left:${x0}px;top:${y0}px;width:${w}px;height:${h}px;pointer-events:none;mix-blend-mode:${blend};`;
+  el.append(c);
+  const g = c.getContext("2d")!;
+  g.translate(-x0, -y0);
+  areas.set(g, [x0, y0, w, h]);
+  return g;
+}
+
+const clear = (g: CanvasRenderingContext2D): void => {
+  const [x, y, w, h] = areas.get(g)!;
+  g.clearRect(x, y, w, h);
+};
+
+// 종이결에 먹이 고르게 안 먹은 자리 — 번짐 면에서 빼낼 작은 반점 무늬(한 번 짓고 나눠 쓴다)
+let grainTile: HTMLCanvasElement | null = null;
+function grain(): HTMLCanvasElement {
+  if (grainTile) return grainTile;
+  const c = document.createElement("canvas");
+  c.width = c.height = 192;
+  const g = c.getContext("2d")!;
+  const im = g.createImageData(192, 192);
+  for (let i = 0; i < 192 * 192; i++) {
+    const v = rand("ink-grain", i);
+    im.data[i * 4 + 3] = v > 0.72 ? Math.round(((v - 0.72) / 0.28) * 150) : 0;
+  }
+  g.putImageData(im, 0, 0);
+  grainTile = c;
+  return c;
+}
+
+/** 둘레 잡음 — 각도 θ 에서 반지름 배수. 주기 함수라 이음매가 없고, wet 이 크면 젖은 먹이 뻗는 잔손가락이 자란다 */
+function edge(seed: string | number): (a: number, wet: number, tau?: number) => number {
+  const lo = Array.from({ length: 8 }, (_, i) => ({ k: i + 2, amp: (randRange(seed, i, 0.25, 1) * 0.16) / (i + 2) ** 0.7, ph: rand(seed, i + 20) * Math.PI * 2 }));
+  const hi = Array.from({ length: 10 }, (_, i) => ({ k: i + 13, amp: randRange(seed, i + 40, 0.3, 1) * 0.05, ph: rand(seed, i + 60) * Math.PI * 2, v: randRange(seed, i + 80, 3, 6) * (i % 2 ? 1 : -1) }));
+  // 젖은 동안 잔손가락이 둘레를 따라 기어간다(위상이 시간에 따라 흐른다) — 마르면 멎는다
+  return (a, wet, tau = 0) => {
+    let n = 1;
+    for (const q of lo) n += q.amp * Math.sin(q.k * a + q.ph);
+    for (const q of hi) n += wet * q.amp * Math.sin(q.k * a + q.ph + tau * q.v);
+    return n;
+  };
+}
+
+function blob(g: CanvasRenderingContext2D, cx: number, cy: number, R: number, shape: (a: number, wet: number, tau?: number) => number, wet: number, sx: number, sy: number, tau = 0): void {
+  const N = 120;
+  g.beginPath();
+  for (let i = 0; i <= N; i++) {
+    const a = (i / N) * Math.PI * 2;
+    const r = R * shape(a, wet, tau);
+    const px = cx + Math.cos(a) * r * sx;
+    const py = cy + Math.sin(a) * r * sy;
+    if (i) g.lineTo(px, py);
+    else g.moveTo(px, py);
+  }
+  g.closePath();
+}
+
+/** 한지 — 미색 종이에 섬유가 비친다. 서 있는 바탕이라 한 번 그리고 움직이지 않는다 */
+export function hanji(el: HTMLElement, o: { ctx: SceneCtx; seed?: string | number }): (t: number) => void {
+  const { ctx } = o;
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  // 드롭 흔들림에 가장자리가 비지 않게 화면보다 조금 넓게
+  const g = canvas(el, ctx, [-30, -30, W + 60, H + 60], "normal");
+  const seed = o.seed ?? "hanji";
+  g.fillStyle = color(ctx, "bg");
+  g.fillRect(-30, -30, W + 60, H + 60);
+  // 섬유 — 가늘고 긴 곡선, 종이보다 아주 조금 밝거나 어둡다
+  g.lineWidth = 1.1;
+  for (let i = 0; i < 520; i++) {
+    const x = rand(seed, i * 5) * W;
+    const y = rand(seed, i * 5 + 1) * H;
+    const len = 20 + rand(seed, i * 5 + 2) * 70;
+    const a = rand(seed, i * 5 + 3) * Math.PI;
+    const bend = (rand(seed, i * 5 + 4) - 0.5) * 30;
+    g.strokeStyle = i % 3 ? "rgba(255,252,244,0.55)" : "rgba(120,104,80,0.10)";
+    g.beginPath();
+    g.moveTo(x, y);
+    g.quadraticCurveTo(x + Math.cos(a) * len * 0.5 + bend, y + Math.sin(a) * len * 0.5 - bend, x + Math.cos(a) * len, y + Math.sin(a) * len);
+    g.stroke();
+  }
+  // 얼룩 — 아주 옅은 큰 반점(종이 두께가 고르지 않은 자리)
+  for (let i = 0; i < 26; i++) {
+    const x = rand(seed, 3000 + i) * W;
+    const y = rand(seed, 3100 + i) * H;
+    const r = 80 + rand(seed, 3200 + i) * 220;
+    const gr = g.createRadialGradient(x, y, 0, x, y, r);
+    gr.addColorStop(0, "rgba(150,130,100,0.035)");
+    gr.addColorStop(1, "rgba(150,130,100,0)");
+    g.fillStyle = gr;
+    g.fillRect(x - r, y - r, r * 2, r * 2);
+  }
+  return () => {};
+}
+
+export interface InkBloomOpts {
+  ctx: SceneCtx;
+  x: number;
+  y: number;
+  /** 다 스민 반지름 */
+  r: number;
+  at: number;
+  /** 먹이 거의 다 퍼지는 시간 — 젖은 먹은 빨리, 마른 붓은 느리게 */
+  grow?: number;
+  /** 다 퍼진 뒤에도 초당 반지름의 몇 배씩 기어가나 — 마를 때까지 스민다 */
+  creep?: number;
+  /** 먹 진하기 0..1 — 1 초묵 · 0.6 중묵 · 0.3 담묵 · 0.15 청묵 */
+  density?: number;
+  ink?: string;
+  /** 가로·세로 늘림 */
+  stretch?: [number, number];
+  seed?: string | number;
+  until?: number;
+}
+
+/** 먹 번짐 — 먹이 종이에 스며 손가락처럼 뻗고 마른 테두리가 진하다. 다 퍼진 뒤에도 가장자리가 천천히 기어간다. 겹치면 곱하기로 진해진다 */
+export function inkBloom(el: HTMLElement, o: InkBloomOpts): (t: number) => void {
+  const { ctx } = o;
+  const [sx, sy] = o.stretch ?? [1, 1];
+  const reach = o.r * 1.75;
+  const g = canvas(el, ctx, [o.x - reach * sx, o.y - reach * sy, reach * 2 * sx, reach * 2 * sy]);
+  const seed = o.seed ?? `${ctx.id}:bloom:${o.x}:${o.y}`;
+  const shape = edge(seed);
+  const core = edge(`${seed}:core`);
+  const grow = o.grow ?? 0.5;
+  const creep = o.creep ?? 0.12;
+  const d = o.density ?? 0.85;
+  const ink = color(ctx, o.ink ?? "ink");
+  const pattern = g.createPattern(grain(), "repeat")!;
+  return (t) => {
+    clear(g);
+    if (t < o.at || (o.until !== undefined && t >= o.until)) return;
+    const tau = t - o.at;
+    const R = Math.min(o.r * 1.5, o.r * (1 - Math.exp(-tau / grow)) + o.r * creep * Math.max(0, tau - grow));
+    if (R < 0.5) return;
+    const wet = Math.exp(-tau / (grow * 4));
+    const gr = g.createRadialGradient(o.x, o.y, 0, o.x, o.y, R * 1.2 * Math.max(sx, sy));
+    gr.addColorStop(0, rgba(ink, d * 0.78));
+    gr.addColorStop(0.6, rgba(ink, d * 0.42));
+    gr.addColorStop(0.8, rgba(ink, d * 0.5));
+    gr.addColorStop(0.86, rgba(ink, d * 0.72));
+    gr.addColorStop(1, rgba(ink, d * 0.3));
+    blob(g, o.x, o.y, R, shape, 0.4 + wet * 1.6, sx, sy, tau);
+    g.fillStyle = gr;
+    g.fill();
+    // 가운데 진한 먹 — 처음 떨어진 자리
+    blob(g, o.x, o.y, R * 0.42, core, wet, sx, sy, tau);
+    g.fillStyle = rgba(ink, d * 0.55);
+    g.fill();
+    // 종이결 — 먹이 안 먹은 작은 반점을 빼낸다
+    g.save();
+    g.globalCompositeOperation = "destination-out";
+    g.fillStyle = pattern;
+    blob(g, o.x, o.y, R * 1.02, shape, 0.4 + wet * 1.6, sx, sy, tau);
+    g.fill();
+    g.restore();
+  };
+}
+
+export interface BrushStrokeOpts {
+  ctx: SceneCtx;
+  /** 붓이 지나는 점들 — 부드러운 곡선으로 잇는다 */
+  points: readonly Pt[];
+  /** 붓 굵기(배 부분) px */
+  width: number;
+  at: number;
+  dur?: number;
+  until?: number;
+  ink?: string;
+  density?: number;
+  /** 비백 0..1 — 클수록 끝에서 붓털이 많이 갈라진다 */
+  dry?: number;
+  seed?: string | number;
+}
+
+function catmull(points: readonly Pt[], step = 2.5): { x: number; y: number; nx: number; ny: number; s: number }[] {
+  const pts = points.length > 2 ? points : [points[0], points[points.length - 1]];
+  const out: { x: number; y: number; nx: number; ny: number; s: number }[] = [];
+  const P = (i: number) => pts[Math.max(0, Math.min(pts.length - 1, i))];
+  let s = 0;
+  let prev: Pt | null = null;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const [p0, p1, p2, p3] = [P(i - 1), P(i), P(i + 1), P(i + 2)];
+    const segLen = Math.hypot(p2[0] - p1[0], p2[1] - p1[1]);
+    const n = Math.max(2, Math.ceil(segLen / step));
+    for (let k = 0; k < n; k++) {
+      const u = k / n;
+      const u2 = u * u;
+      const u3 = u2 * u;
+      const x = 0.5 * (2 * p1[0] + (-p0[0] + p2[0]) * u + (2 * p0[0] - 5 * p1[0] + 4 * p2[0] - p3[0]) * u2 + (-p0[0] + 3 * p1[0] - 3 * p2[0] + p3[0]) * u3);
+      const y = 0.5 * (2 * p1[1] + (-p0[1] + p2[1]) * u + (2 * p0[1] - 5 * p1[1] + 4 * p2[1] - p3[1]) * u2 + (-p0[1] + 3 * p1[1] - 3 * p2[1] + p3[1]) * u3);
+      if (prev) s += Math.hypot(x - prev[0], y - prev[1]);
+      out.push({ x, y, nx: 0, ny: 0, s });
+      prev = [x, y];
+    }
+  }
+  const last = pts[pts.length - 1];
+  if (prev) s += Math.hypot(last[0] - prev[0], last[1] - prev[1]);
+  out.push({ x: last[0], y: last[1], nx: 0, ny: 0, s });
+  for (let i = 0; i < out.length; i++) {
+    const a = out[Math.max(0, i - 2)];
+    const b = out[Math.min(out.length - 1, i + 2)];
+    const L = Math.hypot(b.x - a.x, b.y - a.y) || 1;
+    out[i].nx = -(b.y - a.y) / L;
+    out[i].ny = (b.x - a.x) / L;
+  }
+  return out;
+}
+
+/**
+ * 붓 한 획 — 붓털 여러 가닥이 필압대로 벌어지며 그어진다. 처음엔 눌러 멈칫, 가운데서 빠르고, 끝에서 들며 붓털이 갈라져 비백이 남는다.
+ * 요청 한 번·연결선·취소선·원상(시계)에
+ */
+export function brushStroke(el: HTMLElement, o: BrushStrokeOpts): (t: number) => void {
+  const { ctx } = o;
+  const xs = o.points.map((p) => p[0]);
+  const ys = o.points.map((p) => p[1]);
+  const pad = o.width * 1.5 + 20;
+  const g = canvas(el, ctx, [Math.min(...xs) - pad, Math.min(...ys) - pad, Math.max(...xs) - Math.min(...xs) + pad * 2, Math.max(...ys) - Math.min(...ys) + pad * 2]);
+  const path = catmull(o.points);
+  const L = path[path.length - 1].s || 1;
+  const seed = o.seed ?? `${ctx.id}:stroke:${o.points[0].join(",")}`;
+  const K = Math.round(clamp(o.width / 3, 10, 36));
+  const dry = o.dry ?? 0.5;
+  const ink = color(ctx, o.ink ?? "ink");
+  const d = o.density ?? 0.92;
+  const bristles = Array.from({ length: K }, (_, k) => ({
+    off: (k / (K - 1) - 0.5) * (0.9 + randRange(seed, k, -0.08, 0.08)),
+    cap: randRange(seed, k + 100, 0.55, 1.15),
+    alpha: d * randRange(seed, k + 200, 0.55, 0.95),
+  }));
+  // 필압 — 처음 눌러 굵어지고(배), 끝에서 든다
+  const press = (x: number) => Math.min(1, (x / 0.07) ** 0.6) * (1 - 0.6 * smooth((x - 0.72) / 0.28)) * (0.88 + 0.12 * Math.sin(x * 9 + rand(seed, 7) * 6));
+  const draws = (k: number, x: number): boolean => {
+    const b = bristles[k];
+    // 붓털마다 먹이 떨어지는 자리가 다르다 — 끝으로 갈수록 마른 붓털이 늘어 흰 줄(비백)이 생긴다
+    const thirst = x - b.cap * (1 - dry * 0.35);
+    if (thirst > 0.18) return false;
+    const gap = noise1(`${seed}:${k}`, x * L * 0.035);
+    return gap > -1 + (1 - dry) * 0.6 + Math.max(0, thirst + 0.25) * dry * 4.5;
+  };
+  const dur = o.dur ?? 0.35;
+  let drawn = 0;
+  const paintRange = (from: number, to: number) => {
+    g.lineCap = "round";
+    for (let k = 0; k < K; k++) {
+      const b = bristles[k];
+      g.strokeStyle = rgba(ink, b.alpha);
+      g.lineWidth = Math.max(1.2, (o.width / K) * 1.9);
+      g.beginPath();
+      let pen = false;
+      for (let i = Math.max(1, from); i <= to; i++) {
+        const q = path[i];
+        const x = q.s / L;
+        if (!draws(k, x)) {
+          pen = false;
+          continue;
+        }
+        const w = o.width * press(x);
+        const px = q.x + q.nx * b.off * w;
+        const py = q.y + q.ny * b.off * w;
+        if (!pen) {
+          const p0 = path[i - 1];
+          const w0 = o.width * press(p0.s / L);
+          g.moveTo(p0.x + p0.nx * b.off * w0, p0.y + p0.ny * b.off * w0);
+          pen = true;
+        }
+        g.lineTo(px, py);
+      }
+      g.stroke();
+    }
+  };
+  return (t) => {
+    if (t < o.at || (o.until !== undefined && t >= o.until)) {
+      if (drawn) clear(g);
+      drawn = 0;
+      return;
+    }
+    const u = clamp((t - o.at) / dur);
+    // 눌러 멈칫 → 빠르게 → 들며 조금 느려짐(끝까지 그어지는 중이라 획이 서지 않는다)
+    const v = (u - 0.08) / 0.92;
+    const p = u < 0.08 ? 0.02 * (u / 0.08) : 0.02 + 0.98 * (0.75 * v + 0.25 * (0.5 - 0.5 * Math.cos(Math.PI * v)));
+    const sLim = p * L;
+    let idx = 0;
+    while (idx < path.length - 1 && path[idx + 1].s <= sLim) idx++;
+    // 그은 만큼은 이미 종이에 있다 — 앞으로만 가면 이어 긋고, 뒤로 감으면 처음부터(화면은 같은 t 면 같다)
+    if (idx < drawn) {
+      clear(g);
+      drawn = 0;
+    }
+    if (idx > drawn) {
+      paintRange(drawn, idx);
+      drawn = idx;
+    }
+  };
+}
+
+export interface InkTextOpts {
+  ctx: SceneCtx;
+  text: string;
+  x: number;
+  y: number;
+  size: number;
+  font?: "display" | "sans" | "mono";
+  ink?: string;
+  at: number;
+  /** 젖은 먹이 다 스며 또렷해지는 시간 */
+  dur?: number;
+  until?: number;
+  anchor?: "left" | "center" | "right";
+  /** 세로쓰기 */
+  vertical?: boolean;
+  seed?: string | number;
+}
+
+/** 먹 글씨 — 글·숫자가 한 점에서부터 젖은 먹으로 번지며 나타나고, 번진 테가 마르며 걷혀 또렷해진다 */
+export function inkText(el: HTMLElement, o: InkTextOpts): (t: number) => void {
+  const { ctx } = o;
+  const d = document.createElement("div");
+  const tx = o.anchor === "left" ? "0" : o.anchor === "right" ? "-100%" : "-50%";
+  const ink = color(ctx, o.ink ?? "ink");
+  d.style.cssText = `position:absolute;left:${o.x}px;top:${o.y}px;transform:translate(${tx},-50%);white-space:nowrap;font-family:${ctx.style.fonts[o.font ?? "sans"]};font-size:${o.size}px;line-height:1.05;color:${ink};${o.vertical ? "writing-mode:vertical-rl;" : ""}display:none;pointer-events:none`;
+  d.textContent = o.text;
+  el.append(d);
+  const seed = o.seed ?? `${ctx.id}:text:${o.text}`;
+  const cx = randRange(seed, 0, 20, 45);
+  const cy = randRange(seed, 1, 35, 65);
+  const dur = o.dur ?? 0.55;
+  return (t) => {
+    const on = t >= o.at && (o.until === undefined || t < o.until);
+    d.style.display = on ? "block" : "none";
+    if (!on) return;
+    const u = clamp((t - o.at) / dur);
+    const e = 1 - (1 - u) ** 3;
+    if (u < 1) {
+      const R = 6 + smooth(u) * 150;
+      const mask = `radial-gradient(ellipse 120% 160% at ${cx}% ${cy}%, #000 ${R.toFixed(1)}%, transparent ${(R + 22).toFixed(1)}%)`;
+      d.style.setProperty("-webkit-mask-image", mask);
+      d.style.setProperty("mask-image", mask);
+    } else {
+      d.style.removeProperty("-webkit-mask-image");
+      d.style.removeProperty("mask-image");
+    }
+    // 젖은 먹 테 — 처음엔 넓게 번졌다가 마르며 얇아진다(다 마른 뒤에도 1px 번짐은 남는다)
+    const B = 1.2 + o.size * 0.32 * (1 - e);
+    d.style.textShadow = `0 0 ${B.toFixed(1)}px ${rgba(ink, 0.25 + 0.5 * (1 - e))}`;
+    d.style.opacity = String(0.7 + 0.3 * e);
+  };
+}
+
+export interface MountainOpts {
+  ctx: SceneCtx;
+  /** 봉우리 가로 자리·밑변 y·높이·밑변 반폭 */
+  x: number;
+  base: number;
+  h: number;
+  w: number;
+  at: number;
+  dur?: number;
+  density?: number;
+  ink?: string;
+  seed?: string | number;
+}
+
+/** 먹 봉우리 — 붓이 봉우리 꼭대기에서 아래로 쓸며 먹을 놓고, 발치는 안개로 풀린다. 진하기가 곧 거리·무게. 안개가 천천히 내려앉는다 */
+export function mountain(el: HTMLElement, o: MountainOpts): (t: number) => void {
+  const { ctx } = o;
+  const g = canvas(el, ctx, [o.x - o.w - 30, o.base - o.h - 30, o.w * 2 + 60, o.h + 80]);
+  const seed = o.seed ?? `${ctx.id}:mtn:${o.x}`;
+  const ink = color(ctx, o.ink ?? "ink");
+  const d = o.density ?? 0.8;
+  const N = 60;
+  const ridge: Pt[] = [];
+  for (let i = 0; i <= N; i++) {
+    const u = i / N;
+    const side = u < 0.5 ? u / 0.5 : (1 - u) / 0.5;
+    // 봉우리 — 위는 둥글게 솟고 어깨에서 한 번 꺾인다, 둘레는 잡음으로 거칠게
+    const rise = Math.pow(side, 1.6) * (0.85 + 0.15 * Math.sin(side * Math.PI));
+    const rough = noise1(seed, u * 14) * 0.06 + noise1(`${seed}:f`, u * 40) * 0.02;
+    ridge.push([o.x - o.w + u * o.w * 2, o.base - o.h * clamp(rise + rough * side, 0, 1.05)]);
+  }
+  // 준법 — 산비탈을 따라 내려긋는 마른 붓 몇 가닥
+  const strokes = Array.from({ length: 14 }, (_, i) => {
+    const u = randRange(seed, i + 300, 0.18, 0.82);
+    const top = ridge[Math.round(u * N)];
+    const len = o.h * randRange(seed, i + 320, 0.15, 0.45);
+    const lean = (u < 0.5 ? -1 : 1) * randRange(seed, i + 340, 0.1, 0.45);
+    return { x: top[0], y: top[1] + 6, len, lean, wd: randRange(seed, i + 360, 1.5, 4) };
+  });
+  const dur = o.dur ?? 0.45;
+  return (t) => {
+    clear(g);
+    if (t < o.at) return;
+    const u = clamp((t - o.at) / dur);
+    const sweep = 0.7 * u + 0.3 * smooth(u);
+    const settle = Math.max(0, t - o.at - dur);
+    const top = o.base - o.h - 4;
+    const reveal = top + (o.h + 40) * sweep;
+    g.save();
+    g.beginPath();
+    g.rect(o.x - o.w - 30, top - 30, o.w * 2 + 60, reveal - top + 30);
+    g.clip();
+    // 발치 안개 — 다 놓인 뒤에도 먹이 천천히 아래로 스며 안개 경계가 내려온다
+    const mistY = o.base - o.h * (0.25 - Math.min(0.2, settle * 0.08));
+    const gr = g.createLinearGradient(0, top, 0, o.base);
+    gr.addColorStop(0, rgba(ink, d * 0.85));
+    gr.addColorStop(clamp((mistY - top) / (o.base - top)), rgba(ink, d * 0.32));
+    gr.addColorStop(1, rgba(ink, 0));
+    g.fillStyle = gr;
+    g.beginPath();
+    ridge.forEach((p, i) => (i ? g.lineTo(p[0], p[1]) : g.moveTo(p[0], p[1])));
+    g.lineTo(o.x + o.w, o.base + 30);
+    g.lineTo(o.x - o.w, o.base + 30);
+    g.closePath();
+    g.fill();
+    // 능선 — 진한 먹 한 획
+    g.strokeStyle = rgba(ink, d);
+    g.lineWidth = 4;
+    g.lineJoin = "round";
+    g.beginPath();
+    ridge.slice(8, N - 7).forEach((p, i) => (i ? g.lineTo(p[0], p[1]) : g.moveTo(p[0], p[1])));
+    g.stroke();
+    g.lineCap = "round";
+    for (const s of strokes) {
+      g.strokeStyle = rgba(ink, d * 0.55);
+      g.lineWidth = s.wd;
+      g.beginPath();
+      g.moveTo(s.x, s.y);
+      g.quadraticCurveTo(s.x + s.lean * s.len * 0.3, s.y + s.len * 0.5, s.x + s.lean * s.len, s.y + s.len);
+      g.stroke();
+    }
+    g.restore();
+  };
+}
+
+/**
+ * 먹 방울 드롭 — 드롭 0.3초 전 먹 한 방울이 위에서 떨어지고, 드롭에 종이에 닿아 크게 퍼지며 먹이 둘레로 튄다.
+ * 반환한 흔들림은 종이 틀에, punch 는 주인공에
+ */
+export function inkDrop(el: HTMLElement, o: { ctx: SceneCtx; drop?: number; origin?: Pt; r?: number; density?: number; until?: number; seed?: string | number }): (t: number) => DropBurstState {
+  const { ctx } = o;
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const [ox, oy] = o.origin ?? [W / 2, H / 2];
+  const r = o.r ?? Math.min(W, H) * 0.42;
+  const drop = o.drop ?? 0;
+  const at = ctx.beats.drop(drop);
+  const seed = o.seed ?? "ink-drop";
+  const bloom = inkBloom(el, { ctx, x: ox, y: oy, r, at, grow: 0.22, creep: 0.1, density: o.density ?? 0.45, until: o.until, seed });
+  const g = canvas(el, ctx, [0, 0, W, H]);
+  const ink = color(ctx, "ink");
+  const spatter = Array.from({ length: 46 }, (_, i) => {
+    const a = rand(seed, i + 500) * Math.PI * 2;
+    const dist = r * randRange(seed, i + 600, 0.95, 1.7);
+    return { x: ox + Math.cos(a) * dist, y: oy + Math.sin(a) * dist * 0.8, s: randRange(seed, i + 700, 3, 16), a };
+  });
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "inkDrop" });
+    bloom(t);
+    clear(g);
+    const local = t - at;
+    if (local < 0 && local > -0.3) {
+      // 떨어지는 방울 — 가속해 내려오며 아래로 길어진다
+      const u = 1 + local / 0.3;
+      const y = -40 + (oy + 40) * u * u;
+      g.fillStyle = rgba(ink, 0.95);
+      g.beginPath();
+      g.ellipse(ox, y, 16, 16 + 22 * u, 0, 0, Math.PI * 2);
+      g.fill();
+    }
+    if (local >= 0 && (o.until === undefined || t < o.until)) {
+      const k = 1 - Math.exp(-local / 0.12);
+      g.fillStyle = rgba(ink, 0.9);
+      g.beginPath();
+      for (const q of spatter) {
+        const x = ox + (q.x - ox) * (0.6 + 0.4 * k);
+        const y = oy + (q.y - oy) * (0.6 + 0.4 * k);
+        const sz = q.s * (0.7 + 0.3 * k);
+        g.moveTo(x + sz, y);
+        g.ellipse(x, y, sz, sz * 0.8, q.a, 0, Math.PI * 2);
+      }
+      g.fill();
+    }
+    return s;
+  };
+}
+
+/** 낙관 — 붉은 인주 도장이 꾹 눌려 찍힌다(크게 → 눌림 → 앉음). baek 은 붉은 바탕에 흰 글(백문), ju 는 흰 바탕에 붉은 글·테(주문). 닳은 인주 반점 */
+export function sealStamp(el: HTMLElement, o: { ctx: SceneCtx; text?: string; svg?: string; x: number; y: number; size: number; at: number; kind?: "baek" | "ju"; rotate?: number; font?: "display" | "sans"; until?: number; seed?: string | number }): (t: number) => void {
+  const { ctx } = o;
+  const red = color(ctx, "accent");
+  const paper = color(ctx, "surface");
+  const baek = (o.kind ?? "baek") === "baek";
+  const s = o.size;
+  const host = document.createElement("div");
+  host.style.cssText = `position:absolute;left:${o.x - s / 2}px;top:${o.y - s / 2}px;width:${s}px;height:${s}px;box-sizing:border-box;display:none;align-items:center;justify-content:center;background:${baek ? red : "transparent"};border:${Math.round(s * 0.06)}px solid ${red};border-radius:${Math.round(s * 0.05)}px;color:${baek ? paper : red};font-family:${ctx.style.fonts[o.font ?? "sans"]};font-size:${Math.round(s * 0.34)}px;line-height:1;text-align:center;overflow:hidden;pointer-events:none`;
+  if (o.svg) {
+    const art = document.createElement("div");
+    art.style.cssText = "width:78%";
+    art.innerHTML = o.svg.replace(/ width="\d+" height="\d+"/, ' width="100%" style="display:block"');
+    host.append(art);
+  } else host.textContent = o.text ?? "";
+  // 닳은 인주 — 도장 면에 종이색 반점(바탕이 비친다)
+  const wear = document.createElement("canvas");
+  wear.width = wear.height = 96;
+  wear.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none";
+  const wg = wear.getContext("2d")!;
+  const seed = o.seed ?? `${ctx.id}:seal:${o.text ?? "svg"}`;
+  wg.fillStyle = paper;
+  wg.globalAlpha = 0.85;
+  for (let i = 0; baek && i < 70; i++) {
+    wg.beginPath();
+    wg.arc(rand(seed, i) * 96, rand(seed, i + 100) * 96, rand(seed, i + 200) ** 2 * 3.2, 0, Math.PI * 2);
+    wg.fill();
+  }
+  host.append(wear);
+  el.append(host);
+  const rot = o.rotate ?? randRange(seed, 900, -4, 4);
+  return (t) => {
+    const on = t >= o.at && (o.until === undefined || t < o.until);
+    host.style.display = on ? "flex" : "none";
+    if (!on) return;
+    const k = t - o.at;
+    const sc = k < 0.05 ? 1.3 - (k / 0.05) * 0.36 : k < 0.12 ? 0.94 + ((k - 0.05) / 0.07) * 0.06 : 1;
+    host.style.transform = `rotate(${rot}deg) scale(${sc.toFixed(3)})`;
+    host.style.opacity = k < 0.05 ? "0.7" : "1";
+  };
+}
+
+/** 스밈 — 아무 요소나 젖은 먹처럼: 흐리고 옅게 번져 있다가 마르며 또렷해진다. applyStyle 로 붙인다 */
+export function soak(t: number, o: { at: number; dur?: number; blur?: number }): Style {
+  if (t < o.at) return { opacity: 0 };
+  const u = clamp((t - o.at) / (o.dur ?? 0.5));
+  const e = 1 - (1 - u) ** 3;
+  return { opacity: 0.45 + 0.55 * e, blur: (o.blur ?? 10) * (1 - e) };
+}

package/themes/ink-wash/sample/assets/og/logo.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140 650" width="1140" height="650" fill="none" role="img" aria-label="OpenGateway">
+  <title>OpenGateway</title>
+  <g id="logo" stroke="currentColor" fill="currentColor">
+    <rect id="node-in" x="36" y="36" width="420" height="578" rx="89" fill="none" stroke-width="72"/>
+    <rect id="bar-in" x="72" y="272" width="277" height="106" stroke="none"/>
+    <path id="node-out" d="M684 213 L684 125 A89 89 0 0 1 773 36 L1015 36 A89 89 0 0 1 1104 125 L1104 525 A89 89 0 0 1 1015 614 L773 614 A89 89 0 0 1 684 525 L684 436" fill="none" stroke-width="72" stroke-linecap="butt"/>
+    <g id="arrow">
+      <rect id="arrow-shaft" x="420" y="272" width="394" height="106" stroke="none"/>
+      <path id="arrow-head" d="M833 220 L970 325 L833 430 Z" stroke-width="38" stroke-linejoin="round"/>
+    </g>
+  </g>
+</svg>