kasaframe 0.1.1 → 0.1.4

package/themes/circuit-board/effects.ts

@@ -0,0 +1,576 @@
+import { clamp, ease, rand, type SceneCtx } from "@kasaframe/core";
+import { dropBurst, type DropBurstState } from "@kasaframe/motion";
+import { fingerPins, measure, pointAt, route45, slice, stroke, travelled, travelTime, type PtIn, type Side } from "./pcb.ts";
+
+// 기판은 서 있고 전류만 달린다 — 바탕은 한 번 그리고 끝, 움직임은 트레이스 위 펄스·부품 장착·실크 찍기·표시기에서만 나온다
+
+const ink = (ctx: SceneCtx, key: string): string => ctx.style.colors[key] ?? key;
+
+// 변주가 style.json 색을 갈아 끼우므로 재료색(구멍·연기 유리·LED 몸체)도 테마 색에서 섞어 낸다
+const rgb = (c: string): number[] | null => {
+  const m = /^#([0-9a-f]{6})$/i.exec(c.trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return [n >> 16, (n >> 8) & 255, n & 255];
+};
+const mix = (a: string, b: string, k: number): string => {
+  const x = rgb(a);
+  const y = rgb(b);
+  if (!x || !y) return k < 0.5 ? a : b;
+  return `rgb(${x.map((v, i) => Math.round(v + (y[i] - v) * k)).join(",")})`;
+};
+const fade = (a: string, alpha: number): string => {
+  const x = rgb(a);
+  return x ? `rgba(${x.join(",")},${alpha})` : a;
+};
+
+type Area = [x: number, y: number, w: number, h: number];
+
+// 컷마다 기판 자리를 여럿 겹쳐 두니 화면 전체 캔버스를 다 잡지 않고 그리는 자리만큼만 — 좌표는 화면 기준 그대로
+function canvas(el: HTMLElement, area: Area, css = ""): { g: CanvasRenderingContext2D; clear(): void } {
+  const x = Math.floor(area[0]);
+  const y = Math.floor(area[1]);
+  const w = Math.max(1, Math.ceil(area[2]));
+  const h = Math.max(1, Math.ceil(area[3]));
+  const c = el.ownerDocument.createElement("canvas");
+  c.width = w;
+  c.height = h;
+  c.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:${w}px;height:${h}px;pointer-events:none;${css}`;
+  el.append(c);
+  const g = c.getContext("2d")!;
+  g.translate(-x, -y);
+  return { g, clear: () => g.clearRect(x, y, w, h) };
+}
+
+const bbox = (pts: readonly PtIn[], pad: number): Area => {
+  const xs = pts.map((p) => p[0]);
+  const ys = pts.map((p) => p[1]);
+  const x = Math.min(...xs) - pad;
+  const y = Math.min(...ys) - pad;
+  return [x, y, Math.max(...xs) + pad - x, Math.max(...ys) + pad - y];
+};
+
+function div(parent: HTMLElement, css: string, text?: string): HTMLDivElement {
+  const d = parent.ownerDocument.createElement("div");
+  d.style.cssText = `position:absolute;pointer-events:none;${css}`;
+  if (text !== undefined) d.textContent = text;
+  parent.append(d);
+  return d;
+}
+
+const dot = (g: CanvasRenderingContext2D, x: number, y: number, r: number): void => {
+  g.beginPath();
+  g.arc(x, y, Math.max(0.1, r), 0, Math.PI * 2);
+  g.fill();
+};
+
+/** 모노 글 폭(em) 어림 — 한글은 Pretendard 로 떨어져 한 자가 거의 1em */
+const monoEm = (s: string): number => Array.from(s).reduce((a, ch) => a + (/[ᄀ-ᇿ㄰-㆏가-힯]/.test(ch) ? 0.98 : 0.52), 0);
+
+/** 펄스가 닿은 뒤 그 자리가 달아오른 정도 0..1 — 닿는 순간 1, len 초 동안 식는다 */
+const heat = (t: number, hits: readonly number[] | undefined, len = 0.32): number => {
+  let k = 0;
+  for (const h of hits ?? []) if (t >= h && t < h + len) k = Math.max(k, 1 - (t - h) / len);
+  return k;
+};
+
+/**
+ * 기판 바탕 — 솔더 마스크 면, 마스크 아래 동박 면, 덮인 비아, 모서리 장착 구멍, 기준점. 한 번 그리고 선다.
+ * 광택 마스크라 위쪽에 아주 옅은 빛 번짐 하나(정지)
+ */
+export function boardMask(el: HTMLElement, o: { ctx: SceneCtx; seed?: string | number; vias?: number; pours?: Area[]; holes?: boolean; fiducials?: boolean }): (t: number) => void {
+  const { ctx } = o;
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const { g } = canvas(el, [0, 0, W, H]);
+  const seed = o.seed ?? "board";
+  let drawn = false;
+  return () => {
+    if (drawn) return;
+    drawn = true;
+    g.fillStyle = ink(ctx, "mask");
+    g.fillRect(0, 0, W, H);
+    g.fillStyle = ink(ctx, "pour");
+    for (const [x, y, w, h] of o.pours ?? []) {
+      g.beginPath();
+      g.roundRect(x, y, w, h, 8);
+      g.fill();
+    }
+    const light = g.createRadialGradient(W * 0.3, H * 0.12, 0, W * 0.3, H * 0.12, Math.max(W, H) * 0.75);
+    light.addColorStop(0, "rgba(255,255,255,0.055)");
+    light.addColorStop(1, "rgba(255,255,255,0)");
+    g.fillStyle = light;
+    g.fillRect(0, 0, W, H);
+    // 덮인 비아 — 마스크 밑 동박 고리가 한 단 밝게 비친다
+    const n = o.vias ?? 28;
+    g.strokeStyle = ink(ctx, "trace");
+    g.lineWidth = 2.5;
+    for (let i = 0; i < n; i++) {
+      const x = 60 + rand(seed, i * 3) * (W - 120);
+      const y = 50 + rand(seed, i * 3 + 1) * (H - 100);
+      const r = 4.5 + rand(seed, i * 3 + 2) * 2.5;
+      g.beginPath();
+      g.arc(x, y, r, 0, Math.PI * 2);
+      g.stroke();
+    }
+    if (o.holes !== false) {
+      const m = Math.min(W, H) * 0.035;
+      for (const [x, y] of [[m, m], [W - m, m], [m, H - m], [W - m, H - m]] as const) {
+        g.fillStyle = ink(ctx, "gold");
+        dot(g, x, y, m * 0.62);
+        g.fillStyle = mix(ink(ctx, "mask"), "#000000", 0.6);
+        dot(g, x, y, m * 0.36);
+      }
+    }
+    if (o.fiducials !== false) {
+      const m = Math.min(W, H) * 0.035;
+      for (const [x, y] of [[m * 2.6, m], [W - m, m * 2.6]] as const) {
+        g.fillStyle = mix(ink(ctx, "mask"), "#000000", 0.3);
+        dot(g, x, y, 13);
+        g.fillStyle = ink(ctx, "gold");
+        dot(g, x, y, 6);
+      }
+    }
+  };
+}
+
+/**
+ * 트레이스를 깐다 — 점들을 직각·45° 로 이어(route45) at 부터 dur 동안 그어 나가고, 끝 패드가 금으로 선다.
+ * tone: trace(마스크 밑 동박) · gold(드러난 동박) · copper. width 를 t 의 함수로 주면 굵기가 바뀐다 — 흐르는 전류(비용)가 줄면 가늘어진다
+ */
+export function routeTrace(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; points: readonly PtIn[]; at?: number; dur?: number; width?: number | ((t: number) => number); tone?: string; bend?: number; route?: boolean; pads?: "both" | "start" | "end" | "none" },
+): (t: number) => void {
+  const { ctx } = o;
+  const pts = o.route === false ? o.points.map((p): [number, number] => [p[0], p[1]]) : route45(o.points, o.bend);
+  const path = measure(pts);
+  const widthAt = typeof o.width === "function" ? o.width : () => (o.width as number | undefined) ?? 6;
+  const wMax = Math.max(widthAt(0), widthAt(Number.POSITIVE_INFINITY), 6);
+  const { g, clear } = canvas(el, bbox(pts, wMax * 3 + 6));
+  const color = ink(ctx, o.tone ?? "trace");
+  const gold = ink(ctx, "gold");
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 0.3;
+  const pads = o.pads ?? "both";
+  return (t) => {
+    clear();
+    if (t < at) return;
+    const p = ease.outCubic(clamp((t - at) / dur));
+    const d = path.len * p;
+    const w = widthAt(t);
+    g.lineCap = "round";
+    g.lineJoin = "round";
+    g.lineWidth = w;
+    g.strokeStyle = color;
+    stroke(g, slice(path, 0, d));
+    g.fillStyle = gold;
+    if (pads === "both" || pads === "start") dot(g, pts[0][0], pts[0][1], w * 1.5);
+    if (p >= 1 && (pads === "both" || pads === "end")) dot(g, pts[pts.length - 1][0], pts[pts.length - 1][1], w * 1.5);
+    if (p < 1) {
+      const [hx, hy] = pointAt(path, d);
+      g.fillRect(hx - w, hy - w, w * 2, w * 2);
+    }
+  };
+}
+
+/**
+ * 요청 = 전류 펄스. times 마다 펄스 하나가 트레이스를 따라 달리고(지나간 꼬리가 금빛으로 식는다), 끝 패드에 닿으면 한 번 달아오른다.
+ * holds 자리(길이 비율)에서는 그 초만큼 머문다 — 저항이 곧 지연이다
+ */
+export function currentPulse(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; points: readonly PtIn[]; times: readonly number[]; speed?: number; tail?: number; width?: number | ((t: number) => number); holds?: readonly { at: number; sec: number }[]; bend?: number; route?: boolean },
+): (t: number) => void {
+  const { ctx } = o;
+  const pts = o.route === false ? o.points.map((p): [number, number] => [p[0], p[1]]) : route45(o.points, o.bend);
+  const path = measure(pts);
+  const widthAt = typeof o.width === "function" ? o.width : () => (o.width as number | undefined) ?? 6;
+  const wMax = Math.max(widthAt(0), widthAt(Number.POSITIVE_INFINITY), 6);
+  const speed = o.speed ?? 1600;
+  const tail = o.tail ?? 240;
+  const holds = o.holds ?? [];
+  const T = travelTime(path.len, speed, holds);
+  const { g, clear } = canvas(el, bbox(pts, wMax * 6 + 30));
+  const gold = ink(ctx, "gold");
+  const hot = ink(ctx, "hot");
+  const [ex, ey] = pts[pts.length - 1];
+  return (t) => {
+    clear();
+    const w = widthAt(t);
+    g.lineCap = "round";
+    g.lineJoin = "round";
+    g.lineWidth = w;
+    for (const s of o.times) {
+      const tau = t - s;
+      if (tau < 0 || tau > T + 0.36) continue;
+      if (tau <= T) {
+        const d = travelled(tau, path.len, speed, holds);
+        const stuck = d < path.len && d - travelled(tau - 0.02, path.len, speed, holds) < 0.5;
+        for (let k = 3; k >= 0; k--) {
+          g.globalAlpha = 1 - k * 0.22;
+          g.strokeStyle = k === 0 ? hot : gold;
+          stroke(g, slice(path, d - (tail * (k + 1)) / 4, d - (tail * k) / 4));
+        }
+        const [hx, hy] = pointAt(path, d);
+        // 굵은 전원선에서도 머리가 선 폭 안에 머물게 — 가는 선은 선보다 크게, 굵은 선은 선 안에
+        g.fillStyle = gold;
+        g.globalAlpha = stuck ? 0.5 : 0.32;
+        dot(g, hx, hy, Math.min(w * (stuck ? 3.6 : 2.6), w * 0.8 + (stuck ? 22 : 12)));
+        g.globalAlpha = 1;
+        g.fillStyle = hot;
+        dot(g, hx, hy, Math.min(w * 1.3, w * 0.5 + 6));
+      } else {
+        const k = 1 - (tau - T) / 0.36;
+        g.fillStyle = gold;
+        g.globalAlpha = k * 0.45;
+        dot(g, ex, ey, Math.min(w * (2 + (1 - k) * 3.5), w * 0.8 + 10 + (1 - k) * 24));
+        g.globalAlpha = k;
+        g.fillStyle = hot;
+        dot(g, ex, ey, Math.min(w * 1.5, w * 0.5 + 8));
+      }
+    }
+    g.globalAlpha = 1;
+  };
+}
+
+/**
+ * 모델 = 칩. 실크 테두리·부품 기호 위로 칩이 픽앤플레이스처럼 내려와 착 앉고 납땜이 한 번 반짝, 윗면엔 모델 이름이 각인돼 있다.
+ * hits 시각마다 펄스가 닿아 다리와 테두리가 달아오른다
+ */
+export function icChip(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; x: number; y: number; w: number; h: number; label: string; sub?: string; ref?: string; pins?: number; sides?: 2 | 4; at?: number; hits?: readonly number[]; labelPx?: number },
+): (t: number) => void {
+  const { ctx, x, y, w, h } = o;
+  const gold = ink(ctx, "gold");
+  const hot = ink(ctx, "hot");
+  const silk = ink(ctx, "silk");
+  const wrap = div(el, `left:${x}px;top:${y}px;width:${w}px;height:${h}px;--pin:${gold}`);
+  const yardPad = Math.round(Math.min(w, h) * 0.12 + 8);
+  div(wrap, `left:${-yardPad}px;top:${-yardPad}px;right:${-yardPad}px;bottom:${-yardPad}px;border:2px solid ${silk};border-radius:2px`);
+  div(wrap, `left:${-yardPad - 18}px;top:${-yardPad - 18}px;width:11px;height:11px;border-radius:50%;background:${silk}`);
+  const refPx = Math.round(Math.max(20, Math.min(30, h * 0.18)));
+  if (o.ref) div(wrap, `left:${-yardPad}px;top:${-yardPad - refPx - 8}px;font:400 ${refPx}px ${ctx.style.fonts.mono};line-height:1;color:${silk};white-space:pre`, o.ref);
+  const part = div(wrap, "inset:0");
+  const pinLen = Math.round(Math.max(9, Math.min(18, Math.min(w, h) * 0.08)));
+  const n = o.pins ?? Math.max(3, Math.round(h / 30));
+  const strip = (side: Side, len: number) => {
+    const pad = len * 0.08;
+    const step = (len - pad * 2) / n;
+    const dir = side === "left" || side === "right" ? "to bottom" : "to right";
+    const bg = `repeating-linear-gradient(${dir}, var(--pin) 0 ${(step * 0.55).toFixed(1)}px, transparent ${(step * 0.55).toFixed(1)}px ${step.toFixed(1)}px)`;
+    const pos =
+      side === "left" ? `left:${-pinLen}px;top:${pad}px;width:${pinLen}px;height:${len - pad * 2}px`
+      : side === "right" ? `right:${-pinLen}px;top:${pad}px;width:${pinLen}px;height:${len - pad * 2}px`
+      : side === "top" ? `top:${-pinLen}px;left:${pad}px;height:${pinLen}px;width:${len - pad * 2}px`
+      : `bottom:${-pinLen}px;left:${pad}px;height:${pinLen}px;width:${len - pad * 2}px`;
+    div(part, `${pos};background:${bg}`);
+  };
+  strip("left", h);
+  strip("right", h);
+  if (o.sides === 4) {
+    strip("top", w);
+    strip("bottom", w);
+  }
+  const body = div(part, `inset:0;background:${ink(ctx, "body")};border-radius:4px;box-shadow:0 5px 0 rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.07)`);
+  div(body, `left:${Math.round(Math.min(w, h) * 0.08)}px;top:${Math.round(Math.min(w, h) * 0.08)}px;width:${Math.round(Math.min(w, h) * 0.09)}px;height:${Math.round(Math.min(w, h) * 0.09)}px;border-radius:50%;background:rgba(255,255,255,.1)`);
+  const lines = [o.label, ...(o.sub ? [o.sub] : [])];
+  const px = o.labelPx ?? Math.round(Math.min(h * (o.sub ? 0.24 : 0.34), (w * 0.84) / Math.max(1, ...lines.map(monoEm))));
+  const face = div(body, `inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:${Math.round(px * 0.25)}px;font-family:${ctx.style.fonts.mono};color:${ink(ctx, "inkSoft")};line-height:1;white-space:pre`);
+  div(face, `position:relative;font-size:${px}px`, o.label);
+  if (o.sub) div(face, `position:relative;font-size:${Math.round(px * 0.62)}px;opacity:.75`, o.sub);
+  const at = o.at ?? 0;
+  return (t) => {
+    const on = t >= at;
+    wrap.style.visibility = on ? "visible" : "hidden";
+    if (!on) return;
+    const e = ease.outCubic(clamp((t - at) / 0.16));
+    part.style.transform = `translateY(${(-(1 - e) * 26).toFixed(2)}px) scale(${(1.18 - 0.18 * e).toFixed(4)})`;
+    part.style.opacity = String(Math.min(1, (t - at) / 0.05));
+    const solder = t >= at + 0.16 && t < at + 0.3 ? 1 - (t - at - 0.16) / 0.14 : 0;
+    const k = Math.max(solder, heat(t, o.hits));
+    wrap.style.setProperty("--pin", k > 0 ? `color-mix(in srgb, ${hot} ${Math.round(k * 100)}%, ${gold})` : gold);
+    const lit = heat(t, o.hits);
+    body.style.boxShadow = `0 5px 0 rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.07)${lit > 0 ? `, 0 0 0 ${(2 + lit * 3).toFixed(1)}px color-mix(in srgb, ${gold} ${Math.round(lit * 100)}%, transparent)` : ""}`;
+    face.style.color = lit > 0 ? `color-mix(in srgb, ${gold} ${Math.round(lit * 100)}%, ${ink(ctx, "inkSoft")})` : ink(ctx, "inkSoft");
+  };
+}
+
+/**
+ * 실크 글 — 스퀴지가 지나간 쪽부터 실크 잉크가 찍힌다. text 를 t 의 함수로 주고 prints 에 다시 찍을 시각을 주면
+ * 그때마다 새 글로 다시 찍힌다(박마다 바뀌는 모델 이름 따위)
+ */
+export function silkText(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; text: string | ((t: number) => string); x: number; y: number; size: number; at?: number; dur?: number; prints?: readonly number[]; font?: "mono" | "display" | "sans"; color?: string; anchor?: "left" | "center" | "right"; weight?: number; tracking?: string },
+): (t: number) => void {
+  const { ctx } = o;
+  const shift = o.anchor === "center" ? "translateX(-50%)" : o.anchor === "right" ? "translateX(-100%)" : "none";
+  const box = div(el, `left:${o.x}px;top:${o.y}px;transform:${shift};white-space:pre;line-height:1`);
+  const txt = div(box, `position:relative;font-family:${ctx.style.fonts[o.font ?? "mono"]};font-size:${o.size}px;font-weight:${o.weight ?? 400};letter-spacing:${o.tracking ?? "0.02em"};color:${ink(ctx, o.color ?? "silk")}`);
+  const blade = div(box, `top:-14%;bottom:-14%;width:${Math.max(3, Math.round(o.size * 0.05))}px;background:${ink(ctx, "silk")};border-radius:2px;opacity:.85;display:none`);
+  const text = typeof o.text === "function" ? o.text : () => o.text as string;
+  const prints = [o.at ?? 0, ...(o.prints ?? [])].sort((a, b) => a - b);
+  return (t) => {
+    if (t < prints[0]) {
+      box.style.visibility = "hidden";
+      return;
+    }
+    box.style.visibility = "visible";
+    const s = text(t);
+    if (txt.textContent !== s) txt.textContent = s;
+    const from = prints.filter((p) => p <= t).at(-1)!;
+    const dur = o.dur ?? Math.min(0.32, 0.08 + [...s].length * 0.012);
+    const p = clamp((t - from) / dur);
+    txt.style.clipPath = p >= 1 ? "none" : `inset(-20% ${((1 - p) * 100).toFixed(2)}% -20% 0)`;
+    blade.style.display = p < 1 ? "block" : "none";
+    blade.style.left = `${(p * 100).toFixed(2)}%`;
+  };
+}
+
+// 7 세그먼트 a b c d e f g
+const SEG: Record<string, string> = {
+  "0": "abcdef", "1": "bc", "2": "abged", "3": "abgcd", "4": "fgbc", "5": "afgcd", "6": "afgedc", "7": "abc", "8": "abcdefg", "9": "abcdfg",
+  "-": "g", " ": "", A: "abcefg", b: "cdefg", C: "adef", d: "bcdeg", E: "adefg", F: "aefg", H: "bcefg", L: "def", P: "abefg", n: "ceg", o: "cdeg", r: "eg", t: "defg", U: "bcdef",
+};
+
+/**
+ * 7 세그먼트 표시기 — 기판에 얹은 LED 숫자판. 켜지는 순간 0.1초 램프 시험(전 세그먼트)을 하고 값을 띄운다.
+ * 꺼진 세그먼트는 연기 유리 뒤에 옅게 비친다. text 를 t 의 함수로 주면 굴러가는 값(cells 로 칸 수를 박는다)
+ */
+export function sevenSeg(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; x: number; y: number; h: number; text: string | ((t: number) => string); cells?: number; at?: number; color?: string; bezel?: boolean; align?: "left" | "right" | "center" },
+): (t: number) => void {
+  const { ctx } = o;
+  const text = typeof o.text === "function" ? o.text : () => o.text as string;
+  const count = (s: string) => [...s].filter((c) => c !== ".").length;
+  const cells = o.cells ?? count(text(Number.POSITIVE_INFINITY));
+  const H = o.h;
+  const cw = H * 0.54;
+  const gap = H * 0.16;
+  const th = H * 0.115;
+  const pad = o.bezel === false ? th : H * 0.2;
+  const W = cells * cw + (cells - 1) * gap + pad * 2 + H * 0.12;
+  const left = o.align === "right" ? o.x - W : o.align === "center" ? o.x - W / 2 : o.x;
+  const area: Area = [left - 10, o.y - 10, W + 20, H + pad * 2 + 30];
+  const { g, clear } = canvas(el, area);
+  const lit = ink(ctx, o.color ?? "gold");
+  const ghost = fade(lit, 0.1);
+  const hot = ink(ctx, "hot");
+  const at = o.at ?? 0;
+  const skew = Math.tan((8 * Math.PI) / 180);
+  const seg = (cx: number, top: number, s: string, on: (k: string) => boolean, dp: boolean) => {
+    const hw = cw;
+    const hh = H;
+    const t2 = th / 2;
+    const bars: Record<string, [number, number, number, number, boolean]> = {
+      a: [cx + t2, top, hw - th, th, true], d: [cx + t2, top + hh - th, hw - th, th, true], g: [cx + t2, top + hh / 2 - t2, hw - th, th, true],
+      f: [cx, top + t2, th, hh / 2 - th, false], b: [cx + hw - th, top + t2, th, hh / 2 - th, false],
+      e: [cx, top + hh / 2 + t2, th, hh / 2 - th, false], c: [cx + hw - th, top + hh / 2 + t2, th, hh / 2 - th, false],
+    };
+    for (const k of "abcdefg") {
+      const [bx, by, bw, bh, horiz] = bars[k];
+      const isOn = on(k) && SEG[s]?.includes(k);
+      g.fillStyle = isOn ? lit : ghost;
+      g.beginPath();
+      const ins = th * 0.42;
+      if (horiz) {
+        g.moveTo(bx + ins * 0.2, by + bh / 2);
+        g.lineTo(bx + ins, by);
+        g.lineTo(bx + bw - ins, by);
+        g.lineTo(bx + bw - ins * 0.2, by + bh / 2);
+        g.lineTo(bx + bw - ins, by + bh);
+        g.lineTo(bx + ins, by + bh);
+      } else {
+        g.moveTo(bx + bw / 2, by + ins * 0.2);
+        g.lineTo(bx + bw, by + ins);
+        g.lineTo(bx + bw, by + bh - ins);
+        g.lineTo(bx + bw / 2, by + bh - ins * 0.2);
+        g.lineTo(bx, by + bh - ins);
+        g.lineTo(bx, by + ins);
+      }
+      g.closePath();
+      g.fill();
+    }
+    g.fillStyle = dp ? lit : ghost;
+    dot(g, cx + hw + gap * 0.5, top + hh - th / 2, th * 0.55);
+  };
+  return (t) => {
+    clear();
+    if (t < at) return;
+    const top = o.y + pad;
+    if (o.bezel !== false) {
+      g.fillStyle = mix(ink(ctx, "mask"), "#000000", 0.78);
+      g.beginPath();
+      g.roundRect(left, o.y, W, H + pad * 2, H * 0.06);
+      g.fill();
+      // 모듈 다리 — 기판에 꽂힌 부품이라는 표시
+      g.fillStyle = ink(ctx, "gold");
+      const legs = Math.max(4, cells * 2);
+      for (let i = 0; i < legs; i++) g.fillRect(left + (W / legs) * (i + 0.3), o.y + H + pad * 2, (W / legs) * 0.4, H * 0.07);
+    }
+    const lamp = t < at + 0.1;
+    const raw = lamp ? "8".repeat(cells) : text(t);
+    const chars: { c: string; dp: boolean }[] = [];
+    for (const c of raw) {
+      if (c === "." && chars.length) chars[chars.length - 1].dp = true;
+      else chars.push({ c, dp: false });
+    }
+    while (chars.length < cells) chars.unshift({ c: " ", dp: false });
+    g.save();
+    g.translate(H * 0.06, 0);
+    g.transform(1, 0, -skew, 1, skew * (top + H), 0);
+    chars.slice(-cells).forEach((ch, i) => seg(left + pad + i * (cw + gap), top, ch.c, () => true, lamp || ch.dp));
+    g.restore();
+    if (lamp) {
+      g.fillStyle = hot;
+      g.globalAlpha = 0.18;
+      g.fillRect(left, o.y, W, H + pad * 2);
+      g.globalAlpha = 1;
+    }
+  };
+}
+
+/**
+ * SMD LED 줄 — 자리마다 작은 LED 가 얹혀 lit(i, t) 만큼 켜진다(0..1). 하루 24시간 고리·호출 수 세기·막대 따위를 LED 로 센다
+ */
+export function ledArray(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; points: readonly PtIn[]; lit: (i: number, t: number) => number; size?: number; at?: number; angle?: (i: number) => number },
+): (t: number) => void {
+  const { ctx } = o;
+  const s = o.size ?? 22;
+  const { g, clear } = canvas(el, bbox(o.points, s * 2.2));
+  const gold = ink(ctx, "gold");
+  const hot = ink(ctx, "hot");
+  const at = o.at ?? 0;
+  return (t) => {
+    clear();
+    if (t < at) return;
+    o.points.forEach(([x, y], i) => {
+      const v = clamp(o.lit(i, t));
+      g.save();
+      g.translate(x, y);
+      g.rotate(((o.angle?.(i) ?? 0) * Math.PI) / 180);
+      // 빛 번짐은 다 켜진 LED 만 — 반쯤 켜진 줄까지 번지면 이웃끼리 엉겨 한 덩어리로 읽힌다
+      if (v > 0.9) {
+        g.fillStyle = gold;
+        g.globalAlpha = 0.32 * v;
+        dot(g, 0, 0, s * 0.95);
+        g.globalAlpha = 1;
+      }
+      g.fillStyle = ink(ctx, "silk");
+      g.fillRect(-s / 2, -s * 0.32, s, s * 0.64);
+      g.fillStyle = v > 0 ? mix(gold, hot, v) : mix(gold, ink(ctx, "mask"), 0.62);
+      g.fillRect(-s * 0.32, -s * 0.2, s * 0.64, s * 0.4);
+      g.restore();
+    });
+  };
+}
+
+/**
+ * 한 주소 = 금도금 엣지 커넥터(골드 핑거). at 부터 핑거가 차례로 도금되고, hits 마다 그 핀으로 요청이 들어와 핑거가 달아오른다.
+ * 트레이스는 pcb.ts fingerPins 의 점에서 뽑는다
+ */
+export function edgeConnector(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; x: number; y: number; w: number; h: number; pins: number; side?: Side; ref?: string; at?: number; hits?: readonly { pin: number; t: number }[] },
+): (t: number) => void {
+  const { ctx, x, y, w, h, pins } = o;
+  const side = o.side ?? "left";
+  const vertical = side === "left" || side === "right";
+  const { g, clear } = canvas(el, [x - 8, y - 8, w + 16, h + 16]);
+  const gold = ink(ctx, "gold");
+  const hot = ink(ctx, "hot");
+  const at = o.at ?? 0;
+  const ends = fingerPins(x, y, w, h, pins, side);
+  const silk = ink(ctx, "silk");
+  if (o.ref) div(el, `left:${vertical ? x : x - 4}px;top:${vertical ? y - 44 : y - 40}px;font:400 30px ${ctx.style.fonts.mono};line-height:1;color:${silk}`, o.ref);
+  return (t) => {
+    clear();
+    if (t < at) return;
+    const step = (vertical ? h : w) / pins;
+    ends.forEach((_, i) => {
+      const k = clamp((t - at - (i / pins) * 0.22) / 0.06);
+      if (k <= 0) return;
+      const lit = heat(t, o.hits?.filter((hh) => hh.pin === i).map((hh) => hh.t));
+      g.fillStyle = lit > 0 ? mix(gold, hot, lit) : gold;
+      g.globalAlpha = k;
+      g.beginPath();
+      if (vertical) g.roundRect(x, y + step * i + step * 0.18, w, step * 0.64, step * 0.18);
+      else g.roundRect(x + step * i + step * 0.18, y, step * 0.64, h, step * 0.18);
+      g.fill();
+    });
+    g.globalAlpha = 1;
+  };
+}
+
+/**
+ * 드롭 = 전원 투입. 기판 전체가 한 번 금빛으로 들뜨고, 전원점에서 빛 고리가 기판을 지나간다. 흔들림을 돌려준다(내용 틀에)
+ */
+export function powerOn(el: HTMLElement, o: { ctx: SceneCtx; drop?: number; origin?: PtIn }): (t: number) => DropBurstState {
+  const { ctx } = o;
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const flood = div(el, `inset:0;background:${ink(ctx, "gold")};mix-blend-mode:screen;opacity:0`);
+  const { g, clear } = canvas(el, [0, 0, W, H], "mix-blend-mode:screen");
+  const [ox, oy] = o.origin ?? [W / 2, H / 2];
+  const far = Math.hypot(Math.max(ox, W - ox), Math.max(oy, H - oy));
+  const gold = ink(ctx, "gold");
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "powerOn" });
+    flood.style.opacity = (s.flash * 0.42).toFixed(3);
+    clear();
+    if (s.ring.opacity > 0.02) {
+      g.strokeStyle = gold;
+      for (let k = 0; k < 3; k++) {
+        const R = (s.ring.scale / 2.8) * far * (1 - k * 0.16);
+        if (R <= 0) continue;
+        g.globalAlpha = s.ring.opacity * (1 - k * 0.28);
+        g.lineWidth = 16 - k * 4;
+        g.beginPath();
+        g.arc(ox, oy, R, 0, Math.PI * 2);
+        g.stroke();
+      }
+      g.globalAlpha = 1;
+    }
+    return s;
+  };
+}
+
+/**
+ * 지연 = 저항. 트레이스 위에 얹힌 저항 — 몸체·양 끝 금 단자, 실크로 부품 기호와 값(ms). 같은 자리를 currentPulse 의 holds 로 주면
+ * 펄스가 여기서 그 값만큼 머문다. hits 동안(펄스가 머무는 동안) 몸체가 달아오른다
+ */
+export function resistor(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; x: number; y: number; len?: number; vertical?: boolean; value: string; ref?: string; at?: number; hot?: readonly [number, number][] },
+): (t: number) => void {
+  const { ctx, x, y } = o;
+  const len = o.len ?? 150;
+  const th = len * 0.34;
+  const gold = ink(ctx, "gold");
+  const silk = ink(ctx, "silk");
+  const wrap = div(el, `left:${x}px;top:${y}px;width:0;height:0`);
+  const rot = o.vertical ? "rotate(90deg)" : "none";
+  const part = div(wrap, `left:${-len / 2}px;top:${-th / 2}px;width:${len}px;height:${th}px;transform:${rot}`);
+  div(part, `left:-6%;top:12%;width:20%;height:76%;background:${gold};border-radius:3px`);
+  div(part, `right:-6%;top:12%;width:20%;height:76%;background:${gold};border-radius:3px`);
+  const body = div(part, `left:12%;top:0;width:76%;height:100%;background:${ink(ctx, "body")};border-radius:3px;box-shadow:0 4px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08)`);
+  const px = Math.round(Math.max(24, th * 0.62));
+  const label = div(wrap, `left:${o.vertical ? th / 2 + 18 : -len / 2}px;top:${o.vertical ? -px / 2 : th / 2 + 14}px;font:400 ${px}px ${ctx.style.fonts.mono};line-height:1;color:${silk};white-space:pre`, `${o.ref ? `${o.ref} ` : ""}${o.value}`);
+  const at = o.at ?? 0;
+  return (t) => {
+    const on = t >= at;
+    wrap.style.visibility = on ? "visible" : "hidden";
+    if (!on) return;
+    const e = ease.outCubic(clamp((t - at) / 0.16));
+    part.style.transform = `${rot === "none" ? "" : rot + " "}translateY(${(-(1 - e) * 20).toFixed(2)}px) scale(${(1.2 - 0.2 * e).toFixed(4)})`;
+    let k = 0;
+    for (const [a, b] of o.hot ?? []) if (t >= a && t < b) k = Math.max(k, 0.55 + 0.45 * Math.abs(Math.sin((t - a) * 18)));
+    body.style.background = k > 0 ? `color-mix(in srgb, ${gold} ${Math.round(k * 70)}%, ${ink(ctx, "body")})` : ink(ctx, "body");
+    label.style.color = k > 0 ? gold : silk;
+  };
+}

package/themes/circuit-board/pcb.ts

@@ -0,0 +1,103 @@
+// 기판 결 기하 — effects.ts·slots.ts·견본이 같이 쓴다. effects.ts 내보내기는 theme.json 효과 목록과 같아야 해서 따로 둔다
+export type Pt = [number, number];
+export type PtIn = readonly [number, number];
+
+/**
+ * 점들을 기판 결로 잇는다 — 두 점 사이를 긴 축으로 곧게 가다 45° 로 꺾어 붙고 다시 곧게.
+ * bend 는 곧은 몫 가운데 어디서 꺾나(0 = 바로 꺾고 곧게 · 0.5 = 가운데 · 1 = 끝까지 곧게 가서 꺾는다)
+ */
+export function route45(pts: readonly PtIn[], bend = 0.5): Pt[] {
+  if (pts.length < 2) return pts.map((p) => [p[0], p[1]]);
+  const out: Pt[] = [[pts[0][0], pts[0][1]]];
+  for (let i = 1; i < pts.length; i++) {
+    const [ax, ay] = pts[i - 1];
+    const [bx, by] = pts[i];
+    const dx = bx - ax;
+    const dy = by - ay;
+    const d = Math.min(Math.abs(dx), Math.abs(dy));
+    if (Math.abs(dx) >= Math.abs(dy)) {
+      const s = (Math.abs(dx) - d) * bend * Math.sign(dx);
+      out.push([ax + s, ay], [ax + s + d * Math.sign(dx), by], [bx, by]);
+    } else {
+      const s = (Math.abs(dy) - d) * bend * Math.sign(dy);
+      out.push([ax, ay + s], [bx, ay + s + d * Math.sign(dy)], [bx, by]);
+    }
+  }
+  return out.filter((p, i) => i === 0 || Math.hypot(p[0] - out[i - 1][0], p[1] - out[i - 1][1]) > 0.01);
+}
+
+export interface Path {
+  pts: Pt[];
+  cum: number[];
+  len: number;
+}
+
+export function measure(pts: readonly PtIn[]): Path {
+  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]));
+  return { pts: pts.map((p) => [p[0], p[1]]), cum, len: cum[cum.length - 1] };
+}
+
+export function pointAt(p: Path, d: number): Pt {
+  const x = Math.max(0, Math.min(p.len, d));
+  let i = 1;
+  while (i < p.pts.length - 1 && p.cum[i] < x) i++;
+  const seg = p.cum[i] - p.cum[i - 1] || 1;
+  const k = (x - p.cum[i - 1]) / seg;
+  return [p.pts[i - 1][0] + (p.pts[i][0] - p.pts[i - 1][0]) * k, p.pts[i - 1][1] + (p.pts[i][1] - p.pts[i - 1][1]) * k];
+}
+
+/** d0 부터 d1 까지의 꺾은선 */
+export function slice(p: Path, d0: number, d1: number): Pt[] {
+  const a = Math.max(0, Math.min(p.len, d0));
+  const b = Math.max(a, Math.min(p.len, d1));
+  const out: Pt[] = [pointAt(p, a)];
+  for (let i = 1; i < p.pts.length - 1; i++) if (p.cum[i] > a && p.cum[i] < b) out.push(p.pts[i]);
+  out.push(pointAt(p, b));
+  return out;
+}
+
+export function stroke(g: CanvasRenderingContext2D, pts: readonly PtIn[]): void {
+  if (pts.length < 2) return;
+  g.beginPath();
+  g.moveTo(pts[0][0], pts[0][1]);
+  for (let i = 1; i < pts.length; i++) g.lineTo(pts[i][0], pts[i][1]);
+  g.stroke();
+}
+
+export type Side = "left" | "right" | "top" | "bottom";
+
+/** 엣지 커넥터 핑거 가운데 점 — 트레이스를 여기서 뽑는다. 핑거는 변을 따라 고르게, 끝 반 칸씩 비운다 */
+export function fingerPins(x: number, y: number, w: number, h: number, pins: number, side: Side): Pt[] {
+  const along = side === "left" || side === "right" ? h : w;
+  const step = along / pins;
+  return Array.from({ length: pins }, (_, i): Pt => {
+    const c = step * (i + 0.5);
+    if (side === "left") return [x + w, y + c];
+    if (side === "right") return [x, y + c];
+    if (side === "top") return [x + c, y + h];
+    return [x + c, y];
+  });
+}
+
+/** 펄스 하나가 출발 뒤 τ 초에 간 거리 — hold 자리(길이 비율)에서 그 초만큼 머문다(저항 = 지연) */
+export function travelled(tau: number, len: number, speed: number, holds: readonly { at: number; sec: number }[]): number {
+  if (tau <= 0) return 0;
+  let d = 0;
+  let left = tau;
+  for (const h of [...holds].sort((a, b) => a.at - b.at)) {
+    const stop = h.at * len;
+    const run = (stop - d) / speed;
+    if (left <= run) return d + left * speed;
+    left -= run;
+    d = stop;
+    if (left <= h.sec) return d;
+    left -= h.sec;
+  }
+  return Math.min(len, d + left * speed);
+}
+
+/** 펄스가 끝에 닿는 데 걸리는 초 */
+export function travelTime(len: number, speed: number, holds: readonly { at: number; sec: number }[]): number {
+  return len / speed + holds.reduce((a, h) => a + h.sec, 0);
+}