kasaframe 0.1.1 → 0.1.4

package/themes/origami-fold/sample/index.html

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

package/themes/origami-fold/sample/kf.json

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

@@ -0,0 +1,53 @@
+import type { SceneCtx } from "@kasaframe/core";
+
+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 = 120;
+
+/** 색종이 다섯 — style.json 의 이름. 회사·모델마다 돌려 쓴다(강조 한 장은 accent) */
+export const TONES = ["indigo", "mustard", "sakura", "kraft", "paper"];
+
+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, 1140×650)를 종이에 찍는다 — 왼 칸 테·막대, 왼쪽이 트인 오른 칸, 화살표. (x, y) 왼쪽 위, w 너비 */
+export function drawLogo(g: CanvasRenderingContext2D, x: number, y: number, w: number, ink: string): void {
+  const s = w / 1140;
+  g.save();
+  g.translate(x, y);
+  g.scale(s, s);
+  g.strokeStyle = g.fillStyle = ink;
+  g.lineWidth = 72;
+  g.beginPath();
+  g.roundRect(36, 36, 420, 578, 89);
+  g.stroke();
+  g.fillRect(72, 272, 277, 106);
+  g.beginPath();
+  g.moveTo(684, 213);
+  g.lineTo(684, 125);
+  g.arcTo(684, 36, 773, 36, 89);
+  g.lineTo(1015, 36);
+  g.arcTo(1104, 36, 1104, 125, 89);
+  g.lineTo(1104, 525);
+  g.arcTo(1104, 614, 1015, 614, 89);
+  g.lineTo(773, 614);
+  g.arcTo(684, 614, 684, 525, 89);
+  g.lineTo(684, 436);
+  g.stroke();
+  g.fillRect(420, 272, 394, 106);
+  g.lineWidth = 38;
+  g.lineJoin = "round";
+  g.beginPath();
+  g.moveTo(833, 220);
+  g.lineTo(970, 325);
+  g.lineTo(833, 430);
+  g.closePath();
+  g.fill();
+  g.stroke();
+  g.restore();
+}

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

@@ -0,0 +1,51 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { foldCard, paperPlane, paperStage, popUp } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, drawLogo, SET, TONES } from "../lib/fold.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1, c2] = cuts(ctx, 3);
+    const stage = paperStage(root, {
+      ctx,
+      shots: [
+        // 첫 토큰 실측 셋 — 종이비행기 셋이 함께 떠나 빠른 순서로 결승선에 앉는다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [0.8, 9.8, 12.2], look: [0.9, 0, 0] }, { t: b[2] ?? 0.73, pos: [1, 9.2, 11.2], look: [1, 0, 0.2], ease: "outCubic" }, { t: c0[1], pos: [1, 9.1, 10.9], look: [1, 0, 0.2], ease: "linear" }] },
+        // 끝 카드 — 펼쳐지는 OG 카드로 다가가 주소가 서는 박에 선다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET, 7.6, 9.6], look: [SET, 0, 0.2] }, { t: b[6] ?? c1[0] + 0.7, pos: [SET, 6.4, 7.9], look: [SET, 0, 0.4], ease: "outCubic" }, { t: c1[1], pos: [SET, 6.3, 7.6], look: [SET, 0, 0.4], ease: "linear" }] },
+        // 끝 반 마디 — 카드 앞으로 다가가고, 비행기가 앉는 동안 끝까지 천천히 더 다가간다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [2 * SET - 0.6, 6.6, 8.4], look: [2 * SET, 0, 0.4] }, { t: c2[0] + 0.4, pos: [2 * SET, 5.8, 7.2], look: [2 * SET, 0, 0.5], ease: "outCubic" }, { t: ctx.dur, pos: [2 * SET + 0.3, 5.3, 6.4], look: [2 * SET, 0, 0.5], ease: "linear" }] },
+      ],
+    });
+    // 첫 컷 — 지연 = 나는 시간: 셋이 같이 떠나고 날아가는 시간이 첫 토큰 ms 에 비례한다(빠른 것이 먼저 앉는다)
+    stage.add(popUp(stage, { ctx, pos: [-3.8, 0, -3.8], size: [3.4, 0.8], text: "첫 토큰", at: 0.02, tone: "accent" }));
+    const launch = 0.1;
+    OG.ttft.forEach(([id, label, ms], k) => {
+      const z = -2 + k * 2.2;
+      const land = launch + (ms / 1000) * 1.6;
+      stage.add(popUp(stage, { ctx, pos: [-4.7, 0, z], size: [3.3, 0.62], text: id, at: 0.04 + k * 0.05, font: "mono" }));
+      stage.add(paperPlane(stage, { ctx, from: [-2.5, 0, z], to: [4.8, 0, z], at: launch, dur: land - launch, arc: 1.4, tone: k ? TONES[k] : "accent", rest: true, stay: true, size: 1.3 }));
+      stage.add(popUp(stage, { ctx, pos: [6.4, 0, z], size: [2.1, 0.62], text: label, at: land + 0.02, font: "mono", tone: k ? "paper" : "accent" }));
+    });
+    stage.add(popUp(stage, { ctx, pos: [0.4, 0, 3.9], size: [5.4, 0.75], text: OG.calls, at: b[3] ?? 1.07 }));
+    // 둘째 컷 — 반으로 접힌 카드가 펼쳐지며 OG 로고와 opengateway.ai 가 드러나고, 박에 주소 카드가 선다
+    const card = (g: CanvasRenderingContext2D, W: number, H: number) => {
+      const ink = ctx.style.colors.print;
+      drawLogo(g, W / 2 - W * 0.17, H * 0.1, W * 0.34, ink);
+      g.fillStyle = ink;
+      g.font = `700 ${Math.round(H * 0.17)}px ${ctx.style.fonts.display}`;
+      g.textAlign = "center";
+      g.textBaseline = "middle";
+      g.fillText(OG.site, W / 2, H * 0.8);
+    };
+    stage.add(foldCard(stage, { ctx, pos: [SET, 0, -0.4], size: [7.6, 3.4], text: OG.site, at: c1[0] + 0.32, tone: "accent", draw: card }));
+    stage.add(popUp(stage, { ctx, pos: [SET, 0, 2.3], size: [7.2, 0.7], text: OG.url, at: b[6] ?? c1[0] + 0.7, font: "mono" }));
+    [b[5] ?? c1[0] + 0.35, b[7] ?? c1[0] + 1.05].forEach((h, k) => stage.add(paperPlane(stage, { ctx, from: [SET + (k ? 11 : -11), 0, 5], to: [SET + (k ? 4.6 : -4.6), 0, 1.4], at: h - 0.32, dur: 0.32, arc: 1.8, tone: TONES[k + 1], stay: true, size: 0.8 })));
+    // 끝 반 마디 — 펼친 카드와 주소, 종이비행기가 마저 날아와 앉는다
+    stage.add(foldCard(stage, { ctx, pos: [2 * SET, 0, -0.4], size: [7.6, 3.4], text: OG.site, at: -1, tone: "accent", draw: card }));
+    stage.add(popUp(stage, { ctx, pos: [2 * SET, 0, 2.3], size: [7.2, 0.7], text: OG.url, at: -1, font: "mono" }));
+    [0, 1, 2].forEach((k) => stage.add(paperPlane(stage, { ctx, from: [2 * SET - 11 + k * 11, 0, 6], to: [2 * SET - 4.2 + k * 4.2, 0, 1.3 - (k % 2) * 0.4], at: c2[0] + k * 0.14, dur: 0.36, arc: 1.6, tone: TONES[k], stay: true, size: 0.75 })));
+    return (time: number) => stage(time);
+  },
+};

package/themes/origami-fold/sample/scenes/gather.ts

@@ -0,0 +1,37 @@
+import { rand, type SceneCtx } from "@kasaframe/core";
+import { foldCard, paperPlane, paperStage, popUp, sheetStack } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, SET, TONES } from "../lib/fold.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsFrom0(ctx);
+    const [c0, c1] = cuts(ctx, 2);
+    const stage = paperStage(root, {
+      ctx,
+      shots: [
+        // 흩어진 카드 아홉 — 가까이서 첫 카드가 펴지고, 물러나 탁자 전체를 담는다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [0, 6.2, 7.2], look: [0, 0, -0.6] }, { t: b[1] ?? 0.64, pos: [0, 9.6, 11.6], look: [0, 0, 0.2], ease: "outCubic" }, { t: c0[1], pos: [0.2, 9.9, 12.2], look: [0, 0, 0.2], ease: "linear" }] },
+        // 회사마다 종이 더미 — 모델 수만큼 한 장씩 쌓인다. 셋째 무리가 서는 박에 다가가 선다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET, 9.4, 14], look: [SET, 0.6, 0] }, { t: b[6] ?? c1[0] + 0.7, pos: [SET, 8.4, 12.4], look: [SET, 0.6, 0.2], ease: "outCubic" }, { t: ctx.dur, pos: [SET, 8.3, 12.1], look: [SET, 0.6, 0.2], ease: "linear" }] },
+      ],
+    });
+    // 첫 컷 — 접힌 카드 아홉이 탁자에 흩어져 내려앉고 박마다 셋씩 펼쳐져 회사 이름이 드러난다. 넷째 박엔 카드마다 종이비행기가 제각각 날아간다
+    OG.providers.forEach(([name], i) => {
+      const [r, cc] = [Math.floor(i / 3), i % 3];
+      const x = (cc - 1) * 5.4 + (rand("gx", i) - 0.5) * 1.2;
+      const z = (r - 1) * 2.9 + 0.3 + (rand("gz", i) - 0.5) * 0.6;
+      const at = [0.3, b[1] ?? 0.64, b[2] ?? 0.99][r] + cc * 0.05;
+      stage.add(foldCard(stage, { ctx, pos: [x, 0, z], size: [3.3, 1.5], text: name, at, tone: i ? TONES[i % TONES.length] : "accent", yaw: (rand("gy", i) - 0.5) * 0.5 }));
+      const a = rand("ga", i) * Math.PI * 2;
+      stage.add(paperPlane(stage, { ctx, from: [x, 0, z + 0.9], to: [x + Math.cos(a) * 15, 0, z + Math.sin(a) * 11], at: (b[3] ?? 1.35) + (i % 3) * 0.05, dur: 0.75, arc: 2.6, tone: TONES[(i + 2) % TONES.length], size: 0.75 }));
+    });
+    // 둘째 컷 — 회사마다 종이 더미, 장 수 = 모델 수. 앞에 수와 이름을 찍은 카드가 선다
+    OG.providers.forEach(([name, n], i) => {
+      const x = SET - 6.8 + i * 1.7;
+      stage.add(sheetStack(stage, { ctx, pos: [x, 0, -0.2], count: n, at: c1[0] + 0.03, dur: 1.15, size: [1.25, 1], thick: 0.05, tones: [i ? TONES[i % TONES.length] : "accent"], seed: name }));
+      stage.add(popUp(stage, { ctx, pos: [x, 0, 1.15], size: [1.55, 0.95], text: String(n), sub: name, at: c1[0] + 0.05 + i * 0.03 }));
+    });
+    return (t: number) => stage(t);
+  },
+};

package/themes/origami-fold/sample/scenes/models.ts

@@ -0,0 +1,46 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { foldCard, paperPlane, paperStage, popUp, sheetStack } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, SET, TONES } from "../lib/fold.ts";
+
+type V3 = [number, number, number];
+
+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 = paperStage(root, {
+      ctx,
+      shots: [
+        // 주소 카드 앞으로 종이비행기 넷이 날아와 앉는다 — 넷째가 앉는 박까지 다가간다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [0, 8, 11.8], look: [0, 0.4, 0.2] }, { t: b[3] ?? 1.06, pos: [0, 7.3, 10.6], look: [0, 0.4, 0.4], ease: "outCubic" }] },
+        // 같은 주소 앞의 카드가 박마다 접혔다 펴지며 모델 ID 가 바뀐다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET, 6.8, 9.2], look: [SET, 0.4, 0.2] }, { t: b[5] ?? c1[0] + 0.35, pos: [SET, 6.1, 8.1], look: [SET, 0.4, 0.3], ease: "outCubic" }] },
+        // 종이 102 장이 쌓인다 — 서서 받다가 드롭으로 더미에 다가든다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [2 * SET, 6.4, 10.2], look: [2 * SET, 1, 0] }, { t: b[10] ?? c2[0] + 0.7, pos: [2 * SET, 6.4, 10.2], look: [2 * SET, 1, 0] }, { t: drop, pos: [2 * SET, 4.4, 6.8], look: [2 * SET, 1.3, 0], ease: "inCubic" }] },
+      ],
+    });
+    // 첫 컷 — 한 주소를 찍은 큰 카드가 서고, 네 귀퉁이에서 종이비행기(요청)가 박마다 날아와 앉는다. 앉은 자리에 엔드포인트 카드
+    stage.add(popUp(stage, { ctx, pos: [0, 0, -1.4], size: [8.6, 1.4], text: OG.host, at: 0.02, font: "mono" }));
+    const corners: V3[] = [[-11, 0, 7], [11, 0, 7], [-11, 0, -5], [11, 0, -5]];
+    const hits = [b[1] ?? 0.35, b[2] ?? 0.71, b[3] ?? 1.06, (b[3] ?? 1.06) + 0.24];
+    OG.endpoints.forEach((e, k) => {
+      const x = -4.8 + k * 3.2;
+      stage.add(paperPlane(stage, { ctx, from: corners[k], to: [x, 0, 1], at: hits[k] - 0.34, dur: 0.34, arc: 2.2, tone: TONES[k], stay: true, size: 0.85 }));
+      stage.add(popUp(stage, { ctx, pos: [x, 0, 2], size: [3.05, 0.7], text: `/v1${e}`, at: hits[k] + 0.02, font: "mono" }));
+    });
+    // 둘째 컷 — 같은 요청 카드 앞에서 모델 ID 카드가 박마다 접혔다 펴지며 바뀐다. 그 박마다 종이비행기 하나가 날아든다
+    stage.add(popUp(stage, { ctx, pos: [SET, 0, -1.6], size: [6.8, 0.9], text: "POST /v1/chat/completions", at: c1[0] - 0.4, font: "mono" }));
+    const swaps = [b[5] ?? c1[0] + 0.35, b[6] ?? c1[0] + 0.7, b[7] ?? c1[0] + 1.05];
+    stage.add(foldCard(stage, { ctx, pos: [SET, 0, 0.7], size: [8.6, 1.9], text: OG.ids[0], steps: OG.ids.slice(1, 4).map((text, k) => ({ at: swaps[k], text })), at: c1[0] - 0.25, font: "mono", tone: "accent" }));
+    [c1[0] + 0.02, ...swaps].forEach((h, k) => stage.add(paperPlane(stage, { ctx, from: [SET - 11, 0, 4 - k], to: [SET - 4.6 + k * 0.3, 0, 2.4], at: h - 0.05, dur: 0.32, arc: 1.8, tone: TONES[k], size: 0.75 })));
+    // 셋째 컷 — 종이 102 장이 한 장씩 떨어져 쌓이고, 카드의 숫자가 앉은 장 수를 그대로 센다
+    // 장 색 = 회사 색(목록 합 100 장), 목록 밖 두 장은 흰 종이
+    const toneOf = OG.providers.flatMap(([, n], i) => Array.from({ length: n }, () => (i ? TONES[i % TONES.length] : "accent")));
+    const pile = sheetStack(stage, { ctx, pos: [2 * SET - 2.6, 0, 0], count: OG.models, at: c2[0] + 0.03, dur: drop - c2[0] - 0.1, size: [2.4, 1.7], thick: 0.03, tones: (i) => toneOf[i] ?? "paper", seed: "pile" });
+    stage.add(pile);
+    stage.add(popUp(stage, { ctx, pos: [2 * SET + 2.4, 0, 0.8], size: [4.4, 1.3], text: (t) => `models ${String(pile.shown(t)).padStart(3, "0")}`, at: c2[0] + 0.02, font: "mono" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/origami-fold/sample/scenes/price.ts

@@ -0,0 +1,54 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { foldBurst, foldCard, paperPlane, paperStage, pleatFold, popUp } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsFrom0, cuts, SET } from "../lib/fold.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 = paperStage(root, {
+      ctx,
+      shots: [
+        // 드롭 — 접힌 종이 곁 낮은 자리에서, 펼쳐지는 102 와 함께 물러나 탁자를 담는다
+        { from: c0[0], to: c0[1], keys: [{ t: 0, pos: [0, 4.4, 5.4], look: [0, 0, 0] }, { t: b[2] ?? 0.73, pos: [0, 9.8, 10.8], look: [0, 0, 0.4], ease: "outExpo" }, { t: c0[1], pos: [0.6, 9.2, 10], look: [0.3, 0, 0.6], ease: "linear" }] },
+        // 하루 막대 24 개 — 밤 막대가 접혀 내려앉는 박에 다가간다
+        { from: c1[0], to: c1[1], keys: [{ t: c1[0], pos: [SET, 6.2, 15.4], look: [SET, 0.7, 0.8] }, { t: fall, pos: [SET + 0.3, 5.5, 13.6], look: [SET, 0.6, 0.9], ease: "outCubic" }, { t: c1[1], pos: [SET + 0.3, 5.4, 13.2], look: [SET, 0.6, 0.9], ease: "linear" }] },
+        // 정가 막대가 박마다 1/10 로 접힌다 — 둘째가 접히는 박에 다가간다
+        { from: c2[0], to: c2[1], keys: [{ t: c2[0], pos: [2 * SET, 6.8, 13.4], look: [2 * SET, 1.2, 0] }, { t: b[9] ?? c2[0] + 0.35, pos: [2 * SET, 6.8, 13.4], look: [2 * SET, 1.2, 0] }, { t: (b[10] ?? c2[0] + 0.7) + 0.4, pos: [2 * SET, 6.1, 11.8], look: [2 * SET, 1.1, 0.3], ease: "outCubic" }] },
+      ],
+    });
+    // 드롭 — 네 날개로 접힌 종이가 탁 펼쳐져 102 가 드러나고 종이비행기가 사방으로. 한 주소 · 주소 카드가 선다
+    stage.add(foldBurst(stage, { ctx, pos: [0, 0, 0], size: 7, drop: 0, text: String(OG.models), planes: 12 }));
+    stage.add(popUp(stage, { ctx, pos: [-4.4, 0, 3.4], size: [3.6, 1], text: "한 주소", at: b[1] ?? 0.36 }));
+    stage.add(popUp(stage, { ctx, pos: [3.4, 0, 3.6], size: [5.6, 0.75], text: OG.host, at: b[2] ?? 0.73, font: "mono" }));
+    // 펼친 102 위로 요청 비행기가 마저 날아와 앉는다
+    [[-12, -4, 0.6, -2.6], [12, -3, -1.4, -2.9], [-11, 6, -1.8, 2.2]].forEach(([fx, fz, tx, tz], k) => stage.add(paperPlane(stage, { ctx, from: [fx, 0, fz], to: [tx, 0, tz], at: (b[3] ?? 1.07) - 0.3 + k * 0.13, dur: 0.34, arc: 2, tone: ["indigo", "mustard", "sakura"][k], stay: true, size: 0.8 })));
+    // 둘째 컷 — 시마다 세운 종이 막대(높이 = 값). 00–10 시 막대가 박에 아코디언으로 접혀 1/10 이 된다(-90%)
+    const x0 = SET - 7.5;
+    for (let h = 0; h < 24; h++) {
+      const night = h >= OG.night.from && h < OG.night.to;
+      const at = c1[0] + h * 0.014;
+      const keys = [{ t: at, ratio: 8 }, { t: at + 0.3, ratio: 1 }, ...(night ? [{ t: fall, ratio: 1 }, { t: fall + 0.36, ratio: 10 }] : [])];
+      stage.add(pleatFold(stage, { ctx, pos: [x0 + h * 0.652, 0, 0], length: 3, width: 0.48, panels: 8, axis: "y", keys, at: at - 0.01, tone: night ? "accent" : "paper" }));
+    }
+    stage.add(popUp(stage, { ctx, pos: [x0, 0, 0.9], size: [0.9, 0.5], text: "00", at: c1[0] + 0.3, font: "mono" }));
+    stage.add(popUp(stage, { ctx, pos: [x0 + 10 * 0.652, 0, 0.9], size: [0.9, 0.5], text: "10", at: c1[0] + 0.34, font: "mono" }));
+    stage.add(popUp(stage, { ctx, pos: [SET - 3.8, 0, 2.3], size: [5.4, 0.8], text: `00:00-10:00 ${OG.night.tz}`, at: b[5] ?? c1[0] + 0.35, font: "mono" }));
+    stage.add(popUp(stage, { ctx, pos: [SET + 4.4, 0, 2.3], size: [2.8, 1.2], text: OG.deepseek.off, at: fall + 0.02, tone: "accent" }));
+    // 셋째 컷 — 같은 모델 ID 카드 앞, 정가 막대(높이 = 값)가 박마다 1/10 로 접히고 앞 카드 값이 밤값으로 바뀐다
+    const ds = OG.deepseek;
+    stage.add(foldCard(stage, { ctx, pos: [2 * SET, 0, -1.9], size: [9.6, 1.5], text: ds.id, at: c2[0] + 0.3, font: "mono" }));
+    const bars = [
+      { word: "입력", was: ds.input[0], now: ds.input[1], len: 0.9, x: 2 * SET - 4.6, at: b[9] ?? c2[0] + 0.35 },
+      { word: "출력", was: ds.output[0], now: ds.output[1], len: 3.6, x: 2 * SET + 4.6, at: b[10] ?? c2[0] + 0.7 },
+    ];
+    for (const bar of bars) {
+      stage.add(pleatFold(stage, { ctx, pos: [bar.x, 0, -0.4], length: bar.len, width: 1.2, panels: 10, axis: "y", keys: [{ t: bar.at, ratio: 1 }, { t: bar.at + 0.34, ratio: 10 }], at: -1, tone: "indigo" }));
+      stage.add(popUp(stage, { ctx, pos: [bar.x, 0, 1.2], size: [3.4, 0.82], text: (t) => `${bar.word} ${t >= bar.at + 0.17 ? bar.now : bar.was}`, at: c2[0] + 0.05 }));
+    }
+    stage.add(popUp(stage, { ctx, pos: [2 * SET, 0, 2.9], size: [7, 0.75], text: `${OG.glm.id} ${OG.glm.off}`, at: b[11] ?? c2[0] + 1.05, tone: "sakura", font: "mono" }));
+    return (t: number) => stage(t);
+  },
+};

package/themes/origami-fold/sample/style.json

@@ -0,0 +1,108 @@
+{
+  "name": "origami-fold",
+  "label": "종이접기 — 접으면 줄고 펴면 드러난다",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#33574A",
+    "surface": "#284539",
+    "raised": "#3E6656",
+    "line": "#5C8574",
+    "ink": "#FBF7EF",
+    "inkSoft": "#E4DED2",
+    "dim": "#B8CBBF",
+    "accent": "#E2553B",
+    "accentSoft": "#F2A08E",
+    "accentText": "#FFB49E",
+    "onAccent": "#1E1A17",
+    "success": "#9FE0B7",
+    "danger": "#FF6E9A",
+    "warning": "#F3C653",
+    "paper": "#F7F2E8",
+    "print": "#2A2622",
+    "indigo": "#34508A",
+    "mustard": "#E5B43A",
+    "sakura": "#EFA3B4",
+    "kraft": "#C9A57A",
+    "matline": "#4C7564"
+  },
+  "fonts": {
+    "sans": "\"Gowun Dodum\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "Sunflower, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Sunflower",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/sunflower/Sunflower-Bold.ttf",
+        "weight": "700"
+      },
+      {
+        "family": "Gowun Dodum",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/gowundodum/GowunDodum-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "JetBrains Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+        "weight": "100 800"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      }
+    ]
+  },
+  "type": {
+    "hero": 180,
+    "title": 88,
+    "body": 42,
+    "caption": 32,
+    "weightDisplay": 700,
+    "weightBody": 400,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 2,
+    "md": 3,
+    "lg": 4,
+    "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.32,
+      "slow": 0.7
+    }
+  },
+  "theme": {
+    "inks": [
+      "#33574A 초록 커팅 매트(옅은 격자)",
+      "#F7F2E8 흰 와시 종이 · #2A2622 종이에 찍힌 글",
+      "#E2553B 주홍(강조 — 강조할 종이 한 장)",
+      "인디고·겨자·벚꽃·크라프트 색종이 — 회사·모델마다 한 장"
+    ],
+    "texture": "매트한 종이 면, 날카로운 접선, 면마다 다른 명암, 왼쪽 위 빛 하나의 또렷한 바닥 그림자. 매트 격자는 서 있다",
+    "movement": "박마다 한 번 접히거나 펴진다 — 카드가 펼쳐지며 글이 드러나고, 아코디언이 접혀 1/N 로 줄고(압축·할인), 종이비행기(요청)가 날아가 앉고, 종이가 한 장씩 쌓인다. 카메라는 박에 맞춘 키로만 다가가고 물러난다"
+  },
+  "notes": [
+    "출처: vividsites Orikata Crane(three.js 경첩 접기), Kei Kanamori 「Origami」, 종이접기 전환 컴포넌트.",
+    "글은 종이 위에 찍는다(짙은 print 잉크). 매트 위 글은 ink(크림)."
+  ]
+}

package/themes/origami-fold/slots.ts

@@ -0,0 +1,176 @@
+import { clamp, ease, rand, type SceneCtx, type Style } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { layer, letters, partial, traceCanvas, type Pt } from "@kasaframe/themes/slotkit";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 종이접기의 결로 채운다. 전부 DOM·캔버스 2D(매트는 평면으로 충분하다)
+const col = (ctx: SceneCtx, k: string, fb: string) => ctx.style.colors[k] ?? fb;
+
+// 꺾은선 위 거리 d 의 자리와 그 방향
+function along(points: readonly Pt[], d: number): { p: [number, number]; a: number } {
+  for (let i = 1; i < points.length; i++) {
+    const [a, b] = [points[i - 1], points[i]];
+    const seg = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    if (d <= seg || i === points.length - 1) {
+      const k = Math.min(1, d / (seg || 1));
+      return { p: [a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k], a: Math.atan2(b[1] - a[1], b[0] - a[0]) };
+    }
+    d -= seg;
+  }
+  return { p: [points[0][0], points[0][1]], a: 0 };
+}
+
+export const slots: ThemeSlots = {
+  // 초록 커팅 매트 — 반 칸 가는 눈금, 두 칸 굵은 눈금. 서 있다
+  surface(el, { ctx }) {
+    const cv = document.createElement("canvas");
+    cv.width = Math.round(ctx.meta.width / 2);
+    cv.height = Math.round(ctx.meta.height / 2);
+    cv.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;";
+    el.append(cv);
+    const g = cv.getContext("2d")!;
+    g.fillStyle = col(ctx, "bg", "#33574A");
+    g.fillRect(0, 0, cv.width, cv.height);
+    const step = Math.round(Math.min(cv.width, cv.height) / 18);
+    for (let i = 0; i * step <= Math.max(cv.width, cv.height); i++) {
+      const major = i % 4 === 0;
+      g.fillStyle = col(ctx, major ? "line" : "matline", "#4C7564");
+      const w = major ? 2 : 1;
+      g.fillRect(i * step, 0, w, cv.height);
+      g.fillRect(0, i * step, cv.width, w);
+    }
+    return () => {};
+  },
+
+  // 색종이 판 — 반으로 접힌 인디고 종이의 오른쪽 장이 넘어오며 펼쳐진다(가운데 접선 그늘). 강조면 주홍 종이
+  panel(el, { ctx, at, tone }) {
+    const paper = col(ctx, tone === "accent" ? "accent" : "indigo", "#34508A");
+    const crease = `linear-gradient(90deg, transparent 46%, rgba(0,0,0,0.18) 50%, rgba(255,255,255,0.08) 52%, transparent 56%)`;
+    const left = layer(el, `left:0;top:0;bottom:0;width:50%;background:${paper};`, true);
+    const right = layer(el, `left:50%;top:0;bottom:0;width:50%;background:${paper};transform-origin:0 50%;`);
+    el.insertBefore(right, left.nextSibling);
+    const fold = layer(el, `inset:0;background:${crease};`);
+    el.insertBefore(fold, right.nextSibling);
+    return (t) => {
+      const on = t >= at;
+      for (const d of [left, right, fold]) d.style.display = on ? "" : "none";
+      if (!on) return;
+      const u = ease.outCubic(clamp((t - at) / 0.4));
+      right.style.transform = `perspective(1400px) rotateY(${(-180 * (1 - u)).toFixed(1)}deg)`;
+      right.style.filter = `brightness(${(0.82 + 0.18 * u).toFixed(3)})`;
+      fold.style.opacity = String(u);
+    };
+  },
+
+  // 세워 붙인다 — 엎드려 있던 것이 아래 접선을 축으로 일어선다(살짝 넘쳤다 선다)
+  land(el, { at }) {
+    if (!el.style.transformOrigin) el.style.transformOrigin = "50% 100%";
+    return (t): Style => {
+      const k = t - at;
+      if (k < 0 || k > 0.6) return {};
+      const u = ease.outBack(clamp(k / 0.36));
+      return { rotateX: 78 * (1 - u), opacity: clamp(k / 0.1) };
+    };
+  },
+
+  // 글자 접어 세우기 — 글자마다 눕혀 있던 종이가 차례로 일어선다
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    for (const s of spans) {
+      s.style.display = "inline-block";
+      s.style.whiteSpace = "pre";
+      s.style.transformOrigin = "50% 90%";
+    }
+    const n = Math.max(1, spans.length);
+    return (t) => {
+      const done = t >= at + dur;
+      spans.forEach((s, i) => {
+        const k = done ? 1 : clamp((t - at - (dur * i) / n) / 0.22);
+        s.style.opacity = k > 0 ? "1" : "0";
+        s.style.transform = k >= 1 ? "" : `perspective(600px) rotateX(${(85 * (1 - ease.outCubic(k))).toFixed(1)}deg)`;
+      });
+    };
+  },
+
+  // 종이비행기 길 — 접는 선 점선이 비행기 꼬리를 따라 그어지고, 다 그은 뒤엔 비행기가 그 길을 되풀이해 난다
+  trace(el, { ctx, points, at, dur, seed, tone }) {
+    const { g, clear } = traceCanvas(el, points, 50);
+    const line = col(ctx, tone === "accent" ? "accent" : "paper", "#F7F2E8");
+    const plane = col(ctx, tone === "accent" ? "accent" : "paper", "#F7F2E8");
+    const len = points.slice(1).reduce((s, [x, y], i) => s + Math.hypot(x - points[i][0], y - points[i][1]), 0) || 1;
+    const drawPlane = (d: number) => {
+      const { p, a } = along(points, d);
+      g.save();
+      g.translate(p[0], p[1]);
+      g.rotate(a);
+      g.fillStyle = plane;
+      g.beginPath();
+      g.moveTo(16, 0);
+      g.lineTo(-12, -10);
+      g.lineTo(-6, 0);
+      g.lineTo(-12, 10);
+      g.closePath();
+      g.fill();
+      g.fillStyle = col(ctx, "print", "#2A2622");
+      g.globalAlpha = 0.25;
+      g.beginPath();
+      g.moveTo(16, 0);
+      g.lineTo(-6, 0);
+      g.lineTo(-12, 10);
+      g.closePath();
+      g.fill();
+      g.restore();
+    };
+    return (t) => {
+      clear();
+      if (t < at) return;
+      const u = ease.inOutQuad(clamp((t - at) / Math.max(0.01, dur)));
+      g.strokeStyle = line;
+      g.lineWidth = 3;
+      g.setLineDash([16, 6, 3, 6]);
+      g.beginPath();
+      partial(points, u).forEach(([x, y], i) => (i ? g.lineTo(x, y) : g.moveTo(x, y)));
+      g.stroke();
+      g.setLineDash([]);
+      const d = u < 1 ? u * len : (((((t - at - dur) * 0.35 + rand(seed, 5)) % 1) + 1) % 1) * len;
+      drawPlane(d);
+    };
+  },
+
+  // 드롭 — 종이 조각이 사방으로 흩날리며(회전) 떨어지고 옅은 섬광
+  drop(el, { ctx, drop }) {
+    const flash = layer(el, `inset:0;background:${col(ctx, "paper", "#F7F2E8")};opacity:0;`);
+    const cv = document.createElement("canvas");
+    cv.width = Math.round(ctx.meta.width / 2);
+    cv.height = Math.round(ctx.meta.height / 2);
+    cv.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;";
+    el.append(cv);
+    const g = cv.getContext("2d")!;
+    const tones = ["paper", "accent", "indigo", "mustard", "sakura"].map((k) => col(ctx, k, "#F7F2E8"));
+    const seed = `paper:${ctx.id}`;
+    const bits = Array.from({ length: 60 }, (_, i) => {
+      const a = rand(seed, i) * Math.PI * 2;
+      const sp = 0.25 + rand(seed, i + 99) * 0.5;
+      return { vx: Math.cos(a) * sp, vy: Math.sin(a) * sp - 0.5, spin: (rand(seed, i + 199) - 0.5) * 12, c: tones[i % tones.length], w: 10 + rand(seed, i + 299) * 14, h: 7 + rand(seed, i + 399) * 9 };
+    });
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "origami-fold:drop" });
+      flash.style.opacity = String(Math.round(s.flash * 60) / 100);
+      g.clearRect(0, 0, cv.width, cv.height);
+      const k = t - ctx.beats.drop(drop);
+      if (k >= 0 && k < 1.8) {
+        const [cx, cy, H] = [cv.width / 2, cv.height / 2, cv.height];
+        for (const b of bits) {
+          g.save();
+          g.translate(cx + b.vx * k * H, cy + (b.vy * k + 0.55 * k * k) * H);
+          g.rotate(b.spin * k);
+          g.scale(1, Math.cos(b.spin * k * 1.3));
+          g.fillStyle = b.c;
+          g.fillRect(-b.w / 2, -b.h / 2, b.w, b.h);
+          g.restore();
+        }
+      }
+      return s;
+    };
+  },
+};