kasaframe 0.1.1 → 0.1.4

package/themes/film-reel/sample/index.html

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

package/themes/film-reel/sample/kf.json

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

@@ -0,0 +1,9 @@
+import type { SceneCtx } from "@kasaframe/core";
+
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+/** t 뒤 k 번째 박 */
+export const beatAfter = (ctx: SceneCtx, t: number, k = 0): number => beatsIn(ctx).filter((x) => x > t + 0.02)[k] ?? t + 0.35 * (k + 1);
+
+/** 장면 안 마디 경계(0 과 끝 빼고) */
+export const barsIn = (ctx: SceneCtx): number[] => ctx.beats.bars.filter((b) => b > 0.5 && b < ctx.dur - 0.1);

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

@@ -0,0 +1,31 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { filmStrip, leader, titleCard, typeLine } from "../../effects.ts";
+import svg from "../assets/og/logo.svg?raw";
+import { OG } from "../lib/facts.ts";
+import { barsIn, beatsIn } from "../lib/reel.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const swap = barsIn(ctx)[0] ?? 1.42;
+    const strip = filmStrip(root, { ctx, frames: 2, cuts: [swap], edge: [OG.url, OG.site], speed: 200 });
+    const F = strip.frame;
+    const [A, B] = strip.frames;
+    const paints: ((t: number) => void)[] = [strip];
+    // 칸 0 — 첫 토큰까지 = 리더가 한 바퀴 도는 시간. 셋이 같은 순간 출발해 제 ms 만에 돌고 멈춘다(진짜 그 길이)
+    const go = 0.12;
+    OG.ttft.forEach(([id, label, ms], i) => {
+      const cx = F.w * (0.18 + i * 0.32);
+      paints.push(typeLine(A, { ctx, text: id, x: cx, y: 90, size: 40, at: 0.02 + i * 0.08, font: "mono", anchor: "center" }));
+      paints.push(leader(A, { ctx, x: cx, y: 470, r: 230, at: go, sweep: ms / 1000, label }));
+    });
+    paints.push(typeLine(A, { ctx, text: "첫 토큰", x: F.w / 2, y: 790, size: 90, at: go + 0.7, font: "display", anchor: "center" }));
+    paints.push(typeLine(A, { ctx, text: OG.calls, x: F.w / 2, y: 920, size: 48, at: b[3] ?? 1.07, font: "sans", anchor: "center" }));
+    // 칸 1 — 끝 카드(인터타이틀). 아이리스가 열리며 로고·이름, 박에 주소
+    paints.push(titleCard(B, { ctx, rect: { x: 120, y: 90, w: F.w - 240, h: 820 }, lines: [{ text: OG.site, size: 130 }], logo: svg, logoW: 460, at: swap, gap: 40 }));
+    paints.push(typeLine(B, { ctx, text: OG.url, x: F.w / 2, y: 940, size: 50, at: b.find((x) => x > swap + 0.6) ?? swap + 0.8, font: "mono", anchor: "center", color: "accentText" }));
+    return (t: number) => {
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/film-reel/sample/scenes/gather.ts

@@ -0,0 +1,40 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { filmBar, filmStrip, reel, typeLine } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { barsIn, beatsIn } from "../lib/reel.ts";
+
+// 회사 = 릴, 감긴 필름 두께 = 모델 수. 아홉 릴이 칸 안에 흩어져 돈다
+const SPOTS: [number, number][] = [
+  [250, 200], [780, 170], [1300, 220],
+  [500, 520], [1010, 500], [1420, 560],
+  [240, 840], [780, 830], [1300, 850],
+];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const swap = barsIn(ctx)[0] ?? 1.695;
+    const strip = filmStrip(root, { ctx, frames: 2, cuts: [swap], edge: OG.providers.map(([name]) => name), speed: 170 });
+    const [A, B] = strip.frames;
+    const max = Math.max(...OG.providers.map(([, n]) => n));
+    const paints: ((t: number) => void)[] = [strip];
+    // 칸 1 — 박마다 릴 두세 개가 서고 필름이 모델 수만큼 감긴다
+    const opens = [0, 0, 1, 1, 2, 2, 3, 3, 3].map((k, i) => (i === 0 ? 0.02 : (b[k] ?? 0.3 + k * 0.35) + (i % 2) * 0.12 + (i === 8 ? 0.12 : 0)));
+    OG.providers.forEach(([name, n], i) => {
+      const [x, y] = SPOTS[i];
+      paints.push(reel(A, { ctx, x, y, r: 112, amount: n / max, at: opens[i], label: name, labelSize: 36, spin: 160 + i * 23 }));
+    });
+    // 칸 2 — 필름 길이 = 모델 수. 위에서부터 한 줄씩 게이트에서 밀려 나온다
+    OG.providers.forEach(([name, n], i) => {
+      const y = 46 + i * 106;
+      const at = swap + 0.03 + i * 0.13;
+      const w = Math.round((1080 * n) / max);
+      paints.push(typeLine(B, { ctx, text: name, x: 40, y: y + 18, size: 38, at, font: "mono" }));
+      paints.push(filmBar(B, { ctx, x: 330, y, w, h: 74, at, feed: 0.4 }));
+      paints.push(typeLine(B, { ctx, text: String(n), x: 330 + w + 24, y: y + 6, size: 64, at: at + 0.3, font: "display" }));
+    });
+    return (t: number) => {
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/film-reel/sample/scenes/models.ts

@@ -0,0 +1,37 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { cueMark, filmStrip, leader, titleCard, typeLine } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { barsIn, beatAfter, beatsIn } from "../lib/reel.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const [fan, build] = barsIn(ctx);
+    // 칸 0 = 한 주소, 칸 1–5 = 박마다 한 칸씩 넘어가는 모델, 칸 6 = 카운트다운 리더
+    const modelCuts = [fan, ...[0, 1, 2, 3].map((k) => beatAfter(ctx, fan, k))];
+    const cuts = [...modelCuts, build];
+    const strip = filmStrip(root, { ctx, frames: cuts.length + 1, cuts, edge: [OG.host, ...OG.endpoints.map((e) => `POST /v1${e}`)], speed: 220 });
+    const F = strip.frame;
+    const fr = strip.frames;
+    const paints: ((t: number) => void)[] = [strip];
+    paints.push(titleCard(fr[0], { ctx, rect: { x: 180, y: 120, w: F.w - 360, h: 560 }, lines: [{ text: "한 주소", size: 150 }, { text: OG.host, size: 76, font: "mono" }], at: 0.02 }));
+    OG.endpoints.forEach((e, i) => paints.push(typeLine(fr[0], { ctx, text: e, x: (F.w - 1573) / 2 + [0, 489, 793, 1071][i], y: 790, size: 44, at: (b[i] ?? 0.35 * i) + 0.1, font: "mono" })));
+    // 같은 주소에 모델만 바뀐다 — 칸마다 위에 주소, 가운데 모델 ID
+    OG.ids.forEach((id, i) => {
+      const f = fr[i + 1];
+      const [prov, name] = id.split("/");
+      const at = modelCuts[i];
+      paints.push(typeLine(f, { ctx, text: OG.host, x: F.w / 2, y: 110, size: 46, at: at - 0.2, font: "mono", anchor: "center", cps: 400, color: "dim" }));
+      paints.push(typeLine(f, { ctx, text: `${prov}/`, x: F.w / 2, y: 380, size: 60, at: at + 0.02, font: "mono", anchor: "center", cps: 200 }));
+      paints.push(typeLine(f, { ctx, text: name, x: F.w / 2, y: 480, size: Math.min(110, Math.floor((F.w - 120) / (name.length * 0.6))), at: at + 0.06, font: "mono", anchor: "center", cps: 160 }));
+    });
+    // 릴을 갈아 끼우기 직전 — 오른쪽 위 교체 신호
+    paints.push(cueMark(root, { ctx, times: modelCuts.slice(1) }));
+    // 드롭 앞 — 리더가 박마다 4·3·2·1
+    const marks = b.filter((x) => x >= build - 0.02).slice(0, 4).map((t, i) => ({ t, text: String(4 - i) }));
+    paints.push(leader(fr[fr.length - 1], { ctx, x: F.w / 2, y: F.h / 2, r: 440, marks }));
+    return (t: number) => {
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/film-reel/sample/scenes/price.ts

@@ -0,0 +1,63 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { filmBar, filmStrip, gateJump, grease, titleCard, typeLine } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { barsIn, beatAfter } from "../lib/reel.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const [s1, s2] = barsIn(ctx);
+    const frame = document.createElement("div");
+    frame.style.cssText = "position:absolute;inset:0";
+    root.append(frame);
+    const strip = filmStrip(frame, { ctx, frames: 3, cuts: [s1, s2], edge: OG.ids, speed: 260 });
+    const F = strip.frame;
+    const [A, B, C] = strip.frames;
+    const paints: ((t: number) => void)[] = [strip];
+    // 칸 0 — 드롭에 필름이 게이트를 튀고 102 칸에 선다
+    // 주인공은 102 카드 자리만 — 드롭의 한 번 튐도 여기에
+    const hero = document.createElement("div");
+    hero.style.cssText = `position:absolute;left:80px;top:90px;width:${F.w - 160}px;height:540px`;
+    hero.dataset.kfHero = "";
+    A.append(hero);
+    paints.push(titleCard(hero, { ctx, rect: { x: 0, y: 0, w: F.w - 160, h: 540 }, lines: [{ text: String(OG.models), size: 440 }], at: 0, frame: false }));
+    paints.push(typeLine(A, { ctx, text: "모델", x: F.w / 2, y: 640, size: 120, at: beatAfter(ctx, 0, 0), font: "display", anchor: "center" }));
+    paints.push(typeLine(A, { ctx, text: "한 주소", x: F.w / 2, y: 780, size: 96, at: beatAfter(ctx, 0, 1), font: "display", anchor: "center" }));
+    paints.push(typeLine(A, { ctx, text: OG.host, x: F.w / 2, y: 910, size: 52, at: beatAfter(ctx, 0, 2), font: "mono", anchor: "center" }));
+    const jump = gateJump(root, { ctx, drop: 0 });
+
+    // 칸 1 — 하루 = 필름 24칸. 영사 빛이 칸 위를 지나가고, 00–10시 칸에 편집 연필 동그라미와 -90%
+    const cw = (F.w - 120) / 24;
+    paints.push(typeLine(B, { ctx, text: `00:00-10:00 ${OG.night.tz}`, x: 60, y: 70, size: 70, at: s1 + 0.04, font: "mono" }));
+    paints.push(filmBar(B, { ctx, x: 60, y: 300, w: F.w - 120, h: 230, at: s1 + 0.06, feed: 0.35, cells: 24, scan: 1.2 }));
+    [0, 6, 12, 18].forEach((h, i) => paints.push(typeLine(B, { ctx, text: String(h).padStart(2, "0"), x: 60 + h * cw + cw / 2, y: 560, size: 44, at: s1 + 0.2 + i * 0.06, font: "mono", anchor: "center" })));
+    const ring = (cx: number, cy: number, rx: number, ry: number) => Array.from({ length: 33 }, (_, k) => [cx + Math.cos((k / 32) * Math.PI * 2.15 - 0.3) * rx, cy + Math.sin((k / 32) * Math.PI * 2.15 - 0.3) * ry] as [number, number]);
+    const nightAt = beatAfter(ctx, s1, 0);
+    paints.push(grease(B, { ctx, points: ring(60 + 5 * cw, 415, 5 * cw + 40, 175), at: nightAt, dur: 0.32 }));
+    paints.push(typeLine(B, { ctx, text: OG.deepseek.off, x: 60 + 5 * cw, y: 660, size: 170, at: beatAfter(ctx, s1, 1), font: "display", anchor: "center", color: "accentText" }));
+    paints.push(typeLine(B, { ctx, text: `${OG.glm.id}  ${OG.glm.off}`, x: 760, y: 720, size: 44, at: beatAfter(ctx, s1, 2), font: "mono" }));
+
+    // 칸 2 — 정가는 필름 길이. 10% 자리에 X 를 긋고 나머지를 잘라 낸다
+    const cut = beatAfter(ctx, s2, 1);
+    const unit = (F.w - 520) / 1.2;
+    paints.push(typeLine(C, { ctx, text: `${OG.deepseek.id}  $/M`, x: 60, y: 70, size: 58, at: s2 + 0.04, font: "mono" }));
+    const rows: [string, string, string, number, number][] = [
+      ["입력", OG.deepseek.input[0], OG.deepseek.input[1], 0.3, 300],
+      ["출력", OG.deepseek.output[0], OG.deepseek.output[1], 1.2, 580],
+    ];
+    rows.forEach(([label, from, to, usd, y], i) => {
+      const at = i === 0 ? s2 + 0.05 : beatAfter(ctx, s2, 0);
+      const w = unit * usd;
+      paints.push(typeLine(C, { ctx, text: label, x: 60, y: y + 20, size: 64, at, font: "sans" }));
+      paints.push(filmBar(C, { ctx, x: 260, y, w, h: 110, at, feed: 0.3, label: from, cutAt: cut + i * 0.06, keep: 0.1 }));
+      paints.push(typeLine(C, { ctx, text: to, x: 260 + w * 0.1 + 30, y: y + 12, size: 84, at: cut + i * 0.06 + 0.3, font: "display" }));
+    });
+    paints.push(typeLine(C, { ctx, text: OG.deepseek.off, x: F.w - 60 - 4 * 100, y: 820, size: 150, at: cut + 0.5, font: "display", color: "accentText" }));
+
+    return (t: number) => {
+      const s = jump(t);
+      applyStyle(frame, s.shake);
+      applyStyle(hero, s.punch);
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/film-reel/sample/style.json

@@ -0,0 +1,103 @@
+{
+  "name": "film-reel",
+  "label": "필름 영사 — 요청이 필름 한 칸이 되어 게이트를 지난다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F3EDE2",
+    "surface": "#FBF7EF",
+    "raised": "#E8DFCF",
+    "line": "#CDBFA8",
+    "ink": "#24170F",
+    "inkSoft": "#3A2A1E",
+    "dim": "#5E4B3C",
+    "accent": "#D8342B",
+    "accentSoft": "#F2C3BB",
+    "accentText": "#B52A22",
+    "onAccent": "#FFFFFF",
+    "success": "#2F7A4A",
+    "danger": "#D8342B",
+    "warning": "#B9772A",
+    "base": "#C27A43",
+    "baseDeep": "#8F5329",
+    "hole": "#F7F1E6",
+    "edge": "#3A2516",
+    "track": "#1E1611",
+    "leader": "#8E86D8"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Gasoek One\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Courier Prime\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Gasoek One",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/gasoekone/GasoekOne-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": "Courier Prime",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/courierprime/CourierPrime-Bold.ttf",
+        "weight": "700"
+      }
+    ]
+  },
+  "type": {
+    "hero": 200,
+    "title": 104,
+    "body": 44,
+    "caption": 32,
+    "weightDisplay": 400,
+    "weightBody": 600,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 6,
+    "md": 14,
+    "lg": 22,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "slide",
+    "ease": "outCubic",
+    "durations": {
+      "fast": 0.1,
+      "base": 0.25,
+      "slow": 0.5
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F3EDE2 칸 안 — 영사된 빛",
+      "#C27A43 네거티브 베이스 주황 · #F7F1E6 구멍 · #3A2516 가장자리 글",
+      "#D8342B 편집 연필(그리스 펜슬) 빨강 — 강조",
+      "#8E86D8 카운트다운 리더 보라 · #1E1611 사운드트랙 띠"
+    ],
+    "texture": "세로 필름 띠 — 양 가장자리 구멍과 가장자리 글, 왼쪽 광학 사운드트랙 물결, 칸 사이 얇은 칸 줄, 둥근 칸 모서리. 긁힘·먼지·깜빡임 없음",
+    "movement": "가장자리(구멍·가장자리 글·사운드트랙)는 늘 같은 박자로 흐르고, 칸 안은 서 있다가 컷에서 한 칸이 위로 끌려 올라간다(간헐 이송). 리더 숫자는 박마다 하나씩 줄고 쐐기가 돈다. 편집 연필 표시는 손으로 긋는다"
+  },
+  "notes": [
+    "출처: 카운트다운 리더·Keykode·35mm 네거티브(Wikimedia Commons) — refs/NOTES.md",
+    "가장자리 글은 브리프의 주소·모델 ID 만 — 실제 Keykode 숫자·상표를 쓰지 않는다.",
+    "칸 안 글은 ink(짙은 갈색) — 주황 베이스 위 글은 edge 로만, 작게."
+  ]
+}

package/themes/film-reel/slots.ts

@@ -0,0 +1,75 @@
+import { clamp, ease, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, shownCount, traceCanvas } from "@kasaframe/themes/slotkit";
+import { filmStrip, gateJump } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 필름 결로. 바탕은 서 있는 필름 한 칸, 판은 인터타이틀, 선은 편집 연필
+export const slots: ThemeSlots = {
+  // 게이트에 걸린 칸 하나 — 가장자리는 서 있다(바탕은 움직이지 않는다)
+  surface(el, { ctx }) {
+    return filmStrip(el, { ctx, frames: 1, speed: 0 });
+  },
+
+  // 인터타이틀 판 — 두 줄 장식 테, at 에 아이리스가 열린다. 강조 판은 리더 보라
+  panel(el, { at, tone }) {
+    const p = layer(el, `inset:0;box-sizing:border-box;background:${tone === "accent" ? "var(--kf-leader, var(--kf-accent))" : "var(--kf-surface)"};border:4px solid var(--kf-ink);outline:2px solid var(--kf-ink);outline-offset:-12px`, true);
+    return (t) => {
+      const k = t - at;
+      p.style.display = k < 0 ? "none" : "";
+      if (k >= 0) p.style.clipPath = k >= 0.3 ? "" : `circle(${(ease.outCubic(k / 0.3) * 75).toFixed(1)}% at 50% 50%)`;
+    };
+  },
+
+  // 칸이 들어와 앉는다 — 갈고리가 끌어내린 듯 위에서 툭 내려와 선다
+  land(_el, { at }) {
+    return (t): Style => {
+      const k = t - at;
+      if (k < 0) return {};
+      if (k < 0.12) return { y: -60 * (1 - ease.outCubic(k / 0.12)) };
+      return {};
+    };
+  },
+
+  // 타자기 — 한 자씩 찍힌다
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    return (t) => {
+      const n = shownCount(spans.length, t, at, dur);
+      spans.forEach((s, i) => (s.style.visibility = i < n ? "visible" : "hidden"));
+    };
+  },
+
+  // 편집 연필 — 빨간 선이 손으로 그어지고, 다 그은 뒤엔 영사 빛 점이 선을 따라 간다
+  trace(el, { ctx, points, at, dur }) {
+    const { g, clear } = traceCanvas(el, points, 30);
+    const red = ctx.style.colors.accent ?? "#D8342B";
+    const len = points.slice(1).reduce((s, q, i) => s + Math.hypot(q[0] - points[i][0], q[1] - points[i][1]), 0);
+    return (t) => {
+      clear();
+      const k = t - at;
+      if (k < 0) return;
+      const p = clamp(k / Math.max(0.05, dur));
+      const pts = partial(points, p);
+      if (pts.length < 2) return;
+      g.strokeStyle = red;
+      g.lineCap = "round";
+      g.lineJoin = "round";
+      g.lineWidth = 7;
+      g.beginPath();
+      g.moveTo(pts[0][0], pts[0][1]);
+      for (const q of pts.slice(1)) g.lineTo(q[0], q[1]);
+      g.stroke();
+      if (p < 1 || len < 1) return;
+      const head = partial(points, (((k - dur) * 0.6) % 1 + 1) % 1);
+      const h = head[head.length - 1];
+      g.fillStyle = ctx.style.colors.ink ?? "#24170F";
+      g.beginPath();
+      g.arc(h[0], h[1], 9, 0, Math.PI * 2);
+      g.fill();
+    };
+  },
+
+  drop(el, { ctx, drop }) {
+    return gateJump(el, { ctx, drop });
+  },
+};

package/themes/film-reel/style.json

@@ -0,0 +1,103 @@
+{
+  "name": "film-reel",
+  "label": "필름 영사 — 요청이 필름 한 칸이 되어 게이트를 지난다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F3EDE2",
+    "surface": "#FBF7EF",
+    "raised": "#E8DFCF",
+    "line": "#CDBFA8",
+    "ink": "#24170F",
+    "inkSoft": "#3A2A1E",
+    "dim": "#5E4B3C",
+    "accent": "#D8342B",
+    "accentSoft": "#F2C3BB",
+    "accentText": "#B52A22",
+    "onAccent": "#FFFFFF",
+    "success": "#2F7A4A",
+    "danger": "#D8342B",
+    "warning": "#B9772A",
+    "base": "#C27A43",
+    "baseDeep": "#8F5329",
+    "hole": "#F7F1E6",
+    "edge": "#3A2516",
+    "track": "#1E1611",
+    "leader": "#8E86D8"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Gasoek One\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Courier Prime\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Gasoek One",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/gasoekone/GasoekOne-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": "Courier Prime",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/courierprime/CourierPrime-Bold.ttf",
+        "weight": "700"
+      }
+    ]
+  },
+  "type": {
+    "hero": 200,
+    "title": 104,
+    "body": 44,
+    "caption": 32,
+    "weightDisplay": 400,
+    "weightBody": 600,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 6,
+    "md": 14,
+    "lg": 22,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "slide",
+    "ease": "outCubic",
+    "durations": {
+      "fast": 0.1,
+      "base": 0.25,
+      "slow": 0.5
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F3EDE2 칸 안 — 영사된 빛",
+      "#C27A43 네거티브 베이스 주황 · #F7F1E6 구멍 · #3A2516 가장자리 글",
+      "#D8342B 편집 연필(그리스 펜슬) 빨강 — 강조",
+      "#8E86D8 카운트다운 리더 보라 · #1E1611 사운드트랙 띠"
+    ],
+    "texture": "세로 필름 띠 — 양 가장자리 구멍과 가장자리 글, 왼쪽 광학 사운드트랙 물결, 칸 사이 얇은 칸 줄, 둥근 칸 모서리. 긁힘·먼지·깜빡임 없음",
+    "movement": "가장자리(구멍·가장자리 글·사운드트랙)는 늘 같은 박자로 흐르고, 칸 안은 서 있다가 컷에서 한 칸이 위로 끌려 올라간다(간헐 이송). 리더 숫자는 박마다 하나씩 줄고 쐐기가 돈다. 편집 연필 표시는 손으로 긋는다"
+  },
+  "notes": [
+    "출처: 카운트다운 리더·Keykode·35mm 네거티브(Wikimedia Commons) — refs/NOTES.md",
+    "가장자리 글은 브리프의 주소·모델 ID 만 — 실제 Keykode 숫자·상표를 쓰지 않는다.",
+    "칸 안 글은 ink(짙은 갈색) — 주황 베이스 위 글은 edge 로만, 작게."
+  ]
+}