kasaframe 0.1.1 → 0.1.4

package/themes/ink-wash/variants/sand-orange.json

@@ -0,0 +1,120 @@
+{
+  "id": "sand-orange",
+  "world": "ink-wash",
+  "name": "Sand Orange",
+  "desc": "모래빛 바탕에 주황 강조 · 현대적인 가변 명조",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9566,
+    "tint": {
+      "h": 41.3663,
+      "c": 0.0156
+    },
+    "inkL": 0.2181,
+    "hue": 39.8003,
+    "chroma": 1.0489,
+    "fonts": "hahmlet",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 0.93,
+    "radius": null,
+    "tempo": 0.88,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#FBEEE9",
+      "surface": "#FFF8F8",
+      "raised": "#EFE0D7",
+      "line": "#908786",
+      "ink": "#1A1920",
+      "inkSoft": "#4C484C",
+      "dim": "#625B5B",
+      "accent": "#BA3E00",
+      "accentSoft": "#EEBCA5",
+      "accentText": "#A13500",
+      "onAccent": "#FFF8F8",
+      "success": "#1A1920",
+      "danger": "#BA3E00",
+      "warning": "#BA3E00",
+      "paper": "#FBEEE9",
+      "ink2": "#4C484C",
+      "ink3": "#908786",
+      "ink4": "#C9BDB9",
+      "seal": "#BA3E00"
+    },
+    "fonts": {
+      "sans": "Hahmlet, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", serif",
+      "display": "Hahmlet, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", serif",
+      "mono": "\"Geist Mono\", ui-monospace, Hahmlet, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Hahmlet",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/hahmlet/Hahmlet%5Bwght%5D.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": "Geist Mono",
+          "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2",
+          "weight": "100 900"
+        }
+      ]
+    },
+    "type": {
+      "weightDisplay": 800,
+      "weightBody": 400,
+      "tracking": "-0.02em"
+    },
+    "look": {
+      "stroke": 0.93,
+      "tempo": 0.88
+    }
+  },
+  "tags": {
+    "mood": [
+      "고요한",
+      "여백",
+      "동양적",
+      "우아한",
+      "절제된",
+      "밝은",
+      "따뜻한",
+      "고전적"
+    ],
+    "light": "light",
+    "use": [
+      "소개",
+      "발표",
+      "브랜드",
+      "철학",
+      "결정",
+      "뮤직비디오"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-11",
+    "colors": {
+      "ink": 15.3,
+      "inkSoft": 7.89,
+      "dim": 5.84,
+      "accentText": 6.07,
+      "accent": 4.87,
+      "onAccent": 5.29,
+      "success~danger": 0.26,
+      "success~warning": 0.26,
+      "accent~ink": 0.26
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.counter"
+  }
+}

package/themes/iso-diorama/THEME.md

@@ -0,0 +1,54 @@
+# 아이소메트릭 미니어처 `iso-diorama`
+
+**비유: 정보가 작은 섬 위의 미니어처 도시로 지어진다 — 숫자는 건물 높이, 요청은 길 위의 작은 차.** 위에서 비스듬히 내려다본 등각(정사영) 미니어처. 물 위에 타일이 솟아 섬이 되고, 숫자는 건물 높이와 간판으로, 요청은 길 위를 쉬지 않고 오가는 작은 차로 보인다. 금빛 햇살의 긴 그림자와 위·아래 틸트시프트가 장난감처럼 작게 만든다.
+
+## 맞는 내용·용도
+
+- 숫자·구성·흐름을 한눈에 — 서비스 지도·인프라·사용량·가격, 「무엇이 어디로 오간다」.
+- 용도: 홍보(promo)·설명(explainer)·공개(launch)·피드(square)·쇼츠(shorts). 드롭에 `confettiBurst`.
+- 화면 글: 크림 간판 위 짙은 글(주소·모델 ID·숫자).
+
+## 금지
+
+- 원근 카메라 — 등각 정사영만(미니어처 느낌이 깨진다).
+- 이유 없이 떠도는 카메라(늘 미끄러지기·사인 드리프트·박마다 자세).
+- 사진 같은 세부(창틀·나뭇잎) — 헤드리스에서 무겁고 정보가 안 보인다.
+- 간판 없이 떠 있는 글 — 글은 간판에 박는다.
+- 슬로건·감성 문장.
+
+## 움직임
+
+- 쉬지 않는 몫은 섬 안이 진다: 작은 차(`carFlow`)가 쉬지 않고 오가고, 타일·건물·간판이 박마다 솟는다.
+- 카메라는 이유가 있을 때만 — 키 하나가 움직임 하나다. 드러낼 것에 다가가기(확대), 비교 전체를 담게 물러나기(축소), 드롭에 등각이 한 번 돌아 서기(`turn`, 끝은 0). 키 사이가 아니면 선다 — 컷 끝까지 앉을 것이 없으면 다음 컷까지 천천히 이어 다가가거나 물러난다(컷은 움직임 위에서, `linear`).
+- 구도는 마디마다 바꾼다: 컷마다 다른 섬(세트를 화면 밖으로 떨어뜨려 둔다)과 다른 확대.
+- 박마다 큰 사건 하나: 건물·간판이 톡 솟고(outBack), 회관 문이 빛나고, 해시계 칸이 꺼진다.
+
+## 효과
+
+입체 테마 — 바탕은 `@kasaframe/themes/stage3d`(렌더러 하나를 장면끼리 돌려 쓴다). 첫 효과(layer)가 무대를 만들고, 나머지(rig)는 `stage.add(…)` 로 얹는다. 같은 레포 안에서는 `effects.ts` 를 바로, 프로젝트에서는 `fx("iso-diorama")`.
+
+| 효과 | 꼴 | 하는 일 |
+|---|---|---|
+| `isoStage` | layer | 등각 무대 — 정사영 카메라, 금빛 햇살과 긴 그림자, 위·아래 틸트시프트. 컷마다 다른 섬을 내려다보고, 카메라는 박에 맞춘 키로만 다가가고(확대) 물러나고 돈다 |
+| `tileIsland` | rig | 섬 — 물 위에 타일이 물결처럼 차례로 솟아 땅이 된다, 가운데 십자 길 |
+| `towers` | rig | 건물 — 값만큼 톡 솟는 모형 빌딩(테라코타 지붕), 지붕 위 간판 |
+| `carFlow` | rig | 작은 차 — 요청이 길을 따라 쉬지 않고 오간다 |
+| `gatewayHall` | rig | 관문 회관 — OG 로고의 두 칸이 광장 위 파란 문 둘로, 박마다 빛난다 |
+| `signPost` | rig | 간판 — 기둥 위 크림 판이 톡 서고 글이 박힌다, text 가 함수면 바뀔 때만 다시 그린다 |
+| `sunDial` | rig | 해시계 광장 — 24 칸 마당, 밤 창(00–10시) 칸이 정한 시각에 쑥 꺼지고(-90%) 해 바늘이 돈다 |
+| `confettiBurst` | rig | 드롭 — 섬 가운데서 작은 블록이 터져 오르고 떨어진다, 섬광·흔들림(dropBurst) |
+
+## 장면 문법 슬롯 — `slots.ts`
+
+패턴이 테마 이름 없이 부르는 자리(`@kasaframe/themes/slots` 의 `themeSlots("iso-diorama")`). 3D 는 `surface` 하나, 나머지는 DOM·캔버스 2D.
+
+| 슬롯 | 채운 것 |
+|---|---|
+| `surface` | 모형 받침 — 등각으로 내려다본 크림 타일 마당, 칸마다 높이가 조금씩 달라 긴 그림자가 결을 낸다(틸트시프트). 처음 한 번 그려 서 있다(`stillStage`) |
+| `panel` | 간판 판 — 크림 판에 테라코타 테, 해 질 녘 긴 그림자. 밑에서 톡 선다(outBack) |
+| `land` | 톡 솟아 앉는다 — 눌렸다 넘쳐 올라와 서고 발밑에 그림자가 고인다(0.6초) |
+| `write` | 간판에 글 박기 — 글자마다 테라코타로 찍혔다가 짙은 글로 앉는다 |
+| `trace` | 길 — 짙은 아스팔트 길이 긴 그림자와 함께 깔리고 흰 점선, 다 깔린 뒤엔 작은 차(요청)가 쉬지 않고 오간다 |
+| `drop` | 크림 섬광과 함께 작은 블록이 터져 오르고 떨어진다(dropBurst) |
+
+견본: `sample/` — 공통 주제 「OpenGateway 소개 15초」(docs/briefs/og-intro-15s.md), kawaii-friends 4.0–19.0초(드롭 7.34초), 장면 넷 × 마디마다 컷. 테마 공장(`kf theme new --3d`)으로 지은 첫 입체 테마 셋 중 하나.

package/themes/iso-diorama/effects.ts

@@ -0,0 +1,374 @@
+import { clamp, ease, rand, toEase, type EaseName, type SceneCtx } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { roundRectShape, stage3d, textPlane, THREE, type Stage3D } from "@kasaframe/themes/stage3d";
+
+type V3 = [number, number, number];
+const color = (ctx: SceneCtx, k: string) => new THREE.Color(ctx.style.colors[k] ?? k);
+// 모형이 「톡」 솟는 한 손 — 살짝 넘쳤다 앉는다
+const pop = (t: number, at: number, dur = 0.32) => (t < at ? 0 : ease.outBack(clamp((t - at) / dur)));
+// 등각(아이소메트릭) 방향 — 카메라는 이쪽에서 내려다본다
+const ISO = new THREE.Vector3(1, 0.82, 1).normalize();
+const UP = new THREE.Vector3(0, 1, 0);
+
+export interface IsoKey {
+  t: number;
+  /** 보는 곳 */
+  look: V3;
+  /** 화면 세로에 담길 세계 단위 — 작을수록 가까이(정사영의 다가가기) */
+  zoom: number;
+  /** 등각 방향을 세로축으로 돌린 각(라디안) — 드롭처럼 이유 있을 때만, 끝은 0 으로 돌아온다 */
+  turn?: number;
+  /** 앞 키에서 이 키로 오는 이징. 기본 inOutCubic */
+  ease?: EaseName;
+}
+
+export interface IsoShot {
+  from: number;
+  to: number;
+  /** 키 사이는 움직이고 키에서 선다. 같은 키를 이으면 그동안 서 있다 — 쉬지 않는 몫은 차·물결·솟는 모형이 진다 */
+  keys: IsoKey[];
+}
+
+function isoAt(t: number, keys: IsoKey[]): { look: V3; zoom: number; turn: number } {
+  const ks = [...keys].sort((a, b) => a.t - b.t);
+  const at = (k: IsoKey) => ({ look: k.look, zoom: k.zoom, turn: k.turn ?? 0 });
+  if (t <= ks[0].t) return at(ks[0]);
+  for (let i = 1; i < ks.length; i++) {
+    if (t >= ks[i].t) continue;
+    const [a, b] = [at(ks[i - 1]), at(ks[i])];
+    const u = toEase(ks[i].ease ?? "inOutCubic")((t - ks[i - 1].t) / Math.max(1e-6, ks[i].t - ks[i - 1].t));
+    return { look: [0, 1, 2].map((j) => a.look[j] + (b.look[j] - a.look[j]) * u) as V3, zoom: a.zoom + (b.zoom - a.zoom) * u, turn: a.turn + (b.turn - a.turn) * u };
+  }
+  return at(ks[ks.length - 1]);
+}
+
+/** 등각 무대 — 정사영 카메라, 금빛 햇살과 긴 그림자, 위·아래가 흐린 틸트시프트. 컷마다 다른 섬을 내려다보고, 카메라는 박에 맞춘 키로만 다가가고(확대) 물러나고 돈다 */
+export function isoStage(el: HTMLElement, o: { ctx: SceneCtx; shots: IsoShot[]; tilt?: number }): ((t: number) => void) & Stage3D {
+  const { ctx } = o;
+  const shots = [...o.shots].sort((a, b) => a.from - b.from);
+  const H = ctx.meta.height;
+  const W = ctx.meta.width;
+  const stage = stage3d(el, {
+    ctx,
+    camera: "ortho",
+    frustum: 12,
+    background: ctx.style.colors.bg,
+    shot(t, cam) {
+      const s = shots.find((x) => t >= x.from && t < x.to) ?? shots[shots.length - 1];
+      const k = isoAt(t, s.keys);
+      const look = new THREE.Vector3(...k.look);
+      cam.position.copy(look).addScaledVector(ISO.clone().applyAxisAngle(UP, k.turn), 60);
+      cam.lookAt(look);
+      const c = cam as THREE.OrthographicCamera;
+      const f = k.zoom;
+      c.left = (-f * W) / H / 2;
+      c.right = (f * W) / H / 2;
+      c.top = f / 2;
+      c.bottom = -f / 2;
+      c.updateProjectionMatrix();
+    },
+  });
+  stage.scene.add(new THREE.HemisphereLight(0xfff4e0, 0x8a7a66, 1.1));
+  const sun = new THREE.DirectionalLight(0xffd9a0, 2.6);
+  sun.position.set(-30, 40, 18);
+  sun.castShadow = true;
+  sun.shadow.mapSize.set(1024, 1024);
+  const sc = sun.shadow.camera as THREE.OrthographicCamera;
+  Object.assign(sc, { left: -40, right: 40, top: 40, bottom: -40, near: 1, far: 140 });
+  sun.shadow.bias = -0.0008;
+  stage.scene.add(sun);
+  // 햇살과 그림자 상자가 카메라를 따라간다 — 섬이 멀리 떨어져 있어도 그림자가 선다
+  const follow = (t: number) => {
+    const s = shots.find((x) => t >= x.from && t < x.to) ?? shots[shots.length - 1];
+    const [x, y, z] = s.keys[0].look;
+    sun.position.set(x - 30, y + 40, z + 18);
+    sun.target.position.set(x, y, z);
+    sun.target.updateMatrixWorld();
+  };
+  // 틸트시프트 — 위·아래 띠만 흐리게. 모형이 작아 보이는 까닭
+  const band = (top: boolean) => {
+    const d = document.createElement("div");
+    const blur = o.tilt ?? 6;
+    d.style.cssText = `position:absolute;left:0;right:0;${top ? "top:0" : "bottom:0"};height:22%;backdrop-filter:blur(${blur}px);-webkit-mask-image:linear-gradient(${top ? "to bottom" : "to top"},#000,transparent);mask-image:linear-gradient(${top ? "to bottom" : "to top"},#000,transparent);pointer-events:none;`;
+    el.append(d);
+  };
+  band(true);
+  band(false);
+  return Object.assign((t: number) => {
+    follow(t);
+    stage.paint(t);
+  }, stage);
+}
+
+const boxGeo = (w: number, h: number, d: number) => {
+  const g = new THREE.BoxGeometry(w, h, d);
+  g.translate(0, h / 2, 0);
+  return g;
+};
+const mat = (ctx: SceneCtx, k: string, rough = 0.85) => new THREE.MeshStandardMaterial({ color: color(ctx, k), roughness: rough, metalness: 0 });
+const shade = (m: THREE.Mesh) => {
+  m.castShadow = true;
+  m.receiveShadow = true;
+  return m;
+};
+
+/** 섬 — 물 위에 타일이 물결처럼 차례로 솟아 땅이 된다. 가운데 둥근 광장 둘레에 길 */
+export function tileIsland(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; size?: [number, number]; at?: number; dur?: number; seed?: string }): (t: number) => void {
+  const { ctx } = o;
+  const [nx, nz] = o.size ?? [10, 10];
+  const water = shade(new THREE.Mesh(boxGeo(nx + 6, 0.2, nz + 6), mat(ctx, "water", 0.35)));
+  water.position.set(o.pos[0], o.pos[1] - 0.25, o.pos[2]);
+  stage.scene.add(water);
+  const seed = o.seed ?? "island";
+  const tiles: { m: THREE.Mesh; delay: number }[] = [];
+  const geo = boxGeo(0.98, 0.5, 0.98);
+  for (let i = 0; i < nx; i++) {
+    for (let k = 0; k < nz; k++) {
+      const edge = i === 0 || k === 0 || i === nx - 1 || k === nz - 1;
+      const road = i === Math.floor(nx / 2) || k === Math.floor(nz / 2);
+      const m = shade(new THREE.Mesh(geo, mat(ctx, road ? "path" : edge && rand(seed, i * 31 + k) > 0.5 ? "path" : "grass")));
+      m.position.set(o.pos[0] + i - nx / 2 + 0.5, o.pos[1] - 0.5, o.pos[2] + k - nz / 2 + 0.5);
+      stage.scene.add(m);
+      tiles.push({ m, delay: (Math.hypot(i - nx / 2, k - nz / 2) / Math.hypot(nx / 2, nz / 2)) * (o.dur ?? 0.3) });
+    }
+  }
+  return (t) => {
+    const at = o.at ?? -1;
+    for (const { m, delay } of tiles) {
+      const a = pop(t, at + delay, 0.25);
+      m.scale.y = Math.max(0.001, a);
+      m.visible = a > 0;
+    }
+  };
+}
+
+/** 건물 — 값만큼 높이 솟는 모형 빌딩, 지붕은 테라코타. 지붕 위에 간판(글) */
+export function towers(stage: Stage3D, o: { ctx: SceneCtx; items: { pos: V3; height: number; at: number; label?: string; roof?: string; width?: number }[] }): (t: number) => void {
+  const { ctx } = o;
+  const parts = o.items.map((it) => {
+    const w = it.width ?? 1.4;
+    const body = shade(new THREE.Mesh(boxGeo(w, 1, w), mat(ctx, "wall")));
+    const roof = shade(new THREE.Mesh(boxGeo(w * 1.08, 0.28, w * 1.08), mat(ctx, it.roof ?? "roof", 0.7)));
+    body.position.set(...it.pos);
+    stage.scene.add(body, roof);
+    const sign = it.label
+      ? textPlane({ text: it.label, family: ctx.style.fonts.display, weight: 800, color: ctx.style.colors.ink, plate: ctx.style.colors.surface, height: 0.78, px: 140 })
+      : null;
+    if (sign) stage.scene.add(sign);
+    return { it, body, roof, sign };
+  });
+  return (t) => {
+    for (const { it, body, roof, sign } of parts) {
+      const a = pop(t, it.at, 0.38);
+      const h = Math.max(0.001, it.height * a);
+      body.scale.y = h;
+      body.visible = roof.visible = a > 0;
+      roof.position.set(it.pos[0], it.pos[1] + h, it.pos[2]);
+      if (sign) {
+        sign.visible = t >= it.at + 0.12;
+        sign.position.set(it.pos[0], it.pos[1] + h + 1.05, it.pos[2]);
+        sign.quaternion.copy(stage.camera.quaternion);
+        sign.scale.setScalar(pop(t, it.at + 0.12, 0.25) || 0.001);
+      }
+    }
+  };
+}
+
+/** 길 위의 작은 차 — 요청이 길을 따라 쉬지 않고 오간다. 길은 꺾은선, 차는 그 위를 돈다 */
+export function carFlow(stage: Stage3D, o: { ctx: SceneCtx; roads: V3[][]; count?: number; speed?: number; at?: number; seed?: string }): (t: number) => void {
+  const { ctx } = o;
+  const seed = o.seed ?? "cars";
+  const geo = boxGeo(0.34, 0.2, 0.2);
+  const colors = ["roof", "gate", "steel", "warning"];
+  const cars = Array.from({ length: o.count ?? 18 }, (_, i) => {
+    const m = shade(new THREE.Mesh(geo, mat(ctx, colors[i % colors.length], 0.5)));
+    stage.scene.add(m);
+    return { m, road: o.roads[i % o.roads.length], phase: rand(seed, i) };
+  });
+  const lens = o.roads.map((r) => r.slice(1).reduce((s, p, i) => s + Math.hypot(p[0] - r[i][0], p[2] - r[i][2]), 0));
+  return (t) => {
+    for (const c of cars) {
+      const on = t >= (o.at ?? -1);
+      c.m.visible = on;
+      if (!on) continue;
+      const L = lens[o.roads.indexOf(c.road)];
+      let d = (((c.phase * L + t * (o.speed ?? 2.4)) % L) + L) % L;
+      for (let i = 1; i < c.road.length; i++) {
+        const [a, b] = [c.road[i - 1], c.road[i]];
+        const seg = Math.hypot(b[0] - a[0], b[2] - a[2]);
+        if (d <= seg) {
+          const u = d / seg;
+          c.m.position.set(a[0] + (b[0] - a[0]) * u, a[1], a[2] + (b[2] - a[2]) * u);
+          c.m.rotation.y = Math.atan2(-(b[2] - a[2]), b[0] - a[0]);
+          break;
+        }
+        d -= seg;
+      }
+    }
+  };
+}
+
+/** 관문 회관 — OG 로고의 두 칸이 광장 위 파란 문 둘로 선다. 박마다 문이 빛난다 */
+export function gatewayHall(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; at?: number; pulse?: number[]; scale?: number }): (t: number) => void {
+  const { ctx } = o;
+  const k = o.scale ?? 1;
+  const plaza = shade(new THREE.Mesh(new THREE.CylinderGeometry(3.2 * k, 3.2 * k, 0.16, 28), mat(ctx, "surface")));
+  plaza.position.set(o.pos[0], o.pos[1] + 0.08, o.pos[2]);
+  const group = new THREE.Group();
+  group.position.set(...o.pos);
+  const gm = new THREE.MeshStandardMaterial({ color: color(ctx, "gate"), roughness: 0.4, emissive: color(ctx, "gate"), emissiveIntensity: 0 });
+  for (const [dx, hole] of [[-1.25, 0.32], [1.25, 0.32]] as const) {
+    const geo = new THREE.ExtrudeGeometry(roundRectShape(2 * k, 2.6 * k, 0.5 * k, hole * k), { depth: 0.6 * k, bevelEnabled: true, bevelThickness: 0.06, bevelSize: 0.06, bevelSegments: 2, curveSegments: 8 });
+    geo.translate(0, 1.3 * k + 0.16, -0.3 * k);
+    const m = shade(new THREE.Mesh(geo, gm));
+    m.position.x = dx * k;
+    group.add(m);
+  }
+  stage.scene.add(plaza, group);
+  return (t) => {
+    const a = pop(t, o.at ?? -1, 0.4);
+    group.visible = plaza.visible = a > 0;
+    group.scale.set(1, Math.max(0.001, a), 1);
+    let f = 0;
+    for (const p of o.pulse ?? []) if (t >= p) f = Math.max(f, Math.exp(-(t - p) / 0.2));
+    gm.emissiveIntensity = 0.15 + 1.2 * f;
+  };
+}
+
+/** 간판 — 기둥 위 크림 판이 톡 서고 글이 박힌다. text 가 함수면 바뀔 때만 다시 그린다 */
+export function signPost(stage: Stage3D, o: { ctx: SceneCtx; text: string | ((t: number) => string); pos: V3; height?: number; at?: number; until?: number; font?: "sans" | "display" | "mono"; color?: string; post?: boolean }): (t: number) => void {
+  const { ctx } = o;
+  const h = o.height ?? 0.8;
+  const px = 150;
+  const family = ctx.style.fonts[o.font ?? "display"];
+  const font = `${o.font === "mono" ? 700 : 800} ${px}px ${family}`;
+  const probe = document.createElement("canvas").getContext("2d")!;
+  probe.font = font;
+  const sample = typeof o.text === "function" ? o.text(1e9) : o.text;
+  const cw = Math.ceil(probe.measureText(sample).width * 1.12 + px * 0.8);
+  const ch = Math.ceil(px * 1.55);
+  const c = document.createElement("canvas");
+  c.width = cw;
+  c.height = ch;
+  const tex = new THREE.CanvasTexture(c);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = 4;
+  let last = "";
+  // 바뀌는 글(함수)은 매번 그린다 — 같은 t 를 두 번 그릴 때 둘째에 fillText 가 빠지면 검사가 다른 화면으로 본다
+  const draw = (s: string, again = false) => {
+    if (s === last && !again) return;
+    last = s;
+    const g = c.getContext("2d")!;
+    g.fillStyle = ctx.style.colors.surface;
+    g.beginPath();
+    g.roundRect(0, 0, cw, ch, px * 0.22);
+    g.fill();
+    g.lineWidth = px * 0.06;
+    g.strokeStyle = ctx.style.colors.accent;
+    g.stroke();
+    g.font = font;
+    g.fillStyle = ctx.style.colors[o.color ?? "ink"] ?? o.color ?? "#000";
+    g.textAlign = "center";
+    g.textBaseline = "middle";
+    g.fillText(s, cw / 2, ch / 2 + px * 0.04);
+    tex.needsUpdate = true;
+  };
+  const worldW = (h * cw) / ch;
+  const board = new THREE.Mesh(new THREE.PlaneGeometry(worldW, h), new THREE.MeshBasicMaterial({ map: tex, transparent: true, side: THREE.DoubleSide, toneMapped: false }));
+  const group = new THREE.Group();
+  const lift = o.post === false ? 0 : 0.9;
+  if (o.post !== false) {
+    const pole = shade(new THREE.Mesh(boxGeo(0.12, lift, 0.12), mat(ctx, "steel")));
+    group.add(pole);
+  }
+  board.position.y = lift + h / 2;
+  group.add(board);
+  group.position.set(...o.pos);
+  stage.scene.add(group);
+  return (t) => {
+    const at = o.at ?? -1;
+    const on = t >= at && (o.until === undefined || t < o.until);
+    group.visible = on;
+    if (!on) return;
+    group.scale.setScalar(Math.max(0.001, pop(t, at, 0.3)));
+    board.quaternion.copy(stage.camera.quaternion);
+    draw(typeof o.text === "function" ? o.text(t) : o.text, typeof o.text === "function");
+  };
+}
+
+/** 해시계 광장 — 24 칸 둥근 마당, 밤 창(00–10시) 칸이 정한 시각에 쑥 꺼지고(-90%) 해 바늘이 돈다 */
+export function sunDial(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; radius?: number; at?: number; drop: number; window?: [number, number] }): (t: number) => void {
+  const { ctx } = o;
+  const r = o.radius ?? 4;
+  const [h0, h1] = o.window ?? [0, 10];
+  const cells = Array.from({ length: 24 }, (_, h) => {
+    const night = h >= h0 && h < h1;
+    const a0 = (h / 24) * Math.PI * 2;
+    const shape = new THREE.Shape();
+    const steps = 4;
+    shape.moveTo(Math.sin(a0) * r * 0.45, Math.cos(a0) * r * 0.45);
+    for (let s = 0; s <= steps; s++) {
+      const a = a0 + ((Math.PI * 2) / 24) * (s / steps) * 0.92;
+      shape.lineTo(Math.sin(a) * r, Math.cos(a) * r);
+    }
+    for (let s = steps; s >= 0; s--) {
+      const a = a0 + ((Math.PI * 2) / 24) * (s / steps) * 0.92;
+      shape.lineTo(Math.sin(a) * r * 0.45, Math.cos(a) * r * 0.45);
+    }
+    const geo = new THREE.ExtrudeGeometry(shape, { depth: 1, bevelEnabled: false });
+    geo.rotateX(-Math.PI / 2);
+    const m = shade(new THREE.Mesh(geo, mat(ctx, night ? "accent" : "wall", 0.7)));
+    m.position.set(...o.pos);
+    stage.scene.add(m);
+    return { m, night, h };
+  });
+  // 해 바늘 — 가는 금속 침. 굵은 검정 막대면 마당을 가르는 띠로 보인다
+  const hand = shade(new THREE.Mesh(boxGeo(0.12, 0.22, r * 0.86), mat(ctx, "steel", 0.4)));
+  hand.geometry.translate(0, 0, -r * 0.45);
+  hand.position.set(...o.pos);
+  stage.scene.add(hand);
+  return (t) => {
+    for (const c of cells) {
+      const a = pop(t, (o.at ?? -1) + c.h * 0.01, 0.28);
+      const sink = c.night ? 1 - 0.9 * ease.outCubic(clamp((t - o.drop) / 0.3)) : 1;
+      c.m.scale.y = Math.max(0.001, 0.9 * a * sink);
+      c.m.visible = a > 0;
+    }
+    hand.rotation.y = -t * 2.4;
+    hand.position.y = o.pos[1] + 0.95;
+  };
+}
+
+/** 드롭 — 섬 가운데서 작은 블록이 터져 오르고 떨어진다(닫힌 식 포물선). 섬광·흔들림은 dropBurst 로 */
+export function confettiBurst(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; drop?: number; count?: number; seed?: string }): (t: number) => void {
+  const { ctx } = o;
+  const seed = o.seed ?? "confetti";
+  const n = o.count ?? 70;
+  const keys = ["roof", "gate", "grass", "warning", "water"];
+  const bits = Array.from({ length: n }, (_, i) => {
+    const m = shade(new THREE.Mesh(boxGeo(0.3, 0.3, 0.3), mat(ctx, keys[i % keys.length], 0.6)));
+    stage.scene.add(m);
+    const a = rand(seed, i) * Math.PI * 2;
+    const sp = 2 + rand(seed, i + 99) * 5;
+    // 낮게 터진다 — 높이 솟으면 위에 선 숫자 간판을 가린다
+    return { m, vx: Math.cos(a) * sp, vz: Math.sin(a) * sp, vy: 4 + rand(seed, i + 199) * 4.5, spin: rand(seed, i + 299) * 12 };
+  });
+  const flash = document.createElement("div");
+  flash.style.cssText = "position:absolute;inset:0;background:#FFF8EE;opacity:0;pointer-events:none;";
+  stage.el.append(flash);
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "confettiBurst" });
+    flash.style.opacity = String(Math.round(s.flash * 80) / 100);
+    const local = t - ctx.beats.drop(o.drop ?? 0);
+    for (const b of bits) {
+      const on = local >= 0 && local < 1.6;
+      b.m.visible = on;
+      if (!on) continue;
+      const y = Math.max(0, b.vy * local - 9.8 * local * local);
+      b.m.position.set(o.pos[0] + b.vx * local, o.pos[1] + y, o.pos[2] + b.vz * local);
+      b.m.rotation.set(b.spin * local, b.spin * local * 0.7, 0);
+    }
+    stage.camera.position.x += (s.shake.x ?? 0) * 0.02;
+    stage.camera.position.y += (s.shake.y ?? 0) * 0.02;
+  };
+}

package/themes/iso-diorama/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>