kasaframe 0.1.1 → 0.1.4

package/themes/paper-cutout/sample/index.html

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

package/themes/paper-cutout/sample/kf.json

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

@@ -0,0 +1,91 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { cutLetters, lift, paperBoard, paperSheet, type Rect } from "../../effects.ts";
+
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+export function layer(parent: HTMLElement, css = ""): HTMLDivElement {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;inset:0;${css}`;
+  parent.append(el);
+  return el;
+}
+
+/**
+ * 판 묶음 — 판 한 장 = 화면을 덮는 대지 한 장. swaps[i] 에 새 대지가 위에 얹혀 살짝 내려앉고(lift), 덮인 판은 그 뒤 치운다.
+ * 큰 색면이 화면을 가로질러 미끄러지면 칸마다 밝기가 오르내려 섬광으로 읽힌다 — 판은 얹고, 미끄러져 빠지는 건 작은 종이(liftSwap)만.
+ * paint(t) 는 이 시각 보이는 판 번호마다 true — 숨은 판은 칠하지 않는다
+ */
+export function deck(parent: HTMLElement, ctx: SceneCtx, swaps: number[]) {
+  const n = swaps.length + 1;
+  const sheets = Array.from({ length: n }, (_, i) => {
+    const el = layer(parent, `z-index:${i + 1};transform-origin:50% 50%`);
+    paperBoard(el, { ctx });
+    return el;
+  });
+  return {
+    sheets,
+    paint(t: number): boolean[] {
+      return sheets.map((el, i) => {
+        const from = i === 0 ? -Infinity : swaps[i - 1];
+        const shown = t >= from && (i === n - 1 || t < swaps[i] + 0.18);
+        el.style.display = shown ? "" : "none";
+        // 얹히는 0.16초만 — 판 전체가 오래 움직이면 카메라 이동으로 읽힌다
+        const k = t - from;
+        el.style.transform = shown && k < 0.16 ? `scale(${(lift(t, { at: from, height: 10, dur: 0.16 }).style.scale ?? 1).toFixed(4)})` : "";
+        return shown;
+      });
+    },
+  };
+}
+
+const fonts = (ctx: SceneCtx, f: "display" | "sans" | "mono") => ctx.style.fonts[f];
+
+/** 오린 글자 한 줄 — 자리(px)·크기·글꼴만 주면 된다. center 면 x 가 가운데 */
+export function words(el: HTMLElement, ctx: SceneCtx, o: { text: string; x: number; y: number; size: number; at: number; font?: "display" | "sans" | "mono"; color?: string; center?: boolean; weight?: number; gap?: number }) {
+  const f = o.font ?? "display";
+  const weight = o.weight ?? (f === "display" ? 400 : f === "mono" ? 600 : 800);
+  const where = o.center ? `left:${o.x - 1200}px;width:2400px;text-align:center;` : `left:${o.x}px;`;
+  return cutLetters(el, { ctx, text: o.text, at: o.at, gap: o.gap, color: o.color, css: `${where}top:${o.y}px;font:${weight} ${o.size}px ${fonts(ctx, f)};letter-spacing:${f === "mono" ? "0" : "-0.01em"}` });
+}
+
+/** 글을 품은 색종이 — 종이 위 글은 종이와 같이 내려앉는다(글자는 이미 붙어 있다) */
+export function card(el: HTMLElement, ctx: SceneCtx, o: { rect: Rect; color: string; at?: number; height?: number; lines: { text: string; y: number; size: number; font?: "display" | "sans" | "mono"; color: string }[] }) {
+  return paperSheet(el, {
+    ctx,
+    rect: o.rect,
+    color: o.color,
+    at: o.at,
+    height: o.height,
+    build: (face) => {
+      for (const l of o.lines) {
+        const d = document.createElement("div");
+        const f = l.font ?? "display";
+        d.textContent = l.text;
+        d.style.cssText = `position:absolute;left:0;width:100%;top:${l.y}px;text-align:center;white-space:pre;line-height:1;font:${f === "display" ? 400 : f === "mono" ? 600 : 800} ${l.size}px ${fonts(ctx, f)};color:${ctx.style.colors[l.color] ?? l.color};text-shadow:${lift(-1, { at: 0, ctx }).shadow}`;
+        face.append(d);
+      }
+    },
+  });
+}
+
+/** 글자 수로 어림한 글꼴 크기 — 장면이 숨어 있는 build 때는 잴 수 없다 */
+export const fit = (text: string, width: number, em: number, max: number): number => Math.min(max, Math.floor(width / (Array.from(text).length * em)));
+
+/** OG 로고를 남색 종이로 오려 at 에 내려앉힌다 */
+export function logoPiece(el: HTMLElement, ctx: SceneCtx, svg: string, o: { x: number; y: number; w: number; at: number }) {
+  const outer = layer(el, "");
+  outer.style.cssText = `position:absolute;left:${o.x}px;top:${o.y}px;width:${o.w}px;transform-origin:50% 50%`;
+  const inner = document.createElement("div");
+  inner.style.color = ctx.style.colors.ink;
+  inner.innerHTML = svg.replace(/ width="\d+" height="\d+"/, ' width="100%" style="display:block"');
+  outer.append(inner);
+  const shade = ctx.style.colors.shade ?? "#3B2615";
+  return (t: number) => {
+    const L = lift(t, { at: o.at, height: 40, dur: 0.24, ctx });
+    outer.style.display = L.on ? "" : "none";
+    if (!L.on) return;
+    outer.style.transform = `scale(${(L.style.scale ?? 1).toFixed(4)})`;
+    const d = L.h;
+    inner.style.filter = `drop-shadow(${(0.4 + d * 0.32).toFixed(1)}px ${(0.8 + d * 0.56).toFixed(1)}px ${(1.5 + d * 0.85).toFixed(1)}px color-mix(in srgb, ${shade} ${Math.round((0.34 - d * 0.0035) * 100)}%, transparent))`;
+  };
+}

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

@@ -0,0 +1,54 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { cutWindows, depthWell, paperStrip } from "../../effects.ts";
+import svg from "../assets/og/logo.svg?raw";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, card, deck, layer, logoPiece, words } from "../lib/paper.ts";
+
+// 첫 토큰 지연 = 깊이 — 100ms 마다 고리 한 장. 우물 셋이 박마다 하나씩 파 내려간다
+const WELL = 470;
+const XS = [170, 725, 1280];
+const Y = 250;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const swap = ctx.beats.bars.find((x) => x > 0.5 && x < ctx.dur - 0.1) ?? 1.42;
+    const d = deck(root, ctx, [swap]);
+    const [A, B] = d.sheets;
+    const every = 0.08;
+    const rings = OG.ttft.map(([, , ms]) => Math.round(ms / 100));
+    const step = WELL / (2 * (Math.max(...rings) + 1.4));
+
+    const a: ((t: number) => void)[] = [words(A, ctx, { text: "첫 토큰", x: 170, y: 70, size: 64, at: 0.02, font: "sans" })];
+    OG.ttft.forEach(([id, label], i) => {
+      const at = i === 0 ? 0.06 : (b[i] ?? 0.36 * i);
+      const cx = XS[i] + WELL / 2;
+      a.push(depthWell(A, { ctx, rect: { x: XS[i], y: Y, w: WELL, h: WELL }, rings: rings[i], at, every, step, colors: ["paper", "sheet2", "sheet1", "sheet3"] }));
+      a.push(words(A, ctx, { text: id, x: cx, y: Y - 64, size: 38, at, font: "mono", center: true, gap: 0.02 }));
+      a.push(words(A, ctx, { text: label, x: cx, y: Y + WELL + 26, size: 96, at: at + rings[i] * every, center: true }));
+    });
+    a.push(words(A, ctx, { text: OG.calls, x: 960, y: 900, size: 52, at: b[3] ?? 1.07, font: "sans", center: true }));
+
+    // 판 B — 끝 카드. 남색 종이로 오린 로고가 내려앉고, 이름이 붙고, 박에 칼선이 돌아 주소 창이 열린다
+    const openAt = b.find((x) => x > swap + 0.9) ?? swap + 1.05;
+    const addr = { x: 330, y: 700, w: 1260, h: 140 };
+    const bb = [
+      card(layer(B), ctx, { rect: { x: addr.x - 30, y: addr.y - 30, w: addr.w + 60, h: addr.h + 60 }, color: "sheet1", lines: [] }),
+      // 창 아래 종이에 붙은 주소 — 창이 열린 뒤에 붙는다(덮인 글이 남지 않게)
+      words(B, ctx, { text: OG.host, x: 960, y: addr.y + 32, size: 76, at: openAt + 0.06, font: "mono", color: "paper", center: true, gap: 0.02 }),
+      cutWindows(layer(B), { ctx, windows: [{ ...addr, at: openAt, cut: 0.34, depth: 22 }] }),
+      logoPiece(B, ctx, svg, { x: 690, y: 110, w: 540, at: swap + 0.06 }),
+      words(B, ctx, { text: OG.site, x: 960, y: 460, size: 170, at: b.find((x) => x > swap + 0.2) ?? swap + 0.35, center: true, gap: 0.03 }),
+    ];
+    const strip = paperStrip(layer(B), { ctx, y: 950, x0: 80, x1: 1840, thick: 58, words: [OG.url], speed: 640, at: swap + 0.04, slits: [700, 1220] });
+
+    return (t: number) => {
+      const [aOn, bOn] = d.paint(t);
+      if (aOn) for (const p of a) p(t);
+      if (bOn) {
+        for (const p of bb) p(t);
+        strip(t);
+      }
+    };
+  },
+};

package/themes/paper-cutout/sample/scenes/gather.ts

@@ -0,0 +1,63 @@
+import { randRange, type SceneCtx } from "@kasaframe/core";
+import { cutWindows, paperSheet, type Win } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, deck, layer, words } from "../lib/paper.ts";
+
+// 회사마다 창 하나 — 대지 여기저기에 크기·깊이가 다른 창이 흩어져 있다
+const SPOTS: [number, number, number, number][] = [
+  [130, 110, 520, 230],
+  [720, 80, 470, 200],
+  [1260, 140, 520, 230],
+  [160, 420, 380, 200],
+  [620, 380, 300, 210],
+  [1000, 430, 360, 200],
+  [1430, 450, 380, 220],
+  [250, 730, 560, 220],
+  [900, 720, 620, 230],
+];
+const TONES = [
+  ["sheet1", "paper"],
+  ["sheet2", "ink"],
+  ["sheet3", "paper"],
+] as const;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const swap = ctx.beats.bars.find((x) => x > 1 && x < ctx.dur) ?? 1.695;
+    const d = deck(root, ctx, [swap]);
+    const [A, B] = d.sheets;
+
+    // 판 A — 흩어진 회사 아홉. 칼선 아홉이 장면 처음부터 같이 돌고, 박마다 두세 창씩 조각이 걷히면 그 회사 종이가 보인다
+    const opens = [0, 0, 1, 1, 2, 2, 3, 3, 3].map((k) => b[k] ?? swap - 0.35);
+    const under = layer(A);
+    const paints: ((t: number) => void)[] = [];
+    const wins: Win[] = SPOTS.map(([x, y, w, h], i) => ({ x, y, w, h, at: opens[i], cut: opens[i] - 0.01, depth: Math.round(randRange("gather", i, 10, 34)) }));
+    OG.providers.forEach(([name], i) => {
+      const [x, y, w, h] = SPOTS[i];
+      const [sheet, ink] = TONES[i % 3];
+      paints.push(paperSheet(under, { ctx, rect: { x: x - 30, y: y - 30, w: w + 60, h: h + 60 }, color: sheet }));
+      const size = Math.min(104, Math.floor((w - 70) / (name.length * 0.5)));
+      paints.push(words(under, ctx, { text: name, x: x + w / 2, y: y + h / 2 - size * 0.52, size, at: opens[i] + 0.06, color: ink, center: true }));
+    });
+    paints.push(cutWindows(layer(A), { ctx, windows: wins }));
+
+    // 판 B — 회사별 모델 수. 종이 띠 길이가 모델 수, 위에서부터 한 줄씩 내려앉는다
+    const max = Math.max(...OG.providers.map(([, n]) => n));
+    const rows: ((t: number) => void)[] = [];
+    OG.providers.forEach(([name, n], i) => {
+      const y = 92 + i * 102;
+      const at = swap + 0.03 + i * 0.15;
+      const w = Math.round((1150 * n) / max);
+      rows.push(words(B, ctx, { text: name, x: 120, y: y + 6, size: 46, at, font: "sans" }));
+      rows.push(paperSheet(B, { ctx, rect: { x: 470, y, w, h: 64 }, color: TONES[i % 3][0], at }));
+      rows.push(words(B, ctx, { text: String(n), x: 470 + w + 26, y: y - 6, size: 76, at: at + 0.1, color: "ink" }));
+    });
+
+    return (t: number) => {
+      const [a, bOn] = d.paint(t);
+      if (a) for (const p of paints) p(t);
+      if (bOn) for (const r of rows) r(t);
+    };
+  },
+};

package/themes/paper-cutout/sample/scenes/models.ts

@@ -0,0 +1,93 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { cutWindows, layerBurst, liftSwap, paperStrip } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, card, deck, fit, layer, words } from "../lib/paper.ts";
+
+// 한 주소 = 대지에 낸 창 하나. 창은 그대로 두고 그 아래 종이(모델)만 갈아 끼운다
+// 창은 화면의 20% 안 — 창 아래 종이가 바뀔 때 큰 면 밝기가 한꺼번에 뛰면 섬광으로 읽힌다
+const WIN = { x: 430, y: 280, w: 1060, h: 380 };
+const UNDER = { x: WIN.x - 40, y: WIN.y - 40, w: WIN.w + 80, h: WIN.h + 80 };
+const TONES = [
+  ["sheet1", "paper"],
+  ["sheet2", "ink"],
+  ["sheet3", "paper"],
+  ["surface", "ink"],
+] as const;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const bars = ctx.beats.bars.filter((x) => x > 0.5 && x < ctx.dur - 0.1);
+    const [swap, build] = [bars[0] ?? 1.41, bars[1] ?? 2.82];
+    const d = deck(root, ctx, [swap]);
+    const [A, B] = d.sheets;
+    const after = (t: number) => b.filter((x) => x > t + 0.05);
+
+    // 판 A — 주소가 한 글자씩 붙고, 박에 칼선이 돌아 창이 열리면 /v1 종이가 보인다
+    const openAt = b[2] ?? 0.7;
+    const a = [
+      card(layer(A), ctx, { rect: UNDER, color: "sheet1", lines: [] }),
+      words(A, ctx, { text: "/v1", x: 960, y: WIN.y + 50, size: 280, at: openAt + 0.08, color: "paper", center: true }),
+      cutWindows(layer(A), { ctx, windows: [{ ...WIN, at: openAt, cut: openAt - 0.02, depth: 26 }] }),
+      words(A, ctx, { text: OG.host, x: 960, y: 110, size: 80, at: 0.02, font: "mono", center: true, gap: 0.031 }),
+      // OpenAI·Anthropic 두 형식의 길 넷 — 박에 한 장씩
+      ...OG.endpoints.map((e, i) => words(A, ctx, { text: e, x: [258, 696, 974, 1229][i], y: 720, size: 38, at: openAt + 0.24 + i * 0.09, font: "mono", center: false, gap: 0.025 })),
+    ];
+
+    // 판 B — 같은 주소·같은 창(이미 오려 둔 창). 박마다 창 아래 모델 종이가 빠져나가고 다음 모델이 드러난다
+    const swaps = after(swap).slice(0, 3);
+    const ids = OG.ids.slice(0, swaps.length + 1);
+    const stack = layer(B);
+    const models = ids.map((id, i) => {
+      const [prov, name] = id.split("/");
+      const [sheet, ink] = TONES[i % TONES.length];
+      const holder = layer(stack, `inset:auto;left:${UNDER.x}px;top:${UNDER.y}px;width:${UNDER.w}px;height:${UNDER.h}px;z-index:${ids.length - i}`);
+      const size = fit(name, WIN.w - 80, 0.6, 84);
+      const lines = [
+        { text: `${prov}/`, y: 130, size: 44, font: "mono" as const, color: ink },
+        { text: name, y: 210, size, font: "mono" as const, color: ink },
+      ];
+      // 첫 모델은 판이 얹힌 뒤 글자가 한 장씩 붙고, 그 아래 모델들은 이미 붙어 있다가 위 종이가 빠지면 드러난다
+      const paint = card(holder, ctx, { rect: { x: 0, y: 0, w: UNDER.w, h: UNDER.h }, color: sheet, lines: i ? lines : [] });
+      const first = i ? [] : lines.map((l, k) => words(holder, ctx, { ...l, x: UNDER.w / 2, at: swap + 0.08 + k * 0.1, center: true, gap: 0.02 }));
+      const out = i < swaps.length ? liftSwap(holder, { ctx, at: swaps[i], dir: i % 2 ? "right" : "left" }) : null;
+      return (t: number) => {
+        out?.(t);
+        if (holder.style.display === "none") return;
+        paint(t);
+        for (const f of first) f(t);
+      };
+    });
+    const bMat = cutWindows(layer(B), { ctx, windows: [{ ...WIN, at: -1, cut: 0, depth: 26 }] });
+    const bHost = words(B, ctx, { text: OG.host, x: 960, y: 110, size: 80, at: -1, font: "mono", center: true });
+
+    // 드롭 앞 모아 올리기 — 박마다 대지 한 장씩 얹혀 창이 계단처럼 깊어진다(드롭에 한꺼번에 터진다)
+    const lands = after(build - 0.06).slice(0, 4);
+    const pile = layerBurst(layer(root, "z-index:20"), { ctx, drop: 0, layers: 4, landAt: lands, origin: [960, 510] });
+
+    // 요청 띠 — 주소 아래 칼집 셋(앱 → 게이트웨이 → 공급자)을 꿰고 끌려간다
+    const strip = paperStrip(layer(root, "z-index:30"), {
+      ctx,
+      y: 900,
+      x0: 80,
+      x1: 1840,
+      thick: 70,
+      words: OG.endpoints.map((e) => `POST /v1${e}`),
+      speed: 680,
+      at: 0.1,
+      slits: [560, 1000, 1440],
+    });
+
+    return (t: number) => {
+      const [aOn, bOn] = d.paint(t);
+      if (aOn) for (const p of a) p(t);
+      if (bOn) {
+        for (const m of models) m(t);
+        bMat(t);
+        bHost(t);
+      }
+      pile(t);
+      strip(t);
+    };
+  },
+};

package/themes/paper-cutout/sample/scenes/price.ts

@@ -0,0 +1,100 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { cutWindows, layerBurst, paperSheet, paperStrip, trimBar } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, deck, layer, words } from "../lib/paper.ts";
+
+// 하루 띠 — 24시간이 1600px. 값은 높이다: 낮 시간은 도드라진 종이, 00–10시는 오려 깊이 가라앉힌 창(쌀수록 깊다)
+const DAY = { x: 160, y: 330, w: 1600, h: 190 };
+const hx = (h: number) => DAY.x + (DAY.w * h) / 24;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const bars = ctx.beats.bars.filter((x) => x > 0.5 && x < ctx.dur - 0.1);
+    const [s1, s2] = [bars[0] ?? 1.41, bars[1] ?? 2.85];
+    const frame = layer(root);
+    const d = deck(frame, ctx, [s1, s2]);
+    const [A, B, C] = d.sheets;
+    const beat = (t: number, k = 0) => b.filter((x) => x > t + 0.02)[k] ?? t + 0.35 * (k + 1);
+
+    // 판 A — 드롭에 대지 층이 터져 나가며 102 가 드러나고, 박마다 한 줄씩 붙는다
+    const hero = layer(A);
+    const a = [
+      words(hero, ctx, { text: String(OG.models), x: 150, y: 70, size: 600, at: -1, color: "sheet1" }),
+      words(A, ctx, { text: "모델", x: 1190, y: 170, size: 160, at: beat(0), color: "ink" }),
+      words(A, ctx, { text: "한 주소", x: 1190, y: 390, size: 160, at: beat(0, 1), color: "ink" }),
+      words(A, ctx, { text: OG.host, x: 160, y: 760, size: 64, at: beat(0, 2), font: "mono" }),
+    ];
+
+    // 판 B — 하루 띠. 낮은 도드라진 종이로 서 있고, 00–10시 자리에 칼선이 돌아 창이 깊이 가라앉는다
+    const nightAt = beat(s1, 0);
+    const bb = [
+      paperSheet(layer(B), { ctx, rect: { x: DAY.x - 20, y: DAY.y - 20, w: hx(10) - DAY.x + 40, h: DAY.h + 40 }, color: "sheet3", height: 1 }),
+      words(B, ctx, { text: "-90%", x: (DAY.x + hx(10)) / 2, y: DAY.y + 30, size: 130, at: nightAt + 0.06, color: "paper", center: true }),
+      cutWindows(layer(B), { ctx, windows: [{ x: DAY.x, y: DAY.y, w: hx(10) - DAY.x, h: DAY.h, at: nightAt, cut: Math.min(0.32, nightAt - s1), depth: 44 }] }),
+      paperSheet(layer(B), { ctx, rect: { x: hx(10), y: DAY.y, w: hx(24) - hx(10), h: DAY.h }, color: "sheet2", height: 12, at: s1 + 0.04 }),
+    ];
+    const ticks = layer(B);
+    for (let h = 0; h <= 24; h++) {
+      const tk = document.createElement("div");
+      tk.style.cssText = `position:absolute;left:${hx(h) - 1}px;top:${DAY.y + DAY.h + 8}px;width:3px;height:${h % 6 ? 16 : 30}px;background:${ctx.style.colors.ink}`;
+      ticks.append(tk);
+    }
+    const labels = [0, 6, 12, 18, 24].map((h, i) => words(B, ctx, { text: String(h).padStart(2, "0"), x: hx(h), y: DAY.y + DAY.h + 46, size: 44, at: s1 + 0.1 + i * 0.03, font: "mono", center: true }));
+    bb.push(...labels);
+    bb.push(words(B, ctx, { text: `00:00-10:00 ${OG.night.tz}`, x: 160, y: 120, size: 84, at: s1 + 0.05, font: "mono" }));
+    bb.push(words(B, ctx, { text: OG.deepseek.off, x: 1050, y: 640, size: 240, at: beat(s1, 1), color: "sheet1", gap: 0.04 }));
+    bb.push(words(B, ctx, { text: OG.deepseek.id, x: 160, y: 680, size: 46, at: beat(s1, 1) + 0.1, font: "mono" }));
+    bb.push(words(B, ctx, { text: `${OG.glm.id}  ${OG.glm.off}`, x: 160, y: 790, size: 46, at: beat(s1, 2), font: "mono" }));
+
+    // 판 C — 정가는 종이 띠 길이. 칼선이 10% 자리로 내려가고 나머지(정가 글자째)가 떼어져 나간다
+    const unit = 1120 / 1.2;
+    const rowsY = [300, 540];
+    const prices = [
+      { label: "입력", from: OG.deepseek.input[0], to: OG.deepseek.input[1], usd: 0.3, color: "sheet2", ink: "ink" },
+      { label: "출력", from: OG.deepseek.output[0], to: OG.deepseek.output[1], usd: 1.2, color: "sheet1", ink: "paper" },
+    ];
+    const trimAt = beat(s2, 1);
+    const cc: ((t: number) => void)[] = [words(C, ctx, { text: `${OG.deepseek.id}  $/M`, x: 160, y: 120, size: 64, at: s2 + 0.04, font: "mono" })];
+    prices.forEach((p, i) => {
+      const y = rowsY[i];
+      const w = Math.round(unit * p.usd);
+      const landAt = i === 0 ? s2 + 0.04 : beat(s2, 0);
+      cc.push(words(C, ctx, { text: p.label, x: 160, y: y + 14, size: 72, at: landAt, font: "sans" }));
+      cc.push(
+        trimBar(C, {
+          ctx,
+          rect: { x: 420, y, w, h: 110 },
+          keep: 0.1,
+          at: trimAt + i * 0.08,
+          landAt,
+          color: p.color,
+          build: (_keep, cut) => {
+            const s = document.createElement("div");
+            s.textContent = p.from;
+            s.style.cssText = `position:absolute;right:22px;top:20px;white-space:pre;line-height:1;font:400 72px ${ctx.style.fonts.display};color:${ctx.style.colors[p.ink]}`;
+            cut.append(s);
+          },
+        }),
+      );
+      cc.push(words(C, ctx, { text: p.to, x: 420 + w * 0.1 + 36, y: y + 6, size: 104, at: trimAt + i * 0.08 + 0.12, color: "ink" }));
+    });
+
+    // 드롭 — 앞 장면이 쌓아 올린 대지 층이 한꺼번에 터진다
+    const burst = layerBurst(layer(root, "z-index:20"), { ctx, drop: 0, layers: 4, origin: [960, 510] });
+
+    // 요청 띠 — 모델 102개가 같은 주소로 지나간다
+    const strip = paperStrip(layer(root, "z-index:30"), { ctx, y: 985, x0: 80, x1: 1840, thick: 60, words: OG.ids, speed: 340, slits: [700, 1260] });
+
+    return (t: number) => {
+      const s = burst(t);
+      applyStyle(frame, s.shake);
+      applyStyle(hero, s.punch);
+      const [aOn, bOn, cOn] = d.paint(t);
+      if (aOn) for (const p of a) p(t);
+      if (bOn) for (const p of bb) p(t);
+      if (cOn) for (const p of cc) p(t);
+      strip(t);
+    };
+  },
+};

package/themes/paper-cutout/sample/style.json

@@ -0,0 +1,104 @@
+{
+  "name": "paper-cutout",
+  "label": "종이 오리기 — 대지에 창을 오려 아래 층이 드러난다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F1EDE4",
+    "surface": "#F8F5EF",
+    "raised": "#E6DFD1",
+    "line": "#CFC6B4",
+    "ink": "#1D2556",
+    "inkSoft": "#2C346B",
+    "dim": "#4A4F6E",
+    "accent": "#E1422F",
+    "accentSoft": "#F3B7A6",
+    "accentText": "#B3301F",
+    "onAccent": "#F8F5EF",
+    "success": "#1D2556",
+    "danger": "#E1422F",
+    "warning": "#EFB02E",
+    "paper": "#F1EDE4",
+    "sheet1": "#E1422F",
+    "sheet2": "#EFB02E",
+    "sheet3": "#1D2556",
+    "sheet1Deep": "#A92E1E",
+    "sheet2Deep": "#B57E12",
+    "sheet3Deep": "#0F1538",
+    "shade": "#3B2615"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Do Hyeon\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"IBM Plex Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Do Hyeon",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/dohyeon/DoHyeon-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": "IBM Plex Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/ibmplexmono/IBMPlexMono-SemiBold.ttf",
+        "weight": "600"
+      }
+    ]
+  },
+  "type": {
+    "hero": 200,
+    "title": 104,
+    "body": 44,
+    "caption": 32,
+    "weightDisplay": 400,
+    "weightBody": 600,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "2px 4px 7px rgba(59, 38, 21, 0.28)",
+    "lift": "8px 16px 22px rgba(59, 38, 21, 0.22)"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "drop",
+    "ease": "outCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.3,
+      "slow": 0.6
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F1EDE4 흰 수채화지 대지 — 화면 대부분",
+      "#E1422F 주홍 · #EFB02E 겨자 · #1D2556 남색 색종이 — 창 안 층과 오린 글자",
+      "#3B2615 그림자 — 빛은 위 왼쪽 한 방향, 높이마다 거리·흐림이 정해져 있다"
+    ],
+    "texture": "옅은 종이 섬유결(서 있다). 모서리는 칼로 자른 곧은 선, 그라데이션 없음 — 어두운 곳은 전부 위 층이 드리운 그림자",
+    "movement": "카메라는 서 있고 종이만 움직인다. 칼선이 그어지고 오린 조각이 들려 떨어지며 아래 층이 드러난다. 종이는 천천히 들리고(그림자가 멀어지며 흐려진다) 빨리 내려앉아 한 번 튄다. 바뀔 때는 위 층이 들려 걷힌다"
+  },
+  "notes": [
+    "출처: Owen Gildersleeve 「Intersections」·「A Dozen Greetings」, Hari & Deepti 라이트박스 — refs/NOTES.md",
+    "글은 남색 종이(ink)로 오린 글자 — 주홍·겨자 종이 위 작은 글은 남색이나 대지 흰색으로만.",
+    "sheet1–3 은 층 색종이 차례(강조·셋째·글 잉크), Deep 은 그 종이가 그림자 속에 있을 때."
+  ]
+}