kasaframe 0.1.1 → 0.1.4

package/themes/pixel-quest/sample/index.html

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

package/themes/pixel-quest/sample/kf.json

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

@@ -0,0 +1,71 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { color } from "../../kit.ts";
+
+export const W = 1920;
+export const H = 1080;
+/** 한 게임 픽셀·타일 — 땅 두 줄이면 땅 윗변이 888 */
+export const U = 6;
+export const TILE = 96;
+export const GROUND = H - 2 * TILE;
+
+/** 장면 안 박 — 장면 시작 0 부터 끝 전까지 */
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+/** 컷 경계 — 첫 컷은 0 부터(장면 머리의 못갖춘마디는 첫 컷에 넣는다), 나머지는 마디 첫 박 */
+export function cutsAt(ctx: SceneCtx): number[] {
+  const bars = ctx.beats.bars.filter((b) => b > 0.6 && b < ctx.dur - 1e-6);
+  return [0, ...bars];
+}
+
+export function layer(parent: HTMLElement, css = ""): HTMLElement {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;inset:0;${css}`;
+  parent.append(el);
+  return el;
+}
+
+/** 컷 하나 — 그 구간에서만 보이고(display 로 통째로 뺀다), 안의 그리기는 컷 안 시각이 아니라 장면 시각을 받는다 */
+export function cut(parent: HTMLElement, from: number, to: number, build: (el: HTMLElement) => ((t: number) => void)[]): (t: number) => void {
+  const el = layer(parent);
+  const paints = build(el);
+  return (t) => {
+    const on = t >= from && t < to;
+    el.style.display = on ? "" : "none";
+    if (on) for (const p of paints) p(t);
+  };
+}
+
+export function text(parent: HTMLElement, ctx: SceneCtx, s: string, css: string, tone = "ink", font: "sans" | "display" | "mono" = "display"): HTMLElement {
+  const el = document.createElement("div");
+  el.textContent = s;
+  el.style.cssText = `position:absolute;white-space:pre;line-height:1.2;font-family:${ctx.style.fonts[font]};color:${color(ctx, tone)};${css}`;
+  parent.append(el);
+  return el;
+}
+
+/** 한 자씩 찍히는 글(초당 cps 자) — 다 찍힌 뒤엔 text 그대로 */
+export const typeIn = (el: HTMLElement, s: string, at: number, cps = 30) => {
+  const chars = [...s];
+  return (t: number) => {
+    el.style.display = t >= at ? "" : "none";
+    el.textContent = chars.slice(0, Math.floor(Math.max(0, t - at) * cps + 1e-6) + 1).join("");
+  };
+};
+
+/** at 부터 보이는 글 */
+export const showAt = (el: HTMLElement, at: number, until = Infinity) => (t: number) => {
+  el.style.display = t >= at && t < until ? "" : "none";
+};
+
+/** 회사마다 보석 색 — 팔레트 칸 이름 */
+export const GEM: Record<string, string> = {
+  OpenAI: "success",
+  Anthropic: "accentSoft",
+  Google: "sky",
+  "Z.ai": "ink",
+  xAI: "inkSoft",
+  Qwen: "pink",
+  Moonshot: "coin",
+  DeepSeek: "dim",
+  MiniMax: "heart",
+};

package/themes/pixel-quest/sample/lib/logo.ts

@@ -0,0 +1,51 @@
+// OG 로고(assets/og/logo.svg)를 칸 지도로 — SVG 를 그림으로 읽지 않고 같은 도형을 식으로 재서, 블록 하나하나를 따로 떨어뜨릴 수 있게 한다.
+// 도형 값은 logo.svg 그대로(viewBox 1140×650)
+
+const sdRoundRect = (px: number, py: number, x: number, y: number, w: number, h: number, r: number): number => {
+  const qx = Math.abs(px - (x + w / 2)) - (w / 2 - r);
+  const qy = Math.abs(py - (y + h / 2)) - (h / 2 - r);
+  return Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - r;
+};
+
+const inRect = (px: number, py: number, x0: number, y0: number, x1: number, y1: number) => px >= x0 && px <= x1 && py >= y0 && py <= y1;
+
+function segDist(px: number, py: number, ax: number, ay: number, bx: number, by: number): number {
+  const dx = bx - ax;
+  const dy = by - ay;
+  const k = Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy)));
+  return Math.hypot(px - ax - dx * k, py - ay - dy * k);
+}
+
+function inArrowHead(px: number, py: number): boolean {
+  const a: [number, number] = [833, 220];
+  const b: [number, number] = [970, 325];
+  const c: [number, number] = [833, 430];
+  const s = (p: [number, number], q: [number, number]) => (px - q[0]) * (p[1] - q[1]) - (p[0] - q[0]) * (py - q[1]);
+  const d1 = s(a, b);
+  const d2 = s(b, c);
+  const d3 = s(c, a);
+  const inside = !((d1 < 0 || d2 < 0 || d3 < 0) && (d1 > 0 || d2 > 0 || d3 > 0));
+  return inside || Math.min(segDist(px, py, ...a, ...b), segDist(px, py, ...b, ...c), segDist(px, py, ...c, ...a)) <= 19;
+}
+
+function inLogo(px: number, py: number): boolean {
+  if (Math.abs(sdRoundRect(px, py, 36, 36, 420, 578, 89)) <= 36) return true;
+  if (inRect(px, py, 72, 272, 349, 378)) return true;
+  // 오른쪽 마디는 왼쪽 변 213–436 이 비었다(화살이 들어가는 자리)
+  if (Math.abs(sdRoundRect(px, py, 684, 36, 420, 578, 89)) <= 36 && !(px < 760 && py > 213 && py < 436)) return true;
+  if (inRect(px, py, 420, 272, 814, 378)) return true;
+  return inArrowHead(px, py);
+}
+
+/** cols 칸 폭의 로고 칸 지도 — '#' 이 블록 */
+export function ogLogoCells(cols: number): string[] {
+  const k = 1140 / cols;
+  const rows = Math.round(650 / k);
+  const out: string[] = [];
+  for (let j = 0; j < rows; j++) {
+    let row = "";
+    for (let i = 0; i < cols; i++) row += inLogo((i + 0.5) * k, (j + 0.5) * k) ? "#" : ".";
+    out.push(row);
+  }
+  return out;
+}

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

@@ -0,0 +1,75 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { blockBuild, coinCounter, pixelMove, questWindow, sprite, tileField, tileWipe } from "../../effects.ts";
+import { color } from "../../kit.ts";
+import { OG } from "../lib/facts.ts";
+import { ogLogoCells } from "../lib/logo.ts";
+import { beatsIn, cut, cutsAt, GROUND, layer, text, typeIn } from "../lib/game.ts";
+
+// 지연 = 경주. 첫 마디: 세 레인에서 모델 셋이 출발해 첫 토큰 실측(ms) 비율대로 결승선에 닿고 TIME 이 찍힌다, 18번 호출 값은 코인으로.
+// 둘째 마디: 끝 카드 — OG 로고가 블록으로 아래부터 쌓이고 주소가 찍히고, 용사가 걸어와 로고 아래에서 뛴다
+const LANES = [84, 300, 516];
+const START = 300;
+const FINISH = 1440;
+const TUNIC = ["success", "sky", "accentSoft"];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const field = tileField(layer(root), { ctx });
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, bar2] = cutsAt(ctx);
+    const go = b(1);
+    const k = 0.9 / 1000;
+
+    const race = cut(root, 0, bar2, (el) => {
+      const lanes = OG.ttft.flatMap(([id, label, ms], i) => {
+        const y = LANES[i];
+        const name = text(el, ctx, id, `left:120px;top:${y}px;font-size:48px;`, "ink", "mono");
+        const track = document.createElement("div");
+        track.style.cssText = `position:absolute;left:120px;top:${y + 204}px;width:1584px;height:12px;background:repeating-linear-gradient(90deg, ${color(ctx, "inkSoft")} 0 36px, transparent 36px 72px);`;
+        el.append(track);
+        const done = go + ms * k;
+        const runner = sprite(el, { ctx, art: "hero", x: START - 144, y: y + 60, scale: 1.5, swap: { r: TUNIC[i] }, animate: [go, done], move: (t) => pixelMove(t, { ctx, from: [0, 0], to: [FINISH - START, 0], at: go, dur: ms * k }) });
+        const time = typeIn(text(el, ctx, "", `left:${FINISH + 72}px;top:${y + 96}px;font-size:64px;`, i === 0 ? "accent" : "ink", "display"), label, done, 40);
+        return [(t: number) => (name.style.display = t >= 0 ? "" : "none"), runner, time];
+      });
+      const flag = document.createElement("div");
+      flag.style.cssText = `position:absolute;left:${FINISH + 48}px;top:72px;width:12px;height:672px;background:${color(ctx, "ink")};`;
+      el.append(flag);
+      const hud = questWindow(el, { ctx, x: 120, y: 756, w: 1680, h: 126, at: b(3), open: 0.08 });
+      const calls = text(el, ctx, "OG 18번 호출", "left:192px;top:784px;font-size:48px;", "ink", "sans");
+      // 호출 하나 = 코인 한 닢 — 열여덟 닢이 차례로 떨어져 쌓이고 합이 정산된다
+      const n = 18;
+      const span = bar2 - b(3) - 0.1;
+      const coins = Array.from({ length: n }, (_, k) => {
+        const at = b(3) + 0.08 + (k * span) / n;
+        return sprite(el, { ctx, art: "coin", x: 540 + k * 48, y: 786, at, animate: [at, at + 0.2], move: (t) => pixelMove(t, { ctx, from: [0, -72], to: [0, 0], at, dur: 0.07 }) });
+      });
+      const sum = coinCounter(el, { ctx, x: 1452, y: 776, size: 64, from: 0, to: 0.0004, at: b(3) + 0.08, dur: span, icon: "none", tone: "accent", format: (v) => `$${v.toFixed(4)}` });
+      const reveal = tileWipe(el, { ctx, at: 0, dur: Math.max(0.15, go - 0.04), mode: "reveal", order: "diagonal" });
+      return [...lanes, hud, (t: number) => (calls.style.display = t >= b(3) + 0.08 ? "" : "none"), ...coins, sum, reveal];
+    });
+
+    const card = cut(root, bar2, ctx.dur, (el) => {
+      const cells = ogLogoCells(36);
+      const cell = 24;
+      const w = 36 * cell;
+      const logo = blockBuild(el, { ctx, cells, x: (1920 - w) / 2, y: 60, cell, at: bar2, dur: b(6) - bar2, tone: "ink", order: "rows-up" });
+      const site = typeIn(text(el, ctx, "", `left:0;width:1920px;text-align:center;top:${60 + cells.length * cell + 24}px;font-size:80px;`, "accent", "display"), OG.site, b(6), 30);
+      const end = ctx.dur - 1 / 60;
+      // 로고가 다 서기 전에 걸어 들어온다 — 글자만 찍히는 동안 화면이 서지 않게
+      const enter = b(5);
+      const hero = sprite(el, { ctx, art: "hero", x: -192, y: GROUND - 192, scale: 2, at: enter, animate: [enter, b(9)], move: (t) => {
+        const walk = pixelMove(t, { ctx, from: [0, 0], to: [960 - 96 + 192, 0], at: enter, dur: b(9) - enter });
+        return t < b(9) ? walk : pixelMove(t, { ctx, from: [960 - 96 + 192, 0], to: [960 - 96 + 192, 0], at: b(9), dur: end - b(9), hop: 150 });
+      } });
+      return [logo, site, hero];
+    });
+
+    return (t: number) => {
+      field(t);
+      race(t);
+      card(t);
+    };
+  },
+};

package/themes/pixel-quest/sample/scenes/gather.ts

@@ -0,0 +1,65 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { coinCounter, pixelMove, questWindow, sprite, tileField, tileWipe } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cut, cutsAt, GEM, GROUND, layer, text, typeIn } from "../lib/game.ts";
+
+// 회사 아홉 = 보물상자 아홉. 첫 마디엔 흩어진 상자가 박마다 셋씩 떨어지고 넷째 박에 한꺼번에 열린다,
+// 둘째 마디엔 아이템 창에 회사별 보석(모델) 수가 줄마다 정산된다. 그동안 요청(용사)은 땅을 걸어간다
+const SPOT: [number, number][] = [
+  [140, 80], [860, 100], [1480, 80],
+  [470, 290], [1130, 300], [1660, 290],
+  [140, 500], [780, 510], [1400, 500],
+];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const field = tileField(layer(root), { ctx });
+    const beats = beatsIn(ctx);
+    const [, bar2] = cutsAt(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.35;
+    const hero = sprite(layer(root), { ctx, art: "hero", x: -60, y: GROUND - 192, scale: 2, move: (t) => pixelMove(t, { ctx, from: [0, 0], to: [1960, 0], at: 0, dur: ctx.dur }) });
+
+    const map = cut(root, 0, bar2, (el) =>
+      OG.providers.flatMap(([name], i) => {
+        const [x, y] = SPOT[i];
+        const at = b(Math.floor(i / 3));
+        const fall = (t: number) => pixelMove(t, { ctx, from: [0, -90], to: [0, 0], at, dur: 0.12 });
+        const shut = sprite(el, { ctx, art: "chest", x, y, scale: 2, at, until: b(3), move: fall });
+        const open = sprite(el, { ctx, art: "chestOpen", x, y, scale: 2, at: b(3) });
+        // 열린 상자에서 그 회사 보석(모델)이 솟는다
+        const gem = sprite(el, { ctx, art: "gem", x: x + 24, y: y - 30, scale: 2, at: b(3), swap: { G: GEM[name] }, move: (t) => pixelMove(t, { ctx, from: [0, 60], to: [0, -36], at: b(3), dur: 0.18, hop: 40 }) });
+        const label = text(el, ctx, "", `left:${x + 84}px;top:${y + 128}px;transform:translateX(-50%);font-size:36px;`, "ink", "sans");
+        const type = typeIn(label, name, at + 0.05);
+        return [shut, open, gem, type];
+      }),
+    );
+
+    const items = cut(root, bar2, ctx.dur, (el) => {
+      const win = questWindow(el, { ctx, x: 120, y: 84, w: 1680, h: 612, at: bar2, open: 0.1 });
+      const cells = OG.providers.flatMap(([name, n], i) => {
+        const col = i % 3;
+        const row = Math.floor(i / 3);
+        const x = 200 + col * 540;
+        const y = 128 + row * 190;
+        const at = b(4 + row);
+        const gem = sprite(el, { ctx, art: "gem", x, y: y + 20, scale: 2, at, swap: { G: GEM[name] } });
+        const label = text(el, ctx, name, `left:${x + 150}px;top:${y}px;font-size:48px;`, "inkSoft", "sans");
+        const count = coinCounter(el, { ctx, x: x + 150, y: y + 56, size: 80, to: n, at, dur: 0.3, icon: "none", tone: "accent", format: (v) => `×${Math.round(v)}` });
+        return [gem, (t: number) => (label.style.display = t >= at ? "" : "none"), count];
+      });
+      const wipe = tileWipe(el, { ctx, at: b(7), dur: ctx.dur - b(7) - 1 / 60, order: "diagonal" });
+      return [win, ...cells, wipe];
+    });
+
+    // 전원을 켠 듯 검정 타일이 걷히며 판이 시작된다
+    const boot = tileWipe(layer(root), { ctx, at: 0, dur: Math.max(0.15, b(0) - 0.02), mode: "reveal", order: "spiral" });
+
+    return (t: number) => {
+      field(t);
+      map(t);
+      items(t);
+      hero(t);
+      boot(t);
+    };
+  },
+};

package/themes/pixel-quest/sample/scenes/models.ts

@@ -0,0 +1,104 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { blockBuild, heartGauge, menuCursor, pixelMove, questWindow, sprite, tileField, tileWipe } from "../../effects.ts";
+import { color } from "../../kit.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cut, cutsAt, GEM, GROUND, layer, text } from "../lib/game.ts";
+
+// 한 주소 = 관문 하나. 첫 마디: 관문이 블록으로 서고 그 위 팻말에 주소가 찍히고 용사가 뛰어든다.
+// 둘째 마디: 명령 메뉴에서 박마다 다른 모델 ID 를 고르면 그 보석이 같은 관문으로 날아든다.
+// 셋째 마디: OpenAI·Anthropic 두 형식 창이 같은 관문에 코인을 보내고, 드롭 앞 게이지가 박마다 두 칸씩 찬다
+const GATE = [
+  "##..##..##..##",
+  "##############",
+  "##############",
+  "####......####",
+  "###........###",
+  "##..........##",
+  "##..........##",
+  "##..........##",
+  "##..........##",
+  "##..........##",
+  "##..........##",
+  "##..........##",
+  "##..........##",
+  "##..........##",
+];
+const CELL = 36;
+
+function gate(el: HTMLElement, ctx: SceneCtx, x: number, at: number, dur: number) {
+  const y = GROUND - GATE.length * CELL;
+  const door = document.createElement("div");
+  // 관문 안 — 다 지어진 뒤 검정 문간이 열린다
+  door.style.cssText = `position:absolute;left:${x + 2 * CELL}px;top:${y + 4 * CELL}px;width:${10 * CELL}px;height:${(GATE.length - 4) * CELL}px;background:${color(ctx, "surface")};`;
+  el.append(door);
+  const build = blockBuild(el, { ctx, cells: GATE, x, y, cell: CELL, at, dur, tone: "inkSoft", order: "rows-up" });
+  return {
+    cx: x + 7 * CELL,
+    cy: y + 9 * CELL,
+    paint: (t: number) => {
+      door.style.display = t >= at + dur ? "" : "none";
+      build(t);
+    },
+  };
+}
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const field = tileField(layer(root), { ctx });
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, barB, barC] = cutsAt(ctx);
+
+    const a = cut(root, 0, barB, (el) => {
+      const g = gate(el, ctx, 1300, b(1), 0.3);
+      const sign = questWindow(el, { ctx, x: 264, y: 84, w: 1392, h: 168, lines: [OG.url], at: b(2), cps: 60, size: 60, font: "mono", tones: ["accent"] });
+      const hero = sprite(el, { ctx, art: "hero", x: 120, y: GROUND - 192, scale: 2, until: b(3) + 0.3, move: (t) => {
+        const walk = pixelMove(t, { ctx, from: [0, 0], to: [1100, 0], at: 0, dur: b(3) });
+        if (t < b(3)) return walk;
+        return pixelMove(t, { ctx, from: [1100, 0], to: [g.cx - 120 - 96, -60], at: b(3), dur: 0.3, hop: 220 });
+      } });
+      const reveal = tileWipe(el, { ctx, at: 0, dur: Math.max(0.15, b(1) - 0.04), mode: "reveal", order: "rows" });
+      return [g.paint, sign, hero, reveal];
+    });
+
+    const picks = OG.ids;
+    const stops = [b(4), b(5), b(6), b(7), (b(7) + b(8)) / 2];
+    const bb = cut(root, barB, barC, (el) => {
+      const g = gate(el, ctx, 1300, -10, 0.01);
+      // 주소는 그대로 — 같은 팻말이 서 있다
+      const sign = questWindow(el, { ctx, x: 264, y: 84, w: 1392, h: 168, lines: [OG.url], at: -10, size: 60, font: "mono", tones: ["accent"] });
+      const menu = questWindow(el, { ctx, x: 96, y: 300, w: 1104, h: 540, at: barB, open: 0.1 });
+      const list = menuCursor(el, { ctx, items: picks, x: 144, y: 342, size: 48, gap: 96, stops, font: "mono" });
+      const gems = picks.map((id, i) => {
+        const vendor = id.startsWith("openai") ? "OpenAI" : id.startsWith("anthropic") ? "Anthropic" : id.startsWith("google") ? "Google" : id.startsWith("deepseek") ? "DeepSeek" : "Z.ai";
+        const from: [number, number] = [0, 0];
+        const to: [number, number] = [g.cx - 1140, g.cy - (348 + i * 96)];
+        return sprite(el, { ctx, art: "gem", x: 1140, y: 348 + i * 96, scale: 2, at: stops[i], until: stops[i] + 0.3, swap: { G: GEM[vendor] }, move: (t) => pixelMove(t, { ctx, from, to, at: stops[i], dur: 0.28, hop: 160 }) });
+      });
+      return [g.paint, sign, menu, list, ...gems];
+    });
+
+    const c = cut(root, barC, ctx.dur, (el) => {
+      const g = gate(el, ctx, 708, -10, 0.01);
+      const left = questWindow(el, { ctx, x: 96, y: 84, w: 540, h: 372, lines: ["OpenAI", "/chat/completions", "/responses", "/images/generations"], at: barC, cps: 90, size: 36, font: "mono", tones: ["accent", "ink", "ink", "ink"] });
+      const right = questWindow(el, { ctx, x: 1284, y: 84, w: 540, h: 372, lines: ["Anthropic", "/messages"], at: b(9), cps: 60, size: 36, font: "mono", tones: ["accent", "ink"] });
+      const steps: [number, number][] = [[barC, 0], [b(9), 2], [b(10), 4], [b(11), 6], [(b(11) + ctx.dur) / 2, 8]];
+      const gauge = heartGauge(el, { ctx, x: 663, y: 132, max: 8, steps, mode: "bar", tone: "coin", scale: 1.5 });
+      const label = text(el, ctx, "/v1", "left:960px;top:228px;transform:translateX(-50%);font-size:48px;", "inkSoft", "mono");
+      // 두 창에서 같은 관문으로 — 박마다 양쪽에서 코인 한 닢씩
+      const coins = [barC, b(9), b(10), b(11)].flatMap((at, k) =>
+        [[600, 400], [1284, 400]].map(([sx, sy]) =>
+          sprite(el, { ctx, art: "coin", x: sx, y: sy, scale: 2, at, until: at + 0.34, move: (t) => pixelMove(t, { ctx, from: [0, 0], to: [g.cx - 60 - sx, g.cy - sy], at, dur: 0.32, hop: 120 + k * 12 }) }),
+        ),
+      );
+      return [g.paint, left, right, gauge, (t: number) => (label.style.display = t >= barC ? "" : "none"), ...coins];
+    });
+
+    return (t: number) => {
+      field(t);
+      a(t);
+      bb(t);
+      c(t);
+    };
+  },
+};

package/themes/pixel-quest/sample/scenes/price.ts

@@ -0,0 +1,118 @@
+import { applyStyle, combine, type SceneCtx } from "@kasaframe/core";
+import { coinCounter, levelUp, pixelMove, questWindow, sprite, tileField, tileWipe } from "../../effects.ts";
+import { color } from "../../kit.ts";
+import { slots } from "../../slots.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, cut, cutsAt, GEM, GROUND, layer, showAt, text, typeIn } from "../lib/game.ts";
+
+// 드롭 = 레벨 업 — 102 가 쿵 앉고 회사 보석 아홉이 그리로 모인다, 주소 하나.
+// 둘째 마디: 하루 24칸 시계가 땅이 되고, 00–10시 밤 칸 위를 용사가 걷는다 — 그 창에서 -90%.
+// 셋째 마디: 상점 창 — deepseek 값이 코인 카운터로 정가에서 밤값까지 깎여 내려간다
+const HOURS = 24;
+const CW = 66;
+const X0 = (1920 - HOURS * CW) / 2;
+const BAR_Y = 600;
+
+const money = (v: number) => `$${v.toFixed(2)}`;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const field = tileField(layer(root), { ctx });
+    const beats = beatsIn(ctx);
+    const b = (i: number) => beats[i] ?? i * 0.353;
+    const [, bar2, bar3] = cutsAt(ctx);
+    const content = layer(root);
+
+    const one = cut(content, 0, bar2, (el) => {
+      const big = text(el, ctx, String(OG.models), "left:0;width:1920px;text-align:center;top:108px;font-size:384px;line-height:1;", "accent");
+      const land = slots.land!(big, { ctx, at: 0, seed: "102" });
+      const word = text(el, ctx, "모델", "left:0;width:1920px;text-align:center;top:504px;font-size:72px;", "ink", "sans");
+      const url = questWindow(el, { ctx, x: 360, y: 624, w: 1200, h: 144, lines: [OG.host], at: b(1), cps: 50, size: 60, font: "mono", tones: ["ink"] });
+      const gems = OG.providers.map(([name], i) => {
+        const a = (i / 9) * Math.PI * 2;
+        const sx = 960 + Math.cos(a) * 1000;
+        const sy = 360 + Math.sin(a) * 560;
+        return sprite(el, { ctx, art: "gem", x: sx, y: sy, scale: 2, at: b(2), until: b(2) + 0.32, swap: { G: GEM[name] }, move: (t) => pixelMove(t, { ctx, from: [0, 0], to: [900 - sx, 300 - sy], at: b(2) + i * 0.02, dur: 0.26 }) });
+      });
+      const hero = sprite(el, { ctx, art: "hero", x: 120, y: GROUND - 192, scale: 2, at: b(3), move: (t) => pixelMove(t, { ctx, from: [0, 0], to: [480, 0], at: b(3), dur: bar2 - b(3) }) });
+      return [(t: number) => applyStyle(big, land(t)), showAt(word, 0), url, ...gems, hero];
+    });
+
+    const clock = cut(content, bar2, bar3, (el) => {
+      // 시계 칸 — 밤(00–10)은 검정, 낮은 하늘. 칸은 왼쪽부터 한 틱에 두 칸씩 깔린다
+      const cells = Array.from({ length: HOURS }, (_, h) => {
+        const d = document.createElement("div");
+        d.style.cssText = `position:absolute;left:${X0 + h * CW}px;top:${BAR_Y}px;width:${CW - 6}px;height:96px;background:${color(ctx, h < OG.night.to ? "night" : "sky")};box-shadow:inset 0 0 0 6px ${color(ctx, "surface")};`;
+        el.append(d);
+        return d;
+      });
+      const labels = [0, 6, 10, 12, 18, 24].map((h) => text(el, ctx, String(h).padStart(2, "0"), `left:${X0 + h * CW}px;top:${BAR_Y + 108}px;transform:translateX(-50%);font-size:36px;`, h === OG.night.to || h === 0 ? "accent" : "inkSoft", "mono"));
+      const frame = document.createElement("div");
+      frame.style.cssText = `position:absolute;left:${X0 - 12}px;top:${BAR_Y - 12}px;width:${OG.night.to * CW + 18}px;height:120px;box-shadow:inset 0 0 0 12px ${color(ctx, "accent")};`;
+      el.append(frame);
+      const moon = sprite(el, { ctx, art: "moon", x: X0 + 12, y: 216, scale: 3, at: b(5) });
+      const sun = sprite(el, { ctx, art: "sun", x: X0 + 16 * CW, y: 216, scale: 3, at: b(5) });
+      const kst = text(el, ctx, "KST 00:00–10:00", `left:${X0}px;top:120px;font-size:48px;`, "ink", "mono");
+      const off = text(el, ctx, OG.deepseek.off, `left:${X0 + 228}px;top:234px;font-size:144px;line-height:1;`, "accent");
+      const offLand = slots.land!(off, { ctx, at: b(6), seed: "off" });
+      // 용사가 밤 칸 위를 걷는다 — 시계가 발판
+      const hero = sprite(el, { ctx, art: "hero", x: X0, y: BAR_Y - 192, scale: 2, at: b(5), move: (t) => pixelMove(t, { ctx, from: [0, 0], to: [OG.night.to * CW - 192, 0], at: b(5), dur: bar3 - b(5) }) });
+      const step = 0.3 / HOURS;
+      return [
+        (t: number) => cells.forEach((d, h) => (d.style.display = t >= bar2 + Math.floor(h / 2) * 2 * step ? "" : "none")),
+        ...labels.map((l) => showAt(l, bar2 + 0.3)),
+        showAt(frame, b(5)),
+        moon,
+        sun,
+        showAt(kst, b(5)),
+        (t: number) => {
+          off.style.display = t >= b(6) ? "" : "none";
+          applyStyle(off, offLand(t));
+        },
+        hero,
+      ];
+    });
+
+    const shop = cut(content, bar3, ctx.dur, (el) => {
+      const win = questWindow(el, { ctx, x: 156, y: 84, w: 1608, h: 606, lines: [OG.deepseek.id], at: bar3, cps: 120, size: 60, font: "mono", tones: ["accent"] });
+      const rows = [
+        { label: "입력", from: 0.3, to: 0.03, at: b(9), y: 216 },
+        { label: "출력", from: 1.2, to: 0.12, at: b(10), y: 360 },
+      ].flatMap((r) => {
+        const l = text(el, ctx, r.label, `left:252px;top:${r.y + 12}px;font-size:72px;`, "ink", "sans");
+        const was = text(el, ctx, money(r.from), `left:540px;top:${r.y + 12}px;font-size:72px;text-decoration:line-through;text-decoration-thickness:6px;`, "dim", "mono");
+        const arrow = text(el, ctx, "→", `left:900px;top:${r.y + 12}px;font-size:72px;`, "ink", "sans");
+        const now = coinCounter(el, { ctx, x: 1020, y: r.y, size: 96, from: r.from, to: r.to, at: r.at, dur: 0.3, icon: "coin", tone: "accent", times: false, format: money });
+        return [showAt(l, r.at), showAt(was, r.at), showAt(arrow, r.at), now];
+      });
+      const stamp = text(el, ctx, OG.deepseek.off, "left:1368px;top:504px;font-size:128px;line-height:1;", "heart");
+      const stampLand = slots.land!(stamp, { ctx, at: b(11), seed: "stamp" });
+      const glm = typeIn(text(el, ctx, "", "left:252px;top:540px;font-size:48px;", "inkSoft", "mono"), `${OG.glm.id} ${OG.glm.off}`, b(11), 60);
+      // 요청(용사)이 상점으로 걸어 들어온다 — 창 아래 땅으로
+      const hero = sprite(el, { ctx, art: "hero", x: -192, y: GROUND - 192, scale: 2, move: (t) => pixelMove(t, { ctx, from: [0, 0], to: [960, 0], at: bar3, dur: ctx.dur - bar3 }) });
+      return [
+        win,
+        ...rows,
+        (t: number) => {
+          stamp.style.display = t >= b(11) ? "" : "none";
+          applyStyle(stamp, stampLand(t));
+        },
+        glm,
+        hero,
+      ];
+    });
+
+    const burst = levelUp(layer(root), { ctx, drop: 0, origin: [960, 330] });
+    const out = tileWipe(layer(root), { ctx, at: ctx.dur - 0.25, dur: 0.25 - 1 / 60, order: "diagonal" });
+
+    return (t: number) => {
+      field(t);
+      const s = burst(t);
+      applyStyle(content, combine(s.shake, t < 0.8 ? s.punch : {}));
+      one(t);
+      clock(t);
+      shop(t);
+      out(t);
+    };
+  },
+};