kasaframe 0.1.1 → 0.1.4

package/themes/glass-light/sample/index.html

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

package/themes/glass-light/sample/kf.json

@@ -0,0 +1,59 @@
+{
+  "template": "promo",
+  "title": "glass-light · OpenGateway 소개 15초",
+  "theme": "glass-light",
+  "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/glass-light/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/glass-light/sample/lib/glass.ts

@@ -0,0 +1,81 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { THREE } from "@kasaframe/themes/stage3d";
+
+export const beatsFrom0 = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+const barsFrom0 = (ctx: SceneCtx): number[] => ctx.beats.bars.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+/** 컷마다 세트를 이만큼 떨어뜨린다 — 좁은 화각(38°)이라 다른 세트가 안 비친다. 바닥·빛은 지금 세트를 따라간다 */
+export const SET = 80;
+
+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)]);
+}
+
+/**
+ * OG 로고(public/logo.svg) 를 모양으로 — 선(stroke)으로 그린 SVG 라 그대로는 밀어낼 수 없어 수치를 옮겼다.
+ * 1140×650 좌표, y 가 아래로. 왼 칸(테 + 막대), 오른 칸(왼쪽이 트인 테), 화살표
+ */
+export function ogLogoShapes(): THREE.Shape[] {
+  const S = 1 / 1140;
+  const P = (x: number, y: number) => new THREE.Vector2((x - 570) * S, (325 - y) * S);
+  const rr = (p: THREE.Path, x: number, y: number, w: number, h: number, r: number) => {
+    const go = (fn: "moveTo" | "lineTo", px: number, py: number) => p[fn](P(px, py).x, P(px, py).y);
+    const bend = (cx: number, cy: number, px: number, py: number) => p.quadraticCurveTo(P(cx, cy).x, P(cx, cy).y, P(px, py).x, P(px, py).y);
+    go("moveTo", x + r, y);
+    go("lineTo", x + w - r, y);
+    bend(x + w, y, x + w, y + r);
+    go("lineTo", x + w, y + h - r);
+    bend(x + w, y + h, x + w - r, y + h);
+    go("lineTo", x + r, y + h);
+    bend(x, y + h, x, y + h - r);
+    go("lineTo", x, y + r);
+    bend(x, y, x + r, y);
+  };
+  const nodeIn = new THREE.Shape();
+  rr(nodeIn, 0, 0, 492, 650, 125);
+  const hole = new THREE.Path();
+  rr(hole, 72, 72, 348, 506, 53);
+  nodeIn.holes.push(hole);
+  const rect = (x: number, y: number, w: number, h: number) => {
+    const s = new THREE.Shape();
+    const a = P(x, y);
+    s.moveTo(a.x, a.y);
+    for (const [px, py] of [[x + w, y], [x + w, y + h], [x, y + h]]) s.lineTo(P(px, py).x, P(px, py).y);
+    s.closePath();
+    return s;
+  };
+  // 오른 칸 — 왼쪽 가운데(213–436)가 트인 테를 바깥·안쪽 윤곽 하나로 이어 그린다
+  const out = new THREE.Shape();
+  const m = (x: number, y: number) => out.moveTo(P(x, y).x, P(x, y).y);
+  const l = (x: number, y: number) => out.lineTo(P(x, y).x, P(x, y).y);
+  const q = (cx: number, cy: number, x: number, y: number) => out.quadraticCurveTo(P(cx, cy).x, P(cx, cy).y, P(x, y).x, P(x, y).y);
+  m(648, 213);
+  l(648, 125);
+  q(648, 0, 773, 0);
+  l(1015, 0);
+  q(1140, 0, 1140, 125);
+  l(1140, 525);
+  q(1140, 650, 1015, 650);
+  l(773, 650);
+  q(648, 650, 648, 525);
+  l(648, 436);
+  l(720, 436);
+  l(720, 525);
+  q(720, 578, 773, 578);
+  l(1015, 578);
+  q(1068, 578, 1068, 525);
+  l(1068, 125);
+  q(1068, 72, 1015, 72);
+  l(773, 72);
+  q(720, 72, 720, 125);
+  l(720, 213);
+  out.closePath();
+  const head = new THREE.Shape();
+  head.moveTo(P(814, 201).x, P(814, 201).y);
+  head.lineTo(P(996, 325).x, P(996, 325).y);
+  head.lineTo(P(814, 449).x, P(814, 449).y);
+  head.closePath();
+  return [nodeIn, rect(72, 272, 277, 106), out, rect(420, 272, 394, 106), head];
+}

package/themes/glass-light/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/glass-light/sample/scenes/end.ts

@@ -0,0 +1,43 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { causticFloor, glassLogo, glassStudio, glassTile } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, ogLogoShapes, SET } from "../lib/glass.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const stage = glassStudio(root, {
+      ctx,
+      shots: [
+        // 첫 토큰 실측 셋이 솟는다 — 기둥을 따라 올려다보며 합계가 서는 박에 내려앉는다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [-2.4, 1.8, 13], look: [0, 2.4, 0] }, { t: b[3] ?? 1.06, pos: [0.4, 4.6, 15.5], look: [0, 3.6, 0] }] },
+        // 유리 로고 — 주소가 서는 박까지 다가가고, 끝 컷까지 천천히 더 다가간다(컷은 움직임 위에서)
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET, 4.2, 17], look: [SET, 3.4, 0] }, { t: b[6] ?? c1[0] + 0.7, pos: [SET, 3.8, 12.5], look: [SET, 3.2, 0], ease: "outCubic" }, { t: c1[1], pos: [SET, 3.7, 11.2], look: [SET, 3.2, 0], ease: "linear" }] },
+        // 끝 반 마디 — 로고와 주소 앞으로 한 번 다가가 선다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [2 * SET - 1.4, 3.8, 12], look: [2 * SET + 1.4, 3.4, 0] }, { t: c2[0] + 0.45, pos: [2 * SET + 0.6, 3.6, 10], look: [2 * SET + 1.4, 3.4, 0], ease: "outCubic" }] },
+      ],
+    });
+    // 첫 컷 — 첫 토큰 가운데값 셋이 박마다 유리 기둥으로(높이 = ms)
+    stage.add(causticFloor(stage, { ctx, pos: [0, 0, 0], size: 26, moves: b }));
+    const max = Math.max(...OG.ttft.map(([, , ms]) => ms));
+    OG.ttft.forEach(([id, label, ms], i) => {
+      const at = b[i] ?? i * 0.35;
+      const h = (6 * ms) / max;
+      const x = -4.4 + i * 4.4;
+      stage.add(glassTile(stage, { ctx, text: label, pos: [x, h / 2, 0], size: [3.4, h], depth: 0.8, at, grow: true, seed: `t${i}` }));
+      stage.add(glassTile(stage, { ctx, text: id, pos: [x, 0.45, 2.2], size: [4, 0.66], depth: 0.15, at: at + 0.08, from: [x, 0.45, 5], font: "mono", seed: `i${i}` }));
+    });
+    stage.add(glassTile(stage, { ctx, text: OG.calls, pos: [0, 7.2, -1], size: [5.6, 0.9], depth: 0.25, at: b[3] ?? 1.06, font: "sans", seed: "calls" }));
+    // 둘째 컷 — OG 로고가 유리로 서서 무지개로 빛나고, 아래 opengateway.ai
+    stage.add(causticFloor(stage, { ctx, pos: [SET, 0, 0], size: 26, strength: 0.8, moves: b }));
+    stage.add(glassLogo(stage, { ctx, shapes: ogLogoShapes(), pos: [SET, 4.2, 0], width: 7.2, at: c1[0], depth: 0.16 }));
+    stage.add(glassTile(stage, { ctx, text: OG.site, pos: [SET, 0.9, 1.6], size: [6.6, 1.2], depth: 0.3, at: b[5] ?? c1[0] + 0.35, seed: "site" }));
+    // 끝 반 마디 — 로고를 곁에 두고 주소 한 줄
+    stage.add(causticFloor(stage, { ctx, pos: [2 * SET, 0, 0], size: 26, strength: 0.8, moves: b }));
+    stage.add(glassLogo(stage, { ctx, shapes: ogLogoShapes(), pos: [2 * SET - 1.6, 4.6, 0], width: 4.4, at: c2[0] - 0.4, depth: 0.16 }));
+    stage.add(glassTile(stage, { ctx, text: OG.site, pos: [2 * SET + 3.4, 4.8, 0.4], size: [5.4, 1.2], depth: 0.3, at: c2[0], from: [2 * SET + 8, 6, 2], seed: "site2" }));
+    stage.add(glassTile(stage, { ctx, text: OG.url, pos: [2 * SET + 1.4, 1.6, 1.2], size: [8, 0.8], depth: 0.2, at: c2[0] + 0.12, from: [2 * SET + 1.4, -1.6, 4], font: "mono", color: "accentText", seed: "url2" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/glass-light/sample/scenes/gather.ts

@@ -0,0 +1,38 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { causticFloor, glassStudio, glassTile } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, SET } from "../lib/glass.ts";
+
+const SPOT: [number, number, number][] = [[-5.2, 5.4, -1], [0, 6, -2], [5.2, 5.2, 0], [-4.6, 3.2, 0.6], [0.4, 3.6, 0], [5, 2.8, -1], [-5, 1.1, -0.4], [-0.2, 1.3, 1], [4.8, 0.9, 0.5]];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1] = cuts(ctx, 2);
+    const stage = glassStudio(root, {
+      ctx,
+      shots: [
+        // 회사 판이 박마다 셋씩 내려앉는다 — 셋째 무리가 서는 박까지 다가가고, 다음 컷까지 천천히 더 다가간다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [-1.6, 4.8, 21], look: [0, 3.4, 0] }, { t: b[2] ?? 0.7, pos: [0.4, 4.2, 16.5], look: [0, 3.3, 0], ease: "outCubic" }, { t: c0[1], pos: [0.5, 4.1, 15.2], look: [0, 3.3, 0], ease: "linear" }] },
+        // 모델 수만큼 유리 기둥이 솟는다 — 첫 기둥 곁에서 물러나 아홉을 다 담고 선다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET - 6.5, 2.4, 7.5], look: [SET - 5.5, 2.4, 0] }, { t: b[7] ?? c1[0] + 1.05, pos: [SET, 3.4, 17.5], look: [SET, 3, 0], ease: "outCubic" }] },
+      ],
+    });
+    stage.add(causticFloor(stage, { ctx, pos: [0, 0, 0], size: 26, moves: b }));
+    // 첫 컷 — 회사 아홉이 유리 타일로 박마다 셋씩 공중에서 미끄러져 와 선다
+    OG.providers.forEach(([name], i) => {
+      stage.add(glassTile(stage, { ctx, text: name, pos: SPOT[i], size: [3.4, 1.3], depth: 0.4, at: b[i % 3] ?? (i % 3) * 0.35, seed: name }));
+    });
+    // 둘째 컷 — 회사별 모델 수만큼 유리 기둥이 솟는다(박마다 셋)
+    stage.add(causticFloor(stage, { ctx, pos: [SET, 0, 0], size: 26, moves: b }));
+    OG.providers.forEach(([name, n], i) => {
+      const at = b[4 + Math.floor(i / 3)] ?? c1[0] + Math.floor(i / 3) * 0.35;
+      const h = 0.8 + (5 * n) / 41;
+      const x = SET - 8.4 + i * 2.1;
+      stage.add(glassTile(stage, { ctx, text: String(n), pos: [x, 1 + h / 2, 0], size: [1.7, h], depth: 0.7, at, grow: true, seed: `c${i}` }));
+      // 기둥은 한 칸 띄워 세우고 이름 판은 그 아래 — 바닥에 묻히거나 짧은 기둥의 숫자를 가리지 않게
+      stage.add(glassTile(stage, { ctx, text: name, pos: [x, 0.45, 1.2], size: [2, 0.62], depth: 0.16, at: at + 0.08, from: [x, 0.45, 5], font: "sans", seed: `n${i}` }));
+    });
+    return (t: number) => stage(t);
+  },
+};

package/themes/glass-light/sample/scenes/models.ts

@@ -0,0 +1,46 @@
+import { clamp, type SceneCtx } from "@kasaframe/core";
+import { causticFloor, glassStudio, glassTile, lensSweep, prismBeam } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, SET } from "../lib/glass.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 stage = glassStudio(root, {
+      ctx,
+      shots: [
+        // 빛이 프리즘에서 모인다 — 프리즘으로 다가가 주소 앞에 선다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [-2.4, 4.6, 20], look: [0, 3.4, 0] }, { t: b[2] ?? 0.7, pos: [0, 4.1, 15.5], look: [0, 3.5, 0], ease: "outCubic" }] },
+        // 모델 ID 넷 — 첫 박에 다가가 서고, 렌즈가 박마다 옮긴다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET + 2, 3.8, 15.5], look: [SET, 2.6, 0] }, { t: b[5] ?? c1[0] + 0.35, pos: [SET, 3.3, 13], look: [SET, 2.7, 0], ease: "outCubic" }] },
+        // 모델 수가 차오른다 — 서서 받다가 드롭으로 판에 빨려 든다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [2 * SET + 2, 4, 15], look: [2 * SET, 3.2, 0] }, { t: b[10] ?? c2[0] + 0.7, pos: [2 * SET + 2, 4, 15], look: [2 * SET, 3.2, 0] }, { t: drop, pos: [2 * SET, 3.5, 8.6], look: [2 * SET, 3.3, 0], ease: "inCubic" }] },
+      ],
+    });
+    // 첫 컷 — 여러 색 빛이 프리즘에서 한 줄기로 모인다. 위에 주소, 아래에 박마다 엔드포인트
+    stage.add(causticFloor(stage, { ctx, pos: [0, 0, 0], size: 26, moves: b }));
+    stage.add(prismBeam(stage, { ctx, pos: [0, 3.4, 0], at: 0, reverse: true, fan: 0.6 }));
+    stage.add(glassTile(stage, { ctx, text: OG.url, pos: [0, 6.6, 0], size: [10, 1.1], depth: 0.3, at: 0.02, font: "mono", seed: "url" }));
+    OG.endpoints.forEach((e, i) => {
+      const at = (b[Math.min(3, i + 1)] ?? 0.35 * (i + 1)) + (i === 3 ? 0.17 : 0);
+      stage.add(glassTile(stage, { ctx, text: `/v1${e}`, pos: [-5.4 + i * 3.6, 0.9, 2], size: [3.4, 0.8], depth: 0.2, at, font: "mono", seed: e }));
+    });
+    // 둘째 컷 — 같은 주소에 모델 ID 넷, 렌즈가 박마다 다음 ID 로 옮겨 키워 보인다
+    stage.add(causticFloor(stage, { ctx, pos: [SET, 0, 0], size: 26, moves: b }));
+    stage.add(glassTile(stage, { ctx, text: "POST /v1/chat/completions", pos: [SET, 6, -1], size: [8, 0.8], depth: 0.2, at: c1[0], font: "mono", color: "dim", seed: "post" }));
+    const rows = OG.ids.slice(0, 4).map((id, k) => [SET - 0.2, 4.5 - k * 1.45, 0] as [number, number, number]);
+    // 렌즈가 머무는 박 동안 그 ID 판이 앞으로 나와 커진다
+    const stay = (k: number): [number, number] => [b[4 + k] ?? c1[0] + k * 0.35, b[5 + k] ?? c1[0] + (k + 1) * 0.35];
+    OG.ids.slice(0, 4).forEach((id, k) => stage.add(glassTile(stage, { ctx, text: id, pos: rows[k], size: [9.6, 1], depth: 0.2, at: c1[0] + k * 0.05, font: "mono", seed: id, focus: [stay(k)] })));
+    stage.add(lensSweep(stage, { ctx, stops: rows.map((p, k) => ({ t: stay(k)[0], pos: [p[0], p[1], 1.45] as [number, number, number] })), size: [11.4, 1.34] }));
+    // 셋째 컷 — 모델 수가 유리판에서 000→102, 뒤에서 빛이 갈라진다
+    stage.add(causticFloor(stage, { ctx, pos: [2 * SET, 0, 0], size: 26, strength: 0.8, moves: b }));
+    stage.add(prismBeam(stage, { ctx, pos: [2 * SET, 3.2, -3], at: c2[0], fan: 0.9 }));
+    const steps = 8;
+    stage.add(glassTile(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, 3.4, 0.5], size: [6, 3.4], depth: 0.6, at: c2[0], seed: "count" }));
+    stage.add(glassTile(stage, { ctx, text: "models", pos: [2 * SET, 1.0, 1.4], size: [3, 0.7], depth: 0.2, at: b[9] ?? c2[0] + 0.35, font: "mono", color: "accentText", seed: "models" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/glass-light/sample/scenes/price.ts

@@ -0,0 +1,46 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { causticFloor, glassStudio, glassTile, lightRing, shatterFlash } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, SET } from "../lib/glass.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 = glassStudio(root, {
+      ctx,
+      shots: [
+        // 드롭 — 유리가 터지며 판 앞에서 튕겨 물러나 102 를 드러내고 선다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [0, 4, 6.5], look: [0, 4, 0] }, { t: b[2] ?? 0.72, pos: [-1.4, 4.6, 14.5], look: [0, 3.4, 0], ease: "outExpo" }] },
+        // 하루 고리 — 밤 창이 잦아드는 박에 맞춰 위로 올라 고리를 내려다본다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET + 6.5, 4.2, 11], look: [SET, 0.9, 0.6] }, { t: fall, pos: [SET + 1.2, 8.6, 13.6], look: [SET, 0.6, 1.6] }] },
+        // 정가와 밤값 — 밤값 판이 서는 박에 다가간다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [2 * SET, 4.2, 15], look: [2 * SET, 3.2, 0] }, { t: b[9] ?? c2[0] + 0.35, pos: [2 * SET, 4.2, 15], look: [2 * SET, 3.2, 0] }, { t: (b[9] ?? c2[0] + 0.35) + 0.45, pos: [2 * SET + 1.4, 3.9, 12.2], look: [2 * SET + 0.8, 3.2, 0], ease: "outCubic" }] },
+      ],
+    });
+    // 드롭 — 섬광과 함께 유리 조각이 튀고, 102 · 한 주소
+    stage.add(causticFloor(stage, { ctx, pos: [0, 0, 0], size: 26, strength: 0.9, moves: b }));
+    stage.add(shatterFlash(stage, { ctx, pos: [0, 3.6, 0], drop: 0 }));
+    stage.add(glassTile(stage, { ctx, text: String(OG.models), pos: [0, 4.2, 0], size: [7.8, 4.3], depth: 0.7, at: 0.02, from: [0, 4.4, -6], seed: "102" }));
+    stage.add(glassTile(stage, { ctx, text: "한 주소", pos: [-2.6, 1.3, 1.4], size: [3.6, 1.1], depth: 0.3, at: b[1] ?? 0.35, seed: "one" }));
+    stage.add(glassTile(stage, { ctx, text: OG.host, pos: [2.8, 1.3, 1.4], size: [4.8, 0.9], depth: 0.25, at: b[2] ?? 0.7, font: "mono", seed: "host" }));
+    // 둘째 컷 — 하루 24 큐브 고리, 밤 창이 파랗게 빛나다가 박에 -90% 로 잦아든다
+    stage.add(causticFloor(stage, { ctx, pos: [SET, 0, 0], size: 26, moves: b }));
+    stage.add(lightRing(stage, { ctx, pos: [SET, 0, 0], radius: 5, at: c1[0], drop: fall, window: [OG.night.from, OG.night.to] }));
+    stage.add(glassTile(stage, { ctx, text: `00:00-10:00 ${OG.night.tz}`, pos: [SET, 0.8, 6.8], size: [5.8, 1], depth: 0.25, at: b[5] ?? c1[0] + 0.35, font: "mono", seed: "kst" }));
+    stage.add(glassTile(stage, { ctx, text: OG.deepseek.off, pos: [SET, 2.4, 0], size: [4, 1.8], depth: 0.4, at: b[7] ?? fall + 0.35, color: "accentText", seed: "off" }));
+    // 셋째 컷 — 정가 판이 물러나고 밤값 판이 미끄러져 온다
+    const ds = OG.deepseek;
+    stage.add(causticFloor(stage, { ctx, pos: [2 * SET, 0, 0], size: 26, moves: b }));
+    stage.add(glassTile(stage, { ctx, text: ds.id, pos: [2 * SET, 6, 0], size: [8.4, 0.95], depth: 0.25, at: b[8] ?? c2[0], font: "mono", seed: "id" }));
+    [ds.input, ds.output].forEach(([was, now], i) => {
+      const at = b[9 + i] ?? c2[0] + (i + 1) * 0.35;
+      const y = 4.2 - i * 2.2;
+      stage.add(glassTile(stage, { ctx, text: `${i ? "출력" : "입력"} ${was}`, pos: [2 * SET - 2.4, y, 0], size: [4, 1.1], depth: 0.3, at: c2[0], until: at + 0.2, color: "dim", seed: `w${i}` }));
+      stage.add(glassTile(stage, { ctx, text: now, pos: [2 * SET + 2.6, y, 0.8], size: [4, 1.6], depth: 0.4, at, from: [2 * SET + 8, y + 2, 4], color: "accentText", seed: `n${i}` }));
+    });
+    stage.add(glassTile(stage, { ctx, text: `${OG.glm.id}  ${OG.glm.off}`, pos: [2 * SET, 0.8, 1.6], size: [8.4, 0.8], depth: 0.2, at: b[11] ?? c2[0] + 1.06, font: "mono", seed: "glm" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/glass-light/sample/style.json

@@ -0,0 +1,94 @@
+{
+  "name": "glass-light",
+  "label": "유리와 빛 — 정보가 유리에 맺히고 빛이 갈라진다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#E8ECF2",
+    "surface": "#F6F8FB",
+    "raised": "#DCE2EB",
+    "line": "#C4CCD8",
+    "ink": "#11151D",
+    "inkSoft": "#2A3140",
+    "dim": "#5B6577",
+    "accent": "#2F6BFF",
+    "accentSoft": "#9DB8FF",
+    "accentText": "#1F55DB",
+    "onAccent": "#FFFFFF",
+    "success": "#1F9D6B",
+    "danger": "#D9443A",
+    "warning": "#E08A1E",
+    "glass": "#DDE8FF",
+    "rim": "#7FA6FF",
+    "warm": "#FF9DB7"
+  },
+  "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": 170,
+    "title": 86,
+    "body": 40,
+    "caption": 30,
+    "weightDisplay": 800,
+    "weightBody": 600,
+    "tracking": "-0.015em"
+  },
+  "radius": {
+    "sm": 10,
+    "md": 18,
+    "lg": 28,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 8
+    },
+    "cameraMove": "free",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "outCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.35,
+      "slow": 0.8
+    }
+  },
+  "theme": {
+    "inks": [
+      "#E8ECF2 밝은 스튜디오",
+      "#11151D 짙은 글",
+      "#2F6BFF OG 파랑 빛(강조)",
+      "무지개는 잉크가 아니라 분산 — 유리 가장자리와 프리즘에서만"
+    ],
+    "texture": "서리 낀 유리(거칠기 0.15–0.3)·굴절·무지개 분산, 바닥에 늘 흐르는 커스틱 빛 무늬, 부드러운 그림자",
+    "movement": "유리판이 공중에서 미끄러져 와 살짝 기울며 앉고 선다(떠다니지 않는다). 유리가 앉을 때마다 바닥 빛 무늬가 다시 모여 옮겨 간다. 카메라는 박에 맞춘 키로만 다가가고 물러나고 그 사이엔 선다. 마디마다 컷, 박마다 판이 서거나 빛이 갈라진다"
+  },
+  "notes": [
+    "출처: OG 캠페인 유리 타일, crazygl 유리 캡슐, canvasui 유리 오브젝트, ollin 커스틱.",
+    "글은 유리판 앞면에 박는다 — 서리 유리 뒤 글은 흐려 안 읽힌다."
+  ]
+}