kasaframe 0.1.1 → 0.1.4

package/themes/iso-diorama/variants/navy-amber.json

@@ -0,0 +1,125 @@
+{
+  "id": "navy-amber",
+  "world": "iso-diorama",
+  "name": "Navy Amber",
+  "desc": "짙은 남색 바탕에 호박색 강조 · 또렷한 기하 고딕 · 고운 필름 입자",
+  "params": {
+    "scheme": "dark",
+    "bgL": 0.132,
+    "tint": {
+      "h": 240.4615,
+      "c": 0.0475
+    },
+    "inkL": 0.9414,
+    "hue": 62.8466,
+    "chroma": 0.98,
+    "fonts": "suit",
+    "texture": {
+      "kind": "grain",
+      "amount": 0.55
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 1.15,
+    "density": 1
+  },
+  "style": {
+    "scheme": "dark",
+    "colors": {
+      "bg": "#000913",
+      "surface": "#000309",
+      "raised": "#001422",
+      "line": "#1F3039",
+      "ink": "#E0EDFF",
+      "inkSoft": "#B4C3D6",
+      "dim": "#8493A4",
+      "accent": "#975700",
+      "accentSoft": "#472900",
+      "accentText": "#C3751C",
+      "onAccent": "#FCFCFC",
+      "success": "#4E8A3E",
+      "danger": "#DC6051",
+      "warning": "#D98A1E",
+      "grass": "#355700",
+      "path": "#0B1E28",
+      "water": "#407C8B",
+      "roof": "#975700",
+      "wall": "#000912",
+      "steel": "#375C7C",
+      "gate": "#2B67D2"
+    },
+    "fonts": {
+      "sans": "\"SUIT Variable\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"SUIT Variable\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"JetBrains Mono\", ui-monospace, \"SUIT Variable\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "SUIT Variable",
+          "src": "https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2.0.5/fonts/variable/ttf/SUIT-Variable.ttf",
+          "weight": "100 900"
+        },
+        {
+          "family": "Pretendard Variable",
+          "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+          "weight": "45 920"
+        },
+        {
+          "family": "JetBrains Mono",
+          "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+          "weight": "100 800"
+        }
+      ]
+    },
+    "type": {
+      "weightDisplay": 800,
+      "weightBody": 500,
+      "tracking": "-0.02em"
+    },
+    "look": {
+      "texture": {
+        "kind": "grain",
+        "amount": 0.55
+      },
+      "tempo": 1.15
+    }
+  },
+  "tags": {
+    "mood": [
+      "아기자기",
+      "친근한",
+      "따뜻한",
+      "구조적",
+      "어두운",
+      "아날로그"
+    ],
+    "light": "dark",
+    "use": [
+      "구조",
+      "흐름",
+      "인프라",
+      "도시",
+      "설명",
+      "시스템"
+    ],
+    "dims": "3D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-11",
+    "colors": {
+      "ink": 16.91,
+      "inkSoft": 11.16,
+      "dim": 6.38,
+      "accentText": 5.6,
+      "accent": 3.51,
+      "onAccent": 5.56,
+      "success~danger": 0.048,
+      "success~warning": 0.07,
+      "danger~warning": 0.077,
+      "accent~danger": 0.098,
+      "accent~ink": 0.433
+    },
+    "frame": "kf check 통과 — 끝 구간 3.183–4초(입체라 가볍게)·끝 프레임 한 장",
+    "pattern": "hook-number.roll"
+  }
+}

package/themes/isotype/THEME.md

@@ -0,0 +1,58 @@
+# 아이소타입 `isotype`
+
+**비유: 같은 그림 기호를 하나씩 늘어놓아 세며 화면이 찍힌다 — 오토 노이라트의 그림 통계처럼, 많으면 기호를 키우지 않고 더 늘어놓는다.** 기호 하나는 늘 같은 값(풀이 한 줄로 밝힌다)이고, 끝 기호는 잘라서 소수를 보인다. 화면은 벽에 걸린 차트 판 한 장 — 크림 종이 위 검정 기호, 몫 하나만 주홍.
+
+| 기술 개념 | 이 세계에서 |
+|---|---|
+| 요청 | 사람 기호 하나 — 줄을 서고 문으로 들어간다 |
+| 공급자(회사) | 공장 기호 |
+| 모델 | 칩 기호 — 회사별 줄에 칩 수로 모델 수를 센다 |
+| 게이트웨이 한 주소 | 아치 문 하나. 모든 줄이 같은 문으로 |
+| 형식 | 접힌 모서리 문서(OpenAI·Anthropic 두 장) |
+| 비용 | 동전 기호 — 동전 하나 = 정해진 값, 할인은 끝에서부터 회색으로 덜어낸다 |
+| 지연 | 시계 기호 — 시계 하나 = 50ms, 초당 스무 개씩 찍어 줄이 다 서는 시각이 실측 그대로 |
+| 한도 | 줄 끝 축선 — 축선을 넘는 기호는 회색 |
+| 캐시 | 회색으로 덜어낸 동전 — 다시 계산하지 않아 안 드는 몫 |
+| 폴백 | 사람 기호가 다른 문으로 다시 늘어놓이는 것(regroup) |
+| 몫(점유율) | 축선 하나로 가른 두 몫, 한쪽만 주홍 |
+| 드롭·결과 | 기호가 한꺼번에 판을 채운다(countBurst) |
+
+## 맞는 내용·용도
+
+- 개수·몫·비율·시간대별 값·할인처럼 「센다」로 말할 수 있는 숫자 — 설명·쇼츠·리포트·공개. 숫자 하나보다 둘 이상을 견줄 때 강하다.
+- 용도: 설명(explainer)·쇼츠(shorts)·홍보(promo)·피드(square)·공개(launch). 마디마다 차트 판 하나, 드롭에 `countBurst`.
+- 화면 글은 판 제목(낱말 두셋)·기호 풀이(「= 모델 2」)·회사 이름·모델 ID·숫자. 글꼴은 Jost(푸투라 계열), 한글은 Pretendard, 주소·ID 는 IBM Plex Mono.
+
+## 금지
+
+- 양을 크기로 말하기 — 기호를 키우거나 막대를 늘이지 않는다. 늘 같은 크기 기호의 개수로.
+- 원근·그림자·윤곽선·그라데이션·사진 같은 세부. 기호는 납작한 면 하나(아른츠 식 실루엣).
+- 색을 장식으로 — 주홍은 짚는 몫 하나에만, 초록·파랑은 갈래가 둘 셋일 때만. 안내 그림·축선은 황토, 덜어낸 몫은 회색.
+- 풀이 없는 기호 줄 — 기호 하나의 값을 `symbolKey` 로 늘 밝힌다.
+- 바탕 흐름·떠다니는 기호. 종이는 서 있고, 움직이는 것은 세어지는 기호와 옮겨지는 기호뿐.
+- 슬로건·감성 문장.
+
+## 움직임
+
+- 쉬지 않는다: 기호가 초당 20–60개씩 하나씩 찍히고(`countRow`·`stackColumn`), 자석판 위 기호처럼 들어 옮겨진다(`regroup`). 끝 카드도 칩 102 개가 끝까지 찍힌다.
+- 구도는 마디마다 바꾼다: 새 차트 장이 옆에서 밀려 들어온다(`pageSlide`) — 공장 줄 → 회사별 칩 → 문과 줄 → 모델 ID 표 → 두 형식 → 칩 판 → 시간 기둥 → 동전 덜기 → 시계 줄 → 끝 카드.
+- 박마다 큰 사건 하나: 공장 셋이 놓이고, 줄 하나가 세어지고, 사람 넷이 문으로 들어가고, 축선이 그어지고, 동전이 덜어진다.
+
+## 효과
+
+같은 레포 안에서는 `effects.ts` 를 바로, 프로젝트에서는 `fx("isotype")`. layer 는 `build` 에서 만들고 `(t) => …` 에서 부른다. 그림 기호(`PICTO` — person·factory·chip·door·coin·clock·doc·moon·sun·arrow)와 `drawPicto` 는 `kit.ts`. 장면 하나는 보통 `chartFrame`(맨 아래) → 제목·풀이 → 기호 줄·기둥 → `pageSlide`(맨 위) 순서로 쌓는다.
+
+| 효과 | 꼴 | 하는 일 |
+|---|---|---|
+| `pressIn` | value | 도장 찍힘 — 두 프레임 눌렸다 제자리(라벨·숫자가 서는 순간) |
+| `pictogram` | layer | 그림 기호를 자리마다 하나씩 찍는다(공장·문·문서·해·달) |
+| `countRow` | layer | 같은 기호 줄 — 값/단위만큼 하나씩 찍어 세고, 다섯·열씩 묶고, 끝 기호는 잘라 소수, `keep` 이면 끝에서부터 회색으로 덜어낸다 |
+| `symbolKey` | layer | 기호 풀이 「(기호) = 값」 한 줄 |
+| `regroup` | layer | 기호를 들어 옮겨 새 자리에 내려놓는다(흩어진 것을 줄로·사람을 문으로) |
+| `stackColumn` | layer | 기호가 아래부터 하나씩 쌓이는 기둥(시간대별 값) |
+| `splitAxis` | layer | 몫을 가르는 세로 축선이 그어지고 양쪽 이름이 선다 |
+| `pageSlide` | layer | 새 차트 장이 옆·아래에서 밀려 들어와 앞 장을 덮는다 |
+| `countBurst` | layer | 드롭 — 기호가 한꺼번에 판을 채우거나(grid) 화면 둘레를 감싼다(frame), 흔들림을 돌려준다 |
+| `chartFrame` | layer | 바탕 — 크림 차트 종이, 서 있다 |
+
+견본: `sample/` — 공통 주제 「OpenGateway 소개 15초」, kawaii-friends 4.0–19.0초(드롭 7.34초). 공장 아홉이 놓이고 → 회사별 칩 줄(칩 하나 = 모델 둘, OpenAI 는 주홍) → 사람 열둘이 줄을 서 문 하나로 → 모델 ID 다섯이 모두 같은 문 → 두 형식 문서에서 같은 문으로 → 드롭에 칩 102 개가 판을 채운다 → 24시간 동전 기둥, 밤 00–10 은 하나(−90%) → deepseek 동전 덜기($0.03 /M 하나) → 시계 줄(하나 = 50ms)이 실측 시간 그대로 세어지고 18번 호출 = 사람 열여덟 → OG 로고·opengateway.ai 와 칩 102 개.

package/themes/isotype/effects.ts

@@ -0,0 +1,297 @@
+import { clamp, ease, rand, type SceneCtx, type Style } from "@kasaframe/core";
+import { dropBurst, type DropBurstState } from "@kasaframe/motion";
+import { areaCanvas, color, drawPicto, slotX } from "./kit.ts";
+
+// 아이소타입은 「많으면 기호를 키우지 않고 더 늘어놓는다」. 움직임도 그 규칙 — 기호는 한 번에 한 개씩 찍혀(리놀륨 판 도장) 늘고,
+// 옮길 땐 박물관 자석판 위 기호처럼 들어 옮겨 내려놓는다. 크기가 자라는 움직임(scale 로 양을 말하기)은 쓰지 않는다
+
+const stamp = (t: number, at: number): number => (t < at ? 0 : 1);
+
+/** 찍힘 — 도장이 눌리듯 두 프레임 아래로 눌렸다 제자리. 라벨·숫자가 서는 순간에 */
+export function pressIn(t: number, o: { at: number; px?: number }): Style {
+  const k = t - o.at;
+  if (k < 0) return { opacity: 0 };
+  if (k >= 2 / 30) return {};
+  return { y: (o.px ?? 6) * (1 - k * 15), scale: 1.03 };
+}
+
+export interface PictogramOpts {
+  ctx: SceneCtx;
+  name: string;
+  /** 한 개면 [[x, y]], 여러 개면 자리마다 — stagger 초 간격으로 차례로 찍힌다 */
+  places: [number, number][];
+  size: number;
+  at?: number;
+  stagger?: number;
+  tone?: string;
+  /** 자리마다 색 칸 */
+  tones?: string[];
+  until?: number;
+}
+
+/** 그림 기호 찍기 — 자리마다 한 개씩 도장처럼 찍힌다(안내 그림·회사·문). 찍힌 뒤엔 서 있다 */
+export function pictogram(el: HTMLElement, o: PictogramOpts): (t: number) => void {
+  const xs = o.places.map((p) => p[0]);
+  const ys = o.places.map((p) => p[1]);
+  const { c, g, clear } = areaCanvas(el, Math.min(...xs) - 8, Math.min(...ys) - 8, Math.max(...xs) - Math.min(...xs) + o.size + 16, Math.max(...ys) - Math.min(...ys) + o.size + 16);
+  const at = o.at ?? 0;
+  const st = o.stagger ?? 0;
+  let last = -1;
+  return (t) => {
+    const on = t >= at && t < (o.until ?? Infinity);
+    c.style.display = on ? "" : "none";
+    if (!on) return;
+    const n = o.places.filter((_, i) => stamp(t, at + i * st)).length;
+    if (n === last) return;
+    last = n;
+    clear();
+    for (let i = 0; i < n; i++) drawPicto(g, o.name, o.places[i][0], o.places[i][1], o.size, color(o.ctx, o.tones?.[i] ?? o.tone ?? "ink"));
+  };
+}
+
+export interface CountRowOpts {
+  ctx: SceneCtx;
+  name: string;
+  x: number;
+  y: number;
+  size: number;
+  gap?: number;
+  /** 값과 기호 한 개의 값 — 값/단위가 기호 수, 소수면 끝 기호를 그 비율만큼 자른다 */
+  value: number;
+  unit?: number;
+  at?: number;
+  /** 초당 찍는 기호 수 */
+  rate?: number;
+  /** 다섯·열씩 묶는 틈 */
+  group?: number;
+  tone?: string;
+  /** i 번째 기호의 색 칸 — 몫 나누기(OpenAI | 나머지) */
+  toneAt?(i: number): string;
+  /** [시각, 남길 기호 수] — 그 뒤로는 회색(덜어낸 몫)으로 바뀐다. 오른쪽 끝부터 하나씩 */
+  keep?: [number, number][];
+  /** 하나씩 덜어내는 속도(초당) */
+  dropRate?: number;
+}
+
+/** 기호 줄 — 같은 기호가 하나씩 찍혀 값을 센다(아이소타입의 본 규칙). 끝 기호는 잘라 분수를 보이고, keep 이면 덜어낸 몫이 회색이 된다 */
+export function countRow(el: HTMLElement, o: CountRowOpts): (t: number) => void {
+  const gap = o.gap ?? Math.round(o.size * 0.14);
+  const group = o.group ?? 10;
+  const exact = o.value / (o.unit ?? 1);
+  const n = Math.ceil(exact - 1e-9);
+  const width = slotX(Math.max(0, n - 1), o.size, gap, group) + o.size;
+  const { g, clear } = areaCanvas(el, o.x - 4, o.y - 4, width + 8, o.size + 8);
+  const at = o.at ?? 0;
+  const rate = o.rate ?? 24;
+  const dropRate = o.dropRate ?? 30;
+  let key = "";
+  return (t) => {
+    const shown = t < at ? 0 : Math.min(n, Math.floor((t - at) * rate + 1e-6) + 1);
+    let keep = n;
+    for (const [s, k] of o.keep ?? []) if (t >= s) keep = Math.max(k, n - Math.floor((t - s) * dropRate + 1e-6) - 1);
+    const k = `${shown}:${keep}`;
+    if (k === key) return;
+    key = k;
+    clear();
+    for (let i = 0; i < shown; i++) {
+      const frac = i === n - 1 ? exact - (n - 1) : 1;
+      const tone = i >= keep ? "grey" : (o.toneAt?.(i) ?? o.tone ?? "ink");
+      drawPicto(g, o.name, o.x + slotX(i, o.size, gap, group), o.y, o.size, color(o.ctx, tone), frac);
+    }
+  };
+}
+
+/** 기호 풀이 — 「(기호) = 값」. 아이소타입 차트는 늘 한 줄 풀이를 단다 */
+export function symbolKey(el: HTMLElement, o: { ctx: SceneCtx; name: string; text: string; x: number; y: number; size?: number; at?: number; tone?: string }): (t: number) => void {
+  const size = o.size ?? 48;
+  const icon = pictogram(el, { ctx: o.ctx, name: o.name, places: [[o.x, o.y]], size, at: o.at, tone: o.tone });
+  const d = el.ownerDocument.createElement("div");
+  d.textContent = `= ${o.text}`;
+  d.style.cssText = `position:absolute;left:${o.x + size + Math.round(size * 0.3)}px;top:${o.y + size / 2}px;transform:translateY(-50%);font:500 ${Math.round(size * 0.75)}px ${o.ctx.style.fonts.sans};color:${color(o.ctx, "ink")};white-space:pre;line-height:1.1;`;
+  el.append(d);
+  const at = o.at ?? 0;
+  return (t) => {
+    icon(t);
+    d.style.display = t >= at ? "" : "none";
+  };
+}
+
+export interface RegroupOpts {
+  ctx: SceneCtx;
+  name: string;
+  from: [number, number][];
+  to: [number, number][];
+  size: number;
+  at: number;
+  dur?: number;
+  /** 기호 사이 출발 간격 */
+  stagger?: number;
+  tone?: string;
+  toneAt?(i: number): string;
+  /** 다 옮긴 뒤 보일지 — false 면 내려놓는 순간 사라진다(문 안으로 들어간다) */
+  stay?: boolean;
+}
+
+/** 다시 늘어놓기 — 자석판 위 기호를 하나씩 들어(살짝 떠오르고) 새 자리로 옮겨 내려놓는다. 흩어진 것을 한 줄로 모을 때 */
+export function regroup(el: HTMLElement, o: RegroupOpts): (t: number) => void {
+  const { ctx } = o;
+  const { c, g, clear } = areaCanvas(el, 0, 0, ctx.meta.width, ctx.meta.height);
+  const dur = o.dur ?? 0.3;
+  const st = o.stagger ?? 0.02;
+  const n = Math.min(o.from.length, o.to.length);
+  const inOut = ease.inOutCubic;
+  return (t) => {
+    const live = t >= o.at;
+    c.style.display = live ? "" : "none";
+    if (!live) return;
+    clear();
+    for (let i = 0; i < n; i++) {
+      const p = clamp((t - o.at - i * st) / dur);
+      if (p >= 1 && o.stay === false) continue;
+      const e = inOut(p);
+      // 들어 올린 동안만 그림자처럼 한 칸 어긋난 회색 — 판에서 떨어져 있다
+      const lift = p > 0 && p < 1 ? Math.sin(p * Math.PI) * o.size * 0.08 : 0;
+      const x = o.from[i][0] + (o.to[i][0] - o.from[i][0]) * e;
+      const y = o.from[i][1] + (o.to[i][1] - o.from[i][1]) * e - lift;
+      if (lift > 0) drawPicto(g, o.name, x + lift, y + lift * 2, o.size, color(ctx, "grey"));
+      drawPicto(g, o.name, x, y, o.size, color(ctx, o.toneAt?.(i) ?? o.tone ?? "ink"));
+    }
+  };
+}
+
+/** 기호 기둥 — 기호가 아래부터 하나씩 쌓인다(시간대별 값처럼 세로로 셀 때). baseline 은 맨 아래 기호의 아랫변 */
+export function stackColumn(el: HTMLElement, o: { ctx: SceneCtx; name: string; x: number; baseline: number; size: number; count: number; at?: number; rate?: number; gap?: number; tone?: string }): (t: number) => void {
+  const gap = o.gap ?? Math.round(o.size * 0.12);
+  const top = o.baseline - o.count * (o.size + gap);
+  const { g, clear } = areaCanvas(el, o.x - 2, top - 2, o.size + 4, o.baseline - top + 4);
+  const at = o.at ?? 0;
+  const rate = o.rate ?? 30;
+  let last = -1;
+  return (t) => {
+    const n = t < at ? 0 : Math.min(Math.ceil(o.count - 1e-9), Math.floor((t - at) * rate + 1e-6) + 1);
+    if (n === last) return;
+    last = n;
+    clear();
+    for (let i = 0; i < n; i++) {
+      const frac = i === Math.ceil(o.count) - 1 ? o.count - i : 1;
+      // 세로 기둥의 끝 기호는 아래부터 자란 만큼만 — 위를 잘라 그린다
+      const y = o.baseline - (i + 1) * (o.size + gap) + gap;
+      g.save();
+      if (frac < 1) {
+        g.beginPath();
+        g.rect(o.x, y + o.size * (1 - frac), o.size, o.size * frac);
+        g.clip();
+      }
+      drawPicto(g, o.name, o.x, y, o.size, color(o.ctx, o.tone ?? "ink"));
+      g.restore();
+    }
+  };
+}
+
+/** 몫 가르기 — 세로 축선이 위에서 아래로 그어지고 양쪽에 몫 이름이 선다(「미국 | 나머지 세계」) */
+export function splitAxis(el: HTMLElement, o: { ctx: SceneCtx; x: number; y0: number; y1: number; at: number; dur?: number; left?: string; right?: string; tone?: string; size?: number }): (t: number) => void {
+  const { ctx } = o;
+  const line = el.ownerDocument.createElement("div");
+  line.style.cssText = `position:absolute;left:${o.x - 3}px;top:${o.y0}px;width:6px;height:${o.y1 - o.y0}px;background:${color(ctx, o.tone ?? "guide")};transform-origin:50% 0;`;
+  el.append(line);
+  const size = o.size ?? 40;
+  const label = (s: string, side: "left" | "right") => {
+    const d = el.ownerDocument.createElement("div");
+    d.textContent = s;
+    d.style.cssText = `position:absolute;top:${o.y0 - size * 1.4}px;${side === "left" ? `right:${ctx.meta.width - o.x + 16}px` : `left:${o.x + 16}px`};font:500 ${size}px ${ctx.style.fonts.sans};color:${color(ctx, "ink")};white-space:pre;line-height:1.2;`;
+    el.append(d);
+    return d;
+  };
+  const l = o.left ? label(o.left, "left") : null;
+  const r = o.right ? label(o.right, "right") : null;
+  const dur = o.dur ?? 0.25;
+  return (t) => {
+    const p = clamp((t - o.at) / dur);
+    line.style.display = p > 0 ? "" : "none";
+    line.style.transform = `scaleY(${ease.outCubic(p).toFixed(4)})`;
+    for (const d of [l, r]) if (d) d.style.display = p >= 1 ? "" : "none";
+  };
+}
+
+/** 새 차트 장 — 종이 한 장이 옆에서 밀려 들어와 앞 장을 덮는다(차트 묶음을 넘긴다). 다음 장면은 빈 장에서 기호를 찍기 시작 */
+export function pageSlide(el: HTMLElement, o: { ctx: SceneCtx; at: number; dur?: number; from?: "right" | "left" | "bottom" }): (t: number) => void {
+  const { ctx } = o;
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const sheet = el.ownerDocument.createElement("div");
+  const edge = o.from === "bottom" ? "border-top" : o.from === "left" ? "border-right" : "border-left";
+  sheet.style.cssText = `position:absolute;left:0;top:0;width:${W}px;height:${H}px;background:${color(ctx, "bg")};${edge}:6px solid ${color(ctx, "guide")};display:none;`;
+  el.append(sheet);
+  const dur = o.dur ?? 0.3;
+  return (t) => {
+    const p = clamp((t - o.at) / dur);
+    sheet.style.display = t >= o.at ? "" : "none";
+    if (t < o.at) return;
+    const off = 1 - ease.outCubic(p);
+    const tr = o.from === "bottom" ? `translateY(${(off * (H + 12)).toFixed(1)}px)` : o.from === "left" ? `translateX(${(-off * (W + 12)).toFixed(1)}px)` : `translateX(${(off * (W + 12)).toFixed(1)}px)`;
+    sheet.style.transform = tr;
+  };
+}
+
+/**
+ * 드롭 — 기호가 한꺼번에 판을 채운다. grid: 상자 안 count 개를 드롭 지점에서 가까운 칸부터 dur(기본 0.4초) 안에 찍고 남긴다(합계를 보일 때) ·
+ * frame: 화면 둘레를 기호가 양쪽으로 돌아 감싸고 0.9초에 걷힌다(숫자 하나가 서는 장면). 흔들림·한 번 튐을 돌려준다
+ */
+export function countBurst(el: HTMLElement, o: { ctx: SceneCtx; drop?: number; name: string; mode?: "grid" | "frame"; box?: [number, number, number, number]; count?: number; size?: number; toneAt?(i: number): string; origin?: [number, number]; dur?: number }): (t: number) => DropBurstState {
+  const { ctx } = o;
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const mode = o.mode ?? "frame";
+  const size = o.size ?? Math.round(Math.min(W, H) * 0.05);
+  const spots: { x: number; y: number; k: number }[] = [];
+  const [ox, oy] = o.origin ?? [W / 2, H / 2];
+  if (mode === "grid") {
+    const [bx, by, bw, bh] = o.box ?? [0, 0, W, H];
+    const count = o.count ?? 100;
+    const cols = Math.max(1, Math.round(Math.sqrt((count * bw) / bh)));
+    const rows = Math.ceil(count / cols);
+    const cw = bw / cols;
+    const ch = bh / rows;
+    for (let i = 0; i < count; i++) {
+      const x = bx + (i % cols) * cw + (cw - size) / 2;
+      const y = by + Math.floor(i / cols) * ch + (ch - size) / 2;
+      spots.push({ x, y, k: Math.hypot(x - ox, y - oy) });
+    }
+  } else {
+    const step = size * 1.25;
+    for (let x = step / 2; x < W - size; x += step) spots.push({ x, y: step * 0.3, k: 0 }, { x, y: H - size - step * 0.3, k: 0 });
+    for (let y = step * 1.4; y < H - size - step; y += step) spots.push({ x: step * 0.3, y, k: 0 }, { x: W - size - step * 0.3, y, k: 0 });
+    for (const s of spots) s.k = Math.hypot(s.x - ox, s.y - oy) + rand(`${ctx.id}:burst`, Math.round(s.x + s.y * 3)) * 40;
+  }
+  const kmax = Math.max(1, ...spots.map((s) => s.k));
+  const { c, g, clear } = areaCanvas(el, 0, 0, W, H);
+  let lastKey = "";
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "countBurst" });
+    const local = t - ctx.beats.drop(o.drop ?? 0);
+    const alive = local >= 0 && (mode === "grid" || local < 0.9);
+    c.style.display = alive ? "" : "none";
+    if (!alive) return s;
+    const fill = clamp(local / (o.dur ?? 0.4));
+    const fade = mode === "frame" ? clamp((local - 0.6) / 0.3) : 0;
+    const key = `${Math.floor(fill * 240)}:${Math.floor(fade * 30)}`;
+    if (key !== lastKey) {
+      lastKey = key;
+      clear();
+      spots.forEach((p, i) => {
+        if (p.k / kmax > fill) return;
+        if (fade > 0 && rand(`${ctx.id}:fade`, i) < fade) return;
+        drawPicto(g, o.name, p.x, p.y, size, color(ctx, o.toneAt?.(i) ?? (mode === "frame" ? (i % 7 === 0 ? "accent" : "guide") : "ink")));
+      });
+    }
+    return s;
+  };
+}
+
+/** 바탕 — 차트 종이. 크림색 면 하나, 서 있다. 글을 두지 않는다 */
+export function chartFrame(el: HTMLElement, o: { ctx: SceneCtx }): (t: number) => void {
+  const d = el.ownerDocument.createElement("div");
+  d.style.cssText = `position:absolute;inset:0;background:${color(o.ctx, "bg")};`;
+  el.append(d);
+  return () => {};
+}

package/themes/isotype/kit.ts

@@ -0,0 +1,102 @@
+import type { SceneCtx } from "@kasaframe/core";
+
+// effects.ts 의 이름 있는 내보내기는 theme.json 효과 목록과 같아야 해서, 효과가 아닌 도구(그림 기호 도형·칠하기)는 여기 둔다
+
+export const color = (ctx: SceneCtx, key: string): string => ctx.style.colors[key] ?? key;
+
+/**
+ * 그림 기호 — 100×100 칸 안의 납작한 실루엣(게르트 아른츠 식: 윤곽선 없이 면 하나, 원근 없음).
+ * 조각마다 [경로, 채우기 규칙] — evenodd 조각은 구멍(창·고리)이 뚫린다
+ */
+type Piece = [d: string, rule?: CanvasFillRule];
+
+const ring = (cx: number, cy: number, r: number) => `M${cx + r},${cy} A${r},${r} 0 1 1 ${cx - r},${cy} A${r},${r} 0 1 1 ${cx + r},${cy} Z`;
+
+function sunPath(): string {
+  let d = ring(50, 50, 24);
+  for (let i = 0; i < 8; i++) {
+    const a = (i / 8) * Math.PI * 2;
+    const p = (r: number, da: number) => `${(50 + Math.cos(a + da) * r).toFixed(1)},${(50 + Math.sin(a + da) * r).toFixed(1)}`;
+    d += ` M${p(32, -0.16)} L${p(46, 0)} L${p(32, 0.16)} Z`;
+  }
+  return d;
+}
+
+export const PICTO: Record<string, Piece[]> = {
+  // 요청 — 사람 하나
+  person: [
+    [`${ring(50, 15, 12)} M32,31 H68 Q74,31 74,37 V64 H26 V37 Q26,31 32,31 Z M30,66 H47 V97 H30 Z M53,66 H70 V97 H53 Z`],
+  ],
+  // 회사(공급자) — 톱니 지붕 공장, 창이 뚫렸다
+  factory: [
+    ["M6,96 V50 L26,36 V50 L46,36 V50 L66,36 V50 H72 V10 H84 V50 H94 V96 Z M16,64 H28 V76 H16 Z M40,64 H52 V76 H40 Z M64,64 H76 V76 H64 Z", "evenodd"],
+  ],
+  // 모델 — 칩(기계), 다리 셋씩
+  chip: [
+    [
+      "M24,24 H76 V76 H24 Z M38,38 H62 V62 H38 Z M32,6 H40 V22 H32 Z M46,6 H54 V22 H46 Z M60,6 H68 V22 H60 Z M32,78 H40 V94 H32 Z M46,78 H54 V94 H46 Z M60,78 H68 V94 H60 Z M6,32 H22 V40 H6 Z M6,46 H22 V54 H6 Z M6,60 H22 V68 H6 Z M78,32 H94 V40 H78 Z M78,46 H94 V54 H78 Z M78,60 H94 V68 H78 Z",
+      "evenodd",
+    ],
+  ],
+  // 한 주소(게이트웨이) — 아치 문
+  door: [["M12,96 V44 A38,38 0 0 1 88,44 V96 Z M30,96 V46 A20,20 0 0 1 70,46 V96 Z", "evenodd"]],
+  // 비용 — 동전(고리 + 가운데 면)
+  coin: [[`${ring(50, 50, 44)} ${ring(50, 50, 34)} ${ring(50, 50, 24)}`, "evenodd"]],
+  // 지연 — 시계
+  clock: [[`${ring(50, 50, 44)} ${ring(50, 50, 34)}`, "evenodd"], ["M46,24 H54 V54 H46 Z M50,46 H72 V54 H50 Z"]],
+  // 형식 — 접힌 모서리 문서, 글줄이 뚫렸다
+  doc: [["M18,4 H62 L84,26 V96 H18 Z M62,8 V26 H80 Z M30,42 H72 V50 H30 Z M30,58 H72 V66 H30 Z M30,74 H58 V82 H30 Z", "evenodd"]],
+  moon: [["M58,6 A44,44 0 1 0 94,66 A34,34 0 1 1 58,6 Z"]],
+  sun: [[sunPath()]],
+  arrow: [["M6,40 H60 V20 L94,50 L60,80 V60 H6 Z"]],
+};
+
+export type PictoName = keyof typeof PICTO;
+
+const cache = new Map<string, Path2D[]>();
+const paths = (name: string): Path2D[] => {
+  let p = cache.get(name);
+  if (!p) {
+    const pieces = PICTO[name];
+    if (!pieces) throw new Error(`isotype: 그림 기호 "${name}" 가 없다`);
+    p = pieces.map(([d]) => new Path2D(d));
+    cache.set(name, p);
+  }
+  return p;
+};
+
+/** 기호 하나를 (x, y) 에 size 크기로. clip 이 1 아래면 왼쪽부터 그 비율만(아이소타입의 끝 기호 자르기) */
+export function drawPicto(g: CanvasRenderingContext2D, name: string, x: number, y: number, size: number, fill: string, clip = 1): void {
+  const pieces = PICTO[name];
+  const ps = paths(name);
+  g.save();
+  if (clip < 1) {
+    g.beginPath();
+    g.rect(x, y, size * clip, size);
+    g.clip();
+  }
+  g.translate(x, y);
+  g.scale(size / 100, size / 100);
+  g.fillStyle = fill;
+  ps.forEach((p, i) => g.fill(p, pieces[i][1] ?? "nonzero"));
+  g.restore();
+}
+
+/** 화면 좌표를 그대로 쓰는 캔버스 — 그리는 자리만큼만 */
+export function areaCanvas(el: HTMLElement, x: number, y: number, w: number, h: number): { c: HTMLCanvasElement; g: CanvasRenderingContext2D; clear(): void } {
+  const X = Math.floor(x);
+  const Y = Math.floor(y);
+  const W = Math.max(1, Math.ceil(w));
+  const H = Math.max(1, Math.ceil(h));
+  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;`;
+  el.append(c);
+  const g = c.getContext("2d")!;
+  g.translate(-X, -Y);
+  return { c, g, clear: () => g.clearRect(X, Y, W, H) };
+}
+
+/** 줄 안 i 번째 기호의 x — group 개마다 한 칸 반 틈(아이소타입은 다섯·열씩 묶어 센다) */
+export const slotX = (i: number, size: number, gap: number, group: number): number => i * (size + gap) + (group > 0 ? Math.floor(i / group) * gap * 2 : 0);

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