kasaframe 0.1.1 → 0.1.4

package/themes/data-journal/effects.ts

@@ -0,0 +1,570 @@
+import { applyStyle, clamp, ease, rand, type SceneCtx } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+
+export type Pt = [number, number];
+type Font = "display" | "sans" | "mono";
+type Paint = (t: number) => void;
+
+const NS = "http://www.w3.org/2000/svg";
+const col = (ctx: SceneCtx, k: string): string => ctx.style.colors[k] ?? k;
+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, 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;
+}
+
+function svg(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;
+}
+
+function node<K extends keyof SVGElementTagNameMap>(parent: SVGElement, tag: K, attrs: Record<string, string | number>): SVGElementTagNameMap[K] {
+  const e = document.createElementNS(NS, tag);
+  for (const [k, v] of Object.entries(attrs)) e.setAttribute(k, String(v));
+  parent.append(e);
+  return e;
+}
+
+const font = (ctx: SceneCtx, f: Font, weight: number, size: number) => `${weight} ${size}px ${ctx.style.fonts[f]}`;
+const grow = (t: number, at: number, dur: number) => (t < at ? 0 : ease.outCubic(clamp((t - at) / Math.max(1e-3, dur))));
+
+// 글 폭(px) — 큰 숫자 칸을 가장 긴 값에 맞춰 세는 동안 자리가 흔들리지 않게
+function textWidth(ctx: SceneCtx, text: string, size: number, weight = 500, f: Font = "sans"): number {
+  const g = document.createElement("canvas").getContext("2d")!;
+  g.font = font(ctx, f, weight, size);
+  return g.measureText(text).width;
+}
+
+/** 지면 — 연어색 신문 종이 한 장, 아주 옅은 섬유 결. 서 있다(움직이는 것은 차트와 그것을 짚는 커서뿐) */
+export function paperPage(el: HTMLElement, o: { ctx: SceneCtx; seed?: string }): Paint {
+  const { ctx } = o;
+  div(el, `inset:0;background:${col(ctx, "bg")};`);
+  const cv = document.createElement("canvas");
+  cv.width = Math.round(ctx.meta.width / 3);
+  cv.height = Math.round(ctx.meta.height / 3);
+  cv.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0.5;";
+  el.append(cv);
+  const g = cv.getContext("2d")!;
+  const seed = o.seed ?? "paper";
+  for (let i = 0; i < 900; i++) {
+    g.fillStyle = rgba(col(ctx, i % 3 ? "raised" : "surface"), 0.35);
+    g.fillRect(rand(seed, i) * cv.width, rand(seed, i + 9000) * cv.height, 1 + rand(seed, i + 18000) * 3, 1);
+  }
+  return () => {};
+}
+
+/**
+ * 제목·부제·머리말·출처 — 낱말이 아래에서 차례로 올라와 앉는다(chars 면 글자마다). swap 이면 그 시각에 글이 위로 빠지고 새 글이 아래에서 든다.
+ * kind 가 위계를 정한다: head 세리프 굵게 · dek 산세리프 · kicker 강조색 작은 머리말과 짧은 줄 · source 작은 회색
+ */
+export function headline(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; text: string; x: number; y: number; at: number; kind?: "head" | "dek" | "kicker" | "source" | "mono"; size?: number; align?: "left" | "center" | "right"; color?: string; stagger?: number; chars?: boolean; swap?: { at: number; text: string }[]; until?: number },
+): Paint {
+  const { ctx } = o;
+  const kind = o.kind ?? "head";
+  const spec = {
+    head: { f: "display" as Font, w: 700, size: 84, color: "ink" },
+    dek: { f: "sans" as Font, w: 500, size: 40, color: "inkSoft" },
+    kicker: { f: "sans" as Font, w: 700, size: 32, color: "accentText" },
+    source: { f: "sans" as Font, w: 500, size: 28, color: "dim" },
+    mono: { f: "mono" as Font, w: 700, size: 64, color: "ink" },
+  }[kind];
+  const size = o.size ?? spec.size;
+  const anchor = o.align === "center" ? "translateX(-50%)" : o.align === "right" ? "translateX(-100%)" : "";
+  const box = div(el, `left:${o.x}px;top:${o.y - size * 0.6}px;font:${font(ctx, spec.f, spec.w, size)};line-height:1.2;white-space:pre;color:${col(ctx, o.color ?? spec.color)};transform:${anchor};`);
+  if (kind === "kicker") {
+    const rule = div(box, `left:0;top:-${Math.round(size * 0.55)}px;height:${Math.max(3, Math.round(size * 0.14))}px;width:${Math.round(size * 1.8)}px;background:${col(ctx, "accent")};transform-origin:0 50%;`);
+    rule.dataset.rule = "1";
+  }
+  const versions = [{ at: o.at, text: o.text }, ...(o.swap ?? [])].sort((a, b) => a.at - b.at);
+  const lines = versions.map((v) => {
+    const line = document.createElement("div");
+    line.style.cssText = "position:relative;overflow:hidden;padding:0.06em 0.04em 0.1em;margin:-0.06em -0.04em -0.1em;";
+    const units = o.chars ? Array.from(v.text) : v.text.split(/(\s+)/).filter(Boolean);
+    const spans = units.map((u) => {
+      const s = document.createElement("span");
+      s.textContent = u;
+      s.style.cssText = "display:inline-block;white-space:pre;";
+      line.append(s);
+      return s;
+    });
+    box.append(line);
+    return { line, spans, v };
+  });
+  const rule = box.querySelector<HTMLDivElement>("[data-rule]");
+  const stagger = o.stagger ?? (o.chars ? 0.02 : 0.05);
+  return (t) => {
+    const on = t >= o.at && (o.until === undefined || t < o.until);
+    box.style.display = on ? "" : "none";
+    if (!on) return;
+    if (rule) rule.style.transform = `scaleX(${grow(t, o.at, 0.3).toFixed(3)})`;
+    lines.forEach((L, k) => {
+      const next = lines[k + 1]?.v.at ?? Infinity;
+      const out = clamp((t - next) / 0.18);
+      const live = t >= L.v.at && out < 1;
+      L.line.style.display = live ? "" : "none";
+      if (!live) return;
+      // 앞 글이 빠질 동안 새 글은 같은 자리 아래에서 — 두 줄이 겹쳐 보이지 않게 앞 줄은 절대 자리로 뺀다
+      L.line.style.position = k < lines.length - 1 && t >= next ? "absolute" : "relative";
+      L.spans.forEach((s, i) => {
+        const p = ease.outCubic(clamp((t - L.v.at - i * stagger) / 0.22));
+        const y = (1 - p) * 110 - ease.inCubic(out) * 110;
+        s.style.transform = `translateY(${y.toFixed(1)}%)`;
+      });
+    });
+  };
+}
+
+export interface BarItem {
+  label: string;
+  value: number;
+  /** 막대 끝 글 — 없으면 value */
+  text?: string;
+  hot?: boolean;
+}
+
+export interface Rows {
+  (t: number): void;
+  /** i 번째 막대 끝 자리 — 커서·주석이 짚는다 */
+  end(i: number): Pt;
+}
+
+/** 막대 순위 — 왼쪽에 이름, 바닥선에서 막대가 자라고 끝에 값이 붙는다. 회갈색 맥락 막대 사이에 강조 하나(hot) */
+export function barRank(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; x: number; y: number; w: number; rowH: number; items: BarItem[]; at: number; stagger?: number; dur?: number; max?: number; labelW?: number; size?: number },
+): Rows {
+  const { ctx } = o;
+  const size = o.size ?? Math.round(o.rowH * 0.42);
+  const labelW = o.labelW ?? 360;
+  const x0 = o.x + labelW + 24;
+  const span = o.w - labelW - 24 - size * 4;
+  const max = o.max ?? Math.max(...o.items.map((i) => i.value));
+  const base = div(el, `left:${x0 - 1}px;top:${o.y - 8}px;width:2px;height:${o.items.length * o.rowH + 16}px;background:${col(ctx, "ink")};transform-origin:50% 0;`);
+  const rows = o.items.map((it, i) => {
+    const top = o.y + i * o.rowH;
+    const label = div(el, `left:${o.x}px;top:${top}px;width:${labelW}px;height:${o.rowH}px;display:flex;align-items:center;justify-content:flex-end;font:${font(ctx, "sans", it.hot ? 700 : 500, size)};color:${col(ctx, it.hot ? "ink" : "inkSoft")};white-space:nowrap;`, it.label);
+    const len = (it.value / max) * span;
+    const bar = div(el, `left:${x0}px;top:${top + o.rowH * 0.22}px;height:${o.rowH * 0.56}px;width:${len}px;background:${col(ctx, it.hot ? "accent" : "context")};transform-origin:0 50%;`);
+    const val = div(el, `left:${x0 + len + 16}px;top:${top}px;height:${o.rowH}px;display:flex;align-items:center;font:${font(ctx, "sans", 700, size)};color:${col(ctx, it.hot ? "accentText" : "ink")};white-space:nowrap;`, it.text ?? String(it.value));
+    return { label, bar, val, len, top };
+  });
+  const dur = o.dur ?? 0.42;
+  const stagger = o.stagger ?? 0.12;
+  return Object.assign(
+    (t: number) => {
+      base.style.transform = `scaleY(${grow(t, o.at, 0.25).toFixed(3)})`;
+      base.style.display = t >= o.at ? "" : "none";
+      rows.forEach((r, i) => {
+        const at = o.at + i * stagger;
+        const u = grow(t, at, dur);
+        const on = t >= at;
+        r.label.style.display = r.bar.style.display = r.val.style.display = on ? "" : "none";
+        r.bar.style.transform = `scaleX(${Math.max(0.001, u).toFixed(4)})`;
+        r.label.style.opacity = String(clamp((t - at) / 0.15));
+        r.val.style.opacity = String(clamp((t - at - dur * 0.7) / 0.15));
+        r.val.style.transform = `translateX(${(-(1 - u) * r.len).toFixed(1)}px)`;
+      });
+    },
+    { end: (i: number): Pt => [x0 + rows[i].len, rows[i].top + o.rowH / 2] },
+  );
+}
+
+export interface Plot {
+  (t: number): void;
+  px(v: number): number;
+  py(v: number): number;
+}
+
+/**
+ * 선 그래프 — 가로 눈금선(1px 옅게)과 바닥선, 눈금 글, 회색 맥락선 위 강조선 하나가 왼쪽에서 오른쪽으로 그어지고 끝에 점과 직접 라벨.
+ * step 이면 계단(값이 시각마다 바뀌는 가격표). px·py 로 커서·띠·주석이 같은 눈금을 쓴다
+ */
+export function lineSeries(
+  el: HTMLElement,
+  o: {
+    ctx: SceneCtx;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    xDomain: [number, number];
+    yDomain: [number, number];
+    series: { points: Pt[]; hot?: boolean; label?: string; step?: boolean; dots?: boolean }[];
+    at: number;
+    dur?: number;
+    yTicks?: number[];
+    yFmt?: (v: number) => string;
+    xTicks?: { v: number; label: string }[];
+    size?: number;
+  },
+): Plot {
+  const { ctx } = o;
+  const px = (v: number) => o.x + ((v - o.xDomain[0]) / (o.xDomain[1] - o.xDomain[0])) * o.w;
+  const py = (v: number) => o.y + o.h - ((v - o.yDomain[0]) / (o.yDomain[1] - o.yDomain[0])) * o.h;
+  const size = o.size ?? 30;
+  const s = svg(el, ctx);
+  const grid = (o.yTicks ?? []).map((v) => {
+    const line = node(s, "line", { x1: o.x, x2: o.x + o.w, y1: py(v), y2: py(v), stroke: col(ctx, v === o.yDomain[0] ? "ink" : "grid"), "stroke-width": v === o.yDomain[0] ? 2.5 : 1.5 });
+    const label = div(el, `left:${o.x - 18}px;top:${py(v) - size * 0.62}px;transform:translateX(-100%);font:${font(ctx, "sans", 500, size)};color:${col(ctx, "dim")};white-space:nowrap;`, (o.yFmt ?? String)(v));
+    return { line, label };
+  });
+  const xt = (o.xTicks ?? []).map((tk) => div(el, `left:${px(tk.v)}px;top:${o.y + o.h + 14}px;transform:translateX(-50%);font:${font(ctx, "sans", 500, size)};color:${col(ctx, "dim")};white-space:nowrap;`, tk.label));
+  const lines = o.series.map((sr) => {
+    const pts: Pt[] = [];
+    sr.points.forEach(([vx, vy], i) => {
+      if (sr.step && i) pts.push([px(vx), py(sr.points[i - 1][1])]);
+      pts.push([px(vx), py(vy)]);
+    });
+    const d = pts.map(([x, y], i) => `${i ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)}`).join("");
+    const len = pts.slice(1).reduce((a, [x, y], i) => a + Math.hypot(x - pts[i][0], y - pts[i][1]), 0) || 1;
+    const path = node(s, "path", { d, fill: "none", stroke: col(ctx, sr.hot ? "accent" : "context"), "stroke-width": sr.hot ? 7 : 3.5, "stroke-linejoin": "round", "stroke-linecap": "round", "stroke-dasharray": `${len + 2} ${len + 2}` });
+    const last = pts[pts.length - 1];
+    const dots = (sr.dots ? sr.points.map(([vx, vy]) => [px(vx), py(vy)] as Pt) : [last]).map(([x, y]) => node(s, "circle", { cx: x, cy: y, r: sr.hot ? 11 : 7, fill: col(ctx, sr.hot ? "accent" : "context") }));
+    const label = sr.label ? div(el, `left:${last[0] + 22}px;top:${last[1] - size * 0.7}px;font:${font(ctx, "sans", 700, size * 1.15)};color:${col(ctx, sr.hot ? "accentText" : "dim")};white-space:nowrap;`, sr.label) : null;
+    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 dotAt = (sr.dots ? sr.points.map(([vx, vy]) => [px(vx), py(vy)] as Pt) : [last]).map(([x]) => {
+      const i = pts.findIndex(([qx]) => qx >= x - 0.5);
+      return (cum[Math.max(0, i)] ?? len) / len;
+    });
+    return { path, len, dots, label, dotAt };
+  });
+  const dur = o.dur ?? 0.8;
+  return Object.assign(
+    (t: number) => {
+      const g = grow(t, o.at, 0.3);
+      grid.forEach(({ line, label }) => {
+        line.setAttribute("x2", String(o.x + o.w * g));
+        label.style.opacity = String(g);
+      });
+      for (const x of xt) x.style.opacity = String(g);
+      const u = t < o.at + 0.1 ? 0 : ease.inOutQuad(clamp((t - o.at - 0.1) / dur));
+      for (const L of lines) {
+        L.path.setAttribute("stroke-dashoffset", String(((L.len + 2) * (1 - u)).toFixed(1)));
+        L.dots.forEach((d, i) => d.setAttribute("opacity", u >= L.dotAt[i] - 1e-3 ? "1" : "0"));
+        if (L.label) L.label.style.opacity = String(clamp((u - 0.95) / 0.05));
+      }
+    },
+    { px, py },
+  );
+}
+
+export interface Dots {
+  (t: number): void;
+  /** 그 시각까지 앉은 점 수 — 숫자가 같은 값을 센다 */
+  shown(t: number): number;
+  /** k 번째 점 자리(지금 시각) */
+  at(k: number, t: number): Pt;
+  /** k 번째 점이 떠오르는 시각 */
+  appearAt(k: number): number;
+}
+
+/**
+ * 점 줄 그림 = 하나하나 세는 단위 — 점 하나가 항목 하나. 열마다 아래에서 위로(perRow 개씩 줄 지어) 쌓이고, 강조 열만 강조색.
+ * scatter 면 점이 먼저 흩어진 자리에 하나씩 떠오르고(at~), gather 시각에 제 열로 모여든다. loose 는 어느 열에도 안 드는 점(목록 밖 항목) — 흩어진 자리에 흐리게 남는다
+ */
+export function dotStrip(
+  el: HTMLElement,
+  o: {
+    ctx: SceneCtx;
+    x: number;
+    y: number;
+    cols: { label?: string; count: number; hot?: boolean }[];
+    dot?: number;
+    gap?: number;
+    colW?: number;
+    perRow?: number;
+    at: number;
+    dur: number;
+    scatter?: { box: [number, number, number, number]; gather: number; dur?: number; seed?: string };
+    loose?: number;
+    labelSize?: number;
+    labelAt?: number;
+    counts?: boolean;
+  },
+): Dots {
+  const { ctx } = o;
+  const dot = o.dot ?? 16;
+  const gap = o.gap ?? 5;
+  const perRow = o.perRow ?? 1;
+  const step = dot + gap;
+  const colW = o.colW ?? perRow * step + 60;
+  const items: { home: Pt; from: Pt; hot: boolean; col: number; loose?: boolean }[] = [];
+  o.cols.forEach((c, ci) => {
+    for (let k = 0; k < c.count; k++) {
+      const home: Pt = [o.x + ci * colW + (k % perRow) * step + dot / 2, o.y - Math.floor(k / perRow) * step - dot / 2];
+      items.push({ home, from: home, hot: !!c.hot, col: ci });
+    }
+  });
+  const sc = o.scatter;
+  if (sc) {
+    const seed = sc.seed ?? "scatter";
+    for (let k = 0; k < (o.loose ?? 0); k++) items.push({ home: [0, 0], from: [0, 0], hot: false, col: o.cols.length, loose: true });
+    // 흩어진 순서는 회사가 섞이게 — 점의 자리도 섞는다
+    items.forEach((it, i) => {
+      it.from = [sc.box[0] + rand(seed, i) * sc.box[2], sc.box[1] + rand(seed, i + 777) * sc.box[3]];
+      if (it.loose) it.home = it.from;
+    });
+  }
+  const order = items.map((_, i) => i);
+  if (sc) order.sort((a, b) => rand("order", a) - rand("order", b));
+  const appear = new Array<number>(items.length);
+  order.forEach((idx, k) => (appear[idx] = o.at + (o.dur * k) / Math.max(1, items.length - 1)));
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const cv = document.createElement("canvas");
+  cv.width = W;
+  cv.height = H;
+  cv.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;";
+  el.append(cv);
+  const g = cv.getContext("2d")!;
+  const size = o.labelSize ?? 30;
+  const labels = o.cols.map((c, ci) => {
+    const cx = o.x + ci * colW + (Math.min(perRow, c.count) * step - gap) / 2;
+    const name = c.label ? div(el, `left:${cx}px;top:${o.y + 18}px;transform:translateX(-50%);font:${font(ctx, "sans", c.hot ? 700 : 500, size)};color:${col(ctx, c.hot ? "ink" : "inkSoft")};white-space:nowrap;`, c.label) : null;
+    const rows = Math.ceil(c.count / perRow);
+    const count = o.counts ? div(el, `left:${cx}px;top:${o.y - rows * step - size * 1.5}px;transform:translateX(-50%);font:${font(ctx, "sans", 700, size * 1.15)};color:${col(ctx, c.hot ? "accentText" : "ink")};`, String(c.count)) : null;
+    return { name, count, ci };
+  });
+  const gatherAt = sc?.gather ?? -Infinity;
+  const gdur = sc?.dur ?? 0.5;
+  const pos = (i: number, t: number): Pt => {
+    const it = items[i];
+    if (!sc) return it.home;
+    const u = ease.inOutCubic(clamp((t - gatherAt - it.col * 0.035) / gdur));
+    return [it.from[0] + (it.home[0] - it.from[0]) * u, it.from[1] + (it.home[1] - it.from[1]) * u];
+  };
+  const landed = (ci: number, t: number) => t >= gatherAt + ci * 0.035 + gdur;
+  return Object.assign(
+    (t: number) => {
+      g.clearRect(0, 0, W, H);
+      g.globalAlpha = 1;
+      items.forEach((it, i) => {
+        const k = t - appear[i];
+        if (k < 0) return;
+        const r = (dot / 2) * (k < 0.18 ? ease.outBack(clamp(k / 0.18)) : 1);
+        const hot = it.hot && (!sc || t >= gatherAt);
+        g.globalAlpha = it.loose ? 1 - 0.55 * clamp((t - gatherAt) / gdur) : 1;
+        g.fillStyle = col(ctx, hot ? "accent" : "context");
+        const [x, y] = pos(i, t);
+        g.beginPath();
+        g.arc(x, y, Math.max(0.1, r), 0, Math.PI * 2);
+        g.fill();
+      });
+      const lab = o.labelAt ?? (sc ? gatherAt + 0.1 : o.at);
+      for (const L of labels) {
+        const a = String(clamp((t - lab - L.ci * 0.035) / 0.2));
+        if (L.name) L.name.style.opacity = a;
+        if (L.count) L.count.style.opacity = String(sc ? (landed(L.ci, t) ? clamp((t - gatherAt - L.ci * 0.035 - gdur) / 0.15) : 0) : a);
+      }
+    },
+    { shown: (t: number) => appear.filter((a) => t >= a).length, at: (k: number, t: number) => pos(k, t), appearAt: (k: number) => appear[k] },
+  );
+}
+
+/** 기울기 차트 = 전·후 — 두 세로 기준선(머리 글) 사이를 값 선이 왼쪽에서 오른쪽으로 잇고, 양끝 점과 값 글. hot 은 강조색 */
+export function slopeLines(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; x0: number; x1: number; y: number; h: number; domain: [number, number]; headers?: [string, string]; pairs: { label: string; from: number; to: number; fromText: string; toText: string; hot?: boolean; at: number }[]; at: number; size?: number },
+): Paint {
+  const { ctx } = o;
+  const size = o.size ?? 36;
+  const py = (v: number) => o.y + o.h - ((v - o.domain[0]) / (o.domain[1] - o.domain[0])) * o.h;
+  const s = svg(el, ctx);
+  const axes = [o.x0, o.x1].map((x) => node(s, "line", { x1: x, x2: x, y1: o.y - 20, y2: o.y + o.h + 20, stroke: col(ctx, "ink"), "stroke-width": 2 }));
+  const heads = (o.headers ?? ["", ""]).map((h, i) => div(el, `left:${i ? o.x1 : o.x0}px;top:${o.y - 40 - size * 1.4}px;transform:translateX(-50%);font:${font(ctx, "sans", 700, size)};color:${col(ctx, "dim")};white-space:nowrap;`, h));
+  const pairs = o.pairs.map((p) => {
+    const [a, b]: [Pt, Pt] = [[o.x0, py(p.from)], [o.x1, py(p.to)]];
+    const tone = col(ctx, p.hot ? "accent" : "context");
+    const len = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    const line = node(s, "line", { x1: a[0], y1: a[1], x2: b[0], y2: b[1], stroke: tone, "stroke-width": p.hot ? 7 : 4, "stroke-linecap": "round", "stroke-dasharray": `${len + 2} ${len + 2}` });
+    const da = node(s, "circle", { cx: a[0], cy: a[1], r: 11, fill: tone });
+    const db = node(s, "circle", { cx: b[0], cy: b[1], r: 11, fill: tone });
+    const left = div(el, `left:${a[0] - 26}px;top:${a[1] - size * 0.66}px;transform:translateX(-100%);font:${font(ctx, "sans", 700, size)};color:${col(ctx, "ink")};white-space:nowrap;`, `${p.label} ${p.fromText}`);
+    const right = div(el, `left:${b[0] + 26}px;top:${b[1] - size * 0.66}px;font:${font(ctx, "sans", 700, size * 1.2)};color:${col(ctx, p.hot ? "accentText" : "ink")};white-space:nowrap;`, p.toText);
+    return { p, line, da, db, left, right, len };
+  });
+  return (t) => {
+    const g = grow(t, o.at, 0.3);
+    for (const a of axes) a.setAttribute("opacity", String(g));
+    for (const h of heads) h.style.opacity = String(g);
+    for (const P of pairs) {
+      const on = t >= P.p.at;
+      const u = grow(t, P.p.at + 0.08, 0.32);
+      P.line.setAttribute("stroke-dashoffset", String(((P.len + 2) * (1 - u)).toFixed(1)));
+      P.da.setAttribute("opacity", on ? "1" : "0");
+      P.left.style.opacity = String(clamp((t - P.p.at) / 0.12));
+      P.db.setAttribute("opacity", u >= 0.99 ? "1" : "0");
+      P.right.style.opacity = String(clamp((u - 0.9) / 0.1));
+    }
+  };
+}
+
+/** 구간 띠 = 예외·특별 구간(시간대) — 옅은 띠나 사선 빗금이 왼쪽에서 쓸려 들어오고 위에 작은 머리 글 */
+export function rangeBand(el: HTMLElement, o: { ctx: SceneCtx; x: number; y: number; w: number; h: number; at: number; dur?: number; label?: string; hatch?: boolean; tone?: string; size?: number }): Paint {
+  const { ctx } = o;
+  const tone = col(ctx, o.tone ?? "band");
+  const bg = o.hatch ? `repeating-linear-gradient(135deg, ${rgba(col(ctx, "accent"), 0.22)} 0 6px, ${rgba(tone, 0.9)} 6px 18px)` : tone;
+  const band = div(el, `left:${o.x}px;top:${o.y}px;width:${o.w}px;height:${o.h}px;background:${bg};`);
+  const size = o.size ?? 30;
+  const label = o.label ? div(el, `left:${o.x + 14}px;top:${o.y + 10}px;font:${font(ctx, "sans", 700, size)};color:${col(ctx, "accentText")};white-space:nowrap;`, o.label) : null;
+  const dur = o.dur ?? 0.3;
+  return (t) => {
+    const u = grow(t, o.at, dur);
+    band.style.display = t >= o.at ? "" : "none";
+    band.style.clipPath = `inset(0 ${((1 - u) * 100).toFixed(1)}% 0 0)`;
+    if (label) label.style.opacity = String(clamp((t - o.at - dur * 0.6) / 0.15));
+  };
+}
+
+/** 주석 = 짚어 설명하는 글 — 가는 지시선이 글에서 값까지 휘어 그어지고 끝에 작은 고리, 글은 그다음 떠오른다 */
+export function annotation(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; text: string; x: number; y: number; to?: Pt; at: number; dur?: number; align?: "left" | "right"; size?: number; color?: string; bend?: number; width?: number; weight?: number },
+): Paint {
+  const { ctx } = o;
+  const size = o.size ?? 34;
+  const box = div(el, `left:${o.x}px;top:${o.y}px;${o.width ? `width:${o.width}px;white-space:normal;` : "white-space:nowrap;"}font:${font(ctx, "sans", o.weight ?? 500, size)};line-height:1.3;color:${col(ctx, o.color ?? "ink")};transform:${o.align === "right" ? "translateX(-100%)" : ""};text-align:${o.align ?? "left"};`, o.text);
+  let path: SVGPathElement | null = null;
+  let ring: SVGCircleElement | null = null;
+  let len = 1;
+  if (o.to) {
+    const s = svg(el, ctx);
+    const from: Pt = [o.align === "right" ? o.x + 16 : o.x - 16, o.y + size * 0.65];
+    const [tx, ty] = o.to;
+    const bend = o.bend ?? 0.3;
+    const c: Pt = [(from[0] + tx) / 2 - (ty - from[1]) * bend, (from[1] + ty) / 2 + (tx - from[0]) * bend];
+    path = node(s, "path", { d: `M${from[0]} ${from[1]} Q${c[0]} ${c[1]} ${tx} ${ty}`, fill: "none", stroke: col(ctx, "ink"), "stroke-width": 2.5, "stroke-linecap": "round" });
+    len = path.getTotalLength?.() || Math.hypot(tx - from[0], ty - from[1]) * 1.2;
+    path.setAttribute("stroke-dasharray", `${len + 2} ${len + 2}`);
+    ring = node(s, "circle", { cx: tx, cy: ty, r: 9, fill: "none", stroke: col(ctx, "ink"), "stroke-width": 2.5 });
+  }
+  const dur = o.dur ?? 0.25;
+  return (t) => {
+    const u = grow(t, o.at, dur);
+    if (path) path.setAttribute("stroke-dashoffset", String(((len + 2) * (1 - u)).toFixed(1)));
+    if (ring) ring.setAttribute("opacity", u >= 0.98 ? "1" : "0");
+    const k = clamp((t - o.at - dur * 0.5) / 0.2);
+    box.style.opacity = String(k);
+    box.style.translate = `0 ${((1 - ease.outCubic(k)) * 14).toFixed(1)}px`;
+  };
+}
+
+/**
+ * 큰 숫자 = 기사 머리의 숫자 — 위에 짧은 강조 줄, 숫자가 세어 오르고(track 이면 그 값을 그대로 센다) 아래 작은 라벨.
+ * drop 이면 그 드롭에 강조색 띠가 숫자 뒤를 훑고 숫자가 한 번 튄다 — 섬광·흔들림은 dropBurst(shake 는 shakeEl 에)
+ */
+export function bigNumber(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; x: number; y: number; value: number; at: number; dur?: number; decimals?: number; prefix?: string; suffix?: string; size?: number; label?: string; align?: "left" | "center"; color?: string; track?: (t: number) => number; drop?: number; shakeEl?: HTMLElement; until?: number },
+): Paint {
+  const { ctx } = o;
+  const size = o.size ?? 220;
+  const fmt = (v: number) => `${o.prefix ?? ""}${v.toFixed(o.decimals ?? 0)}${o.suffix ?? ""}`;
+  const wMax = textWidth(ctx, fmt(o.value), size, 700, "display");
+  const left = o.align === "center" ? o.x - wMax / 2 : o.x;
+  const wrap = div(el, `left:${left}px;top:${o.y - size * 0.62}px;width:${wMax}px;`);
+  const sweep = o.drop !== undefined ? div(wrap, `left:-40px;right:-40px;top:${size * 0.18}px;height:${size * 0.92}px;background:${col(ctx, "accentSoft")};transform-origin:0 50%;`) : null;
+  const rule = div(wrap, `left:0;top:${-size * 0.08}px;width:${Math.min(wMax, size * 0.9)}px;height:${Math.max(4, size * 0.04)}px;background:${col(ctx, "accent")};transform-origin:0 50%;`);
+  const num = div(wrap, `position:relative;left:0;top:0;font:${font(ctx, "display", 700, size)};line-height:1.2;color:${col(ctx, o.color ?? "ink")};white-space:nowrap;font-variant-numeric:tabular-nums;`, fmt(0));
+  const label = o.label ? div(wrap, `left:0;top:${size * 1.22}px;font:${font(ctx, "sans", 700, Math.round(size * 0.18))};color:${col(ctx, "inkSoft")};white-space:nowrap;`, o.label) : null;
+  const flash = o.drop !== undefined ? div(el, `inset:0;background:${col(ctx, "surface")};opacity:0;`) : null;
+  const dur = o.dur ?? 0.6;
+  return (t) => {
+    const on = t >= o.at && (o.until === undefined || t < o.until);
+    wrap.style.display = on ? "" : "none";
+    if (o.drop !== undefined) {
+      const s = dropBurst(t, { beats: ctx.beats, drop: o.drop, rules: ctx.style.motion, scene: ctx.id, source: "bigNumber" });
+      flash!.style.opacity = String(Math.round(s.flash * 50) / 100);
+      const k = t - ctx.beats.drop(o.drop);
+      sweep!.style.transform = `scaleX(${(k < 0 ? 0 : ease.outCubic(clamp(k / 0.28))).toFixed(3)})`;
+      applyStyle(num, s.punch);
+      if (o.shakeEl) applyStyle(o.shakeEl, s.shake);
+    }
+    if (!on) return;
+    rule.style.transform = `scaleX(${grow(t, o.at, 0.3).toFixed(3)})`;
+    // 세는 숫자는 끝까지 고르게 바뀌게(outQuad) — 끝에서 오래 머뭇거리면 화면이 선 것처럼 보인다
+    const v = o.track ? o.track(t) : o.value * (t < o.at ? 0 : ease.outQuad(clamp((t - o.at) / dur)));
+    num.textContent = fmt(t >= o.at + dur && !o.track ? o.value : v);
+    if (label) label.style.opacity = String(clamp((t - o.at - 0.15) / 0.2));
+  };
+}
+
+/** 짚는 자리 하나 — t 에 그 점에 닿고, 값 상자에 text 를 보인다 */
+export interface ReadStop {
+  t: number;
+  at: Pt;
+  text: string;
+}
+
+/**
+ * 짚어 읽는 커서 = 독자의 눈 — 점에 작은 고리와 세로 기준선, 곁에 짙은 값 상자. 박마다 다음 값에 닿고, 그 사이엔 차트 위를 미끄러져 간다
+ * (가까운 점 사이도 일정 빠르기 아래로 내려가지 않게 살짝 휘어 돈다). 마지막 점 뒤엔 그 곁을 맴돈다. below 면 값 상자를 점 아래에(위에 제목이 있을 때)
+ */
+export function readout(el: HTMLElement, o: { ctx: SceneCtx; stops: ReadStop[]; size?: number; floor?: number; minSpeed?: number; from?: number; below?: boolean }): Paint {
+  const { ctx } = o;
+  const stops = [...o.stops].sort((a, b) => a.t - b.t);
+  const size = o.size ?? 32;
+  const s = svg(el, ctx);
+  const guide = node(s, "line", { stroke: col(ctx, "ink"), "stroke-width": 1.5, "stroke-dasharray": "5 5", opacity: 0.6 });
+  const ring = node(s, "circle", { r: 14, fill: "none", stroke: col(ctx, "ink"), "stroke-width": 3 });
+  const tip = div(el, `left:0;top:0;padding:10px 16px;background:${col(ctx, "ink")};color:${col(ctx, "surface")};font:${font(ctx, "sans", 700, size)};white-space:nowrap;border-radius:${ctx.style.radius?.sm ?? 2}px;`);
+  const vmin = o.minSpeed ?? 320;
+  const start = o.from ?? (stops[0]?.t ?? 0) - 0.4;
+  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);
+    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 e = ease.inOutQuad(u) * 0.6 + u * 0.4;
+    const v = 1 - e;
+    return [v * v * a[0] + 2 * v * e * c[0] + e * e * b[0], v * v * a[1] + 2 * v * e * c[1] + e * e * b[1]];
+  };
+  return (t) => {
+    const on = stops.length > 0 && t >= start;
+    s.style.display = on ? "" : "none";
+    tip.style.display = on ? "" : "none";
+    if (!on) return;
+    let p: Pt;
+    let text: string;
+    const i = stops.findIndex((x) => x.t > t);
+    if (i === 0) {
+      p = glide([stops[0].at[0] - 160, stops[0].at[1] + 120], stops[0].at, clamp((t - start) / Math.max(1e-3, stops[0].t - start)), stops[0].t - start);
+      text = stops[0].text;
+    } else if (i > 0) {
+      const [a, b] = [stops[i - 1], stops[i]];
+      p = glide(a.at, b.at, clamp((t - a.t) / (b.t - a.t)), b.t - a.t);
+      text = clamp((t - a.t) / (b.t - a.t)) > 0.5 ? b.text : a.text;
+    } else {
+      const last = stops[stops.length - 1];
+      const k = t - last.t;
+      const r = 60 * clamp(k / 0.2);
+      p = [last.at[0] + r * Math.sin(k * 5.5), last.at[1] - r * (1 - Math.cos(k * 5.5)) * 0.5];
+      text = last.text;
+    }
+    guide.setAttribute("x1", p[0].toFixed(1));
+    guide.setAttribute("x2", p[0].toFixed(1));
+    guide.setAttribute("y1", p[1].toFixed(1));
+    guide.setAttribute("y2", String(o.floor ?? p[1]));
+    ring.setAttribute("cx", p[0].toFixed(1));
+    ring.setAttribute("cy", p[1].toFixed(1));
+    if (tip.textContent !== text) tip.textContent = text;
+    const flip = p[0] > ctx.meta.width * 0.66;
+    tip.style.transform = `translate(${(p[0] + (flip ? -26 : 26)).toFixed(1)}px, ${(p[1] + (o.below ? size * 0.9 : -size * 2.6)).toFixed(1)}px)${flip ? " translateX(-100%)" : ""}`;
+  };
+}

package/themes/data-journal/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>