kasaframe 0.1.1 → 0.1.4

package/themes/depth-flight/sample/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <title>depth-flight 견본</title>
+  </head>
+  <body>
+    <div id="stage"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/themes/depth-flight/sample/kf.json

@@ -0,0 +1,59 @@
+{
+  "template": "promo",
+  "title": "depth-flight · OpenGateway 소개 15초",
+  "theme": "depth-flight",
+  "fps": 60,
+  "width": 1920,
+  "height": 1080,
+  "duration": 15,
+  "mode": "seek",
+  "style": "style.json",
+  "music": "assets/music/kawaii-friends-0400.mp3",
+  "beats": "beats.json",
+  "captions": "none",
+  "safeArea": {
+    "top": 60,
+    "bottom": 60,
+    "left": 80,
+    "right": 80
+  },
+  "text": {
+    "policy": "terms-only",
+    "maxOnScreen": 0,
+    "minPx": 0
+  },
+  "scenes": [
+    {
+      "id": "gather",
+      "from": 0,
+      "dur": 3.1169,
+      "file": "scenes/gather.ts",
+      "role": "hook",
+      "idea": "여러 회사 모델이 흩어져 있다 → 회사별 모델 수"
+    },
+    {
+      "id": "models",
+      "from": 3.1169,
+      "dur": 4.2191,
+      "file": "scenes/models.ts",
+      "role": "explain",
+      "idea": "한 주소(https://apis.opengateway.ai/v1) → 박마다 바뀌는 모델 ID 가 같은 주소로 → 드롭 앞 모아 올리기"
+    },
+    {
+      "id": "price",
+      "from": 7.336,
+      "dur": 4.2388,
+      "file": "scenes/price.ts",
+      "role": "drop",
+      "idea": "드롭에 가장 크게 102 · 한 주소 → 하루 시계에서 00–10시 창이 -90% → deepseek 가격"
+    },
+    {
+      "id": "end",
+      "from": 11.5748,
+      "dur": 3.4252,
+      "file": "scenes/end.ts",
+      "role": "end",
+      "idea": "첫 토큰 실측 셋 → 끝 카드(OG 로고 · opengateway.ai)"
+    }
+  ]
+}

package/themes/depth-flight/sample/lib/facts.ts

@@ -0,0 +1,29 @@
+// OpenGateway 사실 — docs/briefs/og-intro-15s.md 에 적힌 것만. 숫자를 여기서 새로 만들지 않는다
+export const OG = {
+  url: "https://apis.opengateway.ai/v1",
+  host: "apis.opengateway.ai/v1",
+  site: "opengateway.ai",
+  models: 102,
+  endpoints: ["/chat/completions", "/responses", "/messages", "/images/generations"],
+  providers: [
+    ["OpenAI", 41],
+    ["Anthropic", 15],
+    ["Google", 15],
+    ["Z.ai", 7],
+    ["xAI", 6],
+    ["Qwen", 5],
+    ["Moonshot", 4],
+    ["DeepSeek", 4],
+    ["MiniMax", 3],
+  ] as [string, number][],
+  ids: ["openai/gpt-6.1-sol", "anthropic/claude-opus-5-5", "google/gemini-3.5-flash-lite", "deepseek/deepseek-v4.1-flash-ultrafast", "z-ai/glm-5.3-flash-ultrafast"],
+  night: { from: 0, to: 10, tz: "KST" },
+  deepseek: { id: "deepseek-v4.1-flash-ultrafast", input: ["$0.30", "$0.03"], output: ["$1.20", "$0.12"], off: "-90%" },
+  glm: { id: "glm-5.3-flash-ultrafast", off: "-70%" },
+  ttft: [
+    ["gpt-5.4-nano", "612.5ms", 612.5],
+    ["gemini-3.5-flash-lite", "693.0ms", 693.0],
+    ["claude-haiku-5-5", "760.5ms", 760.5],
+  ] as [string, string, number][],
+  calls: "18번 합 $0.0004",
+};

package/themes/depth-flight/sample/lib/fly.ts

@@ -0,0 +1,15 @@
+import type { SceneCtx } from "@kasaframe/core";
+
+/** 장면 시작부터의 마디·박 — 장면 끝을 넘는 것은 뺀다 */
+export const barsFrom0 = (ctx: SceneCtx): number[] => ctx.beats.bars.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+export const beatsFrom0 = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+/** 컷마다 세트를 이만큼 떨어뜨린다 — 안개(80) 너머라 다른 컷의 세트가 비치지 않는다 */
+export const SET = 300;
+
+/** 컷 경계 — 첫 컷은 0초부터, 끝 컷은 장면 끝 너머까지 */
+export function cuts(ctx: SceneCtx, n: number): [number, number][] {
+  const B = barsFrom0(ctx);
+  const edge = (i: number) => (i === 0 ? 0 : i >= n ? ctx.dur + 1 : (B[i] ?? (ctx.dur * i) / n));
+  return Array.from({ length: n }, (_, i) => [edge(i), edge(i + 1)]);
+}

package/themes/depth-flight/sample/main.ts

@@ -0,0 +1,9 @@
+import { mountProject } from "@kasaframe/adapters";
+import kf from "./kf.json";
+import style from "./style.json";
+
+// 장면 파일을 늘리거나 빼도 이 파일은 그대로 — 시간표는 kf.json 한 곳. 글꼴·색 변수는 mountProject 가 건다
+const scenes = import.meta.glob("./scenes/*.ts", { eager: true });
+const beats = Object.values(import.meta.glob("./beats.json", { eager: true, import: "default" }))[0] ?? null;
+
+mountProject({ kf, scenes, beats, style, stage: document.getElementById("stage")! });

package/themes/depth-flight/sample/scenes/end.ts

@@ -0,0 +1,51 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { depthCard, flightStage, gate, lightRibbons, pillar, starDust } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, SET } from "../lib/fly.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const stage = flightStage(root, {
+      ctx,
+      shots: [
+        // 첫 토큰 실측 셋이 솟는다 — 기둥을 따라 올려다보며 합계가 서는 박에 이르고, 다음 컷까지 합계 쪽으로 천천히 더 다가간다(컷은 움직임 위에서)
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [-1.6, 1.2, 12.5], look: [0, 2.4, 0] }, { t: b[3] ?? 1.06, pos: [0.4, 4.2, 12.5], look: [0, 3.8, 0] }, { t: c0[1], pos: [0.5, 4.6, 11.2], look: [0, 4.1, 0], ease: "linear" }] },
+        // OG 로고의 두 칸 — 주소가 서는 박까지 다가간다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET, 0.9, 16.5], look: [SET, 0.4, 0] }, { t: b[6] ?? c1[0] + 0.7, pos: [SET, 0.5, 11], look: [SET, 0.2, 0], ease: "outCubic" }] },
+        // 끝 반 마디 — 유리 관문을 지나 opengateway.ai 앞에 선다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [2 * SET + 2.2, 0.6, 6], look: [2 * SET + 2.2, 0.6, -10] }, { t: c2[0] + 0.45, pos: [2 * SET + 2.2, 0.4, -4.5], look: [2 * SET + 2.2, 0.4, -20], ease: "outCubic" }] },
+      ],
+    });
+    stage.add(starDust(stage, { ctx }));
+
+    // 첫 컷 — 첫 토큰 가운데값 셋이 박마다 빛기둥으로(높이 = ms), 넷째 박에 18번 합
+    const max = Math.max(...OG.ttft.map(([, , ms]) => ms));
+    OG.ttft.forEach(([id, label, ms], i) => {
+      const at = b[i] ?? i * 0.35;
+      const x = -4.8 + i * 4.8;
+      const h = (6.4 * ms) / max;
+      stage.add(pillar(stage, { ctx, pos: [x, 0, 0], height: h, width: 1.6, at }));
+      stage.add(depthCard(stage, { ctx, text: label, pos: [x, h + 0.9, 0.4], height: 0.85, at: at + 0.1, emerge: 3 }));
+      stage.add(depthCard(stage, { ctx, text: id, pos: [x, i % 2 ? -1.5 : -0.7, 1], height: 0.5, at: at + 0.05, emerge: 2, font: "mono", color: "dim" }));
+    });
+    stage.add(depthCard(stage, { ctx, text: OG.calls, pos: [0, 8.2, -2], height: 0.6, at: b[3] ?? 1.06, emerge: 5, font: "sans", color: "accentText" }));
+
+    // 둘째 컷 — OG 로고의 두 칸이 금속·유리 관문으로 나란히, 빛이 지나 한 줄기로. 아래에 opengateway.ai
+    stage.add(lightRibbons(stage, { ctx, from: [SET - 15, 0.6, 0], to: [SET + 2.4, 0.6, 0], out: [SET + 16, 0.6, 0], count: 5, spread: 3.5, at: c1[0], speed: 1.8 }));
+    stage.add(gate(stage, { ctx, pos: [SET - 2.4, 0.6, 0], size: [3.8, 5], kind: "metal", at: c1[0], pulse: b.filter((x, i) => x >= c1[0] && i % 2 === 0) }));
+    stage.add(gate(stage, { ctx, pos: [SET + 2.4, 0.6, 0], size: [3.8, 5], kind: "glass", at: b[5] ?? c1[0] + 0.35, pulse: b.filter((x, i) => x >= c1[0] && i % 2 === 0) }));
+    stage.add(depthCard(stage, { ctx, text: OG.site, pos: [SET, -3, 0.5], height: 0.95, at: b[6] ?? c1[0] + 0.7, emerge: 6 }));
+
+    // 끝 반 마디 — 유리 관문을 지나면 끝 카드: 로고의 두 칸 아래 opengateway.ai 와 주소. 빛 리본이 로고로 모인다
+    const X = 2 * SET + 2.2;
+    stage.add(gate(stage, { ctx, pos: [X, 0.6, 0], size: [5.2, 6.4], kind: "glass", at: c2[0] - 0.01, pulse: [c2[0] + 0.25] }));
+    stage.add(lightRibbons(stage, { ctx, from: [X - 14, -1, -8], to: [X, 3, -16.5], out: [X + 14, 3, -30], count: 5, spread: 4, at: c2[0], speed: 2 }));
+    stage.add(gate(stage, { ctx, pos: [X - 1.7, 3, -16], size: [2.9, 3.7], kind: "metal", at: c2[0] + 0.05, pulse: [c2[0] + 0.3] }));
+    stage.add(gate(stage, { ctx, pos: [X + 1.7, 3, -16], size: [2.9, 3.7], kind: "glass", at: c2[0] + 0.1, pulse: [c2[0] + 0.3] }));
+    stage.add(depthCard(stage, { ctx, text: OG.site, pos: [X, -0.4, -14], height: 1.35, at: c2[0], emerge: 6, layers: 6 }));
+    stage.add(depthCard(stage, { ctx, text: OG.url, pos: [X, -2, -14], height: 0.5, at: c2[0] + 0.15, emerge: 6, font: "mono", color: "accentText" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/depth-flight/sample/scenes/gather.ts

@@ -0,0 +1,40 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { depthCard, flightStage, lightRibbons, pillar, starDust } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, SET } from "../lib/fly.ts";
+
+// 흩어진 자리 [x, y, z] — 화면을 고르게 덮고 깊이가 셋으로 갈린다
+const SPOT: [number, number, number][] = [[-5.6, 2.6, -2], [0.4, 3.4, -6], [5.8, 1.8, -10], [-5, -0.4, -6], [1.2, 0.5, -10], [6.4, -1.2, -2], [-6, -3.2, -10], [-2.4, -3, -2], [6.4, -3.4, -6]];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1] = cuts(ctx, 2);
+    const stage = flightStage(root, {
+      ctx,
+      shots: [
+        // 회사들이 박마다 셋씩 안개에서 다가와 선다 — 카메라는 서서 받고, 마지막 박에 그 무리로 다가든다(사이를 뚫고 지나면 큰 빛 글이 화면을 쓸어 섬광이 된다)
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [0, 0, 9], look: [0, 0, -20] }, { t: b[3] ?? 1.35, pos: [0, 0, 9], look: [0, 0, -20] }, { t: c0[1], pos: [0.4, 0.2, 2.5], look: [0.3, 0, -30], ease: "inCubic" }] },
+        // 모델 수만큼 기둥이 솟는다 — 첫 기둥 곁에서 물러나 아홉을 다 담고 선다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET - 9.5, 1.6, 6], look: [SET - 7, 2.6, 0] }, { t: b[7] ?? c1[0] + 1.05, pos: [SET - 0.4, 3.2, 14.5], look: [SET - 0.4, 1.8, 0], ease: "outCubic" }] },
+      ],
+    });
+    stage.add(starDust(stage, { ctx }));
+    stage.add(lightRibbons(stage, { ctx, from: [0, -1, -6], to: [0, 0, -40], out: [0, 0, -80], count: 9, spread: 12, at: 0, speed: 1.4 }));
+    OG.providers.forEach(([name], i) => {
+      const at = b[i % 3] ?? (i % 3) * 0.35;
+      stage.add(depthCard(stage, { ctx, text: name, pos: SPOT[i], height: 1.25, at, until: c0[1], emerge: 16, color: i % 2 ? "ink" : "accentText" }));
+    });
+    stage.add(lightRibbons(stage, { ctx, from: [SET - 16, 0.2, -4], to: [SET, 0.2, -3], out: [SET + 16, 0.2, -4], count: 5, spread: 3, at: c1[0], speed: 1.8 }));
+    OG.providers.forEach(([name, n], i) => {
+      const x = SET - 8.8 + i * 2.2;
+      const at = b[4 + Math.floor(i / 3)] ?? c1[0] + Math.floor(i / 3) * 0.35;
+      const h = (6 * n) / 41;
+      stage.add(pillar(stage, { ctx, pos: [x, 0, 0], height: h, at, color: i === 0 ? "accent" : "glow" }));
+      stage.add(depthCard(stage, { ctx, text: String(n), pos: [x, h + 0.8, 0], height: 0.95, at: at + 0.12, emerge: 2 }));
+      // 이름은 위아래 두 줄로 엇갈려 — 아홉이 한 줄이면 겹친다
+      stage.add(depthCard(stage, { ctx, text: name, pos: [x, i % 2 ? -1.75 : -0.75, 0.6], height: 0.7, at: at + 0.06, emerge: 1, font: "sans", color: "inkSoft" }));
+    });
+    return (t: number) => stage(t);
+  },
+};

package/themes/depth-flight/sample/scenes/models.ts

@@ -0,0 +1,75 @@
+import { clamp, type SceneCtx } from "@kasaframe/core";
+import { depthCard, flightStage, gate, lightRibbons, starDust, type CamKey } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, SET } from "../lib/fly.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const drop = ctx.beats.drop(0);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    // 둘째 컷 — 관문 터널. 카메라는 박마다 관문 하나를 뚫고 나가 다음 관문 앞에 내려앉는다
+    const STEP = 9;
+    const stop = (j: number) => 6 - STEP * j;
+    const gateZ = (k: number) => stop(k) - 5;
+    const surge = [1, 2, 3].map((j) => b[4 + j] ?? c1[0] + j * 0.353);
+    const tunnel: CamKey[] = [{ t: c1[0], pos: [SET, 0, stop(0)], look: [SET, 0, stop(0) - 20] }];
+    surge.forEach((at, j) => {
+      tunnel.push({ t: at, pos: [SET, 0, stop(j)], look: [SET, 0, stop(j) - 20] });
+      tunnel.push({ t: at + 0.3, pos: [SET, 0, stop(j + 1)], look: [SET, 0, stop(j + 1) - 20], ease: "outCubic" });
+    });
+    const stage = flightStage(root, {
+      ctx,
+      shots: [
+        // 흩어진 빛이 관문으로 모인다 — 관문 쪽으로 다가가 주소 앞에 선다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [-3.4, 1.6, 15], look: [0, 0.8, -6] }, { t: b[2] ?? 0.7, pos: [0, 0.6, 7], look: [0, 0.6, -8], ease: "outCubic" }] },
+        { from: c1[0], to: c1[1], keys: tunnel },
+        // 모델 수가 차오른다 — 물러서서 받다가 드롭으로 숫자에 빨려 든다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [2 * SET, 0.4, 13], look: [2 * SET, 0.6, 0] }, { t: b[10] ?? c2[0] + 0.7, pos: [2 * SET, 0.4, 15], look: [2 * SET, 0.6, 0] }, { t: drop, pos: [2 * SET, 0.6, 7.5], look: [2 * SET, 0.6, -2], ease: "inCubic" }] },
+      ],
+    });
+    stage.add(starDust(stage, { ctx }));
+
+    // 첫 컷 — 흩어진 빛이 금속·유리 두 관문을 지나 한 줄기로. 관문 위에 주소, 박마다 엔드포인트가 다가온다
+    stage.add(lightRibbons(stage, { ctx, from: [-16, 0, -2], to: [0, 0.2, -7.5], out: [14, 0.2, -12], count: 7, spread: 7, at: 0 }));
+    // 관문 번쩍임은 한 박 걸러 — 박마다면 1초에 세 번(섬광 기준)을 넘는다
+    const every2 = b.slice(0, 4).filter((_, i) => i % 2 === 0);
+    stage.add(gate(stage, { ctx, pos: [0, 0.2, -6], kind: "metal", at: 0, pulse: every2 }));
+    stage.add(gate(stage, { ctx, pos: [0.9, 0.2, -9], kind: "glass", at: 0.05, pulse: every2 }));
+    stage.add(depthCard(stage, { ctx, text: OG.url, pos: [0, 4.1, -6], height: 0.8, at: 0.02, emerge: 6, font: "mono", weight: 700 }));
+    OG.endpoints.forEach((e, i) => {
+      const at = (b[Math.min(3, i + 1)] ?? 0.35 * (i + 1)) + (i === 3 ? 0.17 : 0);
+      stage.add(depthCard(stage, { ctx, text: `POST /v1${e}`, pos: [i % 2 ? 4.4 : -4.4, -2.5 - Math.floor(i / 2) * 1.05, -3], height: 0.56, at, emerge: 10, font: "mono", color: "accentText", until: c0[1] }));
+    });
+
+    // 둘째 컷 — 같은 주소, 관문마다 다른 모델 ID. 내려앉을 때 다음 ID 가 관문 안에 켜진다
+    // 리본은 카메라 길보다 멀리 — 곁을 지나면 흐르는 빛 점선이 화면을 크게 쓸어 섬광이 된다
+    stage.add(lightRibbons(stage, { ctx, from: [SET, 0, -32], to: [SET, 0, -70], out: [SET, 0, -110], count: 6, spread: 6, at: c1[0], speed: 1.6 }));
+    OG.ids.slice(0, 4).forEach((id, k) => {
+      const show = k === 0 ? c1[0] : surge[k - 1] + 0.08;
+      const pass = surge[k] ?? c1[1];
+      // 터널 관문은 모두 짙은 유리 — 밝은 금속 테가 돌진마다 화면 절반을 쓸고 나가면 섬광이 된다
+      stage.add(gate(stage, { ctx, pos: [SET, 0, gateZ(k)], size: [8.4, 5], kind: "glass", at: c1[0] - 0.01 }));
+      // 고정폭 글자 한 자 = 높이의 0.6 — 긴 ID 도 화면 폭 안에 들게 높이를 줄인다
+      stage.add(depthCard(stage, { ctx, text: id, pos: [SET, 0, gateZ(k) - 0.6], height: Math.min(0.62, 8.4 / (0.6 * id.length)), at: show, emerge: 3, font: "mono", weight: 700, until: pass }));
+    });
+    stage.add(depthCard(stage, { ctx, text: "POST /v1/chat/completions", pos: [SET, 3.4, gateZ(3) - 2], height: 0.5, at: c1[0], emerge: 0, font: "mono", color: "dim" }));
+
+    // 셋째 컷 — 모델 수가 두께 있는 숫자로 000→102, 드롭 직전에 닿는다
+    stage.add(lightRibbons(stage, { ctx, from: [2 * SET - 14, -3, -4], to: [2 * SET, 0.6, -2], out: [2 * SET + 14, 3, -6], count: 9, spread: 8, at: c2[0], speed: 2.4 }));
+    const steps = 8;
+    stage.add(
+      depthCard(stage, {
+        ctx,
+        text: (t) => String(Math.round((OG.models * Math.floor(clamp((t - c2[0]) / (drop - c2[0] - 0.05)) * steps)) / steps)).padStart(3, "0"),
+        pos: [2 * SET, 0.6, 0],
+        height: 3.4,
+        at: c2[0],
+        emerge: 4,
+        layers: 10,
+      }),
+    );
+    stage.add(depthCard(stage, { ctx, text: "models", pos: [2 * SET, 3.9, 0], height: 0.7, at: b[9] ?? c2[0] + 0.35, emerge: 2, font: "mono", color: "accentText" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/depth-flight/sample/scenes/price.ts

@@ -0,0 +1,50 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { dayRing, depthCard, flightStage, lightRibbons, starDust, warpBurst } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, SET } from "../lib/fly.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const fall = b[6] ?? c1[0] + 0.7;
+    const stage = flightStage(root, {
+      ctx,
+      shots: [
+        // 드롭 — 숫자 속에서 튕겨 나오듯 물러나며 102 를 드러내고 선다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [0, 1, -8], look: [0, 1, -20] }, { t: b[2] ?? 0.72, pos: [-2.2, 0.4, -1.5], look: [0, -0.4, -14], ease: "outExpo" }] },
+        // 하루 고리 — 밤 창이 주저앉는 박에 맞춰 위로 올라 고리 전체를 내려다본다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET + 7, 1.4, 6.5], look: [SET, 1.2, 0] }, { t: fall, pos: [SET + 2, 7.2, 10.5], look: [SET, 1, 0.5] }] },
+        // 정가와 밤값 — 밤값이 서는 박에 다가간다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [2 * SET, 0.2, 15], look: [2 * SET, 0, 0] }, { t: b[9] ?? c2[0] + 0.35, pos: [2 * SET, 0.2, 15], look: [2 * SET, 0, 0] }, { t: (b[9] ?? c2[0] + 0.35) + 0.45, pos: [2 * SET + 0.8, 0, 12], look: [2 * SET + 0.6, -0.2, 0], ease: "outCubic" }] },
+      ],
+    });
+    stage.add(starDust(stage, { ctx }));
+
+    // 드롭 — 하얗게 터지고, 흩어진 빛이 한 줄기로 모인 자리에 두께 있는 102 와 한 주소
+    stage.add(lightRibbons(stage, { ctx, from: [-12, -4, -30], to: [0, 0.6, -15], out: [0, 0.6, -60], count: 11, spread: 10, at: 0, speed: 2.2 }));
+    stage.add(depthCard(stage, { ctx, text: String(OG.models), pos: [0, 1.4, -14], height: 6.5, at: 0, emerge: 20, layers: 12 }));
+    stage.add(depthCard(stage, { ctx, text: "한 주소", pos: [0, -2.9, -13], height: 1.2, at: b[1] ?? 0.35, emerge: 8, font: "display" }));
+    stage.add(depthCard(stage, { ctx, text: OG.host, pos: [0, -4.5, -13], height: 0.7, at: b[2] ?? 0.7, emerge: 8, font: "mono", color: "accentText" }));
+    stage.add(warpBurst(stage, { ctx, drop: 0 }));
+
+    // 둘째 컷 — 하루 24 칸 고리, 박에 밤 창이 -90% 로 주저앉는다
+    stage.add(dayRing(stage, { ctx, pos: [SET, 0, 0], radius: 4.6, at: c1[0], drop: fall, window: [OG.night.from, OG.night.to], spin: 0.25 }));
+    stage.add(depthCard(stage, { ctx, text: `00:00-10:00 ${OG.night.tz}`, pos: [SET, 4.8, -1], height: 0.8, at: b[5] ?? c1[0] + 0.35, emerge: 4, font: "mono", weight: 700 }));
+    stage.add(depthCard(stage, { ctx, text: OG.deepseek.off, pos: [SET, 1.2, 0.5], height: 1.9, at: b[7] ?? fall + 0.35, emerge: 6, layers: 6, color: "accentText" }));
+
+    // 셋째 컷 — deepseek 정가가 뒤로 물러나고 밤값이 다가온다
+    const ds = OG.deepseek;
+    stage.add(lightRibbons(stage, { ctx, from: [2 * SET - 14, 3, -10], to: [2 * SET + 14, -3, -10], count: 5, spread: 4, at: c2[0], speed: 1.4 }));
+    stage.add(depthCard(stage, { ctx, text: ds.id, pos: [2 * SET, 3.6, 0], height: 0.78, at: b[8] ?? c2[0], emerge: 4, font: "mono", weight: 700 }));
+    [ds.input, ds.output].forEach(([was, now], i) => {
+      const at = b[9 + i] ?? c2[0] + (i + 1) * 0.35;
+      const y = 1.2 - i * 2.7;
+      stage.add(depthCard(stage, { ctx, text: i ? "출력" : "입력", pos: [2 * SET - 7.4, y, 0], height: 0.72, at, emerge: 3, font: "sans", color: "dim" }));
+      stage.add(depthCard(stage, { ctx, text: was, pos: [2 * SET - 3.4, y, -3], height: 1.05, at, emerge: 2, color: "dim" }));
+      stage.add(depthCard(stage, { ctx, text: now, pos: [2 * SET + 3, y, 0.6], height: 1.8, at: at + 0.12, emerge: 9, layers: 5, color: "accentText" }));
+    });
+    stage.add(depthCard(stage, { ctx, text: `${OG.glm.id}  ${OG.glm.off}`, pos: [2 * SET, -4.1, 0], height: 0.56, at: b[11] ?? c2[0] + 1.06, emerge: 4, font: "mono" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/depth-flight/sample/style.json

@@ -0,0 +1,94 @@
+{
+  "name": "depth-flight",
+  "label": "깊이 비행 — 관문을 지나 깊이로",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#03050B",
+    "surface": "#0A0F1C",
+    "raised": "#121A2E",
+    "line": "#1E2A47",
+    "ink": "#EEF4FF",
+    "inkSoft": "#C7D6F2",
+    "dim": "#7F93BD",
+    "accent": "#3D8BFF",
+    "accentSoft": "#9CC4FF",
+    "accentText": "#8FBBFF",
+    "accentDeep": "#0B2C6B",
+    "onAccent": "#03050B",
+    "success": "#5EE6A8",
+    "danger": "#FF6B6B",
+    "warning": "#FFB547",
+    "metal": "#C9D1DC",
+    "glow": "#5AA2FF"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "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": {
+    "hero": 180,
+    "title": 90,
+    "body": 40,
+    "caption": 30,
+    "weightDisplay": 800,
+    "weightBody": 600,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "free",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "linear",
+    "durations": {
+      "fast": 0.1,
+      "base": 0.3,
+      "slow": 0.8
+    }
+  },
+  "theme": {
+    "inks": [
+      "#03050B 깊은 밤 바탕(안개 색)",
+      "#EEF4FF 차가운 흰 글",
+      "#3D8BFF 전기 파랑 빛(리본·관문 발광)",
+      "#C9D1DC 은색 금속(관문 테)"
+    ],
+    "texture": "안개가 먼 것을 지운다 — 정보는 안개 속에서 다가와 카메라 옆을 지나간다. 면 무늬 없이 빛과 금속 반사로만",
+    "movement": "카메라는 박에 떠나 박에 내려앉는다 — 관문을 뚫고 나가 다음 관문 앞에 서기, 드러낼 것에 다가가기, 비교를 담게 물러나기, 드롭에 숫자 속에서 튕겨 나오기. 그 사이엔 서고 먼지도 선다(먼지는 공간에 박혀 비행 속도만 보인다). 리본 속 빛은 요청이 관문으로 모이는 흐름. 마디마다 다른 자리로 컷"
+  },
+  "notes": [
+    "출처: OG 3D 관문 시안(promo-gateway-flow-v1) — 금속·유리 두 관문과 한 줄기로 모이는 빛 리본.",
+    "글은 3D 공간 안의 글자판. 작은 글은 쓰지 않는다(깊이에서 뭉개진다)."
+  ]
+}

package/themes/depth-flight/slots.ts

@@ -0,0 +1,196 @@
+import { clamp, ease, rand, type SceneCtx, type Style } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { stillStage } from "@kasaframe/themes/stage3d";
+import { flightStage, gate, lightRibbons, starDust } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 깊이 비행의 결로 채운다. 3D 는 surface 하나, 나머지는 DOM·캔버스 2D
+const col = (ctx: SceneCtx, k: string, fb: string) => ctx.style.colors[k] ?? fb;
+const glowOf = (ctx: SceneCtx) => col(ctx, "glow", "#5AA2FF");
+
+// 글자마다 span — 글꼴 크기·줄 나눔은 그대로 두고(inline span 은 배치를 바꾸지 않는다) 색·빛만 만진다
+function letters(el: HTMLElement, text: string): HTMLSpanElement[] {
+  el.textContent = "";
+  return Array.from(text).map((ch) => {
+    const s = document.createElement("span");
+    s.textContent = ch;
+    el.append(s);
+    return s;
+  });
+}
+
+// el 둘레의 곁 그림 — el 이 패턴의 상자 안에서 어디 있든 그 자리를 따라간다
+function beside(el: HTMLElement, css: string): (fn: (d: HTMLDivElement, r: { x: number; y: number; w: number; h: number }) => void) => void {
+  let d: HTMLDivElement | null = null;
+  return (fn) => {
+    const host = (el.offsetParent as HTMLElement | null) ?? el.parentElement;
+    if (!host) return;
+    if (!d) {
+      d = document.createElement("div");
+      d.style.cssText = `position:absolute;pointer-events:none;${css}`;
+      host.append(d);
+    }
+    const a = el.getBoundingClientRect();
+    const b = host.getBoundingClientRect();
+    fn(d, { x: a.left - b.left, y: a.top - b.top, w: a.width, h: a.height });
+  };
+}
+
+export const slots: ThemeSlots = {
+  // 깊은 밤 한 장 — 안개 너머 먼 관문 둘과 그리로 모이는 옅은 빛 줄기, 박힌 먼지. 서 있다(움직이는 것은 내용 몫)
+  surface(el, { ctx, seed }) {
+    const stage = flightStage(el, { ctx, fog: [14, 70], shots: [{ from: -1, to: 1e9, keys: [{ t: 0, pos: [0, 0, 9], look: [0, 0, -30] }] }] });
+    stage.add(starDust(stage, { ctx, seed: `${seed}:dust` }));
+    stage.add(lightRibbons(stage, { ctx, from: [-22, -6, -10], to: [0, 0, -52], out: [0, 0, -90], count: 7, spread: 16, at: -1, seed: `${seed}:rib` }));
+    stage.add(gate(stage, { ctx, pos: [-1.6, 0, -50], size: [9, 11.5], kind: "metal", at: -1 }));
+    stage.add(gate(stage, { ctx, pos: [2.4, 0, -56], size: [9, 11.5], kind: "glass", at: -1 }));
+    return stillStage(stage, stage);
+  },
+
+  // 짙은 유리 판 — 깊이에서 흐림을 걷으며 다가와 서고, 서는 동안 테두리를 따라 빛 한 줄기가 한 바퀴 돈 뒤 테가 고르게 빛난다
+  panel(el, { ctx, at, seed, tone }) {
+    const glow = glowOf(ctx);
+    const r = ctx.style.radius?.md ?? 14;
+    const accent = tone === "accent";
+    const p = document.createElement("div");
+    p.style.cssText = `position:absolute;inset:0;border-radius:${r}px;background:linear-gradient(160deg,${col(ctx, accent ? "accentDeep" : "raised", "#121A2E")}EE,${col(ctx, "surface", "#0A0F1C")}F2);box-shadow:0 0 ${accent ? 42 : 26}px ${glow}${accent ? "88" : "55"},inset 0 1px 0 #ffffff22;pointer-events:none;`;
+    const rim = document.createElement("div");
+    rim.style.cssText = `position:absolute;inset:0;border-radius:${r}px;padding:2px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;`;
+    p.append(rim);
+    el.prepend(p);
+    const phase = rand(seed, 0) * 360;
+    return (t) => {
+      const on = t >= at;
+      p.style.display = on ? "" : "none";
+      if (!on) return;
+      const a = ease.outCubic(clamp((t - at) / 0.35));
+      p.style.opacity = String(a);
+      p.style.transform = `scale(${0.82 + 0.18 * a})`;
+      p.style.filter = a < 1 ? `blur(${(1 - a) * 8}px)` : "";
+      const lap = ease.inOutCubic(clamp((t - at) / 0.6));
+      rim.style.background = lap < 1 ? `conic-gradient(from ${phase + lap * 360}deg, ${glow}55 0deg, ${glow} 40deg, #ffffff 52deg, ${glow} 64deg, ${glow}55 110deg, ${glow}55 360deg)` : `${glow}AA`;
+    };
+  },
+
+  // 관문을 지나 앉는 한 번 — 앞에서 다가와 서며 밝게 번쩍, 뒤로 빛 둥근 판이 번졌다 잦아든다
+  land(el, { ctx, at }) {
+    const glow = glowOf(ctx);
+    const halo = beside(el, `border-radius:50%;background:radial-gradient(closest-side,${glow}AA,${glow}00);mix-blend-mode:screen;`);
+    return (t): Style => {
+      const k = t - at;
+      if (k < 0 || k > 0.6) {
+        if (k > 0.6) halo((d) => (d.style.opacity = "0"));
+        return {};
+      }
+      const u = ease.outCubic(clamp(k / 0.32));
+      halo((d, r) => {
+        const s = 1.2 + 1.1 * ease.outCubic(clamp(k / 0.5));
+        d.style.left = `${r.x + r.w / 2 - (r.w * s) / 2}px`;
+        d.style.top = `${r.y + r.h / 2 - (r.h * s) / 2}px`;
+        d.style.width = `${r.w * s}px`;
+        d.style.height = `${r.h * s}px`;
+        d.style.opacity = String(0.95 * (1 - clamp(k / 0.6)));
+      });
+      return { scale: 1.16 - 0.16 * u, blur: 5 * (1 - u), brightness: 1 + 1.3 * Math.exp(-k / 0.12) };
+    };
+  },
+
+  // 스스로 빛나는 글 — 글자가 차례로 빛 덩어리로 켜졌다가 맑은 글로 가라앉는다
+  write(el, { ctx, text, at, dur, seed }) {
+    const glow = glowOf(ctx);
+    const ink = col(ctx, "ink", "#EEF4FF");
+    const spans = letters(el, text);
+    const n = Math.max(1, spans.length);
+    const jitter = spans.map((_, i) => rand(seed, i) * 0.25);
+    el.style.color = ink;
+    return (t) => {
+      spans.forEach((s, i) => {
+        const on = at + (dur * (i + jitter[i])) / (n + 0.25);
+        const k = t - on;
+        const a = clamp(k / 0.1);
+        s.style.opacity = String(t >= at + dur ? 1 : a);
+        const hot = k < 0 ? 0 : Math.exp(-k / 0.18);
+        s.style.textShadow = `0 0 ${0.18 + 0.5 * hot}em ${glow}, 0 0 ${0.04 + 0.2 * hot}em #ffffff`;
+        s.style.color = hot > 0.4 ? "#ffffff" : ink;
+      });
+    };
+  },
+
+  // 빛 리본 — 선이 그어지고, 다 그은 뒤에도 속 빛이 흐른다
+  trace(el, { ctx, points, at, dur, tone }) {
+    const glow = tone === "accent" ? col(ctx, "accentSoft", "#9CC4FF") : glowOf(ctx);
+    const ns = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(ns, "svg");
+    svg.setAttribute("style", "position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;");
+    const d = points.map(([x, y], i) => `${i ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)}`).join(" ");
+    const mk = (w: number, color: string, op: number, blur: number) => {
+      const p = document.createElementNS(ns, "path");
+      p.setAttribute("d", d);
+      p.setAttribute("fill", "none");
+      p.setAttribute("stroke", color);
+      p.setAttribute("stroke-width", String(w));
+      p.setAttribute("stroke-linecap", "round");
+      p.setAttribute("stroke-linejoin", "round");
+      p.setAttribute("opacity", String(op));
+      if (blur) p.setAttribute("style", `filter:blur(${blur}px)`);
+      svg.append(p);
+      return p;
+    };
+    const halo = mk(14, glow, 0.45, 6);
+    const core = mk(3, glow, 1, 0);
+    const spark = mk(4, "#ffffff", 0.95, 0);
+    el.append(svg);
+    const len = points.slice(1).reduce((s, [x, y], i) => s + Math.hypot(x - points[i][0], y - points[i][1]), 0) || 1;
+    for (const p of [halo, core]) p.setAttribute("stroke-dasharray", `${len} ${len}`);
+    spark.setAttribute("stroke-dasharray", `${Math.min(80, len * 0.12)} ${len}`);
+    return (t) => {
+      const u = ease.inOutCubic(clamp((t - at) / Math.max(0.01, dur)));
+      svg.style.display = t >= at ? "" : "none";
+      for (const p of [halo, core]) p.setAttribute("stroke-dashoffset", String(len * (1 - u)));
+      // 그어지는 동안은 펜 끝, 다 그은 뒤엔 선을 따라 도는 빛 알갱이
+      const head = u < 1 ? len * u : (len * ((t - at - dur) * 0.6 + 1)) % len;
+      spark.setAttribute("stroke-dashoffset", String(-head + Math.min(80, len * 0.12)));
+    };
+  },
+
+  // 드롭 — 하얗게 터지고 빛 고리가 번지며 빛줄기가 사방으로 뻗는다
+  drop(el, { ctx, drop }) {
+    const glow = glowOf(ctx);
+    const flash = document.createElement("div");
+    flash.style.cssText = "position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;";
+    const ring = document.createElement("div");
+    ring.style.cssText = `position:absolute;left:50%;top:50%;width:40vmin;height:40vmin;margin:-20vmin 0 0 -20vmin;border-radius:50%;box-shadow:0 0 0 0.6vmin ${glow},0 0 4vmin ${glow},inset 0 0 4vmin ${glow};opacity:0;pointer-events:none;`;
+    const cv = document.createElement("canvas");
+    cv.width = ctx.meta.width / 2;
+    cv.height = ctx.meta.height / 2;
+    cv.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;";
+    el.append(cv, ring, flash);
+    const g = cv.getContext("2d")!;
+    const rays = Array.from({ length: 120 }, (_, i) => [rand(`warp:${ctx.id}`, i) * Math.PI * 2, 0.6 + rand(`warp:${ctx.id}`, i + 500) * 0.8] as const);
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "depth-flight:drop" });
+      flash.style.opacity = String(s.flash * 0.9);
+      ring.style.opacity = String(s.ring.opacity);
+      ring.style.transform = `scale(${Math.max(0.001, s.ring.scale * 1.6)})`;
+      const k = t - ctx.beats.drop(drop);
+      g.clearRect(0, 0, cv.width, cv.height);
+      if (k >= 0 && k < 0.9) {
+        const life = 1 - k / 0.9;
+        const [cx, cy] = [cv.width / 2, cv.height / 2];
+        g.strokeStyle = glow;
+        g.globalAlpha = life;
+        g.lineWidth = 2;
+        g.beginPath();
+        for (const [a, sp] of rays) {
+          const r0 = (0.05 + k * 1.4 * sp) * cv.width;
+          const r1 = r0 + 0.12 * sp * cv.width;
+          g.moveTo(cx + Math.cos(a) * r0, cy + Math.sin(a) * r0 * 0.62);
+          g.lineTo(cx + Math.cos(a) * r1, cy + Math.sin(a) * r1 * 0.62);
+        }
+        g.stroke();
+        g.globalAlpha = 1;
+      }
+      return s;
+    };
+  },
+};