kasaframe 0.1.1 → 0.1.4

package/themes/neon-sign/variants/wine-pink.json

@@ -0,0 +1,125 @@
+{
+  "id": "wine-pink",
+  "world": "neon-sign",
+  "name": "Wine Pink",
+  "desc": "포도주빛 바탕에 분홍 강조 · 손간판 같은 각진 좁은 제목체 · 고운 필름 입자",
+  "params": {
+    "scheme": "dark",
+    "bgL": 0.1757,
+    "tint": {
+      "h": 352.7324,
+      "c": 0.0232
+    },
+    "inkL": 0.9248,
+    "hue": 350.8595,
+    "chroma": 0.9249,
+    "fonts": "do-hyeon",
+    "texture": {
+      "kind": "grain",
+      "amount": 0.55
+    },
+    "stroke": 1.21,
+    "radius": null,
+    "tempo": 1.14,
+    "density": 1
+  },
+  "style": {
+    "scheme": "dark",
+    "colors": {
+      "bg": "#190C12",
+      "surface": "#24161F",
+      "raised": "#2F1E2A",
+      "line": "#43303E",
+      "ink": "#EFE3E3",
+      "inkSoft": "#D7C4D1",
+      "dim": "#9590A9",
+      "accent": "#E8469F",
+      "accentSoft": "#461D3C",
+      "accentText": "#E870B6",
+      "onAccent": "#190C12",
+      "success": "#3BE8B0",
+      "danger": "#FF4B4B",
+      "warning": "#FFB13B",
+      "pink": "#E8469F",
+      "blue": "#41BDF1",
+      "amber": "#FFB13B",
+      "mint": "#3BE8B0",
+      "brick": "#341E1F",
+      "glass": "#53414D"
+    },
+    "fonts": {
+      "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"Do Hyeon\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"Geist Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Do Hyeon",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/dohyeon/DoHyeon-Regular.ttf",
+          "weight": "400"
+        },
+        {
+          "family": "Pretendard Variable",
+          "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+          "weight": "45 920"
+        },
+        {
+          "family": "Geist Mono",
+          "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2",
+          "weight": "100 900"
+        }
+      ]
+    },
+    "type": {
+      "weightDisplay": 400,
+      "weightBody": 500,
+      "tracking": "0em"
+    },
+    "look": {
+      "texture": {
+        "kind": "grain",
+        "amount": 0.55
+      },
+      "stroke": 1.21,
+      "tempo": 1.14
+    }
+  },
+  "tags": {
+    "mood": [
+      "밤",
+      "화려한",
+      "도시",
+      "레트로",
+      "몽환적",
+      "어두운",
+      "아날로그"
+    ],
+    "light": "dark",
+    "use": [
+      "홍보",
+      "공개",
+      "이벤트",
+      "뮤직비디오",
+      "브랜드",
+      "처리량"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 15.17,
+      "inkSoft": 11.5,
+      "dim": 6.19,
+      "accentText": 6.76,
+      "accent": 5.27,
+      "onAccent": 5.27,
+      "success~danger": 0.164,
+      "success~warning": 0.124,
+      "danger~warning": 0.147,
+      "accent~ink": 0.268
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}

package/themes/neon-sign/variants/wine-plum.json

@@ -0,0 +1,126 @@
+{
+  "id": "wine-plum",
+  "world": "neon-sign",
+  "name": "Wine Plum",
+  "desc": "포도주빛 바탕에 자두색 강조 · 키 작고 동글한 제목 · 고운 필름 입자",
+  "params": {
+    "scheme": "dark",
+    "bgL": 0.1818,
+    "tint": {
+      "h": 343.8149,
+      "c": 0.0285
+    },
+    "inkL": 0.9628,
+    "hue": 321.0544,
+    "chroma": 0.9858,
+    "fonts": "dongle",
+    "texture": {
+      "kind": "grain",
+      "amount": 0.55
+    },
+    "stroke": 0.83,
+    "radius": null,
+    "tempo": 1.15,
+    "density": 1
+  },
+  "style": {
+    "scheme": "dark",
+    "colors": {
+      "bg": "#1B0D15",
+      "surface": "#271723",
+      "raised": "#32202F",
+      "line": "#473344",
+      "ink": "#FCEFF2",
+      "inkSoft": "#E3CEDE",
+      "dim": "#909CB6",
+      "accent": "#D45AEA",
+      "accentSoft": "#3D2451",
+      "accentText": "#D582F4",
+      "onAccent": "#1B0D15",
+      "success": "#3BE8B0",
+      "danger": "#FF4B4B",
+      "warning": "#FFB13B",
+      "pink": "#D45AEA",
+      "blue": "#43C8FF",
+      "amber": "#FFB13B",
+      "mint": "#3BE8B0",
+      "brick": "#371F24",
+      "glass": "#594453"
+    },
+    "fonts": {
+      "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "Dongle, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"Geist Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Dongle",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/dongle/Dongle-Bold.ttf",
+          "weight": "700"
+        },
+        {
+          "family": "Pretendard Variable",
+          "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+          "weight": "45 920"
+        },
+        {
+          "family": "Geist Mono",
+          "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2",
+          "weight": "100 900"
+        }
+      ]
+    },
+    "type": {
+      "weightDisplay": 700,
+      "weightBody": 500,
+      "tracking": "0em"
+    },
+    "look": {
+      "texture": {
+        "kind": "grain",
+        "amount": 0.55
+      },
+      "stroke": 0.83,
+      "tempo": 1.15
+    }
+  },
+  "tags": {
+    "mood": [
+      "밤",
+      "화려한",
+      "도시",
+      "레트로",
+      "몽환적",
+      "어두운",
+      "아날로그",
+      "귀여운"
+    ],
+    "light": "dark",
+    "use": [
+      "홍보",
+      "공개",
+      "이벤트",
+      "뮤직비디오",
+      "브랜드",
+      "처리량"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 16.84,
+      "inkSoft": 12.73,
+      "dim": 6.86,
+      "accentText": 7.48,
+      "accent": 5.79,
+      "onAccent": 5.79,
+      "success~danger": 0.164,
+      "success~warning": 0.124,
+      "danger~warning": 0.147,
+      "accent~ink": 0.311
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}

package/themes/newspaper/THEME.md

@@ -0,0 +1,67 @@
+# 신문 1면 `newspaper`
+
+**비유: 들어오는 요청이 전보 한 줄이 되어 지면의 단에 조판되고, 큰 사실은 헤드라인으로 찍히고, 속보에 판이 통째로 갈린다.** 신문 용지 위 먹 한 색 — 제호와 이중 괘선, 단과 세로 괘선, 낱말째 쾅 찍히는 굵은 명조 헤드라인, 빽빽한 시세표(슬러그 줄), 검정 한 판 45° 망점 사진·그래프. 빨강은 속보·내림 한 군데.
+
+## 기술 개념 → 신문
+
+| 개념 | 신문에서 | 효과 |
+|---|---|---|
+| 요청·호출 | 전보 한 줄 — 텔레타이프 띠에 한 자씩 타자되어 들어오고, 단에 슬러그 한 줄로 떨어진다 | `wireTape`·`slugLines` |
+| 공급자(회사) | 통신사 — 회사마다 따로 들어온 기사 칸 | `headline`·`ruleGrid` |
+| 모델 | 기사의 발신처(바이라인) — 전보 줄의 `model:` 과 시세표의 한 줄 | `wireTape`·`slugLines` |
+| 한 주소(입구) | 제호 — 지면 맨 위 한 줄, 모든 기사가 이 지면 하나에 실린다 | `masthead` |
+| 개수·비교 | 시세표 숫자와 망점 막대 그래프 | `slugLines`·`halftonePhoto` |
+| 비용 | 시세 — 값이 내리면 빨강 ▼, 망점 막대가 눌려 내려간다 | `slugLines`(▼)·`halftonePhoto`(`value(u, v, t)`) |
+| 지연 | 송고까지 걸린 시간 — 실측 ms 만큼의 실제 시간 동안 망점 막대가 자라고, 닿은 순서대로 결과 줄이 떨어진다 | `halftonePhoto`·`slugLines`(`times`) |
+| 캐시 | 연판 — 이미 짠 슬러그를 다시 찍는다(타자 없이 그 줄이 바로 떨어진다) | `slugLines` |
+| 폴백 | 판갈이 — 1판 기사 자리에 2판 기사가 들어선다(앞 줄 다음 시각에 새 줄) | `slugLines`·`wireTape` |
+| 드롭·발표 | 호외 — 빨강 띠가 가로지르고 윤전기에 종이가 끌려가며 판이 통째로 바뀐다 | `breakingBand`·`pressRoll` |
+
+## 맞는 내용·용도
+
+- 발표·소식·숫자 비교·순위·가격 변동 — 「무슨 일이 있었나」를 지면처럼 정리할 때. 출시 소식, 지표 발표, 벤치마크 결과, 가격 인하.
+- 용도: 홍보(promo)·공개(launch)·설명(explainer)·쇼츠(shorts)·피드(square).
+- 화면 글: 헤드라인(굵은 명조 Hahmlet)·시세·주소·모델 ID(전보 띠는 Courier Prime, 한글은 Pretendard). 단을 채우는 것은 실제 사실(표·전보 줄)뿐.
+
+## 금지
+
+- 지어낸 기사 본문·로렘 입숨·회색 막대 본문 — 단은 실제 사실 줄로만 채운다. 지어낸 신문 이름(제호엔 다루는 대상·주소를 세운다).
+- 먹(`ink`·`rule`)·용지(`paper`)·속보 빨강(`red`) 밖의 색. 회색은 망점으로만. 빨강은 한 지면에 한 뜻(속보·내림).
+- 누렇게 바랜 낡은 종이·찢김·얼룩 같은 꾸밈, 그림자·그라데이션·둥근 모서리, 카메라 이동.
+- 슬로건·감성 문장.
+
+## 움직임
+
+- 쉬지 않는다: 늘 무언가가 조판된다 — 슬러그가 떨어지고, 전보가 타자되고, 망점이 롤러에 찍혀 나온다. 용지는 서 있다.
+- 구도는 마디마다 바꾼다: 지면을 갈아 끼운다(1면 → 증권면 시세표 → 제호면 → 두 기사 → 사진면 → 호외 → 시간대 시세 → 시세표 → 결과표 → 끝면).
+- 박마다 큰 사건 하나: 헤드라인 낱말이 쾅 찍히고, 기사 칸이 서고, 줄이 떨어지고, 막대가 눌린다. 드롭은 `breakingBand` + `pressRoll`.
+- 멈춤은 outExpo 한 손(빠르게 들어와 착). 실제 시간으로 자라는 값(지연)만 일정한 빠르기.
+
+## 효과
+
+같은 레포 안에서는 `effects.ts` 를 바로, 프로젝트에서는 `fx("newspaper")`. layer 는 `build` 에서 만들고 `(t) => …` 에서 부른다. 판(컷)은 `display: none` 으로 갈아 끼운다.
+
+| 효과 | 꼴 | 하는 일 |
+|---|---|---|
+| `newsprint` | layer | 신문 용지 — 회백 바탕에 미세한 섬유 결, 한 번 그리고 선다 |
+| `ruleGrid` | layer | 괘선 — 단을 가르는 세로선과 이중 가로선이 그어진다(판짜기 격자) |
+| `masthead` | layer | 제호 — 큰 명조가 쾅 찍히고 이중 괘선·폴리오가 선다 |
+| `headline` | layer | 헤드라인 — 낱말이 하나씩 쾅(내려앉으며 잉크가 번졌다 앉는다), `\n` 으로 데크 |
+| `slugLines` | layer | 슬러그 줄 — 시세표·목록이 한 줄씩 떨어진다, `[이름, 값]` 은 값 오른쪽 맞춤, ▼ 는 빨강, `times` 로 줄마다 시각 |
+| `wireTape` | layer | 전보 띠 — 요청이 한 자씩 타자되고 새 줄마다 띠가 한 줄 올라간다 |
+| `halftonePhoto` | layer | 망점 사진 — 검정 한 판 45° 망점, 롤러가 위에서 아래로 찍어 나온다, `value(u, v, t)` 면 그래프가 바뀐다, `src` 면 그림 |
+| `breakingBand` | layer | 속보·호외 띠 — 빨강 띠가 가로질러 쾅, 딱지 옆에 한 줄이 찍힌다 |
+| `pressRoll` | layer | 드롭 = 윤전기 — 롤러 그림자 띠가 지나며 종이가 한 번 끌려간다, 흔들림을 돌려준다(지면 틀에) |
+
+## 장면 문법 슬롯 — `slots.ts`
+
+| 슬롯 | 채운 것 |
+|---|---|
+| `surface` | 신문 용지(서 있다) |
+| `panel` | 기사 상자 — 위 이중 괘선·아래 가는 괘선이 그어진다, 강조는 위 괘선이 빨강 |
+| `land` | 슬러그가 제 줄로 떨어져 착 |
+| `write` | 텔레타이프 — 한 자씩 |
+| `trace` | 신문 그래프 선 — 먹선과 꺾이는 자리 네모 점, 다 그은 뒤 네모 짚개가 선을 따라 간다 |
+| `drop` | 윤전기 — 롤러 그림자 띠, 흔들림(dropBurst) |
+
+견본: `sample/` — OpenGateway 소개 15초(docs/briefs/og-intro-15s.md), 곡 kawaii-friends.mp3 4–19초(드롭 7.34초), 장면 넷 × 마디마다 지면. 회사마다 따로 서는 기사 칸 아홉 → 회사별 모델 수 시세표와 망점 막대 → 제호 apis.opengateway.ai/v1 와 박마다 타자되는 전보(모델 ID 만 바뀐다) → OpenAI 형식·Anthropic 형식 두 기사가 한 주소 아래 → 점점 빨리 떨어지는 회사 줄과 찍혀 나오는 로고 사진 → 호외 102 → 시간대 시세(00–10시 막대가 눌린다) -90% → 시세표 정가 → 밤값 ▼90% → 첫 토큰 결과표(실측 ms 만큼 자라는 막대) → 호출 18 · 합 $0.0004 → 제호 opengateway.ai 와 로고 사진.

package/themes/newspaper/effects.ts

@@ -0,0 +1,347 @@
+import { clamp, ease, rand, type SceneCtx } from "@kasaframe/core";
+import { dropBurst, type DropBurstState } from "@kasaframe/motion";
+
+// 지면은 서 있다 — 움직임은 조판뿐: 줄(슬러그)이 떨어져 단을 채우고, 헤드라인이 낱말째 찍히고, 전보가 한 자씩 타자되고, 망점이 찍혀 나온다
+
+const ink = (ctx: SceneCtx, key: string): string => ctx.style.colors[key] ?? key;
+const snap = (t: number, at: number, dur: number): number => ease.outExpo(clamp((t - at) / Math.max(1e-3, dur)));
+
+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;
+}
+
+type Area = [x: number, y: number, w: number, h: number];
+function canvas(el: HTMLElement, area: Area, scale = 1): { g: CanvasRenderingContext2D; clear(): void } {
+  const [x, y, w, h] = area.map((v, i) => (i < 2 ? Math.floor(v) : Math.ceil(v))) as Area;
+  const c = el.ownerDocument.createElement("canvas");
+  c.width = Math.max(1, Math.round(w * scale));
+  c.height = Math.max(1, Math.round(h * scale));
+  c.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:${w}px;height:${h}px;pointer-events:none`;
+  el.append(c);
+  const g = c.getContext("2d")!;
+  g.scale(scale, scale);
+  g.translate(-x, -y);
+  return { g, clear: () => g.clearRect(x, y, w, h) };
+}
+
+/** 신문 용지 — 회백 바탕에 미세한 섬유 결. 한 번 그리고 선다 */
+export function newsprint(el: HTMLElement, o: { ctx: SceneCtx; seed?: string }): (t: number) => void {
+  const { ctx } = o;
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const { g } = canvas(el, [0, 0, W, H], 0.5);
+  const seed = o.seed ?? "paper";
+  let drawn = false;
+  return () => {
+    if (drawn) return;
+    drawn = true;
+    g.fillStyle = ink(ctx, "paper");
+    g.fillRect(0, 0, W, H);
+    g.strokeStyle = ink(ctx, "fiber");
+    g.lineWidth = 2;
+    g.globalAlpha = 0.6;
+    g.beginPath();
+    for (let i = 0; i < 520; i++) {
+      const x = rand(seed, i * 4) * W;
+      const y = rand(seed, i * 4 + 1) * H;
+      const a = rand(seed, i * 4 + 2) * Math.PI;
+      const l = 6 + rand(seed, i * 4 + 3) * 22;
+      g.moveTo(x, y);
+      g.lineTo(x + Math.cos(a) * l, y + Math.sin(a) * l);
+    }
+    g.stroke();
+    g.globalAlpha = 1;
+  };
+}
+
+/**
+ * 괘선 — 단을 가르는 가는 세로선과 기사 위·아래 이중 가로선이 위에서·왼쪽에서 그어진다. 지면의 판짜기 격자
+ */
+export function ruleGrid(el: HTMLElement, o: { ctx: SceneCtx; cols?: number[]; top?: number; bottom?: number; rows?: { y: number; x?: number; w?: number; double?: boolean }[]; at?: number; dur?: number }): (t: number) => void {
+  const { ctx } = o;
+  const color = ink(ctx, "rule");
+  const W = ctx.meta.width;
+  const top = o.top ?? ctx.safe.top;
+  const bottom = o.bottom ?? ctx.meta.height - ctx.safe.bottom;
+  const v = (o.cols ?? []).map((x) => div(el, `left:${x - 1}px;top:${top}px;width:2px;height:0;background:${color}`));
+  const h = (o.rows ?? []).map((r) => {
+    const x = r.x ?? ctx.safe.left;
+    const w = r.w ?? W - ctx.safe.left - ctx.safe.right;
+    const a = div(el, `left:${x}px;top:${r.y}px;width:0;height:${r.double ? 6 : 3}px;background:${color}`);
+    const b = r.double ? div(el, `left:${x}px;top:${r.y + 10}px;width:0;height:2px;background:${color}`) : null;
+    return { a, b, w };
+  });
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 0.3;
+  return (t) => {
+    const k = snap(t, at, dur);
+    for (const d of v) d.style.height = `${((bottom - top) * k).toFixed(1)}px`;
+    for (const { a, b, w } of h) {
+      a.style.width = `${(w * k).toFixed(1)}px`;
+      if (b) b.style.width = `${(w * snap(t, at + 0.05, dur)).toFixed(1)}px`;
+    }
+  };
+}
+
+/**
+ * 제호 — 지면 맨 위 한 줄. 큰 명조가 쾅 찍히고(잉크가 잠깐 번졌다 앉는다) 아래 이중 괘선과 폴리오(작은 줄)가 따라 선다
+ */
+export function masthead(el: HTMLElement, o: { ctx: SceneCtx; title: string; folio?: [string, string, string]; x?: number; y?: number; w?: number; size?: number; at?: number }): (t: number) => void {
+  const { ctx } = o;
+  const x = o.x ?? ctx.safe.left;
+  const y = o.y ?? ctx.safe.top;
+  const w = o.w ?? ctx.meta.width - ctx.safe.left - ctx.safe.right;
+  const size = o.size ?? 120;
+  const color = ink(ctx, "ink");
+  const box = div(el, `left:${x}px;top:${y}px;width:${w}px`);
+  const title = div(box, `position:relative;left:0;width:100%;text-align:center;font:900 ${size}px/1.05 ${ctx.style.fonts.display};letter-spacing:-0.01em;color:${color};white-space:pre`, o.title);
+  const r1 = div(box, `left:0;top:${size * 1.12}px;height:6px;width:0;background:${color}`);
+  const r2 = div(box, `left:0;top:${size * 1.12 + 10}px;height:2px;width:0;background:${color}`);
+  const folio = o.folio
+    ? o.folio.map((s, i) => div(box, `top:${size * 1.12 + 20}px;${i === 0 ? "left:0" : i === 2 ? "right:0" : "left:0;width:100%;text-align:center"};font:500 ${Math.round(size * 0.24)}px/1.3 ${ctx.style.fonts.sans};color:${ink(ctx, "inkSoft")};white-space:pre`, s))
+    : [];
+  const at = o.at ?? 0;
+  return (t) => {
+    box.style.visibility = t >= at ? "visible" : "hidden";
+    if (t < at) return;
+    const k = snap(t, at, 0.18);
+    title.style.transform = `scale(${(1.06 - 0.06 * k).toFixed(4)})`;
+    title.style.textShadow = k < 1 ? `0 0 ${((1 - k) * 8).toFixed(1)}px ${color}` : "none";
+    r1.style.width = `${(snap(t, at + 0.08, 0.3) * 100).toFixed(1)}%`;
+    r2.style.width = `${(snap(t, at + 0.12, 0.3) * 100).toFixed(1)}%`;
+    folio.forEach((f, i) => (f.style.visibility = t >= at + 0.2 + i * 0.06 ? "visible" : "hidden"));
+  };
+}
+
+/**
+ * 헤드라인 — 낱말이 하나씩 쾅 찍힌다(위에서 내려앉으며 잉크가 번졌다 앉는다). 줄바꿈(\n)으로 데크를 쌓는다
+ */
+export function headline(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; text: string; x: number; y: number; size: number; at?: number; gap?: number; weight?: number; color?: string; align?: "left" | "center" | "right"; w?: number; lineHeight?: number; font?: "display" | "sans" | "mono" },
+): (t: number) => void {
+  const { ctx } = o;
+  const color = ink(ctx, o.color ?? "ink");
+  const align = o.align ?? "left";
+  const box = div(el, `left:${o.x}px;top:${o.y}px;${o.w ? `width:${o.w}px;` : ""}text-align:${align};font:${o.weight ?? 800} ${o.size}px/${o.lineHeight ?? 1.08} ${ctx.style.fonts[o.font ?? "display"]};letter-spacing:-0.02em;color:${color};white-space:pre`);
+  const words: HTMLSpanElement[] = [];
+  o.text.split("\n").forEach((line, li) => {
+    if (li) box.append(el.ownerDocument.createElement("br"));
+    line.split(" ").forEach((wd, wi) => {
+      if (wi) box.append(el.ownerDocument.createTextNode(" "));
+      const s = el.ownerDocument.createElement("span");
+      s.textContent = wd;
+      s.style.cssText = "display:inline-block";
+      box.append(s);
+      words.push(s);
+    });
+  });
+  const at = o.at ?? 0;
+  const gap = o.gap ?? 0.09;
+  return (t) => {
+    words.forEach((s, i) => {
+      const a = at + i * gap;
+      s.style.visibility = t >= a ? "visible" : "hidden";
+      if (t < a) return;
+      const k = snap(t, a, 0.16);
+      s.style.transform = k < 1 ? `translateY(${((k - 1) * o.size * 0.12).toFixed(2)}px) scale(${(1.08 - 0.08 * k).toFixed(4)})` : "none";
+      s.style.textShadow = k < 1 ? `0 0 ${((1 - k) * o.size * 0.06).toFixed(1)}px ${color}` : "none";
+    });
+  };
+}
+
+export type Slug = string | [label: string, value: string];
+
+/**
+ * 슬러그 줄 — 시세표·목록처럼 빽빽한 줄이 한 줄씩(쇳덩이 슬러그처럼) 위에서 떨어져 단을 채운다. [이름, 값] 이면 값은 오른쪽 맞춤,
+ * ▼ 가 든 값은 빨강. 줄 사이 가는 괘선
+ */
+export function slugLines(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; lines: Slug[]; x: number; y: number; w: number; size?: number; lh?: number; at?: number; every?: number; font?: "display" | "sans" | "mono"; weight?: number; rules?: boolean; times?: number[] },
+): (t: number) => void {
+  const { ctx } = o;
+  const size = o.size ?? 34;
+  const lh = o.lh ?? size * 1.5;
+  const at = o.at ?? 0;
+  const every = o.every ?? 0.08;
+  const font = `${o.weight ?? 600} ${size}px/${lh}px ${ctx.style.fonts[o.font ?? "sans"]}`;
+  const rows = o.lines.map((ln, i) => {
+    const mask = div(el, `left:${o.x}px;top:${o.y + i * lh}px;width:${o.w}px;height:${lh}px;overflow:hidden`);
+    const row = div(mask, `left:0;top:0;width:100%;height:${lh}px;font:${font};color:${ink(ctx, "ink")};white-space:pre${o.rules !== false ? `;border-bottom:1px solid ${ink(ctx, "line")}` : ""}`);
+    if (typeof ln === "string") row.textContent = ln;
+    else {
+      div(row, "left:0;top:0", ln[0]);
+      div(row, `right:0;top:0;${ln[1].includes("▼") ? `color:${ink(ctx, "red")}` : ""}`, ln[1]);
+    }
+    return { mask, row, t: o.times?.[i] ?? at + i * every };
+  });
+  return (t) => {
+    for (const r of rows) {
+      r.mask.style.visibility = t >= r.t ? "visible" : "hidden";
+      if (t < r.t) continue;
+      r.row.style.transform = `translateY(${((snap(t, r.t, 0.14) - 1) * 100).toFixed(2)}%)`;
+    }
+  };
+}
+
+/**
+ * 전보 띠 — 텔레타이프 종이 띠에 요청이 한 줄씩 타자되어 들어온다(lines[].t 에 타자 시작, cps 글자/초). 새 줄이 시작되면 띠가 한 줄 올라간다
+ */
+export function wireTape(el: HTMLElement, o: { ctx: SceneCtx; x: number; y: number; w: number; h: number; lines: { t: number; text: string }[]; size?: number; cps?: number; at?: number }): (t: number) => void {
+  const { ctx } = o;
+  const size = o.size ?? 30;
+  const lh = size * 1.45;
+  const cps = o.cps ?? 60;
+  const box = div(el, `left:${o.x}px;top:${o.y}px;width:${o.w}px;height:${o.h}px;overflow:hidden;background:${ink(ctx, "surface")};border-left:2px solid ${ink(ctx, "rule")};border-right:2px solid ${ink(ctx, "rule")}`);
+  const feed = div(box, `left:${size * 0.9}px;right:${size * 0.5}px;top:0;font:400 ${size}px/${lh}px ${ctx.style.fonts.mono};color:${ink(ctx, "ink")}`);
+  // 띠 가장자리 이송 구멍 — 띠가 올라가면 같이 올라간다
+  const holes = div(box, `left:${size * 0.25}px;top:0;width:${size * 0.3}px;height:${o.h * 4}px;background:radial-gradient(circle, ${ink(ctx, "line")} 32%, transparent 36%) 0 0/${size * 0.3}px ${lh / 2}px repeat-y`);
+  const rows = o.lines.map((l, i) => ({ ...l, el: div(feed, `left:0;top:${i * lh}px;white-space:pre`) }));
+  const caret = div(feed, `width:${size * 0.55}px;height:${size * 0.9}px;background:${ink(ctx, "ink")}`);
+  const at = o.at ?? 0;
+  return (t) => {
+    box.style.visibility = t >= at ? "visible" : "hidden";
+    const started = rows.filter((r) => t >= r.t);
+    const cur = started.length - 1;
+    // 띠는 지금 줄이 아래쪽 2/3 에 오도록 올라간다 — 새 줄마다 한 칸, 착
+    const want = Math.max(0, cur - Math.floor((o.h / lh) * 0.66));
+    const prev = Math.max(0, cur - 1 - Math.floor((o.h / lh) * 0.66));
+    const k = cur >= 0 ? snap(t, rows[cur].t, 0.16) : 1;
+    const shift = (prev + (want - prev) * k) * lh;
+    feed.style.transform = `translateY(${(-shift).toFixed(2)}px)`;
+    holes.style.transform = `translateY(${(-(shift % (lh / 2))).toFixed(2)}px)`;
+    rows.forEach((r, i) => {
+      const n = t < r.t ? 0 : Math.min(r.text.length, Math.floor((t - r.t) * cps) + 1);
+      const s = r.text.slice(0, n);
+      if (r.el.textContent !== s) r.el.textContent = s;
+      if (i === cur) {
+        caret.style.left = `${(n * size * 0.6).toFixed(1)}px`;
+        caret.style.top = `${(i * lh + lh * 0.18).toFixed(1)}px`;
+      }
+    });
+    caret.style.visibility = cur >= 0 && Math.floor(t * 8) % 2 === 0 ? "visible" : "hidden";
+  };
+}
+
+/**
+ * 망점 사진 — 검정 한 판 45° 망점으로 찍힌 사진·그래프. 값이 클수록 점이 크다(회색은 망점으로만). 위에서 아래로 찍혀 나오고(at·dur),
+ * value 가 t 를 받으면 그림이 바뀐다(막대가 눌리는 그래프 따위). 테두리와 사진 설명
+ */
+export function halftonePhoto(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; x: number; y: number; w: number; h: number; value?: (u: number, v: number, t: number) => number; src?: string; at?: number; dur?: number; pitch?: number; angle?: number; caption?: string; frame?: boolean; color?: string },
+): (t: number) => void {
+  const { ctx } = o;
+  const { g, clear } = canvas(el, [o.x - 4, o.y - 4, o.w + 8, o.h + 8]);
+  const pitch = o.pitch ?? 12;
+  const a = ((o.angle ?? 45) * Math.PI) / 180;
+  const cx = o.x + o.w / 2;
+  const cy = o.y + o.h / 2;
+  const n = Math.ceil(Math.hypot(o.w, o.h) / 2 / pitch);
+  const pts: { x: number; y: number; u: number; v: number }[] = [];
+  for (let j = -n; j <= n; j++)
+    for (let i = -n; i <= n; i++) {
+      const x = cx + Math.cos(a) * i * pitch - Math.sin(a) * j * pitch;
+      const y = cy + Math.sin(a) * i * pitch + Math.cos(a) * j * pitch;
+      if (x < o.x || x > o.x + o.w || y < o.y || y > o.y + o.h) continue;
+      pts.push({ x, y, u: (x - o.x) / o.w, v: (y - o.y) / o.h });
+    }
+  let img: HTMLImageElement | null = null;
+  let imgVals: number[] | null = null;
+  if (o.src) {
+    img = el.ownerDocument.createElement("img");
+    img.src = o.src;
+    img.style.cssText = "position:absolute;width:1px;height:1px;opacity:0;pointer-events:none";
+    el.append(img);
+  }
+  const fromImage = (): number[] | null => {
+    if (!img || !img.complete || !img.naturalWidth) return null;
+    const off = el.ownerDocument.createElement("canvas");
+    off.width = Math.ceil(o.w / 4);
+    off.height = Math.ceil(o.h / 4);
+    const s = off.getContext("2d", { willReadFrequently: true })!;
+    const k = Math.min(off.width / img.naturalWidth, off.height / img.naturalHeight) * 0.92;
+    s.drawImage(img, (off.width - img.naturalWidth * k) / 2, (off.height - img.naturalHeight * k) / 2, img.naturalWidth * k, img.naturalHeight * k);
+    const px = s.getImageData(0, 0, off.width, off.height).data;
+    return pts.map((p) => {
+      const q = (Math.min(off.height - 1, Math.floor(p.v * off.height)) * off.width + Math.min(off.width - 1, Math.floor(p.u * off.width))) * 4;
+      return (px[q + 3] / 255) * (1 - (0.2126 * px[q] + 0.7152 * px[q + 1] + 0.0722 * px[q + 2]) / 255);
+    });
+  };
+  const frame = o.frame !== false ? div(el, `left:${o.x}px;top:${o.y}px;width:${o.w}px;height:${o.h}px;border:2px solid ${ink(ctx, "rule")};box-sizing:border-box`) : null;
+  const cap = o.caption ? div(el, `left:${o.x}px;top:${o.y + o.h + 10}px;width:${o.w}px;font:500 26px/1.3 ${ctx.style.fonts.sans};color:${ink(ctx, "inkSoft")};white-space:pre`, o.caption) : null;
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 0.4;
+  const color = ink(ctx, o.color ?? "ink");
+  return (t) => {
+    clear();
+    const on = t >= at;
+    if (frame) frame.style.visibility = on ? "visible" : "hidden";
+    if (cap) cap.style.visibility = t >= at + dur * 0.6 ? "visible" : "hidden";
+    if (!on) return;
+    if (img) imgVals ??= fromImage();
+    const p = clamp((t - at) / dur);
+    g.fillStyle = color;
+    g.beginPath();
+    pts.forEach((q, i) => {
+      // 롤러가 위에서 아래로 지나가며 찍는다 — 지나간 줄부터 점이 선다
+      const local = clamp((p * 1.25 - q.v) / 0.25);
+      if (local <= 0) return;
+      const v = imgVals ? imgVals[i] : o.value ? clamp(o.value(q.u, q.v, t)) : 0;
+      const r = pitch * 0.6 * Math.sqrt(v) * local;
+      if (r < 0.5) return;
+      g.moveTo(q.x + r, q.y);
+      g.arc(q.x, q.y, r, 0, Math.PI * 2);
+    });
+    g.fill();
+  };
+}
+
+/** 속보 띠 — 빨강 띠가 지면을 가로질러 쾅 들어오고 「속보」·「호외」 딱지 옆에 한 줄이 찍힌다 */
+export function breakingBand(el: HTMLElement, o: { ctx: SceneCtx; label: string; text?: string; y: number; h?: number; at?: number; x?: number; w?: number }): (t: number) => void {
+  const { ctx } = o;
+  const h = o.h ?? 96;
+  const x = o.x ?? 0;
+  const w = o.w ?? ctx.meta.width;
+  const band = div(el, `left:${x}px;top:${o.y}px;width:${w}px;height:${h}px;background:${ink(ctx, "red")};overflow:hidden`);
+  const tag = div(band, `left:${ctx.safe.left}px;top:${h * 0.14}px;height:${h * 0.72}px;padding:0 ${h * 0.25}px;background:${ink(ctx, "onAccent")};color:${ink(ctx, "red")};font:900 ${Math.round(h * 0.56)}px/${h * 0.72}px ${ctx.style.fonts.display}`, o.label);
+  const line = o.text ? div(band, `left:${ctx.safe.left + h * 2.2}px;top:0;font:800 ${Math.round(h * 0.5)}px/${h}px ${ctx.style.fonts.sans};color:${ink(ctx, "onAccent")};white-space:pre`) : null;
+  const at = o.at ?? 0;
+  return (t) => {
+    band.style.visibility = t >= at ? "visible" : "hidden";
+    if (t < at) return;
+    band.style.clipPath = `inset(0 ${((1 - snap(t, at, 0.2)) * 100).toFixed(2)}% 0 0)`;
+    tag.style.transform = `scale(${(1.15 - 0.15 * snap(t, at + 0.05, 0.16)).toFixed(4)})`;
+    if (line && o.text) {
+      const n = t < at + 0.15 ? 0 : Math.min(o.text.length, Math.floor((t - at - 0.15) * 40) + 1);
+      const s = o.text.slice(0, n);
+      if (line.textContent !== s) line.textContent = s;
+    }
+  };
+}
+
+/**
+ * 드롭 = 윤전기 — 종이가 롤러에 한 번 끌려가며(가는 롤러 선 둘이 위에서 아래로 지난다) 먹이 한꺼번에 앉는다. 흔들림을 돌려준다(지면 틀에).
+ * 롤러는 가는 선으로만 — 굵은 그림자 띠가 지나가면 화면 밝기가 칸마다 오르내려 섬광으로 잡힌다
+ */
+export function pressRoll(el: HTMLElement, o: { ctx: SceneCtx; drop?: number }): (t: number) => DropBurstState {
+  const { ctx } = o;
+  const H = ctx.meta.height;
+  const shade = () => div(el, `left:0;right:0;top:0;height:5px;background:${ink(ctx, "rule")};box-shadow:0 6px 10px rgba(0,0,0,.08);visibility:hidden`);
+  const rollers = [shade(), shade()];
+  const at = ctx.beats.drop(o.drop ?? 0);
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "pressRoll" });
+    rollers.forEach((r, i) => {
+      const u = (t - at - i * 0.08) / 0.32;
+      r.style.visibility = u >= 0 && u <= 1 ? "visible" : "hidden";
+      if (u >= 0 && u <= 1) r.style.transform = `translateY(${(u * H).toFixed(1)}px)`;
+    });
+    return s;
+  };
+}