kasaframe 0.1.1 → 0.1.4

package/themes/clay-toy/sample/index.html

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

package/themes/clay-toy/sample/kf.json

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

@@ -0,0 +1,20 @@
+import type { SceneCtx } from "@kasaframe/core";
+import type { CamKey } from "../../effects.ts";
+
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+/** 컷마다 세트를 이만큼 떨어뜨린다 — 원근 화면(가로 16 남짓)·안개 밖이라 다른 세트가 안 비친다 */
+export const SET = 40;
+
+type V3 = [number, number, number];
+/** 세트 X 를 비스듬히 내려다보는 기본 자리 */
+export const view = (t: number, X: number, o: { y?: number; z?: number; look?: number; lookZ?: number } = {}): CamKey => ({ t, pos: [X, o.y ?? 6.4, o.z ?? 13.8], look: [X, o.look ?? 1.2, o.lookZ ?? 0] });
+
+/** from 부터 to 앞까지 every 초마다 — 요청이 끊이지 않고 들어오는 흐름 */
+export const stream = (from: number, to: number, every: number, phase = 0): number[] => {
+  const out: number[] = [];
+  for (let t = from + phase; t < to - 1e-6; t += every) out.push(t);
+  return out;
+};
+
+export const add = (a: V3, b: V3): V3 => [a[0] + b[0], a[1] + b[1], a[2] + b[2]];

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

@@ -0,0 +1,81 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { clayBall, clayBlob, clayDigits, clayFunnel, claySnake, clayStage, clayTag } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { SET, beatsIn, stream, view } from "../lib/clay.ts";
+
+type V3 = [number, number, number];
+
+// 지연 = 늘어나는 시간. 한 주소에서 점토 띠 셋이 같은 순간 짜여 나와, 실측 첫 토큰 ms 만큼의 실제 시간 동안 늘어나 모델에 닿는다.
+// 다음 컷: 18번 호출 = 공 18 개가 하나씩 튀어 와 두 줄로 앉고, 합 $0.0004. 끝: OG 로고를 점토 띠로 빚고 요청 공이 그 사이를 지나간다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const [X0, X1, X2] = [0, SET, SET * 2];
+    const stage = clayStage(root, {
+      ctx,
+      shots: [
+        { from: -1, to: b[4], keys: [view(0, X0, { y: 7.4, z: 11.4, look: 0.4, lookZ: 0.4 })] },
+        { from: b[4], to: b[6], keys: [view(b[4], X1, { y: 6.4, z: 11.6, look: 0.8, lookZ: 0.6 })] },
+        { from: b[6], to: 1e9, keys: [view(b[6], X2, { y: 4.8, z: 12.4, look: 2.1, lookZ: 0.6 })] },
+      ],
+    });
+
+    // 컷 하나 — 늘어나는 띠 셋
+    const go = 0.42;
+    const src: V3 = [X0 - 5.2, 0, 0];
+    stage.add(clayFunnel(stage, { ctx, pos: src, r: 0.95, h: 1.4, at: 0 }));
+    stage.add(clayTag(stage, { ctx, text: "첫 토큰", pos: [X0 - 4.6, 0, 2.4], height: 0.8, at: 0.04 }));
+    OG.ttft.forEach(([name, label, ms], i) => {
+      const z = -2.6 + i * 2.7;
+      const end: V3 = [X0 + 1.9, 0.3, z];
+      const sec = ms / 1000;
+      stage.add(claySnake(stage, { ctx, points: [[src[0] + 0.7, 0.3, 0.2], [X0 - 2.8, 0.3, z * 0.7], [X0 - 0.4, 0.3, z], end], r: 0.2, tone: "request", at: go, dur: sec, linear: true, hits: [go + sec] }));
+      stage.add(clayBlob(stage, { ctx, pos: [X0 + 2.8, 0, z], r: 0.75, at: 0.1 + i * 0.08, seed: name, hits: [go + sec + 0.02] }));
+      stage.add(clayTag(stage, { ctx, text: name, pos: [X0 + 5.0, 0, z + 0.3], height: 0.36, font: "mono", at: 0.18 + i * 0.08 }));
+      // 늘어나는 동안 ms 를 센다 — 닿는 순간 실측값에 선다
+      stage.add(clayTag(stage, { ctx, text: (t) => `${Math.min(ms, Math.max(0, (t - go) * 1000)).toFixed(1)}ms`, pos: [X0 - 0.9, 0, z + 0.85], height: 0.46, font: "mono", at: go, width: 2.1, hits: [go + sec] }));
+    });
+
+    // 컷 둘 — 18번 호출
+    const N = 18;
+    const calls = Array.from({ length: N }, (_, k) => b[4] + 0.01 + k * 0.024);
+    const seat = (k: number): V3 => [X1 - 5.0 + (k % 9) * 0.56, 0, -0.4 + Math.floor(k / 9) * 0.75];
+    const landed = (t: number) => calls.filter((c) => c + 0.28 <= t).length;
+    stage.add(clayBall(stage, { ctx, from: [X1 - 6.8, 0, 3.2], to: (k) => seat(k), times: calls, dur: 0.28, hop: 1.1, r: 0.22, rest: true }));
+    stage.add(clayTag(stage, { ctx, text: (t) => `호출 ${landed(t)}`, pos: [X1 - 2.7, 0, -2.6], height: 0.82, at: b[4], width: 3.2 }));
+    stage.add(clayTag(stage, { ctx, text: "합", pos: [X1 + 0.2, 0, 2.6], height: 0.6, at: b[5] }));
+    stage.add(clayDigits(stage, { ctx, text: "$0.0004", pos: [X1 + 3.0, 0, 0.6], size: 1.25, align: "center", tone: "request", at: b[5], dur: 0.32 }));
+
+    // 끝 — 점토 띠로 빚은 OG 로고(들어오는 칸 · 막대와 화살 · 나가는 칸), 요청 공이 왼쪽에서 들어와 오른쪽으로 나간다
+    const W = 6.6;
+    const s = W / 1140;
+    const P = (x: number, y: number): V3 => [X2 - W / 2 + x * s, 0.9 + (650 - y) * s, -0.6];
+    const round = (x0: number, y0: number, x1: number, y1: number, rr: number): V3[] => {
+      const out: V3[] = [];
+      const corner = (cx: number, cy: number, a0: number) => {
+        for (let k = 0; k <= 3; k++) {
+          const a = a0 + (k / 3) * (Math.PI / 2);
+          out.push(P(cx + Math.cos(a) * rr, cy - Math.sin(a) * rr));
+        }
+      };
+      corner(x1 - rr, y0 + rr, 0);
+      corner(x0 + rr, y0 + rr, Math.PI / 2);
+      corner(x0 + rr, y1 - rr, Math.PI);
+      corner(x1 - rr, y1 - rr, (Math.PI * 3) / 2);
+      return out;
+    };
+    const T = b[6];
+    const nodeOut: V3[] = [P(684, 213), P(684, 125), P(710, 62), P(773, 36), P(1015, 36), P(1078, 62), P(1104, 125), P(1104, 525), P(1078, 588), P(1015, 614), P(773, 614), P(710, 588), P(684, 525), P(684, 436)];
+    stage.add(claySnake(stage, { ctx, points: round(36, 36, 456, 614, 89), closed: true, r: 0.21, at: T, dur: 0.34 }));
+    stage.add(claySnake(stage, { ctx, points: nodeOut, r: 0.21, at: T + 0.16, dur: 0.34 }));
+    stage.add(claySnake(stage, { ctx, points: [P(80, 325), P(820, 325)], r: 0.3, tone: "request", at: T + 0.3, dur: 0.24 }));
+    stage.add(claySnake(stage, { ctx, points: [P(840, 222), P(962, 325), P(840, 428)], r: 0.22, tone: "request", at: T + 0.46, dur: 0.16 }));
+    stage.add(clayTag(stage, { ctx, text: OG.site, pos: [X2 - 1.6, 0, 3.1], height: 0.9, at: b[7] }));
+    stage.add(clayTag(stage, { ctx, text: OG.host, pos: [X2 + 3.0, 0, 3.2], height: 0.42, font: "mono", at: b[8] }));
+    const flow = stream(T + 0.5, ctx.dur + 0.3, 0.2);
+    stage.add(clayBall(stage, { ctx, from: [X2 - 7.5, 0, 1.2], to: P(60, 330), times: flow, dur: 0.4, hop: 1.4 }));
+    stage.add(clayBall(stage, { ctx, from: P(1110, 330), to: [X2 + 7.5, 0, 1.2], times: flow.map((f) => f + 0.42), dur: 0.4, hop: 1.0 }));
+
+    return (t: number) => stage(t);
+  },
+};

package/themes/clay-toy/sample/scenes/gather.ts

@@ -0,0 +1,53 @@
+import { clamp, ease, type SceneCtx } from "@kasaframe/core";
+import { clayBall, clayBar, clayBlob, clayStage, clayTag } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { SET, beatsIn, stream, view } from "../lib/clay.ts";
+
+// 회사 아홉 = 점토 덩어리 아홉. 탁자 여기저기 털썩 떨어져 앉고(모델이 많은 회사일수록 크다), 저마다 제 쪽에서 오는 요청 공만 받는다.
+// 다음 컷: 회사별 모델 수 = 위로 늘어나는 점토 기둥. 박마다 몇 개씩 쭉 늘어났다 출렁이며 서고, 꼭대기로 요청이 튀어 든다
+const SPOTS: [number, number][] = [[-5.2, -1.8], [0, -2.4], [5.2, -1.6], [-3.4, 0.6], [1.4, 0.2], [5.6, 1.4], [-4.4, 3.0], [-0.4, 3.3], [3.4, 2.9]];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const X1 = SET;
+    const stage = clayStage(root, {
+      ctx,
+      shots: [
+        { from: -1, to: b[4], keys: [view(0, 0, { y: 7.6, z: 11.6, look: 0.5, lookZ: 0.6 })] },
+        { from: b[4], to: 1e9, keys: [view(b[4], X1, { y: 5.2, z: 12.8, look: 1.6, lookZ: 0.4 })] },
+      ],
+    });
+
+    OG.providers.forEach(([name, n], i) => {
+      const [x, z] = SPOTS[i];
+      const at = [0, b[0], b[1]][Math.floor(i / 3)] + (i % 3) * 0.06;
+      const r = 0.5 + 0.1 * Math.sqrt(n);
+      // 저마다 다른 쪽에서 — 따로따로 부르는 요청
+      const a = (i / 9) * Math.PI * 2 + 0.6;
+      const from: [number, number, number] = [x + Math.cos(a) * 2.6, 0, z + Math.abs(Math.sin(a)) * 1.8 + 0.6];
+      const times = stream(at + 0.45, b[4], 0.3, ((i * 5) % 9) * 0.033);
+      const dur = 0.4;
+      stage.add(clayBlob(stage, { ctx, pos: [x, 0, z], r, at, hits: times.map((s) => s + dur), seed: name }));
+      stage.add(clayTag(stage, { ctx, text: name, pos: [x, 0, z + r + 0.35], height: 0.5, at: at + 0.08, until: b[4] }));
+      stage.add(clayBall(stage, { ctx, from, to: [x, r * 1.25, z], times, dur, hop: 1.2 }));
+    });
+
+    // 기둥 — 모델 하나에 0.085 만큼
+    const K = 0.085;
+    const groups = [[0], [1, 2], [3, 4, 5], [6, 7, 8]];
+    OG.providers.forEach(([name, n], i) => {
+      const x = X1 - 6.4 + i * 1.6;
+      const start = b[4 + groups.findIndex((g) => g.includes(i))] + (i % 2) * 0.04;
+      const top = n * K;
+      const height = (t: number) => top * ease.outBack(clamp((t - start) / 0.36));
+      const times = stream(start + 0.42, ctx.dur + 0.2, 0.42, i * 0.05);
+      const dur = 0.36;
+      stage.add(clayBar(stage, { ctx, pos: [x, 0, 0], r: 0.48, height, at: start, hits: times.map((s) => s + dur), seed: `bar${i}` }));
+      stage.add(clayTag(stage, { ctx, text: `${name}\n${n}`, pos: [x, 0, 1.25], height: 0.66, at: start, px: 110 }));
+      stage.add(clayBall(stage, { ctx, from: [x - 1.1, 0, 3.2], to: [x, top, 0], times, dur, hop: Math.max(1, top * 0.6) }));
+    });
+
+    return (t: number) => stage(t);
+  },
+};

package/themes/clay-toy/sample/scenes/models.ts

@@ -0,0 +1,77 @@
+import { rand, type SceneCtx } from "@kasaframe/core";
+import { clayBall, clayBlob, clayFunnel, clayStage, clayTag } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { SET, beatsIn, stream, view } from "../lib/clay.ts";
+
+type V3 = [number, number, number];
+
+// 한 주소 = 점토 깔때기. 박마다 요청 공이 깔때기 입으로 들어가 한 구멍으로 나와 다른 모델 덩어리로 튄다 — 바뀌는 건 모델 ID 뿐.
+// 다음 컷: 두 형식 — OpenAI 쪽은 둥근 공, Anthropic 쪽은 네모난 덩이로 들어와도 같은 깔때기를 지나면 같은 공으로 나온다.
+// 셋째 컷: 드롭 앞 — 모델 102 개가 점점 빠르게 떨어져 더미로 쌓이고, 카메라가 더미로 다가간다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const [X0, X1, X2] = [0, SET, SET * 2];
+    const stage = clayStage(root, {
+      ctx,
+      shots: [
+        { from: -1, to: b[4], keys: [view(0, X0, { y: 6.8, z: 12, look: 0.9, lookZ: 0.2 })] },
+        { from: b[4], to: b[8], keys: [view(b[4], X1, { y: 6.8, z: 12, look: 0.9, lookZ: 0.2 })] },
+        // 드롭으로 다가간다 — 쌓이는 더미를 향해
+        { from: b[8], to: 1e9, keys: [view(b[8], X2, { y: 6.4, z: 12.8, look: 1.0, lookZ: 0.4 }), { ...view(ctx.dur, X2, { y: 5.8, z: 10.8, look: 1.0, lookZ: 0.6 }), ease: "inCubic" }] },
+      ],
+    });
+    const LEG1 = 0.38;
+    const LEG2 = 0.42;
+
+    // 컷 하나 — 깔때기와 모델 셋
+    const funnel0: V3 = [X0 - 4.2, 0, -0.6];
+    const blobs0: V3[] = [[X0 + 0.4, 0, -1.7], [X0 + 3.2, 0, -1.7], [X0 + 6.0, 0, -1.7]];
+    const calls0 = [1, 2, 3].flatMap((k, n) => [{ at: b[k], m: n }, { at: b[k] + 0.17, m: n }]);
+    stage.add(clayFunnel(stage, { ctx, pos: funnel0, at: 0, hits: calls0.map((c) => c.at + LEG1) }));
+    stage.add(clayTag(stage, { ctx, text: OG.host, pos: [X0 - 4.2, 0, 1.3], height: 0.5, font: "mono", at: 0.06 }));
+    blobs0.forEach((p, i) => {
+      const id = OG.ids[i].split("/")[1];
+      stage.add(clayBlob(stage, { ctx, pos: p, r: 0.85, at: 0.05 + i * 0.07, seed: id, hits: calls0.filter((c) => c.m === i).map((c) => c.at + LEG1 + 0.04 + LEG2) }));
+      stage.add(clayTag(stage, { ctx, text: id, pos: [p[0], 0, p[2] + 1.05], height: 0.36, font: "mono", at: 0.12 + i * 0.07 }));
+    });
+    // 지금 부르는 모델 ID — 박마다 바뀐다
+    stage.add(clayTag(stage, { ctx, text: (t) => OG.ids[Math.max(0, [b[1], b[2], b[3]].filter((x) => x <= t).length - 1)], pos: [X0 + 1.6, 0, 2.4], height: 0.62, font: "mono", at: b[1], until: b[4], hits: [b[2], b[3]], width: 6.2 }));
+    stage.add(clayBall(stage, { ctx, from: (i) => [X0 - 8, 0, 1.2 - (i % 2) * 2.6], to: [funnel0[0], 2.05, funnel0[2]], times: calls0.map((c) => c.at), dur: LEG1, hop: 1.4 }));
+    stage.add(clayBall(stage, { ctx, from: [funnel0[0] + 0.5, 0, funnel0[2] + 0.5], to: (i) => [blobs0[calls0[i].m][0], 1.05, blobs0[calls0[i].m][2]], times: calls0.map((c) => c.at + LEG1 + 0.04), dur: LEG2, hop: 1.3 }));
+
+    // 컷 둘 — 두 형식, 같은 깔때기
+    const funnel1: V3 = [X1 - 1.2, 0, 0];
+    const blobs1: V3[] = [[X1 + 3.0, 0, -1.8], [X1 + 5.0, 0, 0.5], [X1 + 3.0, 0, 2.5]];
+    const src = { openai: [X1 - 4.6, 0, -1.6] as V3, anthropic: [X1 - 4.6, 0, 1.7] as V3 };
+    const calls1 = stream(b[4] + 0.22, b[8], 0.177).map((at, k) => ({ at, cube: k % 2 === 1, m: k % 3 }));
+    stage.add(clayTag(stage, { ctx, text: "OpenAI\n/chat/completions\n/responses", pos: [src.openai[0] - 0.1, 0, src.openai[2] + 0.9], height: 1.0, font: "mono", at: b[4], px: 96 }));
+    stage.add(clayTag(stage, { ctx, text: "Anthropic\n/messages", pos: [src.anthropic[0] - 0.1, 0, src.anthropic[2] + 0.9], height: 0.72, font: "mono", at: b[4] + 0.05, px: 96 }));
+    stage.add(clayFunnel(stage, { ctx, pos: funnel1, at: b[4] + 0.04, hits: calls1.map((c) => c.at + LEG1) }));
+    stage.add(clayTag(stage, { ctx, text: "/v1", pos: [funnel1[0], 0, 1.9], height: 0.6, font: "mono", at: b[4] + 0.1 }));
+    blobs1.forEach((p, i) => {
+      const id = OG.ids[i].split("/")[1];
+      stage.add(clayBlob(stage, { ctx, pos: p, r: 0.8, at: b[4] + 0.08 + i * 0.06, seed: `${id}:1`, hits: calls1.filter((c) => c.m === i).map((c) => c.at + LEG1 + 0.04 + LEG2) }));
+      stage.add(clayTag(stage, { ctx, text: id, pos: [p[0], 0, p[2] + 1.1], height: 0.4, font: "mono", at: b[4] + 0.14 + i * 0.06 }));
+    });
+    const ins = (cube: boolean) => calls1.filter((c) => c.cube === cube);
+    for (const cube of [false, true])
+      stage.add(clayBall(stage, { ctx, from: cube ? src.anthropic : src.openai, to: [funnel1[0], 2.05, 0], times: ins(cube).map((c) => c.at), dur: LEG1, hop: 1.4, cube }));
+    stage.add(clayBall(stage, { ctx, from: [funnel1[0] + 0.5, 0, 0.5], to: (i) => [blobs1[calls1[i].m][0], 1.0, blobs1[calls1[i].m][2]], times: calls1.map((c) => c.at + LEG1 + 0.04), dur: LEG2, hop: 1.3 }));
+
+    // 컷 셋 — 모델 102 개가 더미로. 바깥 아래부터 쌓여 가운데가 솟는다
+    const N = OG.models;
+    const spots = Array.from({ length: N }, (_, k): V3 => {
+      const a = k * 2.39996;
+      const rr = 2.5 * Math.sqrt((k + 0.5) / N);
+      return [X2 + Math.cos(a) * rr * 1.1, 0.3 + 0.9 * (1 - (rr / 2.7) ** 2) + rand("heap", k) * 0.12, Math.sin(a) * rr * 0.7 - 0.6];
+    }).sort((p, q) => p[1] - q[1]);
+    const end = ctx.dur - 0.12;
+    const drops = spots.map((_, k) => b[8] + 0.04 + (end - 0.32 - b[8]) * Math.sqrt(k / N));
+    const placed = (t: number) => drops.filter((d) => d + 0.3 <= t).length;
+    stage.add(clayBall(stage, { ctx, from: (k) => [spots[k][0], 6, spots[k][2]], to: (k) => [spots[k][0], spots[k][1] - 0.3, spots[k][2]], times: drops, dur: 0.3, hop: 0, r: 0.3, tone: "clay", rest: true }));
+    stage.add(clayTag(stage, { ctx, text: (t) => `모델 ${placed(t)}`, pos: [X2, 0, 2.4], height: 0.9, at: b[8], width: 3.8 }));
+
+    return (t: number) => stage(t);
+  },
+};

package/themes/clay-toy/sample/scenes/price.ts

@@ -0,0 +1,91 @@
+import { clamp, ease, type SceneCtx } from "@kasaframe/core";
+import { clayBall, clayBar, clayDigits, clayPie, claySplat, clayStage, clayTag } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { SET, beatsIn, stream, view } from "../lib/clay.ts";
+
+type V3 = [number, number, number];
+
+// 드롭 = 쿵: 점토 「102」 가 털썩 내려앉아 납작하게 눌렸다 서고, 점토 물결과 알갱이가 튄다. 요청 공이 양쪽에서 쉬지 않고 붙는다.
+// 다음 컷: 하루 = 24 조각 점토 파이 — 00–10시 조각이 꾹 눌려 낮아진다(값이 내린 칸), 공 하나가 시계처럼 테를 돈다.
+// 셋째 컷: 값 = 기둥 높이 — 입력·출력 기둥이 박에 꾹 눌려 10분의 1 로 낮아진다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const [X0, X1, X2] = [0, SET, SET * 2];
+    const stage = clayStage(root, {
+      ctx,
+      shots: [
+        { from: -1, to: b[4], keys: [view(0, X0, { y: 5.4, z: 12.4, look: 1.8, lookZ: 0.4 })] },
+        { from: b[4], to: b[8], keys: [view(b[4], X1, { y: 7.4, z: 11.6, look: 0.6, lookZ: 0.4 })] },
+        { from: b[8], to: 1e9, keys: [view(b[8], X2, { y: 5.4, z: 12.6, look: 1.6, lookZ: 0.4 })] },
+      ],
+    });
+
+    // 컷 하나 — 쿵
+    const feed = stream(b[1], b[4], 0.16);
+    const lands = feed.map((s) => s + 0.38);
+    stage.add(clayDigits(stage, { ctx, text: String(OG.models), pos: [X0, 0, 0], size: 3.4, align: "center", at: 0, dur: 0.22, hits: [0.22, ...lands.filter((_, i) => i % 3 === 0)] }));
+    stage.add(claySplat(stage, { ctx, pos: [X0, 0, 0.8], drop: 0 }));
+    stage.add(clayTag(stage, { ctx, text: "한 주소", pos: [X0 - 4.2, 0, 2.7], height: 0.82, at: b[1] }));
+    stage.add(clayTag(stage, { ctx, text: OG.host, pos: [X0 + 3.6, 0, 2.8], height: 0.46, font: "mono", at: b[2] }));
+    stage.add(clayBall(stage, { ctx, from: (i) => [X0 + (i % 2 ? 7.5 : -7.5), 0, 1.8], to: (i) => [X0 + (i % 2 ? 1.6 : -1.6), 2.2, 0], times: feed, dur: 0.38, hop: 1.5 }));
+
+    // 컷 둘 — 하루 파이
+    const P: V3 = [X1 - 2.4, 0, 0];
+    const R = 2.6;
+    const H = 0.75;
+    const night = (h: number) => h >= OG.night.from && h < OG.night.to;
+    const pressAt = (h: number) => (night(h) ? b[5] + h * 0.035 : null);
+    stage.add(
+      clayPie(stage, {
+        ctx,
+        pos: P,
+        r: R,
+        h: H,
+        tone: (h) => (night(h) ? "request" : "clay"),
+        at: b[4],
+        pressAt,
+        press: (h, t) => {
+          const a = pressAt(h);
+          return a === null ? 0 : ease.outCubic(clamp((t - a) / 0.14));
+        },
+      }),
+    );
+    // 공 하나가 시계처럼 테를 돈다 — 한 시간 칸씩 톡톡
+    const rim = (h: number): V3 => {
+      const a = Math.PI - (h + 0.5) * ((Math.PI * 2) / 24);
+      const top = night(h % 24) ? H * 0.32 : H;
+      return [P[0] + Math.sin(a) * R * 0.78, top, P[2] + Math.cos(a) * R * 0.78];
+    };
+    const hand = stream(b[4] + 0.4, b[8], 0.055);
+    stage.add(clayBall(stage, { ctx, from: (i) => rim(i), to: (i) => rim(i + 1), times: hand, dur: 0.055, hop: 0.35, r: 0.2 }));
+    for (const [h, dx, dz] of [[0, 0, -R - 0.7], [6, R + 0.75, 0.25], [12, 0, R + 0.35], [18, -R - 0.75, 0.25]] as const)
+      stage.add(clayTag(stage, { ctx, text: String(h).padStart(2, "0"), pos: [P[0] + dx, 0, P[2] + dz], height: 0.42, font: "mono", at: b[4] + 0.08 }));
+    stage.add(clayDigits(stage, { ctx, text: "-90%", pos: [X1 + 1.2, 0, -0.8], size: 2.2, tone: "request", at: b[6], dur: 0.3, hits: [b[6] + 0.3] }));
+    stage.add(clayTag(stage, { ctx, text: "00:00-10:00 KST", pos: [X1 + 3.9, 0, 2.2], height: 0.5, font: "mono", at: b[7] }));
+    stage.add(clayTag(stage, { ctx, text: `${OG.glm.id} ${OG.glm.off}`, pos: [X1 + 3.9, 0, 3.2], height: 0.36, font: "mono", ink: "dim", at: b[7] + 0.16 }));
+
+    // 컷 셋 — 값 = 기둥 높이(1 달러에 3)
+    const ds = OG.deepseek;
+    const num = (s: string) => Number.parseFloat(s.replace("$", ""));
+    const K = 3;
+    const rows = [
+      { x: X2 - 3.4, name: "입력", vals: ds.input, at: b[9] },
+      { x: X2 + 0.2, name: "출력", vals: ds.output, at: b[10] },
+    ].map((r) => {
+      const [hi, lo] = [num(r.vals[0]), num(r.vals[1])];
+      const height = (t: number) => (t < b[8] ? 0 : K * (t < r.at ? hi * ease.outBack(clamp((t - b[8]) / 0.36)) : hi + (lo - hi) * ease.outCubic(clamp((t - r.at) / 0.16))));
+      return { ...r, height };
+    });
+    for (const [i, r] of rows.entries()) {
+      const feed2 = stream(b[8] + 0.4 + i * 0.1, ctx.dur, 0.24);
+      stage.add(clayBar(stage, { ctx, pos: [r.x, 0, -0.8], r: 0.9, height: r.height, at: b[8], hits: [r.at, ...feed2.map((s) => s + 0.34)], seed: r.name }));
+      stage.add(clayTag(stage, { ctx, text: (t) => `${r.name}\n${t < r.at ? r.vals[0] : r.vals[1]}`, pos: [r.x, 0, 0.9], height: 0.95, at: b[8] + 0.05, width: 1.9, hits: [r.at] }));
+      stage.add(clayBall(stage, { ctx, from: [r.x - 1.6, 0, 3.4], to: (k) => [r.x, r.height(feed2[k] + 0.34), -0.8], times: feed2, dur: 0.34, hop: 1.2 }));
+    }
+    stage.add(clayTag(stage, { ctx, text: ds.id, pos: [X2 - 0.4, 0, 2.6], height: 0.52, font: "mono", at: b[8] }));
+    stage.add(clayDigits(stage, { ctx, text: "-90%", pos: [X2 + 2.4, 0, -0.6], size: 1.7, tone: "request", at: b[11], dur: 0.26 }));
+
+    return (t: number) => stage(t);
+  },
+};

package/themes/clay-toy/sample/style.json

@@ -0,0 +1,101 @@
+{
+  "name": "clay-toy",
+  "label": "점토 장난감 — 눌리고 늘어나며 상태가 바뀐다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#BCDCEA",
+    "surface": "#F6EFE4",
+    "raised": "#EDE3D3",
+    "line": "#9CC4D6",
+    "ink": "#232634",
+    "inkSoft": "#363B4E",
+    "dim": "#4B566E",
+    "accent": "#E4533C",
+    "accentSoft": "#F4A592",
+    "accentText": "#B8341F",
+    "onAccent": "#FFF6EC",
+    "success": "#3C9A68",
+    "danger": "#E4533C",
+    "warning": "#E6A91E",
+    "clay": "#F2BE2E",
+    "request": "#E4533C",
+    "plaque": "#F6EFE4",
+    "mat": "#A6CFE1",
+    "rim": "#FFF7EA"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "Jua, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Jua",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/jua/Jua-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "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": 220,
+    "title": 110,
+    "body": 42,
+    "caption": 30,
+    "weightDisplay": 400,
+    "weightBody": 600,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 14,
+    "md": 26,
+    "lg": 40,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "0 10px 0 rgba(35, 38, 52, 0.18)",
+    "lift": "0 16px 0 rgba(35, 38, 52, 0.16)"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "once-per-phrase",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "pop",
+    "ease": "outBack",
+    "durations": {
+      "fast": 0.16,
+      "base": 0.3,
+      "slow": 0.55
+    }
+  },
+  "theme": {
+    "inks": [
+      "#BCDCEA 하늘색 점토판 — 작업 매트와 둥근 벽 한 면",
+      "#F2BE2E 노랑 점토 — 모델·덩어리·값",
+      "#E4533C 빨강 점토 — 요청·지금 움직이는 것, 크림 #F6EFE4 판 위 짙은 글"
+    ],
+    "texture": "무광 점토 — 지문·손자국 결(노멀), 꼭짓점이 조금씩 울퉁불퉁, 가장자리에 옅은 빛. 반짝임 없음",
+    "movement": "눌리고 늘어나고 되돌아온다 — 닿으면 납작, 튀어 오를 땐 길게, 앉으면 한 번 출렁이고 선다. 공(요청)은 포물선으로 튀어 가 덩어리(모델)에 꾹 붙고, 값이 내리면 덩어리가 눌려 낮아진다"
+  },
+  "notes": [
+    "점토 두 색만 — 노랑은 모델·값, 빨강은 요청. 크림은 이름표 판.",
+    "얼굴·눈·떠다니는 소품 금지 — 덩어리는 덩어리로, 움직임은 내용에서.",
+    "카메라는 작은 탁상 세트를 비스듬히 내려다본다 — 이유가 있을 때만(다가가기·드롭에 한 번 쿵) 움직인다."
+  ]
+}