kasaframe 0.1.3 → 0.1.5

package/themes/orbit-system/sample/index.html

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

package/themes/orbit-system/sample/kf.json

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

@@ -0,0 +1,84 @@
+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);
+
+/** 컷마다 행성계를 이만큼 떨어뜨린다 — 별빛 끝(90)보다 멀어 다른 세트를 비추지 않고, 화각(40°) 밖이라 비치지도 않는다 */
+export const SET = 200;
+
+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)]);
+}
+
+/** 행성 흙빛 다섯 — style.json 의 이름. 회사·모델마다 돌려 쓴다 */
+export const TONES = ["teal", "rust", "sand", "lilac", "ice"];
+
+/**
+ * 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/orbit-system/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/orbit-system/sample/scenes/end.ts

@@ -0,0 +1,50 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { bodyTag, gatewayStar, modelPlanet, orbitStage, requestSats } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, ogLogoShapes, SET, TONES } from "../lib/orbit.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const stage = orbitStage(root, {
+      ctx,
+      shots: [
+        // 첫 토큰 실측 셋 = 궤도 주기 셋 — 행성계 곁에서 물러나 셋과 범례를 다 담는다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [-4.6, 6, 12], look: [-4, 0, 0] }, { t: b[2] ?? 0.73, pos: [0.2, 7.6, 17.6], look: [0.6, -0.2, 0], ease: "outCubic" }, { t: c0[1], pos: [0.3, 7.4, 18.2], look: [0.6, -0.2, 0], ease: "linear" }] },
+        // 끝 카드 — 로고 별로 다가가며 주소가 서는 박에 선다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET, 5.6, 18], look: [SET, 0.4, 0] }, { t: b[6] ?? c1[0] + 0.7, pos: [SET, 3.6, 13.6], look: [SET, 0.2, 0], ease: "outCubic" }, { t: c1[1], pos: [SET, 3.5, 12.8], look: [SET, 0.2, 0], ease: "linear" }] },
+        // 끝 반 마디 — 로고와 주소 앞으로 한 번 다가가 선다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [2 * SET - 0.8, 3.4, 13.5], look: [2 * SET, 0.8, 0] }, { t: c2[0] + 0.45, pos: [2 * SET, 3, 11.6], look: [2 * SET, 0.8, 0], ease: "outCubic" }] },
+      ],
+    });
+    // 첫 컷 — 첫 토큰 가운데값이 곧 궤도 주기: 빠른 모델이 안쪽에서 짧게 돈다. 박마다 행성 하나와 범례 한 줄
+    const C: [number, number, number] = [-5, 0, 0];
+    stage.add(gatewayStar(stage, { ctx, pos: C, radius: 0.85, at: -1, pulse: b.slice(0, 4) }));
+    OG.ttft.forEach(([id, label, ms], k) => {
+      const at = (b[k] ?? k * 0.36) + (k ? 0 : 0.02);
+      const tone = TONES[[0, 2, 3][k]];
+      // 주기 = ms 의 다섯 배(초) — 비율이 실측 그대로다
+      const p = modelPlanet(stage, { ctx, center: C, orbit: 2.5 + k * 1.35, size: 0.48, period: (ms / 1000) * 5, phase: 0.1 + k * 0.33, tone, at, seed: `ttft${k}` });
+      stage.add(p);
+      stage.add(requestSats(stage, { ctx, around: p.where, count: 2, radius: 0.85, period: 0.7, at: at + 0.1, spread: 0.1, incline: 0.8, size: 0.06, seed: `ttft-sat${k}` }));
+      // 범례 한 줄 — 큰 ms(눈금 = 그 행성 색) 옆에 모델 ID
+      stage.add(bodyTag(stage, { ctx, text: label, on: [4.4, 2.3 - k * 1.55, 0], px: 92, at: at + 0.04, tick: tone }));
+      stage.add(bodyTag(stage, { ctx, text: id, on: [9.1, 2.3 - k * 1.55, 0], px: 52, at: at + 0.08, font: "mono", plate: false, color: "inkSoft" }));
+    });
+    stage.add(bodyTag(stage, { ctx, text: OG.calls, on: [6.4, -2.6, 0.6], px: 80, at: b[3] ?? 1.07, font: "sans", color: "accentText" }));
+    // 둘째 컷 — OG 로고가 별 자리에서 빛나고 행성 셋이 그 둘레를 돈다. 아래 opengateway.ai, 그 아래 주소
+    const logo: [number, number, number] = [SET, 1.1, 0];
+    stage.add(gatewayStar(stage, { ctx, pos: logo, shapes: ogLogoShapes(), width: 5.2, radius: 1.5, at: c1[0], pulse: b.filter((x) => x >= c1[0]) }));
+    [4.4, 5.8, 7.2].forEach((orbit, k) => stage.add(modelPlanet(stage, { ctx, center: [SET, 0, 0], orbit, size: 0.36 + 0.08 * k, period: 2.2 * Math.pow(orbit / 4.4, 1.5), phase: 0.62 + k * 0.3, tone: TONES[k + 1], at: c1[0] + 0.05 * k, seed: `card${k}` })));
+    stage.add(bodyTag(stage, { ctx, text: OG.site, on: [SET, -2.3, 3.2], px: 110, at: b[5] ?? c1[0] + 0.35 }));
+    stage.add(bodyTag(stage, { ctx, text: OG.url, on: [SET, -3.7, 3.4], px: 56, at: b[7] ?? c1[0] + 1.05, font: "mono", color: "accentText" }));
+    // 끝 반 마디 — 로고를 곁에 두고 주소 한 줄
+    const logo2: [number, number, number] = [2 * SET - 3.6, 1.4, 0];
+    stage.add(gatewayStar(stage, { ctx, pos: logo2, shapes: ogLogoShapes(), width: 3.4, radius: 1, at: c2[0] - 0.4, pulse: [c2[0]] }));
+    [2.9, 3.9].forEach((orbit, k) => stage.add(modelPlanet(stage, { ctx, center: [logo2[0], 0, 0], orbit, size: 0.3, period: 1.8 * Math.pow(orbit / 2.9, 1.5), phase: 0.7 + k * 0.4, tone: TONES[k + 2], at: -1, seed: `tail${k}` })));
+    stage.add(bodyTag(stage, { ctx, text: OG.site, on: [2 * SET + 2.6, 1.9, 0.4], px: 110, at: c2[0] }));
+    stage.add(bodyTag(stage, { ctx, text: OG.url, on: [2 * SET + 1.6, -0.2, 1], px: 52, at: c2[0] + 0.12, font: "mono", color: "accentText" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/orbit-system/sample/scenes/gather.ts

@@ -0,0 +1,35 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { gatewayStar, modelPlanet, orbitStage, requestSats } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, SET, TONES } from "../lib/orbit.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1] = cuts(ctx, 2);
+    const stage = orbitStage(root, {
+      ctx,
+      key: 1.8,
+      shots: [
+        // 흩어진 행성계 아홉 — 첫 행성 바로 위에서 확 물러나 따로 도는 궤도들을 드러내고, 컷 끝까지 천천히 다가간다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [0.4, 3.4, -1.4], look: [0.4, 0, -6.6] }, { t: b[1] ?? 0.64, pos: [0.3, 9.5, 17.5], look: [0.1, -0.6, 1.8], ease: "inOutCubic" }, { t: c0[1], pos: [0.4, 9.2, 16.8], look: [0.1, -0.6, 1.8], ease: "linear" }] },
+        // 빈 중심 둘레 아홉 궤도 — 행성 크기 = 모델 수. 물러나 전체를 담고, 씨앗 별이 켜지는 박에 선다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET + 2, 9, 13], look: [SET, 0, 0] }, { t: b[6] ?? c1[0] + 0.7, pos: [SET, 9.6, 17.6], look: [SET, -1, 0.8], ease: "outCubic" }, { t: ctx.dur, pos: [SET, 9.4, 18.4], look: [SET, -1, 0.8], ease: "linear" }] },
+      ],
+    });
+    // 첫 컷 — 회사 아홉이 저마다 따로 도는 작은 궤도(중심이 다 다르다). 첫 셋은 처음부터 돌고, 박마다 셋씩 더 떠오르고, 다음 두 박엔 저마다 요청을 쏜다
+    const spots: [number, number, number][] = [[-11, 0, -6], [0.4, 0, -6.6], [11.2, 0, -5.6], [-7.4, 0, 0.8], [0.8, 0, 1.4], [8.2, 0, 0.4], [-5.2, 0, 6.6], [0.2, 0, 7.4], [5.6, 0, 6.8]];
+    const scattered = OG.providers.map(([name], i) =>
+      modelPlanet(stage, { ctx, center: spots[i], orbit: 1.5 + 0.2 * (i % 3), size: 0.52, period: 2.2 + 0.4 * (i % 4), phase: i * 0.29, tilt: ((i % 3) - 1) * 0.35, tone: TONES[i % TONES.length], at: [-1, b[0] ?? 0.29, b[1] ?? 0.64][Math.floor(i / 3)], label: name, labelPx: 62 }),
+    );
+    scattered.forEach((p) => stage.add(p));
+    scattered.forEach((p, i) => stage.add(requestSats(stage, { ctx, around: p.where, count: 2, radius: 0.9, period: 0.95, at: i < 5 ? (b[2] ?? 0.99) : (b[3] ?? 1.35), spread: 0.08, incline: 0.9, size: 0.09, seed: `scatter${i}` })));
+    // 둘째 컷 — 한 중심 둘레로 아홉 궤도. 크기 = 회사별 모델 수, 안쪽일수록 빨리 돈다. 마지막 박에 빈 중심에서 씨앗 별이 켜진다
+    OG.providers.forEach(([name, n], i) => {
+      const orbit = 3.2 + i * 1.02;
+      stage.add(modelPlanet(stage, { ctx, center: [SET, 0, 0], orbit, size: 0.2 + 0.62 * Math.sqrt(n / 41), period: 3.6 * Math.pow(orbit / 3.2, 1.5), phase: 0.12 + i * 0.381, tone: TONES[i % TONES.length], at: (b[4 + Math.floor(i / 3)] ?? c1[0] + Math.floor(i / 3) * 0.35) + (i < 3 ? 0.02 : 0), label: `${name} ${n}`, labelPx: 56, seed: `size${i}` }));
+    });
+    stage.add(gatewayStar(stage, { ctx, pos: [SET, 0, 0], radius: 0.5, at: b[7] ?? c1[0] + 1.05, light: 2.2 }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/orbit-system/sample/scenes/models.ts

@@ -0,0 +1,49 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { bodyTag, gatewayStar, modelBelt, modelPlanet, orbitStage, transferArc } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, SET, TONES } from "../lib/orbit.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 = orbitStage(root, {
+      ctx,
+      shots: [
+        // 별이 켜지고 엔드포인트 넷이 전이 궤도로 모여든다 — 넷째가 닿는 박까지 다가간다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [0, 12.5, 24], look: [0, -0.4, 0] }, { t: b[3] ?? 1.06, pos: [0.6, 8.2, 16.2], look: [0.3, 0.4, 0.4], ease: "outCubic" }] },
+        // 별 가까이 — 첫 박에 다가가 서고, 박마다 다른 모델에서 요청이 날아든다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET + 2.4, 7.4, 16], look: [SET, 0.8, 0] }, { t: b[5] ?? c1[0] + 0.35, pos: [SET, 6.2, 13.4], look: [SET, 1, 0], ease: "outCubic" }] },
+        // 행성대가 차오르고 모델 수가 오른다 — 서서 받다가 드롭으로 별에 빨려 든다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [2 * SET, 13, 22], look: [2 * SET, -0.4, 0] }, { t: b[10] ?? c2[0] + 0.7, pos: [2 * SET, 13, 22], look: [2 * SET, -0.4, 0] }, { t: drop, pos: [2 * SET, 6.4, 11.5], look: [2 * SET, 0.6, 0], ease: "inCubic" }] },
+      ],
+    });
+    // 첫 컷 — 빈 중심에 게이트웨이 별이 켜지고(한 주소), 회사 행성에서 엔드포인트 넷이 박마다 전이 궤도로 날아든다
+    const ring = OG.providers.map(([, n], i) => {
+      const orbit = 3 + i * 0.95;
+      return modelPlanet(stage, { ctx, center: [0, 0, 0], orbit, size: 0.2 + 0.55 * Math.sqrt(n / 41), period: 1.9 * Math.pow(orbit / 2.6, 1.5), phase: 0.12 + i * 0.381, tone: TONES[i % TONES.length], at: -1, seed: `size${i}` });
+    });
+    ring.forEach((p) => stage.add(p));
+    const flights = OG.endpoints.map((_, k) => (b[k] ?? k * 0.35) + 0.02);
+    const dur = 0.34;
+    stage.add(gatewayStar(stage, { ctx, pos: [0, 0, 0], radius: 1.15, at: 0.02, pulse: flights.map((x) => x + dur) }));
+    stage.add(bodyTag(stage, { ctx, text: OG.host, on: [0, 2.6, 0], px: 76, at: 0.06, font: "mono" }));
+    OG.endpoints.forEach((e, k) => stage.add(transferArc(stage, { ctx, from: ring[[0, 2, 5, 7][k]].where, to: [0, 0, 0], at: flights[k], dur, bend: 0.28, label: `/v1${e}`, labelPx: 58, linger: 0.4 })));
+    // 둘째 컷 — 같은 별에 모델 넷. 박마다 다른 행성에서 요청이 날아들고 위 글자판의 모델 ID 가 바뀐다
+    const four = OG.ids.slice(0, 4).map((_, k) => modelPlanet(stage, { ctx, center: [SET, 0, 0], orbit: 3.4 + k * 1.25, size: 0.42, period: 2.4 * Math.pow((3.4 + k * 1.25) / 3.4, 1.5), phase: 0.08 + k * 0.27, tone: TONES[k], at: -1, seed: `id${k}` }));
+    four.forEach((p) => stage.add(p));
+    const hits = [0, 1, 2, 3].map((k) => b[4 + k] ?? c1[0] + k * 0.35);
+    stage.add(gatewayStar(stage, { ctx, pos: [SET, 0, 0], radius: 0.95, at: -1, pulse: hits }));
+    hits.forEach((h, k) => stage.add(transferArc(stage, { ctx, from: four[k].where, to: [SET, 0, 0], at: h - 0.3, dur: 0.3, bend: 0.22, linger: 0.25 })));
+    const idAt = (t: number) => OG.ids[Math.max(0, hits.filter((h) => h - 0.3 <= t).length - 1)];
+    stage.add(bodyTag(stage, { ctx, text: idAt, sample: OG.ids[3], on: [SET, 3.2, 0], px: 80, at: c1[0], font: "mono" }));
+    stage.add(bodyTag(stage, { ctx, text: "POST /v1/chat/completions", on: [SET, -2.4, 2.6], px: 56, at: c1[0], font: "mono", color: "inkSoft" }));
+    // 셋째 컷 — 작은 행성 102 개가 차례로 떠올라 행성대가 차고, 위 숫자가 떠오른 수를 그대로 센다
+    stage.add(gatewayStar(stage, { ctx, pos: [2 * SET, 0, 0], radius: 1, at: -1, pulse: b.filter((x) => x >= c2[0]) }));
+    const belt = modelBelt(stage, { ctx, center: [2 * SET, 0, 0], count: OG.models, radius: [2.8, 10], period: 2.2, size: 0.2, at: c2[0] + 0.02, dur: drop - c2[0] - 0.12 });
+    stage.add(belt);
+    stage.add(bodyTag(stage, { ctx, text: (t) => `models ${String(belt.shown(t)).padStart(3, "0")}`, sample: "models 000", on: [2 * SET, 3.6, 0], px: 118, at: c2[0], font: "mono" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/orbit-system/sample/scenes/price.ts

@@ -0,0 +1,57 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { bodyTag, gatewayStar, modelBelt, modelPlanet, nightPrice, orbitStage, requestSats, starFlare, transferArc } from "../../effects.ts";
+import { THREE } from "@kasaframe/themes/stage3d";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, SET } from "../lib/orbit.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 = orbitStage(root, {
+      ctx,
+      shots: [
+        // 드롭 — 별 곁 낮은 자리에서 충격파와 함께 물러나 102 를 드러낸다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [0, 2.6, 9.5], look: [0, 1.6, 0] }, { t: b[2] ?? 0.72, pos: [0, 11, 21], look: [0, 0.6, 0], ease: "outExpo" }] },
+        // 하루 고리 — 밤 반구 막대가 꺼지는 박에 다가간다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET - 1.6, 1.4, 18.4], look: [SET + 0.4, 0, 0] }, { t: fall, pos: [SET + 0.3, 0.9, 15.8], look: [SET + 0.4, 0, 0], ease: "outCubic" }, { t: c1[1], pos: [SET + 0.4, 0.9, 15.2], look: [SET + 0.4, 0, 0], ease: "linear" }] },
+        // 값이 궤도째 내려앉는다 — 밤값이 서는 박에 다가간다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [2 * SET + 0.6, 4.6, 16], look: [2 * SET, -0.3, 0] }, { t: b[9] ?? c2[0] + 0.35, pos: [2 * SET + 0.6, 4.6, 16], look: [2 * SET, -0.3, 0] }, { t: (b[9] ?? c2[0] + 0.35) + 0.45, pos: [2 * SET + 0.2, 4, 13.8], look: [2 * SET, -0.3, 0], ease: "outCubic" }] },
+      ],
+    });
+    // 드롭 — 별이 터지듯 빛나고 충격파가 행성대를 지난다. 요청 위성이 한꺼번에 쏘아 올라 껍질이 되고, 위에 102 · 한 주소
+    stage.add(gatewayStar(stage, { ctx, pos: [0, 0, 0], radius: 1.3, at: -1, pulse: b.slice(0, 4) }));
+    stage.add(modelBelt(stage, { ctx, center: [0, 0, 0], count: OG.models, radius: [3.2, 10.4], period: 2.2, at: -1 }));
+    stage.add(requestSats(stage, { ctx, around: [0, 0, 0], count: 54, radius: [2, 2.9], period: 1.1, at: 0, spread: 0.4, incline: 1.3, trail: 0.24, rise: 1.3 }));
+    stage.add(starFlare(stage, { ctx, pos: [0, 0, 0], drop: 0, reach: 24 }));
+    stage.add(bodyTag(stage, { ctx, text: String(OG.models), on: [0, 4, 0], px: 330, at: 0.02, plate: false }));
+    stage.add(bodyTag(stage, { ctx, text: "한 주소", on: [-6.4, 0, 4.6], px: 96, at: b[1] ?? 0.36, font: "sans" }));
+    stage.add(bodyTag(stage, { ctx, text: OG.host, on: [5.6, 0, 4.8], px: 70, at: b[2] ?? 0.72, font: "mono" }));
+    // 둘째 컷 — 자전하는 행성을 24 시 막대가 두른다. 별 반대쪽 밤 반구에 든 00–10 시 막대가 박에 -90% 로 쑥 줄어든다
+    const day = nightPrice(stage, { ctx, pos: [SET, 0, 0], radius: 2.3, at: c1[0] - 0.02, fall, window: [OG.night.from, OG.night.to], off: 0.9 });
+    stage.add(day);
+    stage.add(bodyTag(stage, { ctx, text: "00", on: day.hour(0, 1.3), px: 64, at: c1[0] + 0.3, font: "mono", plate: false }));
+    stage.add(bodyTag(stage, { ctx, text: "10", on: day.hour(10, 1.3), px: 64, at: c1[0] + 0.3, font: "mono", plate: false }));
+    stage.add(bodyTag(stage, { ctx, text: `00:00-10:00 ${OG.night.tz}`, on: [SET - 6.4, -2.4, 0], px: 66, at: b[5] ?? c1[0] + 0.35, font: "mono" }));
+    stage.add(bodyTag(stage, { ctx, text: OG.deepseek.off, on: [SET + 6.8, 1.2, 0], px: 170, at: fall + 0.02, color: "accentText" }));
+    stage.add(requestSats(stage, { ctx, around: [SET, 0, 0], count: 3, radius: 5.3, period: 2.6, at: b[7] ?? fall + 0.35, spread: 0.1, incline: 0.35, rise: 4.4, tone: "success", seed: "nightcall" }));
+    // 셋째 컷 — 같은 모델 ID 에 값만 내려앉는다: 높은 궤도의 값 위성이 박마다 낮은 궤도로 옮겨 가고 밤값 글자판이 선다
+    const ds = OG.deepseek;
+    stage.add(gatewayStar(stage, { ctx, pos: [2 * SET - 10.5, 0, -1], radius: 0.9, at: -1 }));
+    const planet = modelPlanet(stage, { ctx, center: [2 * SET - 10.5, 0, -1], orbit: 10.5, size: 1.4, period: -40, phase: 0.089, tone: "rust", at: -1, seed: "deepseek" });
+    stage.add(planet);
+    stage.add(requestSats(stage, { ctx, around: planet.where, count: 5, radius: [1.9, 2.4], period: 1.3, at: -1, incline: 0.7, seed: "ds" }));
+    stage.add(bodyTag(stage, { ctx, text: ds.id, on: [2 * SET, 3.4, 0], px: 76, at: b[8] ?? c2[0], font: "mono" }));
+    [ds.input, ds.output].forEach(([was, now], i) => {
+      const at = b[9 + i] ?? c2[0] + (i + 1) * 0.35;
+      const side = i ? 5.2 : -5.2;
+      const word = i ? "출력" : "입력";
+      stage.add(bodyTag(stage, { ctx, text: `${word} ${was}`, on: [2 * SET + side, -1.7, 2], px: 84, at: c2[0], until: at, font: "sans", color: "dim" }));
+      stage.add(bodyTag(stage, { ctx, text: `${word} ${now}`, on: [2 * SET + side, -1.7, 2], px: 108, at, font: "sans", color: "accentText" }));
+      stage.add(transferArc(stage, { ctx, from: (t) => planet.where(t).add(new THREE.Vector3(side * 0.35, 3.4, 0)), to: (t) => planet.where(t).add(new THREE.Vector3(side * 0.12, 1.7, 0.4)), at: at - 0.3, dur: 0.3, bend: 0.1, tone: "success", linger: 0.4 }));
+    });
+    stage.add(bodyTag(stage, { ctx, text: `${OG.glm.id} ${OG.glm.off}`, on: [2 * SET, -3.3, 2.4], px: 58, at: b[11] ?? c2[0] + 1.06, font: "mono" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/orbit-system/sample/style.json

@@ -0,0 +1,108 @@
+{
+  "name": "orbit-system",
+  "label": "우주 궤도 — 모델은 행성, 요청은 위성, 지연은 궤도 주기",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#0B0A10",
+    "surface": "#16141D",
+    "raised": "#211E2A",
+    "line": "#3A3546",
+    "ink": "#F4EEE2",
+    "inkSoft": "#D8CFC0",
+    "dim": "#9E95A8",
+    "accent": "#FFB547",
+    "accentSoft": "#FFD99A",
+    "accentText": "#FFC56E",
+    "onAccent": "#0B0A10",
+    "success": "#7FD8B4",
+    "danger": "#FF7A5C",
+    "warning": "#F2D16B",
+    "orbit": "#E9DFC8",
+    "night": "#2E3F73",
+    "teal": "#5FB7AE",
+    "rust": "#D9734E",
+    "sand": "#CDB98E",
+    "lilac": "#9A8FDB",
+    "ice": "#86A8DE"
+  },
+  "fonts": {
+    "sans": "\"Space Grotesk\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Space Grotesk\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Space Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Space Grotesk",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/spacegrotesk/SpaceGrotesk%5Bwght%5D.ttf",
+        "weight": "300 700"
+      },
+      {
+        "family": "Space Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/spacemono/SpaceMono-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Space Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/spacemono/SpaceMono-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": {
+    "hero": 160,
+    "title": 80,
+    "body": 40,
+    "caption": 30,
+    "weightDisplay": 700,
+    "weightBody": 500,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 6,
+    "md": 12,
+    "lg": 20,
+    "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": [
+      "#0B0A10 짙은 우주(보라 기운 검정)",
+      "#F4EEE2 크림 글·궤도선",
+      "#FFB547 별빛 호박(강조 — 게이트웨이 별과 위성)",
+      "행성 다섯 흙빛(teal·rust·sand·lilac·ice) — 채도 낮게, 별 쪽 반만 밝다"
+    ],
+    "texture": "매트한 행성 공(띠 무늬만, 사진 텍스처 없음), 머리카락처럼 가는 크림 궤도선, 서 있는 별 점, 별 둘레 호박 빛무리",
+    "movement": "행성은 제 궤도를 쉬지 않고 돈다 — 안쪽이 빠르다(주기 = 지연). 위성은 쏘아 올려 궤도에 들고 짧은 꼬리를 끈다. 박마다 행성이 떠오르거나 위성이 궤도에 들거나 전이 궤도로 옮겨 간다. 카메라는 박에 맞춘 키로만 다가가고 물러나며 그 사이엔 선다. 마디마다 다른 행성계로 컷"
+  },
+  "notes": [
+    "출처: orrery.live(JPL 오러리), orbitview.world(위성 궤도 콘솔), tinytovast.com/earth-satellites(위성 껍질).",
+    "빛은 중심 별 하나 — 행성의 밤 반구가 그래서 생기고, 밤 반구는 싼 시간대를 뜻한다. 별 점은 서 있다."
+  ]
+}