kasaframe 0.1.1 → 0.1.4

package/themes/blueprint/effects.ts

@@ -0,0 +1,570 @@
+import { clamp, ease, scaleOf, spring, type SceneCtx } from "@kasaframe/core";
+import { dropBurst, type DropBurstState } from "@kasaframe/motion";
+
+// 도면은 제도대에 붙은 종이다 — 바탕은 서 있고, 움직임은 제도하는 순서(펜이 긋고 · 치수가 재고 · 단면이 차고)에서 나온다.
+// 그림은 전부 SVG. 선 종류(실선·파선·일점쇄선·이점쇄선)가 곧 뜻이라 dash 는 선마다 고정하고, 긋는 진행은 꼭짓점을 잘라 그린다
+
+type Pt = readonly [number, number];
+
+const NS = "http://www.w3.org/2000/svg";
+
+const paint = (ctx: SceneCtx, key: string): string => ctx.style.colors[key] ?? key;
+
+function svgLayer(el: HTMLElement, ctx: SceneCtx): SVGSVGElement {
+  const { width: W, height: H } = ctx.meta;
+  const s = document.createElementNS(NS, "svg");
+  s.setAttribute("viewBox", `0 0 ${W} ${H}`);
+  s.setAttribute("width", String(W));
+  s.setAttribute("height", String(H));
+  s.style.cssText = "position:absolute;left:0;top:0;overflow:visible;pointer-events:none";
+  el.append(s);
+  return s;
+}
+
+function shape<K extends keyof SVGElementTagNameMap>(parent: Element, tag: K, attrs: Record<string, string | number>): SVGElementTagNameMap[K] {
+  const n = document.createElementNS(NS, tag);
+  for (const [k, v] of Object.entries(attrs)) n.setAttribute(k, String(v));
+  parent.append(n);
+  return n;
+}
+
+function html(parent: HTMLElement, css: string, text = ""): HTMLDivElement {
+  const d = document.createElement("div");
+  d.style.cssText = `position:absolute;pointer-events:none;${css}`;
+  d.textContent = text;
+  parent.append(d);
+  return d;
+}
+
+const show = (n: Element, on: boolean) => ((n as SVGElement | HTMLElement).style.visibility = on ? "visible" : "hidden");
+
+// 제도하는 손 — 펜 끝이 처음부터 끝까지 보이게 고른 몫을 섞는다
+const hand = (k: number): number => 0.35 * k + 0.65 * ease.inOutCubic(k);
+
+/** 0 에서 넘쳤다 앉는 배율 — 풍선·삼각 표가 붙는 순간 */
+const pop = (t: number, at: number): number => (t < at ? 0 : spring(t - at, { from: 0, to: 1, stiffness: 520, damping: 18 }));
+
+// 선 종류 — 굵기와 dash(px, 1080 기준). ASME Y14.2·NASA GSFC 제도 표준의 문법 그대로
+const LINES = {
+  visible: { w: 5, dash: null as number[] | null },
+  hidden: { w: 3, dash: [14, 9] },
+  center: { w: 2.5, dash: [40, 8, 6, 8] },
+  phantom: { w: 2.5, dash: [40, 8, 6, 8, 6, 8] },
+  cut: { w: 6, dash: [44, 10, 10, 10] },
+  thin: { w: 2, dash: null as number[] | null },
+};
+export type LineKind = keyof typeof LINES;
+
+export type Shape = { line: [number, number, number, number] } | { poly: readonly Pt[]; closed?: boolean } | { rect: [number, number, number, number] } | { circle: [number, number, number] };
+
+function polyOf(s: Shape): [number, number][] {
+  if ("line" in s) return [[s.line[0], s.line[1]], [s.line[2], s.line[3]]];
+  if ("rect" in s) {
+    const [x, y, w, h] = s.rect;
+    return [[x, y], [x + w, y], [x + w, y + h], [x, y + h], [x, y]];
+  }
+  if ("circle" in s) {
+    const [cx, cy, r] = s.circle;
+    return Array.from({ length: 65 }, (_, i) => {
+      const a = -Math.PI / 2 + (i / 64) * Math.PI * 2;
+      return [cx + Math.cos(a) * r, cy + Math.sin(a) * r];
+    });
+  }
+  const pts = s.poly.map((p) => [p[0], p[1]] as [number, number]);
+  return s.closed ? [...pts, pts[0]] : pts;
+}
+
+interface Run {
+  pts: [number, number][];
+  at: number[];
+  total: number;
+}
+
+function runOf(pts: [number, number][]): Run {
+  const at = [0];
+  for (let i = 1; i < pts.length; i++) at.push(at[i - 1] + Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]));
+  return { pts, at, total: at[at.length - 1] };
+}
+
+/** 길이 len 까지 그은 꺾은선 d 와 그 끝점 */
+function partial(r: Run, len: number): { d: string; tip: [number, number] } {
+  const L = clamp(len, 0, r.total);
+  let d = `M${r.pts[0][0].toFixed(1)} ${r.pts[0][1].toFixed(1)}`;
+  let tip: [number, number] = r.pts[0];
+  for (let i = 1; i < r.pts.length; i++) {
+    if (r.at[i] <= L) {
+      d += ` L${r.pts[i][0].toFixed(1)} ${r.pts[i][1].toFixed(1)}`;
+      tip = r.pts[i];
+      continue;
+    }
+    const k = (L - r.at[i - 1]) / (r.at[i] - r.at[i - 1] || 1);
+    tip = [r.pts[i - 1][0] + (r.pts[i][0] - r.pts[i - 1][0]) * k, r.pts[i - 1][1] + (r.pts[i][1] - r.pts[i - 1][1]) * k];
+    d += ` L${tip[0].toFixed(1)} ${tip[1].toFixed(1)}`;
+    break;
+  }
+  return { d, tip };
+}
+
+/** 화살촉 — tip 에 끝이 닿고 dir(도) 쪽을 가리키는 가는 삼각 */
+function arrowHead(parent: Element, color: string, u: number): SVGPathElement {
+  return shape(parent, "path", { d: `M0 0 L${-22 * u} ${-6 * u} L${-22 * u} ${6 * u} Z`, fill: color });
+}
+
+const place = (n: Element, x: number, y: number, deg: number, k = 1) => n.setAttribute("transform", `translate(${x.toFixed(2)} ${y.toFixed(2)}) rotate(${deg.toFixed(2)}) scale(${Math.max(0, k).toFixed(4)})`);
+
+// ── 효과 ─────────────────────────────────────────────────────────────
+
+/** 도면 종이 — 청사진 바탕·옅은 제도 모눈(가는 칸·굵은 칸)·도면 테두리. 꼼짝 않는다 */
+export function draftSheet(el: HTMLElement, o: { ctx: SceneCtx; grid?: number | false; border?: boolean }): (t: number) => void {
+  const { ctx } = o;
+  const { width: W, height: H } = ctx.meta;
+  const u = scaleOf(ctx.meta);
+  const s = svgLayer(el, ctx);
+  shape(s, "rect", { x: -40, y: -40, width: W + 80, height: H + 80, fill: paint(ctx, "bg") });
+  if (o.grid !== false) {
+    const step = (o.grid ?? 30) * u;
+    let minor = "";
+    let major = "";
+    for (let i = 1, x = step; x < W; i++, x += step) (i % 5 ? (minor += `M${x} 0V${H}`) : (major += `M${x} 0V${H}`));
+    for (let i = 1, y = step; y < H; i++, y += step) (i % 5 ? (minor += `M0 ${y}H${W}`) : (major += `M0 ${y}H${W}`));
+    shape(s, "path", { d: minor, stroke: paint(ctx, "grid"), "stroke-width": 1 * u, fill: "none" });
+    shape(s, "path", { d: major, stroke: paint(ctx, "gridMajor"), "stroke-width": 1.5 * u, fill: "none" });
+  }
+  if (o.border !== false) {
+    const m = 26 * u;
+    shape(s, "rect", { x: m, y: m, width: W - 2 * m, height: H - 2 * m, fill: "none", stroke: paint(ctx, "inkSoft"), "stroke-width": 3 * u });
+    shape(s, "rect", { x: m + 8 * u, y: m + 8 * u, width: W - 2 * m - 16 * u, height: H - 2 * m - 16 * u, fill: "none", stroke: paint(ctx, "dim"), "stroke-width": 1.2 * u });
+  }
+  return () => {};
+}
+
+// 절단선 양 끝 — 보는 쪽으로 꺾인 굵은 짧은 선, 화살촉, 단면 글자
+function cutMarks(el: HTMLElement, s: SVGSVGElement, ctx: SceneCtx, pts: [number, number][], letter: string, side: 1 | -1, color: string): Element[] {
+  const u = scaleOf(ctx.meta);
+  const a = pts[0];
+  const b = pts[pts.length - 1];
+  const len = Math.hypot(b[0] - a[0], b[1] - a[1]) || 1;
+  const nx = (-(b[1] - a[1]) / len) * side;
+  const ny = ((b[0] - a[0]) / len) * side;
+  const deg = (Math.atan2(ny, nx) * 180) / Math.PI;
+  return [a, b].flatMap((p) => {
+    const stem = shape(s, "line", { x1: p[0], y1: p[1], x2: p[0] + nx * 40 * u, y2: p[1] + ny * 40 * u, stroke: color, "stroke-width": 6 * u });
+    const head = arrowHead(s, color, u * 1.4);
+    place(head, p[0] + nx * 56 * u, p[1] + ny * 56 * u, deg);
+    const tag = html(el, `left:${p[0] + nx * 100 * u}px;top:${p[1] + ny * 100 * u}px;transform:translate(-50%,-50%);font:700 ${48 * u}px/1 ${ctx.style.fonts.display};color:${color}`, letter);
+    return [stem, head, tag];
+  });
+}
+
+/**
+ * T자 — 제도판 왼쪽 머리에 물린 긴 자. 지금 긋는 줄 높이(stops 의 [초, y])로 미끄러져 가고, 그 사이에도 다음 줄을 향해 늘 움직인다.
+ * 자에는 모눈 간격 눈금. 투명한 판이라 아래 그림이 비친다
+ */
+export function tSquare(el: HTMLElement, o: { ctx: SceneCtx; stops: readonly (readonly [number, number])[]; color?: string }): (t: number) => void {
+  const { ctx } = o;
+  const { width: W } = ctx.meta;
+  const u = scaleOf(ctx.meta);
+  const color = paint(ctx, o.color ?? "ink");
+  const g = shape(svgLayer(el, ctx), "g", {});
+  const band = 46 * u;
+  const left = 34 * u;
+  shape(g, "rect", { x: left, y: 0, width: W - 2 * left, height: band, fill: color, "fill-opacity": 0.1 });
+  shape(g, "line", { x1: left, y1: 0, x2: W - left, y2: 0, stroke: color, "stroke-width": 2.5 * u, "stroke-opacity": 0.75 });
+  let ticks = "";
+  for (let i = 0, x = left + 30 * u; x < W - left; i++, x += 30 * u) ticks += `M${x.toFixed(1)} 0V${((i + 1) % 5 ? 9 : 18) * u}`;
+  shape(g, "path", { d: ticks, stroke: color, "stroke-width": 1.6 * u, "stroke-opacity": 0.75 });
+  // 머리 — 판 왼쪽 가장자리에 물려 위아래로만 움직인다
+  shape(g, "rect", { x: left - 14 * u, y: -50 * u, width: 30 * u, height: 50 * u + band + 50 * u, fill: color, "fill-opacity": 0.22, stroke: color, "stroke-opacity": 0.6, "stroke-width": 2 * u });
+  const st = [...o.stops].sort((a, b) => a[0] - b[0]);
+  // 시간을 매개로 한 3차 에르미트 — 이음매마다 앞뒤 기울기를 이어 서는 곳이 없게(마지막 둘이 같은 높이일 때만 선다)
+  const slope = (i: number): number => {
+    const a = st[Math.max(0, i - 1)];
+    const b = st[Math.min(st.length - 1, i + 1)];
+    return (b[1] - a[1]) / (b[0] - a[0] || 1);
+  };
+  const yAt = (t: number): number => {
+    if (t <= st[0][0]) return st[0][1] + slope(0) * (t - st[0][0]);
+    if (t >= st[st.length - 1][0]) return st[st.length - 1][1];
+    let i = 0;
+    while (t > st[i + 1][0]) i++;
+    const [t0, y0] = st[i];
+    const [t1, y1] = st[i + 1];
+    const h = t1 - t0;
+    const k = (t - t0) / h;
+    const [h00, h10, h01, h11] = [2 * k ** 3 - 3 * k ** 2 + 1, k ** 3 - 2 * k ** 2 + k, -2 * k ** 3 + 3 * k ** 2, k ** 3 - k ** 2];
+    return h00 * y0 + h10 * h * slope(i) + h01 * y1 + h11 * h * slope(i + 1);
+  };
+  return (t) => g.setAttribute("transform", `translate(0 ${yAt(t).toFixed(2)})`);
+}
+
+export interface PenOpts {
+  ctx: SceneCtx;
+  /** 그릴 꼴 — 차례대로 이어 긋는다 */
+  shapes: readonly Shape[];
+  /** 선 종류 — visible 외형 · hidden 숨은 · center 중심 · phantom 가상(다른 자리) · cut 절단 · thin 가는 */
+  kind?: LineKind;
+  at?: number;
+  dur?: number;
+  color?: string;
+  width?: number;
+  /** 긋는 동안 펜 끝 점 */
+  nib?: boolean;
+  /** kind cut 의 단면 글자(A) — 다 그으면 양 끝에 보는 쪽 화살표와 글자가 선다 */
+  letter?: string;
+  /** 보는 쪽 — 선의 왼쪽(1)·오른쪽(-1) */
+  side?: 1 | -1;
+}
+
+/**
+ * 제도선 — 펜 끝이 꼴을 차례로 긋는다. 선 종류마다 굵기·dash 가 정해져 있다(폴백·다른 자리는 phantom).
+ * kind cut 에 letter 를 주면 절단선 — 다 그은 뒤 양 끝에 보는 쪽 화살표와 글자(A … A)
+ */
+export function penLine(el: HTMLElement, o: PenOpts): (t: number) => void {
+  const { ctx } = o;
+  const u = scaleOf(ctx.meta);
+  const kind = LINES[o.kind ?? "visible"];
+  const color = paint(ctx, o.color ?? "ink");
+  const s = svgLayer(el, ctx);
+  const runs = o.shapes.map((sh) => runOf(polyOf(sh)));
+  const start: number[] = [];
+  let total = 0;
+  for (const r of runs) {
+    start.push(total);
+    total += r.total;
+  }
+  const paths = runs.map(() =>
+    shape(s, "path", {
+      fill: "none",
+      stroke: color,
+      "stroke-width": o.width ?? kind.w * u,
+      "stroke-linecap": kind.dash ? "butt" : "round",
+      "stroke-linejoin": "round",
+      ...(kind.dash ? { "stroke-dasharray": kind.dash.map((v) => v * u).join(" ") } : {}),
+    }),
+  );
+  const nib = o.nib !== false ? shape(s, "circle", { r: 6 * u, fill: color }) : null;
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 0.4;
+  const cutEnds = o.kind === "cut" && o.letter ? cutMarks(el, s, ctx, runs[0].pts, o.letter, o.side ?? 1, color) : [];
+  return (t) => {
+    for (const n of cutEnds) show(n, t >= at + dur);
+    const k = clamp((t - at) / dur);
+    const L = t < at ? 0 : hand(k) * total;
+    let tip: [number, number] | null = null;
+    runs.forEach((r, i) => {
+      const local = L - start[i];
+      show(paths[i], local > 0);
+      if (local <= 0) return;
+      const pr = partial(r, local);
+      paths[i].setAttribute("d", pr.d);
+      if (local < r.total) tip = pr.tip;
+    });
+    if (nib) {
+      show(nib, tip !== null && k > 0 && k < 1);
+      if (tip) {
+        nib.setAttribute("cx", (tip as [number, number])[0].toFixed(1));
+        nib.setAttribute("cy", (tip as [number, number])[1].toFixed(1));
+      }
+    }
+  };
+}
+
+export interface DimOpts {
+  ctx: SceneCtx;
+  /** 잴 두 점(외형 위) */
+  from: Pt;
+  to: Pt;
+  /** 치수선이 외형에서 떨어진 거리 — 음수면 반대쪽 */
+  offset?: number;
+  at: number;
+  dur?: number;
+  /** 수를 주면 0 에서 그 수까지 재며 센다 */
+  value?: number;
+  decimals?: number;
+  prefix?: string;
+  unit?: string;
+  /** 수 대신 낱말 */
+  text?: string;
+  /** 치수 글자 크기 */
+  size?: number;
+  color?: string;
+}
+
+/**
+ * 치수 — 보조선이 외형에서 조금 떨어져 서고, 치수선이 가운데서 양 끝으로 뻗어 화살촉이 닿고, 그동안 수가 0 에서 값까지 잰다.
+ * 숫자는 늘 치수로 앉는다(치수선 바깥쪽 가운데, 선을 따라 바로 선 글)
+ */
+export function dimension(el: HTMLElement, o: DimOpts): (t: number) => void {
+  const { ctx } = o;
+  const u = scaleOf(ctx.meta);
+  const color = paint(ctx, o.color ?? "ink");
+  const dx = o.to[0] - o.from[0];
+  const dy = o.to[1] - o.from[1];
+  const len = Math.hypot(dx, dy) || 1;
+  const off = o.offset ?? 60 * u;
+  const sg = off < 0 ? -1 : 1;
+  const nx = (-dy / len) * sg;
+  const ny = (dx / len) * sg;
+  const A: Pt = [o.from[0] + nx * Math.abs(off), o.from[1] + ny * Math.abs(off)];
+  const B: Pt = [o.to[0] + nx * Math.abs(off), o.to[1] + ny * Math.abs(off)];
+  const deg = (Math.atan2(dy, dx) * 180) / Math.PI;
+  const s = svgLayer(el, ctx);
+  const gap = 8 * u;
+  const over = 16 * u;
+  const ext = [o.from, o.to].map((p) => shape(s, "line", { x1: p[0] + nx * gap, y1: p[1] + ny * gap, stroke: color, "stroke-width": 2 * u }));
+  const line = shape(s, "line", { stroke: color, "stroke-width": 2.2 * u });
+  const heads = [arrowHead(s, color, u), arrowHead(s, color, u)];
+  const size = o.size ?? 44 * u;
+  // 글은 선을 따라 바로 서게 — 거꾸로 서지 않도록 각도를 접는다
+  const up = deg > 90 || deg <= -90 ? deg + 180 : deg;
+  const mx = (A[0] + B[0]) / 2 + nx * size * 0.72;
+  const my = (A[1] + B[1]) / 2 + ny * size * 0.72;
+  const label = html(el, `left:${mx}px;top:${my}px;transform:translate(-50%,-50%) rotate(${up}deg);font:700 ${size}px/1 ${ctx.style.fonts.mono};color:${color};white-space:pre;visibility:hidden`);
+  const at = o.at;
+  const dur = o.dur ?? 0.45;
+  const extDur = Math.min(0.14, dur * 0.3);
+  const dec = o.decimals ?? 0;
+  return (t) => {
+    const e = clamp((t - at) / extDur);
+    ext.forEach((l, i) => {
+      const p = i ? o.to : o.from;
+      show(l, t >= at);
+      const reach = gap + (Math.abs(off) + over - gap) * ease.outCubic(e);
+      l.setAttribute("x2", (p[0] + nx * reach).toFixed(1));
+      l.setAttribute("y2", (p[1] + ny * reach).toFixed(1));
+    });
+    const k = hand(clamp((t - at - extDur) / (dur - extDur)));
+    const on = t >= at + extDur;
+    show(line, on);
+    const cx = (A[0] + B[0]) / 2;
+    const cy = (A[1] + B[1]) / 2;
+    line.setAttribute("x1", (cx + (A[0] - cx) * k).toFixed(1));
+    line.setAttribute("y1", (cy + (A[1] - cy) * k).toFixed(1));
+    line.setAttribute("x2", (cx + (B[0] - cx) * k).toFixed(1));
+    line.setAttribute("y2", (cy + (B[1] - cy) * k).toFixed(1));
+    heads.forEach((h, i) => {
+      show(h, on && k >= 1);
+      place(h, i ? B[0] : A[0], i ? B[1] : A[1], i ? deg : deg + 180);
+    });
+    show(label, on);
+    label.textContent = o.text ?? `${o.prefix ?? ""}${(k >= 1 ? (o.value ?? 0) : (o.value ?? 0) * k).toFixed(dec)}${o.unit ?? ""}`;
+  };
+}
+
+/** 단면 해칭 — 45° 가는 선이 한쪽부터 한 줄씩 차오른다. 잘린 면·채운 양(구간·비율)에 */
+export function hatch(el: HTMLElement, o: { ctx: SceneCtx; rect: [number, number, number, number]; at: number; dur?: number; pitch?: number; color?: string; from?: "left" | "right"; outline?: boolean }): (t: number) => void {
+  const { ctx } = o;
+  const u = scaleOf(ctx.meta);
+  const [x, y, w, h] = o.rect;
+  const s = svgLayer(el, ctx);
+  const color = paint(ctx, o.color ?? "ink");
+  const pitch = (o.pitch ?? 16) * u;
+  // 오른쪽 위로 가는 45° 선 x + y = c — 상자를 덮는 c 범위를 pitch 로 나눈다
+  const lines: { n: SVGLineElement; k: number }[] = [];
+  const c0 = x + y;
+  const c1 = x + w + y + h;
+  for (let c = c0 + pitch / 2; c < c1; c += pitch) {
+    const xa = Math.max(x, c - (y + h));
+    const xb = Math.min(x + w, c - y);
+    if (xb <= xa) continue;
+    const n = shape(s, "line", { x1: xa, y1: c - xa, x2: xb, y2: c - xb, stroke: color, "stroke-width": 1.8 * u });
+    const k = (c - c0) / (c1 - c0);
+    lines.push({ n, k: o.from === "right" ? 1 - k : k });
+  }
+  const box = o.outline !== false ? shape(s, "rect", { x, y, width: w, height: h, fill: "none", stroke: color, "stroke-width": 4 * u }) : null;
+  const dur = o.dur ?? 0.4;
+  return (t) => {
+    const p = t < o.at ? 0 : hand(clamp((t - o.at) / dur));
+    for (const l of lines) show(l.n, p > 0 && l.k <= p);
+    if (box) show(box, t >= o.at);
+  };
+}
+
+export interface BalloonOpts {
+  ctx: SceneCtx;
+  /** 풍선 가운데 */
+  x: number;
+  y: number;
+  /** 지시선 끝(부품 위) */
+  to: Pt;
+  text: string;
+  at: number;
+  /** 풍선 반지름 */
+  size?: number;
+  /** circle 품번 풍선 · datum 기준면 표(네모 글자 + 검은 삼각) */
+  kind?: "circle" | "datum";
+  color?: string;
+}
+
+/** 품번 풍선 — 부품 위 점에서 지시선이 뻗고 끝에 번호 풍선이 톡 붙는다. datum 은 기준면 표(모든 치수를 재는 기준) */
+export function balloon(el: HTMLElement, o: BalloonOpts): (t: number) => void {
+  const { ctx } = o;
+  const u = scaleOf(ctx.meta);
+  const color = paint(ctx, o.color ?? "ink");
+  const r = o.size ?? 30 * u;
+  const s = svgLayer(el, ctx);
+  const dx = o.x - o.to[0];
+  const dy = o.y - o.to[1];
+  const len = Math.hypot(dx, dy) || 1;
+  const edge: Pt = [o.x - (dx / len) * r, o.y - (dy / len) * r];
+  const leader = shape(s, "line", { x1: o.to[0], y1: o.to[1], stroke: color, "stroke-width": 2 * u });
+  // 기준면 삼각은 밑변이 면에 붙고 꼭짓점이 표 쪽을 본다
+  const [ux, uy] = [dx / len, dy / len];
+  const foot =
+    o.kind === "datum"
+      ? shape(s, "path", { d: `M${o.to[0] - uy * 16 * u} ${o.to[1] + ux * 16 * u} L${o.to[0] + uy * 16 * u} ${o.to[1] - ux * 16 * u} L${o.to[0] + ux * 26 * u} ${o.to[1] + uy * 26 * u} Z`, fill: color })
+      : shape(s, "circle", { cx: o.to[0], cy: o.to[1], r: 6 * u, fill: color });
+  const g = shape(s, "g", {});
+  if (o.kind === "datum") shape(g, "rect", { x: -r, y: -r, width: 2 * r, height: 2 * r, fill: paint(ctx, "bg"), stroke: color, "stroke-width": 3.5 * u });
+  else shape(g, "circle", { r, fill: paint(ctx, "bg"), stroke: color, "stroke-width": 3.5 * u });
+  const tag = html(el, `left:${o.x}px;top:${o.y}px;transform:translate(-50%,-46%);font:700 ${r * 1.15}px/1 ${ctx.style.fonts.mono};color:${color};white-space:pre;visibility:hidden`, o.text);
+  return (t) => {
+    const k = clamp((t - o.at) / 0.16);
+    show(leader, t >= o.at);
+    show(foot, t >= o.at);
+    leader.setAttribute("x2", (o.to[0] + (edge[0] - o.to[0]) * ease.outCubic(k)).toFixed(1));
+    leader.setAttribute("y2", (o.to[1] + (edge[1] - o.to[1]) * ease.outCubic(k)).toFixed(1));
+    const p = pop(t, o.at + 0.14);
+    show(g, p > 0);
+    place(g, o.x, o.y, 0, p);
+    show(tag, t >= o.at + 0.16);
+  };
+}
+
+/** 개정 구름 — 바뀐 곳을 빨간 색연필 구름이 한 바퀴 두르고, 모서리에 개정 삼각 Δ 가 붙는다 */
+export function revisionCloud(el: HTMLElement, o: { ctx: SceneCtx; rect: [number, number, number, number]; at: number; dur?: number; rev?: string; color?: string; bump?: number }): (t: number) => void {
+  const { ctx } = o;
+  const u = scaleOf(ctx.meta);
+  const color = paint(ctx, o.color ?? "accent");
+  const [x, y, w, h] = o.rect;
+  const bump = (o.bump ?? 26) * u;
+  // 둘레를 bump 간격으로 나눠 바깥으로 부푼 반원을 잇는다(시계 방향)
+  const sides: [Pt, Pt][] = [[[x, y], [x + w, y]], [[x + w, y], [x + w, y + h]], [[x + w, y + h], [x, y + h]], [[x, y + h], [x, y]]];
+  let d = `M${x} ${y}`;
+  let total = 0;
+  for (const [a, b] of sides) {
+    const L = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    const n = Math.max(1, Math.round(L / (bump * 2)));
+    const r = L / n / 2;
+    for (let i = 1; i <= n; i++) {
+      const px = a[0] + ((b[0] - a[0]) * i) / n;
+      const py = a[1] + ((b[1] - a[1]) * i) / n;
+      d += ` A${r.toFixed(1)} ${r.toFixed(1)} 0 0 1 ${px.toFixed(1)} ${py.toFixed(1)}`;
+      total += Math.PI * r;
+    }
+  }
+  const s = svgLayer(el, ctx);
+  const path = shape(s, "path", { d, fill: "none", stroke: color, "stroke-width": 4 * u, "stroke-linecap": "round", pathLength: total.toFixed(1) });
+  const tri = shape(s, "g", {});
+  const T = 34 * u;
+  shape(tri, "path", { d: `M0 ${-T} L${T * 0.95} ${T * 0.66} L${-T * 0.95} ${T * 0.66} Z`, fill: paint(ctx, "bg"), stroke: color, "stroke-width": 4 * u, "stroke-linejoin": "round" });
+  const tx = x + w + bump * 0.4;
+  const ty = y - bump * 0.4;
+  const rev = html(el, `left:${tx}px;top:${ty + T * 0.12}px;transform:translate(-50%,-50%);font:700 ${T * 0.9}px/1 ${ctx.style.fonts.mono};color:${color};visibility:hidden`, o.rev ?? "1");
+  const dur = o.dur ?? 0.45;
+  return (t) => {
+    const p = t < o.at ? 0 : hand(clamp((t - o.at) / dur));
+    show(path, p > 0);
+    path.setAttribute("stroke-dasharray", `${(p * total).toFixed(1)} ${(total + 10).toFixed(1)}`);
+    const k = pop(t, o.at + dur);
+    show(tri, k > 0);
+    place(tri, tx, ty, 0, k);
+    show(rev, t >= o.at + dur + 0.04);
+  };
+}
+
+export interface TitleBlockOpts {
+  ctx: SceneCtx;
+  x: number;
+  y: number;
+  w: number;
+  /** 칸마다 이름(작게)·값(글씨로 찍힌다)·높이 */
+  rows: readonly { label: string; value: string; h: number; size?: number }[];
+  at: number;
+  /** 칸 하나가 그어지고 찍히는 간격 */
+  step?: number;
+  /** 이름 칸 폭 비율 */
+  labelWidth?: number;
+}
+
+/** 표제란 — 도면 오른쪽 아래 칸 상자가 그어지고 칸마다 이름·값이 차례로 찍힌다(도면 이름·주소·날짜) */
+export function titleBlock(el: HTMLElement, o: TitleBlockOpts): (t: number) => void {
+  const { ctx } = o;
+  const u = scaleOf(ctx.meta);
+  const H = o.rows.reduce((a, r) => a + r.h, 0);
+  const lw = o.w * (o.labelWidth ?? 0.26);
+  const step = o.step ?? 0.12;
+  const frame = penLine(el, { ctx, shapes: [{ rect: [o.x, o.y, o.w, H] }], at: o.at, dur: 0.3, nib: false });
+  const divs: ((t: number) => void)[] = [];
+  const cells: ((t: number) => void)[] = [];
+  let y = o.y;
+  o.rows.forEach((r, i) => {
+    const at = o.at + 0.2 + i * step;
+    if (i > 0) divs.push(penLine(el, { ctx, shapes: [{ line: [o.x, y, o.x + o.w, y] }], kind: "thin", at, dur: 0.14, nib: false }));
+    divs.push(penLine(el, { ctx, shapes: [{ line: [o.x + lw, y, o.x + lw, y + r.h] }], kind: "thin", at, dur: 0.1, nib: false }));
+    const name = html(el, `left:${o.x + 14 * u}px;top:${y + r.h / 2}px;transform:translateY(-50%);font:600 ${Math.min(30 * u, r.h * 0.4)}px/1 ${ctx.style.fonts.sans};color:${paint(ctx, "dim")};white-space:pre;visibility:hidden`, r.label);
+    const value = html(el, `left:${o.x + lw + 22 * u}px;top:${y + r.h / 2}px;transform:translateY(-50%);font:700 ${r.size ?? Math.min(56 * u, r.h * 0.5)}px/1 ${ctx.style.fonts.display};color:${paint(ctx, "ink")};white-space:pre`);
+    const write = lettering(value, { ctx, text: r.value, at: at + 0.06, dur: 0.22 });
+    cells.push((t) => {
+      show(name, t >= at);
+      write(t);
+    });
+    y += r.h;
+  });
+  return (t) => {
+    frame(t);
+    for (const d of divs) d(t);
+    for (const c of cells) c(t);
+  };
+}
+
+/**
+ * 글씨 — 제도 글씨처럼 옅은 안내선 두 줄이 먼저 서고 그 사이에 글자가 한 자씩 찍힌다. 다 찍으면 안내선은 걷힌다.
+ * 글꼴 크기·자리는 그대로(색·배경만). at + dur 부터 el.textContent === text
+ */
+export function lettering(el: HTMLElement, o: { ctx: SceneCtx; text: string; at: number; dur?: number; guide?: boolean }): (t: number) => void {
+  const { ctx } = o;
+  el.textContent = "";
+  const spans = Array.from(o.text).map((ch) => {
+    const sp = document.createElement("span");
+    sp.textContent = ch;
+    el.append(sp);
+    return sp;
+  });
+  const n = spans.length;
+  const dur = o.dur ?? Math.min(0.5, 0.025 * n + 0.12);
+  // 안내선은 배경 그림으로만 — 글 칸이 깔아 둔 바탕색은 건드리지 않는다
+  const guide = paint(ctx, "gridMajor");
+  const line = `linear-gradient(${guide}, ${guide})`;
+  el.style.backgroundSize = "100% 2px";
+  el.style.backgroundPosition = "0 14%, 0 86%";
+  el.style.backgroundRepeat = "no-repeat";
+  return (t) => {
+    const p = clamp((t - o.at) / Math.max(1e-3, dur));
+    const shown = t < o.at ? 0 : t >= o.at + dur ? n : Math.min(n, Math.floor(p * n) + 1);
+    spans.forEach((sp, i) => (sp.style.visibility = i < shown ? "visible" : "hidden"));
+    el.style.backgroundImage = o.guide !== false && t >= o.at - 0.1 && t < o.at + dur + 0.12 ? `${line}, ${line}` : "none";
+  };
+}
+
+/**
+ * 드롭 = 노광 — 청사진은 빛에 쬐어 한 번에 찍힌다. 흰 섬광 한 번과 노광 램프 띠가 위에서 아래로 지나간다.
+ * 돌려준 shake 는 화면 틀에, punch 는 주인공에
+ */
+export function exposure(el: HTMLElement, o: { ctx: SceneCtx; drop?: number }): (t: number) => DropBurstState {
+  const { ctx } = o;
+  const { height: H } = ctx.meta;
+  const u = scaleOf(ctx.meta);
+  const flood = html(el, `inset:0;background:${paint(ctx, "ink")};opacity:0`);
+  const lamp = html(el, `left:0;right:0;top:0;height:${90 * u}px;background:${paint(ctx, "ink")};opacity:0`);
+  const D = ctx.beats.drop(o.drop ?? 0);
+  return (t) => {
+    const st = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "exposure" });
+    flood.style.opacity = (st.flash * 0.7).toFixed(3);
+    const k = clamp((t - D) / 0.4);
+    const on = t >= D && k < 1;
+    lamp.style.opacity = on ? (0.35 * (1 - k)).toFixed(3) : "0";
+    lamp.style.transform = `translateY(${(-90 * u + (H + 90 * u) * ease.inOutCubic(k)).toFixed(1)}px)`;
+    return st;
+  };
+}

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