kasaframe 0.1.1 → 0.1.4

package/themes/debug-hud/variants/wine-sky.json

@@ -0,0 +1,112 @@
+{
+  "id": "wine-sky",
+  "world": "debug-hud",
+  "name": "Wine Sky",
+  "desc": "포도주빛 바탕에 하늘색 강조 · 한글까지 고정폭인 코딩 글꼴 · 주사선",
+  "params": {
+    "scheme": "dark",
+    "bgL": 0.1989,
+    "tint": {
+      "h": 35.409,
+      "c": 0.0422
+    },
+    "inkL": 0.9345,
+    "hue": 228.1971,
+    "chroma": 0.9162,
+    "fonts": "nanum-coding",
+    "texture": {
+      "kind": "scan",
+      "amount": 0.22
+    },
+    "stroke": 0.63,
+    "radius": null,
+    "tempo": 1.22,
+    "density": 1
+  },
+  "style": {
+    "scheme": "dark",
+    "colors": {
+      "bg": "#260E08",
+      "surface": "#2E170B",
+      "raised": "#362009",
+      "line": "#1D4A5D",
+      "ink": "#CFEFFF",
+      "inkSoft": "#7AD7FF",
+      "dim": "#00A8D8",
+      "accent": "#CFEFFF",
+      "accentSoft": "#15617D",
+      "accentText": "#CFEFFF",
+      "onAccent": "#260E08",
+      "success": "#CFEFFF",
+      "danger": "#CFEFFF",
+      "warning": "#CFEFFF"
+    },
+    "fonts": {
+      "sans": "\"Nanum Gothic Coding\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "display": "\"Nanum Gothic Coding\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "mono": "\"Nanum Gothic Coding\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Nanum Gothic Coding",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/nanumgothiccoding/NanumGothicCoding-Regular.ttf",
+          "weight": "400"
+        },
+        {
+          "family": "Nanum Gothic Coding",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/nanumgothiccoding/NanumGothicCoding-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"
+        }
+      ]
+    },
+    "type": {
+      "weightDisplay": 700,
+      "weightBody": 400,
+      "tracking": "0em"
+    },
+    "look": {
+      "texture": {
+        "kind": "scan",
+        "amount": 0.22
+      },
+      "stroke": 0.63,
+      "tempo": 1.22
+    }
+  },
+  "tags": {
+    "mood": [
+      "기술적",
+      "정밀",
+      "긴장감",
+      "어두운",
+      "차가운",
+      "레트로"
+    ],
+    "light": "dark",
+    "use": [
+      "디버깅",
+      "로그",
+      "성능",
+      "측정",
+      "시스템",
+      "데이터"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-11",
+    "colors": {
+      "ink": 15.24,
+      "inkSoft": 11.28,
+      "dim": 6.63,
+      "onAccent": 15.24
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.counter"
+  }
+}

package/themes/depth-flight/THEME.md

@@ -0,0 +1,54 @@
+# 깊이 비행 `depth-flight`
+
+**비유: 카메라가 관문을 지나 깊이로 날아들며, 정보가 안개 속에서 다가온다.** 화면이 평면이 아니라 깊이다. 정보는 안개 낀 깊은 밤 공간 곳곳에 글자판·빛기둥·관문으로 놓이고, 카메라가 그 사이를 날며 하나씩 지나친다. OG 로고의 두 칸이 관문이 되고, 흩어진 빛 리본이 관문을 지나 한 줄기로 모인다(OG 3D 관문 시안에서).
+
+## 맞는 내용·용도
+
+- 여럿이 하나로 모이는 이야기 — 게이트웨이·라우터·통합·파이프라인, 「여러 X 를 한 Y 로」.
+- 용도: 홍보(promo)·공개(launch)·설명(explainer)·쇼츠(shorts). 드롭에 `warpBurst`.
+- 화면 글: 주소·모델 ID·숫자·짧은 낱말 — 깊이에서 읽히게 크게.
+
+## 금지
+
+- 밝은 바탕·흐린 빛 번짐(평면 랜딩 느낌) — 바탕은 늘 깊은 밤, 안개가 먼 것을 지운다.
+- 작은 글(깊이에서 뭉개진다). 화면을 덮는 옅은 유리 판(뒤의 글을 가린다) — 유리 관문은 짙게, 빛은 테두리 후광으로.
+- 이유 없이 떠도는 카메라(늘 날기·사인 드리프트·박마다 자세). 카메라는 박에 떠나 박에 내려앉는다.
+- 금속·푸른 발광 밖의 재질, 무지개·분홍 같은 다른 빛깔.
+- 슬로건·감성 문장.
+
+## 움직임
+
+- 움직이는 것은 다 내용 하나를 뜻한다: 리본 속 빛은 흩어진 요청이 관문으로 모이는 흐름, 먼지(`starDust`)는 공간에 박혀 카메라가 날 때만 흘러 비행 속도를 보인다(카메라가 서면 먼지도 선다). 쉬지 않는 몫은 박마다 다가와 앉는 카드·솟는 기둥·굴러가는 숫자가 진다.
+- 카메라는 이유가 있을 때만 — 키 하나가 움직임 하나다. 박마다 관문을 뚫고 나가 다음 관문 앞에 내려앉기(outCubic), 드러낼 것에 다가가기, 비교 전체를 담게 물러나기, 드롭 앞에 숫자로 빨려 들기(inCubic)·드롭에 숫자 속에서 튕겨 나오기(outExpo). 키 사이가 아니면 선다 — 컷 끝까지 앉을 것이 없으면 다음 컷까지 천천히 이어 다가간다(컷은 움직임 위에서, `linear`).
+- 구도는 마디마다 바꾼다: 컷마다 세트를 안개 너머로 떨어뜨려 두고 카메라를 새 자리에서 출발시킨다.
+- 박마다 큰 사건 하나: 관문을 지나고(발광), 카드가 다가오고, 기둥이 솟는다.
+
+## 효과
+
+입체 테마 — 바탕은 `@kasaframe/themes/stage3d`(렌더러 하나를 장면끼리 돌려 쓴다). 첫 효과(layer)가 무대를 만들고, 나머지(rig)는 `stage.add(…)` 로 얹는다. 같은 레포 안에서는 `effects.ts` 를 바로, 프로젝트에서는 `fx("depth-flight")`.
+
+| 효과 | 꼴 | 하는 일 |
+|---|---|---|
+| `flightStage` | layer | 비행 무대 — 안개 낀 깊은 밤, 컷마다 카메라가 박에 맞춘 키를 따라 날아 내려앉는다(키마다 이징, 같은 자리 키 사이는 선다). 돌려준 함수가 그리기, 속성이 무대 |
+| `starDust` | rig | 박힌 먼지 — 공간에 박혀 있어 카메라가 날 때만 다가와 지나간다(흐름이 곧 비행 속도), 카메라가 서면 선다 |
+| `lightRibbons` | rig | 빛 리본 — 흩어진 줄기가 한 점(관문)으로 모여 한 줄기로, 속 빛이 늘 흐른다 |
+| `gate` | rig | 관문 — OG 로고의 둥근 사각 칸, 은색 금속 또는 짙은 푸른 유리. 테두리 빛이 번지고 박마다 크게 지나간다 |
+| `depthCard` | rig | 깊이 카드 — 스스로 빛나는 글자판이 안개 속 깊이에서 미끄러져 와 선다. layers 로 두께, text 가 함수면 숫자가 굴러간다 |
+| `pillar` | rig | 빛기둥 — 값만큼 바닥에서 솟는 발광 기둥, 솟는 동안 꼭대기 빛이 크게 번진다 |
+| `warpBurst` | rig | 드롭 — 하얗게 터지고 빛줄기가 사방으로 뻗으며 카메라가 흔들린다(dropBurst) |
+| `dayRing` | rig | 하루 고리 — 24 칸이 둥글게 서고 정한 시각에 밤 창(00–10시)이 -90% 로 주저앉는다, 고리는 늘 돈다 |
+
+## 장면 문법 슬롯 — `slots.ts`
+
+패턴이 테마 이름 없이 부르는 자리(`@kasaframe/themes/slots` 의 `themeSlots("depth-flight")`). 3D 는 `surface` 하나, 나머지는 DOM·캔버스 2D.
+
+| 슬롯 | 채운 것 |
+|---|---|
+| `surface` | 깊은 밤 한 장 — 안개 너머 먼 관문 둘과 그리로 모이는 옅은 빛 줄기, 박힌 먼지. 처음 한 번 그려 서 있다(`stillStage`) |
+| `panel` | 짙은 유리 판 — 깊이에서 흐림을 걷으며 다가와 서고, 서는 동안 테두리를 따라 빛 한 줄기가 한 바퀴 돈 뒤 테가 고르게 빛난다. accent 면 짙은 파랑에 후광이 크다 |
+| `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/depth-flight/effects.ts

@@ -0,0 +1,396 @@
+import { clamp, ease, rand, toEase, type EaseName, type SceneCtx } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { roundRectShape, stage3d, 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 arrive = (t: number, at: number, dur = 0.35) => ease.outCubic(clamp((t - at) / dur));
+
+export interface CamKey {
+  t: number;
+  pos: V3;
+  look: V3;
+  /** 앞 키에서 이 키로 오는 이징 — 박에 떠나 박에 내려앉는다. 기본 inOutCubic */
+  ease?: EaseName;
+}
+
+export interface Shot {
+  from: number;
+  to: number;
+  /** 카메라 키 — 키 사이는 곧게 날고 키에서 선다. 같은 자리 키를 이으면 그동안 서 있다(화면 안 움직임이 쉬지 않는 몫을 진다) */
+  keys: CamKey[];
+}
+
+const mix3 = (a: V3, b: V3, u: number): V3 => [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u];
+// 카메라는 이유가 있을 때만 — 키 하나가 움직임 하나(관문 지나기·다가가기·물러나기), 그 사이는 선다
+function camAt(t: number, keys: CamKey[]): { pos: V3; look: V3 } {
+  const ks = [...keys].sort((a, b) => a.t - b.t);
+  if (t <= ks[0].t) return ks[0];
+  for (let i = 1; i < ks.length; i++) {
+    if (t >= ks[i].t) continue;
+    const [a, b] = [ks[i - 1], ks[i]];
+    const u = toEase(b.ease ?? "inOutCubic")((t - a.t) / Math.max(1e-6, b.t - a.t));
+    return { pos: mix3(a.pos, b.pos, u), look: mix3(a.look, b.look, u) };
+  }
+  return ks[ks.length - 1];
+}
+
+/** 비행 무대 — 안개 낀 깊은 밤, 컷(shot)마다 카메라가 박에 맞춘 키를 따라 날아 내려앉는다. 돌려준 함수가 그리기, 속성은 무대 */
+export function flightStage(el: HTMLElement, o: { ctx: SceneCtx; shots: Shot[]; fog?: [number, number]; fov?: number }): ((t: number) => void) & Stage3D {
+  const shots = [...o.shots].sort((a, b) => a.from - b.from);
+  const stage = stage3d(el, {
+    ctx: o.ctx,
+    fov: o.fov ?? 55,
+    fog: o.fog ?? [10, 80],
+    env: true,
+    shot(t, cam) {
+      const s = shots.find((x) => t >= x.from && t < x.to) ?? shots[shots.length - 1];
+      const p = camAt(t, s.keys);
+      cam.position.set(...p.pos);
+      cam.lookAt(...p.look);
+    },
+  });
+  stage.scene.add(stage.camera);
+  stage.scene.add(new THREE.AmbientLight(0x8fa8ff, 0.35));
+  const key = new THREE.DirectionalLight(0xffffff, 1.4);
+  key.position.set(4, 6, 8);
+  stage.scene.add(key);
+  return Object.assign((t: number) => stage.paint(t), stage);
+}
+
+/** 박힌 먼지 — 공간에 박혀 있어 카메라가 날 때만 다가와 지나간다(흐름이 곧 비행 속도). 카메라가 서면 먼지도 선다. 카메라 둘레 상자 안에서 감아 돌려 어느 컷에서나 찬다 */
+export function starDust(stage: Stage3D, o: { ctx: SceneCtx; count?: number; spread?: number; depth?: number; seed?: string }): (t: number) => void {
+  const n = o.count ?? 900;
+  const spread = o.spread ?? 14;
+  const depth = o.depth ?? 60;
+  const seed = o.seed ?? "dust";
+  const base = Array.from({ length: n }, (_, i) => [(rand(seed, i * 3) - 0.5) * 2 * spread, (rand(seed, i * 3 + 1) - 0.5) * 2 * spread * 0.6, rand(seed, i * 3 + 2) * depth]);
+  const pos = new Float32Array(n * 3);
+  const geo = new THREE.BufferGeometry();
+  geo.setAttribute("position", new THREE.BufferAttribute(pos, 3));
+  const mat = new THREE.PointsMaterial({ color: color(o.ctx, "accentSoft"), size: 0.07, transparent: true, opacity: 0.85, depthWrite: false, fog: false });
+  const pts = new THREE.Points(geo, mat);
+  pts.frustumCulled = false;
+  stage.camera.add(pts);
+  const wrap = (v: number, lo: number, hi: number) => ((((v - lo) % (hi - lo)) + (hi - lo)) % (hi - lo)) + lo;
+  return () => {
+    const c = stage.camera.position;
+    for (let i = 0; i < n; i++) {
+      const [x, y, z0] = base[i];
+      pos[i * 3] = wrap(x - c.x, -spread, spread);
+      pos[i * 3 + 1] = wrap(y - c.y, -spread * 0.6, spread * 0.6);
+      pos[i * 3 + 2] = -(wrap(z0 + c.z, 0, depth) + 0.5);
+    }
+    geo.attributes.position.needsUpdate = true;
+  };
+}
+
+function dashTexture(): THREE.CanvasTexture {
+  const c = document.createElement("canvas");
+  c.width = 512;
+  c.height = 8;
+  const g = c.getContext("2d")!;
+  for (let x = 0; x < 512; x++) {
+    const v = 0.35 + 0.65 * Math.max(0, Math.sin((x / 512) * Math.PI * 6)) ** 6;
+    g.fillStyle = `rgba(255,255,255,${v})`;
+    g.fillRect(x, 0, 1, 8);
+  }
+  const tex = new THREE.CanvasTexture(c);
+  tex.wrapS = THREE.RepeatWrapping;
+  tex.repeat.set(3, 1);
+  return tex;
+}
+
+/** 빛 리본 — 흩어진 줄기가 한 점(관문)으로 모여 한 줄기로 나간다. 리본 속 빛이 늘 흐른다 */
+export function lightRibbons(stage: Stage3D, o: { ctx: SceneCtx; from: V3; to: V3; out?: V3; count?: number; spread?: number; radius?: number; at?: number; speed?: number; seed?: string }): (t: number) => void {
+  const n = o.count ?? 7;
+  const spread = o.spread ?? 6;
+  const seed = o.seed ?? "ribbon";
+  const tex = dashTexture();
+  const mats: THREE.MeshBasicMaterial[] = [];
+  for (let i = 0; i < n; i++) {
+    const oy = (i / Math.max(1, n - 1) - 0.5) * 2 * spread * 0.6;
+    const ox = (rand(seed, i) - 0.5) * spread;
+    const pts = [
+      new THREE.Vector3(o.from[0] + ox, o.from[1] + oy, o.from[2]),
+      new THREE.Vector3((o.from[0] * 2 + o.to[0]) / 3 + ox * 0.6, (o.from[1] * 2 + o.to[1]) / 3 + oy * 0.8 + Math.sin(i) * 0.8, (o.from[2] * 2 + o.to[2]) / 3),
+      new THREE.Vector3((o.from[0] + o.to[0] * 2) / 3 + ox * 0.2, (o.from[1] + o.to[1] * 2) / 3 + oy * 0.3, (o.from[2] + o.to[2] * 2) / 3),
+      new THREE.Vector3(...o.to),
+    ];
+    if (o.out) pts.push(new THREE.Vector3(...o.out));
+    const curve = new THREE.CatmullRomCurve3(pts);
+    const mat = new THREE.MeshBasicMaterial({ color: color(o.ctx, i % 3 === 0 ? "accentSoft" : "glow"), map: tex, transparent: true, opacity: 0, blending: THREE.AdditiveBlending, depthWrite: false, toneMapped: false });
+    mats.push(mat);
+    stage.scene.add(new THREE.Mesh(new THREE.TubeGeometry(curve, 120, o.radius ?? 0.09, 6, false), mat));
+  }
+  return (t) => {
+    tex.offset.x = -t * (o.speed ?? 0.9);
+    const a = arrive(t, o.at ?? 0, 0.4);
+    for (const m of mats) m.opacity = 0.9 * a;
+  };
+}
+
+// 후처리 블룸은 SwiftShader 에서 한 프레임을 몇 배로 늘린다 — 번진 빛을 캔버스에 한 번 그려 가산 합성 판으로 얹는다
+function haloTexture(w: number, h: number, r: number, line: number, glow: string): THREE.CanvasTexture {
+  const k = 96;
+  const pad = 0.9;
+  const c = document.createElement("canvas");
+  c.width = Math.ceil((w + pad * 2) * k);
+  c.height = Math.ceil((h + pad * 2) * k);
+  const g = c.getContext("2d")!;
+  g.strokeStyle = glow;
+  g.shadowColor = glow;
+  for (const [blur, width, alpha] of [[pad * k * 0.9, line * k, 0.55], [pad * k * 0.35, line * k * 0.6, 0.8]] as const) {
+    g.globalAlpha = alpha;
+    g.shadowBlur = blur;
+    g.lineWidth = width;
+    g.beginPath();
+    g.roundRect(pad * k, pad * k, w * k, h * k, r * k);
+    g.stroke();
+  }
+  const tex = new THREE.CanvasTexture(c);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  return tex;
+}
+const additive = (map: THREE.Texture) => new THREE.MeshBasicMaterial({ map, transparent: true, opacity: 0, blending: THREE.AdditiveBlending, depthWrite: false, toneMapped: false, fog: false });
+let dotTex: THREE.CanvasTexture | null = null;
+function dot(): THREE.CanvasTexture {
+  if (dotTex) return dotTex;
+  const c = document.createElement("canvas");
+  c.width = c.height = 128;
+  const g = c.getContext("2d")!;
+  const grad = g.createRadialGradient(64, 64, 0, 64, 64, 64);
+  grad.addColorStop(0, "rgba(255,255,255,1)");
+  grad.addColorStop(0.25, "rgba(255,255,255,0.45)");
+  grad.addColorStop(1, "rgba(255,255,255,0)");
+  g.fillStyle = grad;
+  g.fillRect(0, 0, 128, 128);
+  dotTex = new THREE.CanvasTexture(c);
+  return dotTex;
+}
+
+/** 관문 — OG 로고의 둥근 사각 칸. metal 은 은색 금속, glass 는 푸르게 빛나는 유리. 테두리 빛이 늘 번지고 박마다 한 번 크게 지나간다 */
+export function gate(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; size?: [number, number]; kind?: "metal" | "glass"; at?: number; pulse?: number[]; rotY?: number }): (t: number) => void {
+  const [w, h] = o.size ?? [4.2, 5.4];
+  const r = Math.min(w, h) * 0.22;
+  const geo = new THREE.ExtrudeGeometry(roundRectShape(w, h, r, Math.min(w, h) * 0.16), { depth: 0.55, bevelEnabled: true, bevelThickness: 0.08, bevelSize: 0.08, bevelSegments: 3, curveSegments: 10 });
+  geo.translate(0, 0, -0.275);
+  const glass = o.kind === "glass";
+  // 유리 관문은 짙게 — 옅은 하늘색 판이면 화면을 덮어 뒤의 글을 가린다. 빛은 테두리 후광이 낸다
+  const mat = glass
+    ? new THREE.MeshStandardMaterial({ color: color(o.ctx, "accentDeep"), emissive: color(o.ctx, "glow"), emissiveIntensity: 0.25, metalness: 0.3, roughness: 0.1, transparent: true, opacity: 0.5, depthWrite: false })
+    : new THREE.MeshStandardMaterial({ color: color(o.ctx, "metal"), metalness: 1, roughness: 0.22 });
+  const mesh = new THREE.Mesh(geo, mat);
+  const glow = o.ctx.style.colors.glow ?? "#5AA2FF";
+  const halo = new THREE.Mesh(new THREE.PlaneGeometry(w + 1.8, h + 1.8), additive(haloTexture(w, h, r, Math.min(w, h) * 0.08, glow)));
+  const group = new THREE.Group();
+  group.add(mesh, halo);
+  group.position.set(...o.pos);
+  group.rotation.y = o.rotY ?? 0;
+  stage.scene.add(group);
+  const camPos = new THREE.Vector3();
+  return (t) => {
+    const a = arrive(t, o.at ?? -1, 0.3);
+    group.visible = a > 0;
+    group.scale.setScalar(0.55 + 0.45 * a);
+    let flash = 0;
+    for (const p of o.pulse ?? []) if (t >= p) flash = Math.max(flash, Math.exp(-(t - p) / 0.18));
+    // 카메라가 관문을 지날 때 빛 테가 화면을 쓸고 지나가면 섬광이 된다 — 가까울수록 빛을 거둔다
+    const near = clamp((stage.camera.getWorldPosition(camPos).distanceTo(group.position) - 2.5) / 4);
+    flash *= near;
+    if (glass) mat.emissiveIntensity = (0.25 + 1.1 * flash) * (0.3 + 0.7 * near);
+    else mat.emissive = color(o.ctx, "glow").multiplyScalar(0.9 * flash);
+    halo.material.opacity = a * near * ((glass ? 0.45 : 0.3) + 0.9 * flash);
+  };
+}
+
+/** 깊이 카드 — 글자판이 안개 속 깊이에서 미끄러져 와 제자리에 선다. layers 를 주면 뒤로 겹쳐 두께가 생긴다. text 가 함수면 바뀔 때만 다시 그린다 */
+export function depthCard(
+  stage: Stage3D,
+  o: { ctx: SceneCtx; text: string | ((t: number) => string); pos: V3; rot?: V3; height: number; color?: string; font?: "sans" | "display" | "mono"; weight?: number; at?: number; until?: number; emerge?: number; layers?: number; align?: "left" | "center" },
+): (t: number) => void {
+  const { ctx } = o;
+  const px = 180;
+  const family = ctx.style.fonts[o.font ?? "display"];
+  const font = `${o.weight ?? ctx.style.type.weightDisplay} ${px}px ${family}`;
+  const sample = typeof o.text === "function" ? o.text(1e9) : o.text;
+  const probe = document.createElement("canvas").getContext("2d")!;
+  probe.font = font;
+  const maxW = Math.ceil(probe.measureText(sample).width * 1.15 + px * 0.6);
+  const cw = maxW;
+  const ch = Math.ceil(px * 1.5);
+  const worldH = o.height * 1.5;
+  const worldW = (worldH * cw) / ch;
+  const make = (fill: string, glow?: string) => {
+    const c = document.createElement("canvas");
+    c.width = cw;
+    c.height = ch;
+    const tex = new THREE.CanvasTexture(c);
+    tex.colorSpace = THREE.SRGBColorSpace;
+    tex.anisotropy = 4;
+    const geo = new THREE.PlaneGeometry(worldW, worldH);
+    if (o.align === "left") geo.translate(worldW / 2, 0, 0);
+    const mat = new THREE.MeshBasicMaterial({ map: tex, transparent: true, depthWrite: false, side: THREE.DoubleSide, toneMapped: false });
+    let last = "";
+    const draw = (s: string, again = false) => {
+      if (s === last && !again) return;
+      last = s;
+      const g = c.getContext("2d")!;
+      g.clearRect(0, 0, cw, ch);
+      g.font = font;
+      g.fillStyle = fill;
+      g.textBaseline = "middle";
+      g.textAlign = o.align === "left" ? "left" : "center";
+      // 글자가 스스로 빛나 번진다 — 어두운 깊이에서 글이 떠 보이는 까닭
+      if (glow) {
+        g.shadowColor = glow;
+        g.shadowBlur = px * 0.22;
+      }
+      g.fillText(s, o.align === "left" ? px * 0.3 : cw / 2, ch / 2);
+      tex.needsUpdate = true;
+    };
+    return { mesh: new THREE.Mesh(geo, mat), mat, draw };
+  };
+  const group = new THREE.Group();
+  const front = make(ctx.style.colors[o.color ?? "ink"] ?? o.color ?? "#fff", o.color === "dim" ? undefined : ctx.style.colors.glow);
+  const back = Array.from({ length: o.layers ?? 0 }, (_, k) => {
+    const l = make(ctx.style.colors.accent);
+    l.mesh.position.z = -0.05 * (k + 1);
+    l.mat.opacity = 0.55 * (1 - k / (o.layers ?? 1));
+    group.add(l.mesh);
+    return l;
+  });
+  group.add(front.mesh);
+  group.position.set(...o.pos);
+  if (o.rot) group.rotation.set(...o.rot);
+  stage.scene.add(group);
+  const emerge = o.emerge ?? 14;
+  return (t) => {
+    const at = o.at ?? -1;
+    const on = t >= at && (o.until === undefined || t < o.until);
+    group.visible = on;
+    if (!on) return;
+    const a = arrive(t, at);
+    group.position.z = o.pos[2] - emerge * (1 - a);
+    front.mat.opacity = a;
+    const s = typeof o.text === "function" ? o.text(t) : o.text;
+    // 바뀌는 글은 매번 그린다 — 같은 t 를 두 번 그릴 때 둘째에 fillText 가 빠지면 검사가 다른 화면으로 본다
+    const again = typeof o.text === "function";
+    front.draw(s, again);
+    for (const b of back) b.draw(s, again);
+  };
+}
+
+/** 빛기둥 — 값만큼 바닥에서 솟는 발광 기둥. 꼭대기가 밝다 */
+export function pillar(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; height: number; width?: number; at?: number; color?: string }): (t: number) => void {
+  const w = o.width ?? 0.9;
+  const geo = new THREE.BoxGeometry(w, 1, w);
+  geo.translate(0, 0.5, 0);
+  const mat = new THREE.MeshStandardMaterial({ color: color(o.ctx, o.color ?? "accent"), emissive: color(o.ctx, o.color ?? "glow"), emissiveIntensity: 0.55, metalness: 0.3, roughness: 0.35 });
+  const mesh = new THREE.Mesh(geo, mat);
+  mesh.position.set(...o.pos);
+  const cap = new THREE.Mesh(new THREE.BoxGeometry(w * 1.02, 0.08, w * 1.02), new THREE.MeshBasicMaterial({ color: 0xffffff, toneMapped: false }));
+  const flare = new THREE.Sprite(new THREE.SpriteMaterial({ map: dot(), color: color(o.ctx, "glow"), transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, toneMapped: false }));
+  stage.scene.add(mesh, cap, flare);
+  return (t) => {
+    const a = arrive(t, o.at ?? -1, 0.4);
+    const h = Math.max(0.001, o.height * a);
+    mesh.scale.y = h;
+    mesh.visible = cap.visible = flare.visible = a > 0;
+    cap.position.set(o.pos[0], o.pos[1] + h, o.pos[2]);
+    // 솟는 동안 꼭대기 빛이 크게, 서면 잦아든다
+    const rising = 1 - clamp((t - (o.at ?? -1)) / 0.6);
+    flare.position.set(o.pos[0], o.pos[1] + h, o.pos[2]);
+    flare.scale.setScalar(w * (1.3 + 2 * rising));
+    flare.material.opacity = 0.45 + 0.4 * rising;
+  };
+}
+
+/** 드롭 — 화면이 하얗게 터지고 빛 고리가 번지며 빛줄기가 사방으로 뻗는다. 카메라를 흔든다(dropBurst — 검사가 센다) */
+export function warpBurst(stage: Stage3D, o: { ctx: SceneCtx; drop?: number; streaks?: number; seed?: string }): (t: number) => void {
+  const { ctx } = o;
+  const n = o.streaks ?? 140;
+  const seed = o.seed ?? "warp";
+  const pos = new Float32Array(n * 6);
+  const geo = new THREE.BufferGeometry();
+  geo.setAttribute("position", new THREE.BufferAttribute(pos, 3));
+  const mat = new THREE.LineBasicMaterial({ color: color(ctx, "accentSoft"), transparent: true, opacity: 0, blending: THREE.AdditiveBlending, depthWrite: false, fog: false });
+  const lines = new THREE.LineSegments(geo, mat);
+  lines.frustumCulled = false;
+  stage.camera.add(lines);
+  // 흰 화면 대신 푸른 빛 섬광 — 어둠에서 흰 화면으로 뛰면 컷 밝기 차가 너무 크다
+  const flash = new THREE.Mesh(new THREE.PlaneGeometry(40, 40), new THREE.MeshBasicMaterial({ color: color(ctx, "accentSoft"), transparent: true, opacity: 0, depthTest: false, depthWrite: false, fog: false, toneMapped: false }));
+  flash.position.z = -1;
+  flash.renderOrder = 999;
+  stage.camera.add(flash);
+  // 충격파 — 드롭 자리에서 빛 고리가 화면 밖까지 번져 나간다
+  const ring = new THREE.Mesh(new THREE.PlaneGeometry(4, 4), additive(haloTexture(2.2, 2.2, 1.1, 0.16, ctx.style.colors.glow ?? "#5AA2FF")));
+  ring.position.z = -6;
+  ring.renderOrder = 998;
+  stage.camera.add(ring);
+  const dirs = Array.from({ length: n }, (_, i) => {
+    const a = rand(seed, i) * Math.PI * 2;
+    return [Math.cos(a), Math.sin(a) * 0.62, 0.6 + rand(seed, i + 500) * 0.8] as const;
+  });
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "warpBurst" });
+    (flash.material as THREE.MeshBasicMaterial).opacity = s.flash * 0.55;
+    ring.scale.setScalar(Math.max(0.001, s.ring.scale * 1.9));
+    ring.material.opacity = s.ring.opacity;
+    const local = t - ctx.beats.drop(o.drop ?? 0);
+    const life = local >= 0 && local < 0.9 ? 1 - local / 0.9 : 0;
+    mat.opacity = life;
+    for (let i = 0; i < n; i++) {
+      const [dx, dy, sp] = dirs[i];
+      const r0 = 0.4 + local * 9 * sp;
+      const r1 = r0 + 2.5 * sp;
+      pos.set([dx * r0, dy * r0, -6, dx * r1, dy * r1, -6], i * 6);
+    }
+    geo.attributes.position.needsUpdate = true;
+    stage.camera.position.x += (s.shake.x ?? 0) * 0.012;
+    stage.camera.position.y += (s.shake.y ?? 0) * 0.012;
+  };
+}
+
+/** 하루 고리 — 24 칸이 둥글게 서고, 정한 시각에 밤 창(00–10시) 칸이 -90% 로 주저앉는다. 고리는 늘 천천히 돈다 */
+export function dayRing(stage: Stage3D, o: { ctx: SceneCtx; pos: V3; radius?: number; at?: number; drop: number; window?: [number, number]; spin?: number }): (t: number) => void {
+  const { ctx } = o;
+  const r = o.radius ?? 4;
+  const [h0, h1] = o.window ?? [0, 10];
+  const group = new THREE.Group();
+  group.position.set(...o.pos);
+  stage.scene.add(group);
+  // 바닥 빛 고리 — 고리가 빛 위에 서 있어야 깊은 밤에서 모양이 읽힌다
+  const floor = new THREE.Mesh(new THREE.PlaneGeometry(2 * r + 1.8, 2 * r + 1.8), additive(haloTexture(2 * r, 2 * r, r, 0.35, ctx.style.colors.glow ?? "#5AA2FF")));
+  floor.rotation.x = -Math.PI / 2;
+  floor.position.y = 0.02;
+  group.add(floor);
+  const cells = Array.from({ length: 24 }, (_, h) => {
+    const night = h >= h0 && h < h1;
+    const geo = new THREE.BoxGeometry(0.72, 1, 0.5);
+    geo.translate(0, 0.5, 0);
+    // 낮 칸은 짙은 금속, 밤 칸은 스스로 빛난다 — 싼 창이 한눈에 갈린다
+    const mat = new THREE.MeshStandardMaterial({ color: color(ctx, night ? "accent" : "raised"), emissive: color(ctx, night ? "glow" : "line"), emissiveIntensity: night ? 1.4 : 0.35, metalness: night ? 0.1 : 0.85, roughness: night ? 0.35 : 0.25 });
+    const m = new THREE.Mesh(geo, mat);
+    const a = (h / 24) * Math.PI * 2;
+    m.position.set(Math.sin(a) * r, 0, -Math.cos(a) * r);
+    m.rotation.y = -a;
+    group.add(m);
+    return { m, night, h, mat };
+  });
+  return (t) => {
+    group.rotation.y = (o.spin ?? 0.35) * t;
+    floor.visible = t >= (o.at ?? -1);
+    floor.material.opacity = 0.6 * arrive(t, o.at ?? -1, 0.4);
+    for (const c of cells) {
+      const a = arrive(t, (o.at ?? -1) + c.h * 0.012, 0.3);
+      const k = ease.outBack(clamp((t - o.drop) / 0.35));
+      const fall = c.night ? 1 - 0.9 * k : 1;
+      const hgt = Math.max(0.001, 2.6 * a * fall);
+      c.m.scale.y = hgt;
+      c.m.visible = a > 0;
+      if (c.night) c.mat.emissiveIntensity = 1.4 + 1.6 * Math.exp(-Math.max(0, t - o.drop) / 0.2) * (t >= o.drop ? 1 : 0);
+    }
+  };
+}

package/themes/depth-flight/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>