kasaframe 0.1.1 → 0.1.4

package/themes/whiteboard/effects.ts

@@ -0,0 +1,561 @@
+import { clamp, ease, rand, type SceneCtx } from "@kasaframe/core";
+import { dropBurst, type DropBurstState } from "@kasaframe/motion";
+
+export type Pt = [number, number];
+type Font = "display" | "sans" | "mono";
+type Paint = (t: number) => void;
+
+const TAU = Math.PI * 2;
+const NS = "http://www.w3.org/2000/svg";
+const col = (ctx: SceneCtx, k: string): string => ctx.style.colors[k] ?? k;
+// 캔버스·그림자에 칠할 색 — 변주 생성기가 어떤 꼴의 색을 넣어도 rgba 로 바꾼다
+function rgba(c: string, a: number): string {
+  const m = /^#([0-9a-f]{6})$/i.exec(c.trim());
+  if (!m) return c;
+  const n = parseInt(m[1], 16);
+  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
+}
+
+function div(parent: HTMLElement, css: string): HTMLDivElement {
+  const d = parent.ownerDocument.createElement("div");
+  d.style.cssText = `position:absolute;pointer-events:none;${css}`;
+  parent.append(d);
+  return d;
+}
+
+function svgLayer(parent: HTMLElement, ctx: SceneCtx): SVGSVGElement {
+  const s = parent.ownerDocument.createElementNS(NS, "svg");
+  s.setAttribute("viewBox", `0 0 ${ctx.meta.width} ${ctx.meta.height}`);
+  s.setAttribute("style", "position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;");
+  parent.append(s);
+  return s;
+}
+
+/**
+ * 손떨림 — 점 사이를 촘촘히 다시 찍고 선을 따라 느린 두 물결로 옆으로 민다. 같은 seed 면 같은 떨림.
+ * 마커 선이 자로 그은 선처럼 곧으면 화이트보드가 아니라 도면이 된다
+ */
+function handPath(points: readonly Pt[], seed: string, amp = 2.4, step = 12): Pt[] {
+  const f1 = 0.011 + rand(seed, 1) * 0.006;
+  const f2 = 0.03 + rand(seed, 2) * 0.012;
+  const p1 = rand(seed, 3) * TAU;
+  const p2 = rand(seed, 4) * TAU;
+  const out: Pt[] = [];
+  let s = 0;
+  for (let i = 1; i < points.length; i++) {
+    const [a, b] = [points[i - 1], points[i]];
+    const len = Math.hypot(b[0] - a[0], b[1] - a[1]) || 1;
+    const n = Math.max(1, Math.ceil(len / step));
+    const [nx, ny] = [-(b[1] - a[1]) / len, (b[0] - a[0]) / len];
+    for (let k = 0; k < n; k++) {
+      const off = amp * (0.65 * Math.sin(s * f1 + p1) + 0.35 * Math.sin(s * f2 + p2));
+      out.push([a[0] + ((b[0] - a[0]) * k) / n + nx * off, a[1] + ((b[1] - a[1]) * k) / n + ny * off]);
+      s += len / n;
+    }
+  }
+  const last = points[points.length - 1];
+  out.push([last[0], last[1]]);
+  return out;
+}
+
+const pathD = (pts: readonly Pt[]) => pts.map(([x, y], i) => `${i ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)}`).join("");
+
+function measure(pts: readonly Pt[]) {
+  const cum = [0];
+  for (let i = 1; i < pts.length; i++) cum.push(cum[i - 1] + Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]));
+  const len = cum[cum.length - 1] || 1;
+  // 길이 몫 u 의 자리 — 펜이 지금 긋는 머리를 따라간다
+  const at = (u: number): Pt => {
+    const d = clamp(u) * len;
+    let i = 1;
+    while (i < cum.length - 1 && cum[i] < d) i++;
+    const k = (d - cum[i - 1]) / (cum[i] - cum[i - 1] || 1);
+    return [pts[i - 1][0] + (pts[i][0] - pts[i - 1][0]) * k, pts[i - 1][1] + (pts[i][1] - pts[i - 1][1]) * k];
+  };
+  return { len, at };
+}
+
+/** 펜이 긋는 한 획 — at 부터 dur 동안 path(0→1) 을 따라간다 */
+export interface PenSeg {
+  at: number;
+  dur: number;
+  path: (u: number) => Pt;
+  color?: string;
+}
+
+export interface Pen {
+  (t: number): void;
+  note(seg: PenSeg): void;
+}
+
+/**
+ * 마커 펜 = 설명하는 손 — 지금 그어지는 획의 머리에 펜촉이 있고, 획 사이엔 다음 획 첫 자리로 옮겨 간다.
+ * 옮겨 가는 길은 짧아도 일정 빠르기 아래로 내려가지 않게 살짝 휘어 돈다(펜을 든 채 다음 자리를 찾는 손). 그래서 그리는 동안 화면이 서지 않는다
+ */
+export function markerPen(el: HTMLElement, o: { ctx: SceneCtx; enter?: Pt; minSpeed?: number }): Pen {
+  const { ctx } = o;
+  const segs: PenSeg[] = [];
+  const svg = svgLayer(el, ctx);
+  svg.style.zIndex = "50";
+  const g = document.createElementNS(NS, "g");
+  const shade = document.createElementNS(NS, "g");
+  const body = document.createElementNS(NS, "g");
+  const mk = (parent: SVGGElement, tag: string, attrs: Record<string, string | number>) => {
+    const e = document.createElementNS(NS, tag);
+    for (const [k, v] of Object.entries(attrs)) e.setAttribute(k, String(v));
+    parent.append(e);
+    return e;
+  };
+  // 촉이 원점, 몸통은 +x 로 — 통째로 기울여 위·오른쪽으로 뻗게 한다
+  const shape = (parent: SVGGElement, fill: (part: string) => string, stroke: string) => {
+    mk(parent, "polygon", { points: "0,0 16,-8 16,8", fill: fill("tip") });
+    mk(parent, "rect", { x: 15, y: -12, width: 22, height: 24, rx: 4, fill: fill("neck") });
+    mk(parent, "rect", { x: 36, y: -24, width: 230, height: 48, rx: 10, fill: fill("body"), stroke, "stroke-width": 2.5 });
+    const band = mk(parent, "rect", { x: 104, y: -24, width: 96, height: 48, fill: fill("band") });
+    const cap = mk(parent, "rect", { x: 258, y: -27, width: 62, height: 54, rx: 12, fill: fill("cap"), stroke, "stroke-width": 2.5 });
+    return [band, cap];
+  };
+  shape(shade, () => rgba(col(ctx, "ink"), 0.16), "none");
+  const [band, cap] = shape(body, (p) => (p === "tip" ? col(ctx, "ink") : p === "neck" ? col(ctx, "inkSoft") : p === "body" ? col(ctx, "surface") : col(ctx, "marker")), col(ctx, "ink"));
+  shade.setAttribute("transform", "translate(16 22)");
+  g.append(shade, body);
+  svg.append(g);
+  const vmin = o.minSpeed ?? 300;
+  const enter: Pt = o.enter ?? [ctx.meta.width + 160, ctx.meta.height + 120];
+  const glide = (a: Pt, b: Pt, u: number, gap: number): Pt => {
+    const d = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    const want = Math.max(d, vmin * gap);
+    // 휜 길 길이 ≈ √(d² + 16h²/3) — 원하는 길이가 되게 옆으로 h 만큼 휜다
+    const h = Math.sqrt(Math.max(0, want * want - d * d) * (3 / 16));
+    const [nx, ny] = d > 1 ? [-(b[1] - a[1]) / d, (b[0] - a[0]) / d] : [0, -1];
+    const c: Pt = [(a[0] + b[0]) / 2 + nx * h * 2, (a[1] + b[1]) / 2 + ny * h * 2];
+    const v = 1 - u;
+    return [v * v * a[0] + 2 * v * u * c[0] + u * u * b[0], v * v * a[1] + 2 * v * u * c[1] + u * u * b[1]];
+  };
+  const place = (p: Pt, color: string, lift = 0) => {
+    g.setAttribute("transform", `translate(${p[0].toFixed(1)} ${p[1].toFixed(1)}) rotate(-52)`);
+    shade.setAttribute("transform", `translate(${16 + lift} ${22 + lift})`);
+    band.setAttribute("fill", color);
+    cap.setAttribute("fill", color);
+  };
+  return Object.assign(
+    (t: number) => {
+      const list = [...segs].sort((a, b) => a.at - b.at);
+      if (!list.length) {
+        g.style.display = "none";
+        return;
+      }
+      g.style.display = "";
+      const live = list.filter((s) => t >= s.at && t <= s.at + s.dur).at(-1);
+      if (live) {
+        place(live.path(clamp((t - live.at) / Math.max(1e-3, live.dur))), col(ctx, live.color ?? "marker"));
+        return;
+      }
+      const next = list.find((s) => s.at > t);
+      const prev = [...list].reverse().find((s) => s.at + s.dur < t);
+      if (next) {
+        const from = prev ? prev.path(1) : enter;
+        const t0 = prev ? prev.at + prev.dur : Math.min(next.at - 0.5, 0);
+        const gap = Math.max(1e-3, next.at - t0);
+        place(glide(from, next.path(0), clamp((t - t0) / gap), gap), col(ctx, next.color ?? "marker"), 10);
+        return;
+      }
+      // 마지막 획 뒤 — 펜을 든 채 그 곁을 천천히 맴돈다(장면이 끝날 때까지 손이 머문다)
+      const end = prev!.path(1);
+      const k = t - (prev!.at + prev!.dur);
+      const r = 46 * clamp(k / 0.3);
+      place([end[0] + r * Math.sin(k * 4.2) + 30 * clamp(k / 0.3), end[1] - r * (1 - Math.cos(k * 4.2)) * 0.6 - 24 * clamp(k / 0.3)], col(ctx, prev!.color ?? "marker"), 10);
+    },
+    { note: (s: PenSeg) => void segs.push(s) },
+  );
+}
+
+export interface LineOpts {
+  ctx: SceneCtx;
+  points: Pt[];
+  at: number;
+  /** 긋는 데 걸리는 초 — 없으면 길이로(초당 2000px) */
+  dur?: number;
+  color?: string;
+  width?: number;
+  arrow?: boolean;
+  seed?: string;
+  pen?: Pen;
+  wobble?: number;
+  until?: number;
+}
+
+/** 마커 선 — 손떨림 있는 굵은 선이 펜 머리를 따라 그어진다(겹친 결 한 줄). arrow 면 끝에 짧은 두 획 머리. 상자·밑줄·화살표가 다 이것 */
+export function markerLine(el: HTMLElement, o: LineOpts): Paint {
+  const { ctx } = o;
+  const seed = o.seed ?? `${o.points[0]}:${o.at}`;
+  const pts = handPath(o.points, seed, o.wobble ?? 2.4);
+  const m = measure(pts);
+  const dur = o.dur ?? Math.max(0.16, m.len / 2000);
+  const w = o.width ?? 9;
+  const color = col(ctx, o.color ?? "marker");
+  const svg = svgLayer(el, ctx);
+  const path = (d: string, width: number, stroke: string, opacity: number) => {
+    const p = document.createElementNS(NS, "path");
+    p.setAttribute("d", d);
+    p.setAttribute("fill", "none");
+    p.setAttribute("stroke", stroke);
+    p.setAttribute("stroke-width", String(width));
+    p.setAttribute("stroke-linecap", "round");
+    p.setAttribute("stroke-linejoin", "round");
+    p.setAttribute("opacity", String(opacity));
+    svg.append(p);
+    return p;
+  };
+  const strokes: { el: SVGPathElement; len: number; from: number; to: number }[] = [];
+  const lineEnd = o.arrow ? 0.8 : 1;
+  const d = pathD(pts);
+  strokes.push({ el: path(d, w, color, 0.94), len: m.len, from: 0, to: lineEnd });
+  // 마커 결 — 같은 길 안쪽에 밝은 가는 줄 하나(잉크가 덜 묻은 자리)
+  strokes.push({ el: path(d, w * 0.28, rgba(col(ctx, "surface"), 1), 0.22), len: m.len, from: 0, to: lineEnd });
+  o.pen?.note({ at: o.at, dur: dur * lineEnd, path: m.at, color: o.color });
+  if (o.arrow) {
+    const end = pts[pts.length - 1];
+    const back = m.at(Math.max(0, 1 - 26 / m.len));
+    const ang = Math.atan2(end[1] - back[1], end[0] - back[0]);
+    const L = Math.max(22, w * 3.6);
+    [0.5, -0.5].forEach((da, i) => {
+      const tip: Pt = [end[0] - Math.cos(ang + da) * L, end[1] - Math.sin(ang + da) * L];
+      const head = handPath([end, tip], `${seed}:h${i}`, 1.2, 8);
+      const hm = measure(head);
+      const from = lineEnd + (i * (1 - lineEnd)) / 2;
+      const to = lineEnd + ((i + 1) * (1 - lineEnd)) / 2;
+      strokes.push({ el: path(pathD(head), w, color, 0.94), len: hm.len, from, to });
+      o.pen?.note({ at: o.at + dur * from, dur: dur * (to - from), path: hm.at, color: o.color });
+    });
+  }
+  for (const s of strokes) s.el.setAttribute("stroke-dasharray", `${s.len + 2} ${s.len + 2}`);
+  return (t) => {
+    const on = t >= o.at && (o.until === undefined || t < o.until);
+    svg.style.display = on ? "" : "none";
+    if (!on) return;
+    const u = (t - o.at) / dur;
+    for (const s of strokes) s.el.setAttribute("stroke-dashoffset", String(((s.len + 2) * (1 - clamp((u - s.from) / (s.to - s.from || 1)))).toFixed(1)));
+  };
+}
+
+/** 손글씨 — 글자가 왼쪽부터 한 자씩 써지고(글자마다 왼쪽→오른쪽으로 드러남) 펜이 그 줄을 따라간다. 글자는 살짝 들쭉날쭉 */
+export function markerText(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; text: string; x: number; y: number; size: number; at: number; dur?: number; color?: string; font?: Font; weight?: number; align?: "left" | "center" | "right"; rotate?: number; pen?: Pen; seed?: string; until?: number },
+): Paint {
+  const { ctx } = o;
+  const font = ctx.style.fonts[o.font ?? "display"];
+  const weight = o.weight ?? 700;
+  const chars = Array.from(o.text);
+  const dur = o.dur ?? Math.max(0.14, chars.length * 0.028);
+  const probe = document.createElement("canvas").getContext("2d")!;
+  probe.font = `${weight} ${o.size}px ${font}`;
+  const w = probe.measureText(o.text).width;
+  const align = o.align ?? "left";
+  const left = align === "left" ? o.x : align === "center" ? o.x - w / 2 : o.x - w;
+  const box = div(el, `left:${left.toFixed(1)}px;top:${(o.y - o.size * 0.62).toFixed(1)}px;font:${weight} ${o.size}px ${font};line-height:1.2;white-space:pre;color:${col(ctx, o.color ?? "marker")};transform:rotate(${o.rotate ?? 0}deg);transform-origin:0 50%;`);
+  const seed = o.seed ?? o.text;
+  const spans = chars.map((ch, i) => {
+    const s = document.createElement("span");
+    s.textContent = ch;
+    s.style.cssText = `display:inline-block;white-space:pre;transform:translateY(${((rand(seed, i) - 0.5) * 0.06).toFixed(3)}em) rotate(${((rand(seed, i + 50) - 0.5) * 4).toFixed(2)}deg);`;
+    box.append(s);
+    return s;
+  });
+  const n = Math.max(1, chars.length);
+  o.pen?.note({ at: o.at, dur, path: (u) => [left + u * w, o.y + Math.sin(u * n * Math.PI) * o.size * 0.16 - o.size * 0.05], color: o.color });
+  return (t) => {
+    const on = t >= o.at && (o.until === undefined || t < o.until);
+    box.style.display = on ? "" : "none";
+    if (!on) return;
+    const done = t >= o.at + dur;
+    spans.forEach((s, i) => {
+      const p = done ? 1 : clamp(((t - o.at) / dur) * n - i);
+      s.style.visibility = p > 0 ? "visible" : "hidden";
+      s.style.clipPath = p >= 1 ? "" : `inset(-30% ${((1 - p) * 100).toFixed(1)}% -30% -10%)`;
+    });
+  };
+}
+
+/** 동그라미 치기 — 손으로 두른 타원이 한 바퀴 넘게 돌아 겹친다(loops 2 면 두 겹). 강조·고르기 */
+export function circleMark(el: HTMLElement, o: { ctx: SceneCtx; cx: number; cy: number; rx: number; ry: number; at: number; dur?: number; color?: string; width?: number; loops?: number; seed?: string; pen?: Pen }): Paint {
+  const seed = o.seed ?? `circle:${o.cx}:${o.cy}`;
+  const a0 = -2.2 + rand(seed, 0) * 0.8;
+  const turns = (o.loops ?? 1) * 1.08;
+  const N = Math.ceil(64 * turns);
+  const pts: Pt[] = Array.from({ length: N + 1 }, (_, i) => {
+    const u = i / N;
+    const a = a0 + u * turns * TAU;
+    const k = 1 + 0.04 * Math.sin(3 * a + rand(seed, 1) * TAU) + 0.05 * u;
+    return [o.cx + Math.cos(a) * o.rx * k, o.cy + Math.sin(a) * o.ry * k];
+  });
+  return markerLine(el, { ctx: o.ctx, points: pts, at: o.at, dur: o.dur ?? 0.3 * (o.loops ?? 1), color: o.color ?? "red", width: o.width ?? 8, seed, pen: o.pen, wobble: 1.2 });
+}
+
+/** 포스트잇 = 모델 한 장 — 위에서 톡 눌러 붙고(그림자가 줄며 앉는다) 조금 기운다. peel 이면 그 시각에 떼어져 날아간다 */
+export function stickyNote(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; x: number; y: number; w: number; h?: number; tone?: string; text?: string; size?: number; sub?: string; subSize?: number; at: number; rotate?: number; peel?: number; font?: Font },
+): Paint {
+  const { ctx } = o;
+  const h = o.h ?? o.w;
+  const note = div(el, `left:${o.x - o.w / 2}px;top:${o.y - h / 2}px;width:${o.w}px;height:${h}px;background:${col(ctx, o.tone ?? "noteYellow")};display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:${col(ctx, "marker")};`);
+  // 붙는 쪽(위 띠)이 조금 짙다
+  div(note, `left:0;right:0;top:0;height:18%;background:linear-gradient(${rgba(col(ctx, "ink"), 0.08)},${rgba(col(ctx, "ink"), 0)});`);
+  if (o.text) {
+    const s = document.createElement("div");
+    s.textContent = o.text;
+    s.style.cssText = `position:relative;font:700 ${o.size ?? Math.round(o.w * 0.2)}px ${ctx.style.fonts[o.font ?? "display"]};line-height:1.05;padding:0 6%;`;
+    note.append(s);
+  }
+  if (o.sub) {
+    const s = document.createElement("div");
+    s.textContent = o.sub;
+    s.style.cssText = `position:relative;margin-top:4%;font:700 ${o.subSize ?? Math.round(o.w * 0.12)}px ${ctx.style.fonts.sans};line-height:1.05;color:${col(ctx, "inkSoft")};`;
+    note.append(s);
+  }
+  const rot = o.rotate ?? 0;
+  const ink = col(ctx, "ink");
+  return (t) => {
+    const on = t >= o.at && (o.peel === undefined || t < o.peel + 0.32);
+    note.style.display = on ? "" : "none";
+    if (!on) return;
+    const k = clamp((t - o.at) / 0.24);
+    const u = ease.outBack(k);
+    const lift = 1 - ease.outCubic(k);
+    let extraR = 6 * lift;
+    let dy = -46 * lift;
+    let alpha = 1;
+    if (o.peel !== undefined && t >= o.peel) {
+      const p = ease.inCubic(clamp((t - o.peel) / 0.32));
+      extraR -= 28 * p;
+      dy -= 160 * p;
+      alpha = 1 - p;
+    }
+    note.style.opacity = String(alpha);
+    note.style.transform = `translateY(${dy.toFixed(1)}px) rotate(${(rot + extraR).toFixed(2)}deg) scale(${(1.16 - 0.16 * u).toFixed(3)})`;
+    note.style.boxShadow = `${(4 + 14 * lift).toFixed(1)}px ${(8 + 26 * lift).toFixed(1)}px ${(10 + 24 * lift).toFixed(1)}px ${rgba(ink, 0.2 - 0.06 * lift)}`;
+  };
+}
+
+/** 지우개 — 펠트 지우개가 지그재그로 지나간 자리가 보드 색으로 지워지고 옅은 자국이 남는다. 그 뒤에 쓴 것은 위에 선다 */
+export function eraserWipe(el: HTMLElement, o: { ctx: SceneCtx; x: number; y: number; w: number; h: number; at: number; dur?: number; seed?: string }): Paint {
+  const { ctx } = o;
+  const pad = 50;
+  const [X, Y, W, H] = [Math.floor(o.x - pad), Math.floor(o.y - pad), Math.ceil(o.w + pad * 2), Math.ceil(o.h + pad * 2)];
+  const cv = document.createElement("canvas");
+  cv.width = W;
+  cv.height = H;
+  cv.style.cssText = `position:absolute;left:${X}px;top:${Y}px;width:${W}px;height:${H}px;pointer-events:none;`;
+  el.append(cv);
+  const g = cv.getContext("2d")!;
+  g.translate(-X, -Y);
+  const rows = Math.max(1, Math.ceil(o.h / 80));
+  const band = o.h / rows;
+  const zig: Pt[] = [];
+  for (let r = 0; r < rows; r++) {
+    const y = o.y + band * (r + 0.5);
+    zig.push(r % 2 ? [o.x + o.w, y] : [o.x, y], r % 2 ? [o.x, y] : [o.x + o.w, y]);
+  }
+  const m = measure(zig);
+  const dur = o.dur ?? 0.24;
+  const seed = o.seed ?? `erase:${o.x}:${o.y}`;
+  const eh = Math.max(90, band + 24);
+  const felt = div(el, `width:210px;height:${eh}px;border-radius:12px;background:${col(ctx, "accent")};box-shadow:10px 14px 18px ${rgba(col(ctx, "ink"), 0.22)};display:none;`);
+  div(felt, `left:6px;right:6px;bottom:0;height:34%;border-radius:0 0 8px 8px;background:${col(ctx, "inkSoft")};`);
+  return (t) => {
+    g.clearRect(X, Y, W, H);
+    if (t < o.at) {
+      felt.style.display = "none";
+      return;
+    }
+    const u = clamp((t - o.at) / dur);
+    g.lineCap = "round";
+    g.lineJoin = "round";
+    g.strokeStyle = col(ctx, "bg");
+    g.lineWidth = band + 26;
+    g.beginPath();
+    const steps = Math.max(2, Math.ceil(u * 60));
+    for (let i = 0; i <= steps; i++) {
+      const [x, y] = m.at((u * i) / steps);
+      if (i) g.lineTo(x, y);
+      else g.moveTo(x, y);
+    }
+    g.stroke();
+    // 지운 자국 — 펠트 결대로 옅은 줄 몇 가닥
+    g.strokeStyle = rgba(col(ctx, "ghost"), 0.9);
+    g.lineWidth = 2;
+    for (let k = 0; k < 4; k++) {
+      g.beginPath();
+      const off = (rand(seed, k) - 0.5) * band;
+      for (let i = 0; i <= steps; i++) {
+        const [x, y] = m.at((u * i) / steps);
+        if (i) g.lineTo(x, y + off);
+        else g.moveTo(x, y + off);
+      }
+      g.stroke();
+    }
+    const head = m.at(u);
+    const away = clamp((t - o.at - dur) / 0.18);
+    felt.style.display = away >= 1 ? "none" : "";
+    felt.style.transform = `translate(${(head[0] - 105 + away * 260).toFixed(1)}px,${(head[1] - eh / 2 - away * 120).toFixed(1)}px) rotate(${(-6 + 8 * Math.sin(u * rows * Math.PI)).toFixed(2)}deg)`;
+    felt.style.opacity = String(1 - away);
+  };
+}
+
+/** 줄 긋기 = 값 고치기 — 옛 값 위로 빨강 마커가 지그재그로 문질러 지운다(새 값은 옆에 markerText 로) */
+export function strikeOut(el: HTMLElement, o: { ctx: SceneCtx; x: number; y: number; w: number; h: number; at: number; dur?: number; color?: string; pen?: Pen; seed?: string }): Paint {
+  const n = Math.max(3, Math.round(o.w / 38));
+  const pts: Pt[] = Array.from({ length: n + 1 }, (_, i) => [o.x + (o.w * i) / n, o.y + (i % 2 ? o.h * 0.2 : o.h * 0.8)]);
+  return markerLine(el, { ctx: o.ctx, points: pts, at: o.at, dur: o.dur ?? 0.2, color: o.color ?? "red", width: 7, seed: o.seed ?? `strike:${o.x}`, pen: o.pen, wobble: 1 });
+}
+
+export interface Tally {
+  (t: number): void;
+  /** 그 시각까지 그은 획 수 — 숫자로 쓸 때 같은 값을 쓴다 */
+  shown(t: number): number;
+}
+
+/** 바를 정 세기 = 개수 — 넷을 세로로 긋고 다섯째로 가로지른다. count 획을 at 부터 dur 동안 차례로, 펜이 줄을 따라 훑는다 */
+export function tallyMarks(el: HTMLElement, o: { ctx: SceneCtx; x: number; y: number; count: number; at: number; dur: number; size?: number; perRow?: number; color?: string; seed?: string; pen?: Pen }): Tally {
+  const { ctx } = o;
+  const size = o.size ?? 90;
+  const gap = size * 0.26;
+  const groupW = gap * 4 + size * 0.42;
+  const perRow = o.perRow ?? 7;
+  const rowH = size * 1.5;
+  const seed = o.seed ?? "tally";
+  const marks = Array.from({ length: o.count }, (_, i) => {
+    const grp = Math.floor(i / 5);
+    const k = i % 5;
+    const [row, colI] = [Math.floor(grp / perRow), grp % perRow];
+    const gx = o.x + colI * groupW;
+    const gy = o.y + row * rowH;
+    const j = (s: number) => (rand(seed, i * 7 + s) - 0.5) * size * 0.08;
+    const line: [Pt, Pt] =
+      k < 4
+        ? [[gx + k * gap + j(0), gy + j(1)], [gx + k * gap + j(2), gy + size + j(3)]]
+        : [[gx - gap * 0.5 + j(4), gy + size * 0.78 + j(5)], [gx + gap * 3.5 + j(6), gy + size * 0.2 + j(0)]];
+    return { line, at: o.at + (o.dur * i) / Math.max(1, o.count), row };
+  });
+  const rows = Math.max(...marks.map((m) => m.row)) + 1;
+  const W = perRow * groupW + size;
+  const [X, Y] = [Math.floor(o.x - size * 0.5), Math.floor(o.y - size * 0.3)];
+  const cv = document.createElement("canvas");
+  cv.width = Math.ceil(W + size);
+  cv.height = Math.ceil(rows * rowH + size * 0.6);
+  cv.style.cssText = `position:absolute;left:${X}px;top:${Y}px;width:${cv.width}px;height:${cv.height}px;pointer-events:none;`;
+  el.append(cv);
+  const g = cv.getContext("2d")!;
+  g.translate(-X, -Y);
+  const stroke = Math.min(0.06, (o.dur / Math.max(1, o.count)) * 1.6);
+  for (let r = 0; r < rows; r++) {
+    const inRow = marks.filter((m) => m.row === r);
+    const a = inRow[0];
+    const b = inRow[inRow.length - 1];
+    const x0 = a.line[0][0];
+    const x1 = b.line[1][0];
+    const y = o.y + r * rowH;
+    o.pen?.note({ at: a.at, dur: Math.max(0.05, b.at + stroke - a.at), path: (u) => [x0 + (x1 - x0) * u, y + size * (0.5 + 0.5 * Math.sin(u * inRow.length * Math.PI))], color: o.color });
+  }
+  const color = col(ctx, o.color ?? "marker");
+  const shown = (t: number) => marks.filter((m) => t >= m.at).length;
+  return Object.assign(
+    (t: number) => {
+      g.clearRect(X, Y, cv.width, cv.height);
+      g.strokeStyle = color;
+      g.lineWidth = Math.max(5, size * 0.075);
+      g.lineCap = "round";
+      for (const m of marks) {
+        if (t < m.at) break;
+        const u = clamp((t - m.at) / stroke);
+        const [[ax, ay], [bx, by]] = m.line;
+        g.beginPath();
+        g.moveTo(ax, ay);
+        g.lineTo(ax + (bx - ax) * u, ay + (by - ay) * u);
+        g.stroke();
+      }
+    },
+    { shown },
+  );
+}
+
+/** 드롭 — 보드를 탁 치듯 빨강 강조선이 사방으로 그어지고 섬광. 돌려준 shake·punch 는 장면이 보드 틀·주인공에 준다(dropBurst) */
+export function slapBurst(el: HTMLElement, o: { ctx: SceneCtx; x: number; y: number; r?: number; drop?: number; color?: string; count?: number; seed?: string }): (t: number) => DropBurstState {
+  const { ctx } = o;
+  const r = o.r ?? 260;
+  const n = o.count ?? 14;
+  const seed = o.seed ?? "slap";
+  const svg = svgLayer(el, ctx);
+  const color = col(ctx, o.color ?? "red");
+  const rays = Array.from({ length: n }, (_, i) => {
+    const a = (i / n) * TAU + (rand(seed, i) - 0.5) * 0.25;
+    const r0 = r * (0.92 + rand(seed, i + 30) * 0.18);
+    const r1 = r0 + r * (0.22 + rand(seed, i + 60) * 0.18);
+    const p = document.createElementNS(NS, "path");
+    const pts = handPath([[o.x + Math.cos(a) * r0, o.y + Math.sin(a) * r0 * 0.72], [o.x + Math.cos(a) * r1, o.y + Math.sin(a) * r1 * 0.72]], `${seed}:${i}`, 1.4, 10);
+    const m = measure(pts);
+    p.setAttribute("d", pathD(pts));
+    p.setAttribute("fill", "none");
+    p.setAttribute("stroke", color);
+    p.setAttribute("stroke-width", "10");
+    p.setAttribute("stroke-linecap", "round");
+    p.setAttribute("stroke-dasharray", `${m.len + 2} ${m.len + 2}`);
+    svg.append(p);
+    return { p, len: m.len, delay: (i % 4) * 0.025 };
+  });
+  const flash = div(el, `inset:0;background:${col(ctx, "surface")};opacity:0;`);
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "slapBurst" });
+    flash.style.opacity = String(Math.round(s.flash * 60) / 100);
+    const k = t - ctx.beats.drop(o.drop ?? 0);
+    svg.style.display = k >= 0 ? "" : "none";
+    for (const ray of rays) ray.p.setAttribute("stroke-dashoffset", String(((ray.len + 2) * (1 - clamp((k - ray.delay) / 0.1))).toFixed(1)));
+    return s;
+  };
+}
+
+/**
+ * 흰 보드 — 반질한 보드 면에 옅은 빛 띠와 예전에 지운 자국 몇 군데. 서 있다(움직이는 것은 펜과 그 펜이 그은 것뿐).
+ * 처음 한 번 그린다 — 글이 없다
+ */
+export function boardSurface(el: HTMLElement, o: { ctx: SceneCtx; seed?: string }): Paint {
+  const { ctx } = o;
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const seed = o.seed ?? "board";
+  div(el, `inset:0;background:${col(ctx, "bg")};`);
+  const cv = document.createElement("canvas");
+  cv.width = Math.round(W / 2);
+  cv.height = Math.round(H / 2);
+  cv.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;";
+  el.append(cv);
+  const g = cv.getContext("2d")!;
+  g.scale(0.5, 0.5);
+  const ghost = col(ctx, "ghost");
+  // 지운 자국 — 지우개가 쓸고 간 넓고 흐린 띠 몇 줄. 또렷하면 얼룩이 아니라 무늬로 읽힌다
+  g.filter = "blur(18px)";
+  for (let i = 0; i < 5; i++) {
+    const cx = rand(seed, i) * W;
+    const cy = rand(seed, i + 10) * H;
+    const len = 380 + rand(seed, i + 20) * 520;
+    const tilt = (rand(seed, i + 40) - 0.5) * 0.25;
+    g.strokeStyle = rgba(ghost, 0.5);
+    g.lineWidth = 70 + rand(seed, i + 30) * 60;
+    g.lineCap = "round";
+    g.beginPath();
+    g.moveTo(cx - len / 2, cy - (len / 2) * tilt);
+    g.lineTo(cx + len / 2, cy + (len / 2) * tilt);
+    g.stroke();
+  }
+  g.filter = "none";
+  // 반질한 면의 빛 띠 — 위 왼쪽에서 비스듬히
+  const glare = g.createLinearGradient(0, 0, W, H);
+  glare.addColorStop(0, rgba(col(ctx, "surface"), 0.7));
+  glare.addColorStop(0.35, rgba(col(ctx, "surface"), 0));
+  glare.addColorStop(1, rgba(col(ctx, "line"), 0.25));
+  g.fillStyle = glare;
+  g.fillRect(0, 0, W, H);
+  return () => {};
+}

package/themes/whiteboard/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>