kasaframe 0.1.1 → 0.1.4

package/themes/depth-flight/variants/slate-violet.json

@@ -0,0 +1,121 @@
+{
+  "id": "slate-violet",
+  "world": "depth-flight",
+  "name": "Slate Violet",
+  "desc": "짙은 회색 바탕에 보라 강조 · 또렷한 기하 고딕 · 고운 필름 입자",
+  "params": {
+    "scheme": "dark",
+    "bgL": 0.1548,
+    "tint": {
+      "h": 241.6761,
+      "c": 0.0185
+    },
+    "inkL": 0.9389,
+    "hue": 288.3008,
+    "chroma": 1.0364,
+    "fonts": "suit",
+    "texture": {
+      "kind": "grain",
+      "amount": 0.55
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 1.14,
+    "density": 1
+  },
+  "style": {
+    "scheme": "dark",
+    "colors": {
+      "bg": "#060D13",
+      "surface": "#0E1824",
+      "raised": "#241E34",
+      "line": "#342B4C",
+      "ink": "#E6ECF0",
+      "inkSoft": "#CFCAEA",
+      "dim": "#958AB9",
+      "accent": "#8D73FC",
+      "accentSoft": "#B9B4F9",
+      "accentText": "#B3AAF9",
+      "accentDeep": "#3A266F",
+      "onAccent": "#060D13",
+      "success": "#5EE6A8",
+      "danger": "#FF6B6B",
+      "warning": "#FFB547",
+      "metal": "#C3CCD0",
+      "glow": "#978DFD"
+    },
+    "fonts": {
+      "sans": "\"SUIT Variable\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"SUIT Variable\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"JetBrains Mono\", ui-monospace, \"SUIT Variable\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "SUIT Variable",
+          "src": "https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2.0.5/fonts/variable/ttf/SUIT-Variable.ttf",
+          "weight": "100 900"
+        },
+        {
+          "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": {
+      "weightDisplay": 800,
+      "weightBody": 500,
+      "tracking": "-0.02em"
+    },
+    "look": {
+      "texture": {
+        "kind": "grain",
+        "amount": 0.55
+      },
+      "tempo": 1.14
+    }
+  },
+  "tags": {
+    "mood": [
+      "웅장한",
+      "깊이",
+      "미래적",
+      "몰입",
+      "어두운",
+      "차가운",
+      "아날로그"
+    ],
+    "light": "dark",
+    "use": [
+      "제품 공개",
+      "홍보",
+      "기술",
+      "인프라",
+      "발표"
+    ],
+    "dims": "3D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-11",
+    "colors": {
+      "ink": 16.35,
+      "inkSoft": 12.39,
+      "dim": 6.15,
+      "accentText": 9.29,
+      "accent": 5.56,
+      "onAccent": 5.56,
+      "success~danger": 0.117,
+      "success~warning": 0.107,
+      "danger~warning": 0.127,
+      "accent~danger": 0.235,
+      "accent~ink": 0.305
+    },
+    "frame": "kf check 통과 — 끝 구간 3.183–4초(입체라 가볍게)·끝 프레임 한 장",
+    "pattern": "hook-number.roll"
+  }
+}

package/themes/film-reel/THEME.md

@@ -0,0 +1,60 @@
+# 필름 영사 `film-reel`
+
+**비유: 요청이 필름 한 칸이 되어 게이트를 지난다 — 필름은 늘 돌고(처리량), 장면은 한 칸씩 끌려 넘어가며, 첫 칸까지는 리더가 센다(지연).** 화면은 영사기 게이트에 걸린 35mm 필름 한 칸이다. 양 가장자리의 구멍·가장자리 글·광학 사운드트랙은 쉬지 않고 흐르고, 칸 안은 서 있다가 컷에서 갈고리가 칸을 끌어내려 다음 칸이 선다.
+
+## 기술 개념이 이 세계에서 되는 것
+
+| 개념 | 필름 영사에서 | 효과 |
+|---|---|---|
+| 요청 | 필름 한 칸 — 가장자리 글에 요청 경로·모델 ID 가 찍혀 흐른다 | `filmStrip` edge |
+| 처리량 | 필름이 도는 빠르기(초당 칸 수) | `filmStrip` speed |
+| 게이트웨이·한 주소 | 영사기 게이트 — 모든 칸이 이 한 창을 지난다 | `filmStrip` |
+| 모델 | 릴 하나 — 모델을 바꾸면 교체 신호가 뜨고 다음 릴의 칸이 선다(주소는 그대로) | `cueMark` · `pullDown` |
+| 공급자(회사) | 릴 — 감긴 필름 두께가 그 회사의 값(모델 수) | `reel` |
+| 지연(첫 토큰) | 리더 — 첫 칸이 뜨기까지 쐐기가 한 바퀴 도는 시간(그 ms 그대로) | `leader` sweep |
+| 비용 | 필름 길이. 할인은 편집 연필 X 뒤 잘라 낸 몫 | `filmBar` cutAt |
+| 시간대 가격 | 하루 = 필름 24칸, 영사 빛이 칸 위를 지나가고 싼 칸에 연필 동그라미 | `filmBar` cells·scan · `grease` |
+| 폴백 | 교체 신호 뒤 둘째 영사기로 넘어간다 | `cueMark` |
+| 캐시 | 이미 현상된 칸 — 다시 찍지 않고 바로 건다 | `titleCard` |
+
+## 맞는 내용·용도
+
+- 차례대로 넘어가는 이야기(단계·순서·버전), 카운트다운이 있는 공개·예고, 길이·시간으로 비교하는 값(지연·비용·분량).
+- 용도: 홍보(promo)·공개(launch)·쇼츠(shorts)·뮤비(mv)·피드(square). 박이 또렷한 곡 — 칸이 박에 넘어간다.
+- 화면 글은 칸 안(Gasoek One 큰 글·Pretendard·Courier Prime 타자기)과 가장자리 글(Courier Prime, 작게)뿐. 주소·모델 ID·숫자·짧은 낱말.
+
+## 금지
+
+- 긁힘·먼지·플리커(깜빡임)·번짐·필름 타는 구멍 — 낡음 흉내는 뜻이 없고, 깜빡임은 섬광 검사에 걸린다.
+- 실제 Keykode 숫자·필름 회사 상표 — 가장자리 글은 브리프의 주소·모델 ID 만.
+- 칸을 나눠 여러 그림을 한 화면에 늘어놓기(만화 칸 — manga-panel 몫). 화면 = 한 칸.
+- 칸 안을 미끄러뜨리거나 카메라처럼 움직이기 — 칸은 서 있고, 넘어갈 때만 갈고리가 한 번에 끌어내린다. 흔들림은 드롭의 `gateJump` 가 돌려준 값을 필름 틀에 한 번.
+- 슬로건·감성 문장.
+
+## 움직임
+
+- 쉬지 않는다: 가장자리 구멍·가장자리 글·사운드트랙 물결이 같은 빠르기로 늘 흐른다(필름이 돈다). 칸 안 내용(릴이 돌고, 막대가 밀려 나오고, 글이 찍힌다)이 박을 맞춘다.
+- 구도는 마디마다 바꾼다: 칸이 끌려 올라가고 다음 칸이 선다(`pullDown`). 모델처럼 박마다 바뀌는 것은 박마다 한 칸.
+- 박마다 큰 사건 하나: 칸 넘김, 릴이 서고 감김, 필름 막대가 밀려 나옴, 리더 숫자가 줄어듦, 편집 연필이 그어지고 잘림, 아이리스가 열림.
+- 드롭: 앞 마디에 카운트다운 리더가 박마다 4·3·2·1, 드롭에 필름이 게이트를 튀며 몇 칸이 한꺼번에 지나가고 102 칸에 선다.
+
+## 효과
+
+같은 레포 안에서는 `effects.ts` 를 바로, 프로젝트에서는 `fx("film-reel")`. `filmStrip` 을 먼저 깔고 그 `.frames[i]`(칸 하나, 좌표는 칸 기준 — 너비 `.frame.w`)에 내용을 짓는다. layer 는 `build` 에서 만들고 `(t) => …` 에서 부른다.
+
+| 효과 | 꼴 | 하는 일 |
+|---|---|---|
+| `filmStrip` | layer | 필름 띠 — 흐르는 가장자리, 칸 넘김, `.frames` |
+| `pullDown` | value | 간헐 이송 — 지나간 칸 수 |
+| `leader` | layer | 카운트다운 리더 — 박마다 숫자 / sweep 초만큼 한 바퀴 |
+| `titleCard` | layer | 인터타이틀 — 장식 테·로고, 아이리스로 열린다 |
+| `reel` | layer | 릴 — 감긴 두께 = 값, 늘 돈다 |
+| `filmBar` | layer | 필름 막대 — 길이 = 값, 잘라 내기, 24칸·영사 빛 |
+| `grease` | layer | 편집 연필 — 동그라미·밑줄·화살표 |
+| `cueMark` | layer | 교체 신호 — 바뀌기 직전 동그라미 |
+| `gateJump` | layer | 드롭 — 게이트 튐, shake·punch |
+| `typeLine` | layer | 타자기 글 |
+
+색 키: `base`·`baseDeep`(필름 베이스) · `hole`(구멍) · `edge`(가장자리 글) · `track`(사운드트랙) · `leader`(리더 보라) · `accent`(편집 연필 빨강) · `bg`(칸 안 빛) · `ink`(칸 안 글).
+
+견본: `sample/` — OpenGateway 소개 15초(docs/briefs/og-intro-15s.md), 곡 kawaii-friends.mp3 4–19초(드롭 7.34초). 회사 아홉 = 릴(감긴 두께 = 모델 수) → 필름 길이 = 모델 수 → 인터타이틀 「한 주소」와 형식 넷 → 박마다 한 칸씩 넘어가는 모델 ID(같은 주소, 교체 신호) → 리더 4·3·2·1 → 드롭에 게이트를 튀며 102 → 하루 24칸 위 영사 빛, 00–10시 연필 동그라미 -90% → 정가 필름을 10% 에서 잘라 냄 → 첫 토큰 = 리더가 그 ms 만큼 도는 시간(612.5·693.0·760.5) → 로고 인터타이틀.

package/themes/film-reel/effects.ts

@@ -0,0 +1,477 @@
+import { clamp, ease, noise1, rand, type SceneCtx } from "@kasaframe/core";
+import { dropBurst, type DropBurstState } from "@kasaframe/motion";
+import { partial, type Pt } from "@kasaframe/themes/slotkit";
+
+export type { SceneCtx };
+
+const col = (ctx: SceneCtx, key: string): string => ctx.style.colors[key] ?? key;
+
+function div(doc: Document, css: string, parent?: HTMLElement): HTMLDivElement {
+  const d = doc.createElement("div");
+  d.style.cssText = `position:absolute;${css}`;
+  parent?.append(d);
+  return d;
+}
+
+function canvasIn(el: HTMLElement, x: number, y: number, w: number, h: number): { g: CanvasRenderingContext2D; clear(): void } {
+  const c = el.ownerDocument.createElement("canvas");
+  c.width = Math.max(1, Math.ceil(w));
+  c.height = Math.max(1, Math.ceil(h));
+  c.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:${Math.ceil(w)}px;height:${Math.ceil(h)}px;pointer-events:none`;
+  el.append(c);
+  const g = c.getContext("2d")!;
+  g.translate(-x, -y);
+  return { g, clear: () => g.clearRect(x, y, w, h) };
+}
+
+/** 필름 띠 치수 — 가로 화면은 양옆 가장자리, 세로 화면도 폭의 몫으로 */
+function gauge35(ctx: SceneCtx) {
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  // 세로 화면은 내용이 폭을 거의 다 쓴다 — 가장자리를 얇게 해 칸이 내용 자리를 덮게
+  const left = Math.round(W * (W > H ? 0.085 : 0.05));
+  // 오른쪽 가장자리엔 구멍 안쪽에 가장자리 글이 선다 — 플랫폼 안전 영역 안에 들게 넓게
+  const right = Math.round(W * (W > H ? 0.09 : 0.05));
+  return { W, H, left, right, x: left, w: W - left - right, gap: Math.round(Math.min(W, H) * 0.018), pitch: H };
+}
+
+/**
+ * 간헐 이송 — 컷마다 갈고리가 칸 하나를 0.3초에 끌어내리고 멈춘다. 지나간 칸 수(실수)를 돌려준다
+ */
+export function pullDown(t: number, o: { cuts: number[]; dur?: number }): number {
+  const dur = o.dur ?? 0.3;
+  let n = 0;
+  for (const c of o.cuts) n += ease.inOutCubic(clamp((t - c) / dur));
+  return n;
+}
+
+export interface StripOpts {
+  ctx: SceneCtx;
+  /** 칸 수(장면 안 판 수) */
+  frames: number;
+  /** 다음 칸으로 넘어가는 시각 */
+  cuts?: number[];
+  /** 가장자리 글 — 요청 경로·모델 ID 같은 실제 글만, 되풀이된다 */
+  edge?: string[];
+  /** 필름이 흐르는 빠르기(px/초) = 처리량. 0 이면 서 있다(바탕) */
+  speed?: number;
+  /** 왼쪽 광학 사운드트랙. 기본 true */
+  track?: boolean;
+}
+
+/**
+ * 필름 띠 — 화면 = 게이트에 걸린 칸 하나. 양 가장자리 구멍·가장자리 글·사운드트랙 물결은 늘 같은 빠르기로 흐르고(요청 흐름),
+ * cuts 에 갈고리가 필름을 한 칸 끌어내린다 — 가장자리는 한 칸만큼 미끄러지고, 칸 안은 영사기처럼 셔터 뒤에서 「툭」 바뀐다
+ * (칸째 화면을 훑으면 칸 줄 띠가 화면 전체를 쓸어 섬광이 된다). 돌려준 paint 의 .frames[i] 에 칸마다 내용을 짓는다
+ */
+export function filmStrip(el: HTMLElement, o: StripOpts): ((t: number) => void) & { frames: HTMLDivElement[]; frame: { x: number; w: number; h: number } } {
+  const { ctx } = o;
+  const doc = el.ownerDocument;
+  const G = gauge35(ctx);
+  const base = col(ctx, "base");
+  div(doc, `inset:0;background:${base}`, el);
+  const film = div(doc, "inset:0;overflow:hidden", el);
+  const frames = Array.from({ length: o.frames }, () => {
+    const f = div(doc, `left:${G.x}px;top:0;width:${G.w}px;height:${G.pitch - G.gap * 2}px;border-radius:${Math.round(G.gap * 1.4)}px;background:${col(ctx, "bg")};overflow:hidden`, film);
+    return f;
+  });
+  // 구멍 — 한 칸에 여덟, 둥근 네모. 간격이 화면 높이의 1/8 이라 구멍이 흘러도 화면 칸칸의 밝기가 같다(섬광 검사)
+  const perf = G.pitch / 8;
+  const holeW = Math.round(Math.min(G.left, G.right) * 0.42);
+  const holeH = Math.round(perf * 0.5);
+  const column = (cx: number) => {
+    const c = div(doc, `left:${cx - holeW / 2}px;top:0;width:${holeW}px;height:${G.H + perf * 2}px`, el);
+    for (let i = 0; i < Math.ceil(G.H / perf) + 3; i++) div(doc, `left:0;top:${i * perf + (perf - holeH) / 2}px;width:${holeW}px;height:${holeH}px;border-radius:${Math.round(holeW * 0.22)}px;background:${col(ctx, "hole")}`, c);
+    return c;
+  };
+  const trackW = o.track === false ? 0 : Math.round(G.left * 0.3);
+  const cols = [column(G.left * 0.32), column(G.W - G.right * 0.38)];
+  const wave = trackW ? canvasIn(el, G.left - trackW - 10, 0, trackW, G.H) : null;
+  // 가장자리 글 — 오른쪽 가장자리를 따라 세로로, 글자마다 자리를 셈으로(고정폭 한 칸 = 0.6em)
+  const size = Math.max(14, Math.round(G.right * 0.2));
+  const cw = size * 0.6;
+  const unit = Array.from((o.edge ?? []).map((w) => `${w}  ▸  `).join(""));
+  const loop = unit.length * cw;
+  const ex = G.W - G.right + 6;
+  const top = ctx.safe?.top || Math.round(G.H * 0.06);
+  const bottom = G.H - (ctx.safe?.bottom || Math.round(G.H * 0.06));
+  const chars = loop
+    ? Array.from({ length: unit.length * (Math.ceil(G.H / loop) + 2) }, (_, i) => {
+        const s = doc.createElement("span");
+        s.textContent = unit[i % unit.length];
+        s.style.cssText = `position:absolute;left:${ex}px;top:0;font:700 ${size}px ${ctx.style.fonts.mono};color:${col(ctx, "edge")};line-height:1;transform-origin:0 0;white-space:pre`;
+        el.append(s);
+        return s;
+      })
+    : [];
+  const speed = o.speed ?? 160;
+  const paint = (t: number) => {
+    const n = pullDown(t, { cuts: o.cuts ?? [] });
+    // 컷마다 갈고리가 구멍 한 칸만큼 「툭」 끌어당긴다 — 칸 하나를 통째로 뛰면 구멍 무늬가 겹쳐 보여 한 프레임만 튄다
+    const scroll = speed * t + n * perf;
+    // 칸 안은 박에 바로 바뀌고(셔터 뒤) 가장자리만 0.3초에 끌려간다 — 가장자리가 한 칸을 단숨에 뛰면 한 프레임만 튀어 보인다
+    const cur = Math.ceil(n - 1e-4);
+    frames.forEach((f, i) => {
+      f.style.display = i === cur ? "" : "none";
+      f.style.transform = `translateY(${G.gap}px)`;
+    });
+    for (const c of cols) c.style.transform = `translateY(${(-((scroll % perf) + perf) % perf).toFixed(1)}px)`;
+    if (wave) {
+      // 광학 사운드트랙 — 가변 면적 물결이 필름과 같이 흐른다
+      const { g, clear } = wave;
+      clear();
+      const x0 = G.left - trackW - 10;
+      g.fillStyle = col(ctx, "track");
+      g.fillRect(x0, 0, trackW, G.H);
+      g.fillStyle = col(ctx, "hole");
+      g.beginPath();
+      const mid = x0 + trackW / 2;
+      for (let y = 0; y <= G.H; y += 3) {
+        const s = (y + scroll) * 0.045;
+        const a = (0.18 + 0.32 * Math.abs(noise1("track", s * 0.35)) + 0.12 * Math.abs(Math.sin(s * 2.1))) * trackW;
+        if (y === 0) g.moveTo(mid - a, y);
+        else g.lineTo(mid - a, y);
+      }
+      for (let y = G.H; y >= 0; y -= 3) {
+        const s = (y + scroll) * 0.045;
+        const a = (0.18 + 0.32 * Math.abs(noise1("track", s * 0.35)) + 0.12 * Math.abs(Math.sin(s * 2.1))) * trackW;
+        g.lineTo(mid + a, y);
+      }
+      g.closePath();
+      g.fill();
+    }
+    if (loop) {
+      // 필름은 위로 흐른다 — 글자도 같이 올라간다
+      const off = -(((scroll % loop) + loop) % loop);
+      chars.forEach((s, i) => {
+        const y = off + i * cw;
+        const on = y > top && y + cw < bottom;
+        s.style.visibility = on ? "visible" : "hidden";
+        if (on) s.style.transform = `translate(${size}px, ${y.toFixed(1)}px) rotate(90deg)`;
+      });
+    }
+  };
+  return Object.assign(paint, { frames, frame: { x: G.x, w: G.w, h: G.pitch - G.gap * 2 } });
+}
+
+/**
+ * 카운트다운 리더 — 원 두 겹·십자·큰 숫자, 쐐기가 시계 바늘처럼 돌며 지난 몫이 짙어진다.
+ * marks 의 시각마다 숫자 하나(드롭 앞 4·3·2·1). sweep 을 주면 at 부터 sweep 초 동안 한 바퀴 — 첫 칸까지 걸린 시간
+ */
+export function leader(el: HTMLElement, o: { ctx: SceneCtx; x: number; y: number; r: number; marks?: { t: number; text: string }[]; at?: number; sweep?: number; label?: string; tint?: string }): (t: number) => void {
+  const { ctx } = o;
+  const doc = el.ownerDocument;
+  const box = div(doc, `left:${o.x - o.r}px;top:${o.y - o.r}px;width:${o.r * 2}px;height:${o.r * 2}px`, el);
+  const { g, clear } = canvasIn(box, 0, 0, o.r * 2, o.r * 2);
+  const num = div(doc, `left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font:400 ${Math.round(o.r * 0.95)}px ${ctx.style.fonts.display};color:${col(ctx, "ink")};line-height:1`, box);
+  const tint = col(ctx, o.tint ?? "leader");
+  const ink = col(ctx, "ink");
+  const R = o.r;
+  return (t) => {
+    const marks = o.marks ?? [];
+    let cur = -1;
+    marks.forEach((m, i) => {
+      if (t >= m.t) cur = i;
+    });
+    const start = o.sweep !== undefined ? (o.at ?? 0) : cur >= 0 ? marks[cur].t : (o.at ?? 0);
+    const visible = o.sweep !== undefined ? t >= start : cur >= 0;
+    box.style.display = visible ? "" : "none";
+    if (!visible) return;
+    const len = o.sweep ?? ((marks[cur + 1]?.t ?? start + 0.35) - start);
+    const p = clamp((t - start) / Math.max(0.05, len));
+    clear();
+    g.fillStyle = tint;
+    g.beginPath();
+    g.arc(R, R, R, 0, Math.PI * 2);
+    g.fill();
+    // 지난 몫 — 짙은 쐐기
+    g.fillStyle = "rgba(0, 0, 0, 0.22)";
+    g.beginPath();
+    g.moveTo(R, R);
+    g.arc(R, R, R, -Math.PI / 2, -Math.PI / 2 + p * Math.PI * 2);
+    g.closePath();
+    g.fill();
+    g.strokeStyle = ink;
+    g.lineWidth = Math.max(3, R * 0.025);
+    for (const k of [0.92, 0.72]) {
+      g.beginPath();
+      g.arc(R, R, R * k, 0, Math.PI * 2);
+      g.stroke();
+    }
+    g.beginPath();
+    g.moveTo(0, R);
+    g.lineTo(R * 2, R);
+    g.moveTo(R, 0);
+    g.lineTo(R, R * 2);
+    g.stroke();
+    // 바늘
+    const a = -Math.PI / 2 + p * Math.PI * 2;
+    g.lineWidth = Math.max(4, R * 0.04);
+    g.beginPath();
+    g.moveTo(R, R);
+    g.lineTo(R + Math.cos(a) * R, R + Math.sin(a) * R);
+    g.stroke();
+    num.textContent = o.sweep !== undefined ? (p >= 1 ? (o.label ?? "") : "") : marks[cur].text;
+    num.style.fontSize = `${Math.round(o.sweep !== undefined ? R * 0.24 : R * 0.95)}px`;
+  };
+}
+
+/**
+ * 자막 카드(무성 영화 인터타이틀) — 두 줄 장식 테 안 글. at 에 아이리스(동그란 창)가 열리며 드러난다
+ */
+export function titleCard(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; rect: { x: number; y: number; w: number; h: number }; lines: { text: string; size: number; font?: "display" | "sans" | "mono"; color?: string }[]; at: number; gap?: number; frame?: boolean; logo?: string; logoW?: number },
+): (t: number) => void {
+  const { ctx, rect: r } = o;
+  const doc = el.ownerDocument;
+  const ink = col(ctx, "ink");
+  const card = div(doc, `left:${r.x}px;top:${r.y}px;width:${r.w}px;height:${r.h}px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:${o.gap ?? 18}px;${o.frame === false ? "" : `border:4px solid ${ink};outline:2px solid ${ink};outline-offset:-14px;`}`, el);
+  if (o.logo) {
+    const lg = doc.createElement("div");
+    lg.style.cssText = `width:${o.logoW ?? Math.round(r.w * 0.3)}px;color:${ink}`;
+    lg.innerHTML = o.logo.replace(/ width="\d+" height="\d+"/, ' width="100%" style="display:block"');
+    card.append(lg);
+  }
+  for (const l of o.lines) {
+    const d = doc.createElement("div");
+    const f = l.font ?? "display";
+    d.textContent = l.text;
+    d.style.cssText = `font:${f === "display" ? 400 : f === "mono" ? 700 : 800} ${l.size}px ${ctx.style.fonts[f]};color:${col(ctx, l.color ?? "ink")};white-space:pre;line-height:1.05;text-align:center`;
+    card.append(d);
+  }
+  const far = Math.hypot(r.w, r.h) / 2;
+  return (t) => {
+    const k = t - o.at;
+    card.style.display = k < 0 ? "none" : "flex";
+    if (k < 0) return;
+    const p = ease.outCubic(clamp(k / 0.32));
+    card.style.clipPath = p >= 1 ? "" : `circle(${(p * far).toFixed(1)}px at 50% 50%)`;
+  };
+}
+
+/**
+ * 릴 — 살 넷 달린 바퀴에 필름이 감긴다. 감긴 두께 = 그 몫(공급자의 모델 수). at 에 감기 시작해 amount 까지, 릴은 늘 돈다
+ */
+export function reel(el: HTMLElement, o: { ctx: SceneCtx; x: number; y: number; r: number; amount: number; at: number; wind?: number; spin?: number; label?: string; labelSize?: number }): (t: number) => void {
+  const { ctx } = o;
+  const doc = el.ownerDocument;
+  const R = o.r;
+  const box = div(doc, `left:${o.x - R}px;top:${o.y - R}px;width:${R * 2}px;height:${R * 2}px`, el);
+  const film = div(doc, `left:50%;top:50%;width:0;height:0;border-radius:50%;background:${col(ctx, "base")};transform:translate(-50%,-50%)`, box);
+  const wheel = div(doc, "inset:0", box);
+  const ink = col(ctx, "ink");
+  const holes = [0, 1, 2].map((k) => {
+    const a = (k / 3) * Math.PI * 2 - Math.PI / 2;
+    return `<circle cx="${50 + Math.cos(a) * 29}" cy="${50 + Math.sin(a) * 29}" r="13" fill="${col(ctx, "bg")}"/>`;
+  });
+  wheel.innerHTML = `<svg viewBox="0 0 100 100" width="100%" height="100%" style="display:block;overflow:visible"><circle cx="50" cy="50" r="48" fill="none" stroke="${ink}" stroke-width="3"/><circle cx="50" cy="50" r="45" fill="${col(ctx, "dim")}" opacity="0.18"/>${holes.join("")}<circle cx="50" cy="50" r="9" fill="${ink}"/><circle cx="50" cy="50" r="3.5" fill="${col(ctx, "bg")}"/></svg>`;
+  const label = o.label ? div(doc, `left:${o.x - 400}px;top:${o.y + R + 14}px;width:800px;text-align:center;font:400 ${o.labelSize ?? 38}px ${ctx.style.fonts.display};color:${ink};line-height:1;white-space:pre`, el) : null;
+  if (label && o.label) label.textContent = o.label;
+  return (t) => {
+    const k = t - o.at;
+    box.style.display = k < 0 ? "none" : "";
+    if (label) label.style.display = k < 0 ? "none" : "";
+    if (k < 0) return;
+    const pop = ease.outBack(clamp(k / 0.25));
+    box.style.transform = `scale(${pop.toFixed(4)})`;
+    const wind = ease.outCubic(clamp((k - 0.1) / (o.wind ?? 0.7)));
+    const d = (0.2 + 0.76 * clamp(o.amount) * wind) * R * 2;
+    film.style.width = film.style.height = `${d.toFixed(1)}px`;
+    wheel.style.transform = `rotate(${(-(t * (o.spin ?? 200)) % 360).toFixed(2)}deg)`;
+  };
+}
+
+/**
+ * 필름 막대 = 길이가 값(모델 수·가격). 구멍 달린 필름 조각이 왼쪽 게이트에서 at 부터 밀려 나와 길이까지.
+ * cutAt 을 주면 keep 자리에 편집 연필 X 가 그어지고 나머지가 잘려 떨어져 나간다(할인 = 잘라 낸 몫)
+ */
+export function filmBar(
+  el: HTMLElement,
+  o: { ctx: SceneCtx; x: number; y: number; w: number; h: number; at: number; feed?: number; label?: string; cutAt?: number; keep?: number; cells?: number; scan?: number },
+): (t: number) => void {
+  const { ctx } = o;
+  const doc = el.ownerDocument;
+  const holeH = Math.max(4, Math.round(o.h * 0.16));
+  const holeW = Math.round(holeH * 1.3);
+  const strip = (w: number) => {
+    const s = div(doc, `top:${o.y}px;height:${o.h}px;width:${w}px;overflow:hidden;background:${col(ctx, "base")}`, el);
+    const inner = div(doc, `left:0;top:0;height:${o.h}px;width:${o.w}px`, s);
+    for (let x = holeW * 0.6; x < o.w; x += holeW * 2) {
+      div(doc, `left:${x}px;top:${holeH * 0.5}px;width:${holeW}px;height:${holeH}px;border-radius:2px;background:${col(ctx, "hole")}`, inner);
+      div(doc, `left:${x}px;top:${o.h - holeH * 1.5}px;width:${holeW}px;height:${holeH}px;border-radius:2px;background:${col(ctx, "hole")}`, inner);
+    }
+    // 칸 — 구멍 두 줄 사이 밝은 필름 칸(하루 24칸 따위)
+    const cw = o.cells ? o.w / o.cells : 0;
+    for (let i = 0; i < (o.cells ?? 0); i++) div(doc, `left:${i * cw + 3}px;top:${holeH * 2.1}px;width:${cw - 6}px;height:${o.h - holeH * 4.2}px;border-radius:4px;background:${col(ctx, "bg")}`, inner);
+    return { s, inner };
+  };
+  const keepW = o.keep === undefined ? o.w : Math.max(holeW * 2, o.w * o.keep);
+  const a = strip(keepW);
+  const b = o.cutAt === undefined ? null : strip(o.w - keepW);
+  if (b) b.inner.style.left = `${-keepW}px`;
+  const label = o.label ? div(doc, `top:${o.y + o.h / 2 - o.h * 0.27}px;font:700 ${Math.round(o.h * 0.42)}px ${ctx.style.fonts.mono};color:${col(ctx, "edge")};white-space:pre;line-height:1.3`, el) : null;
+  if (label && o.label) label.textContent = o.label;
+  const mark = b ? canvasIn(el, o.x + keepW - 40, o.y - 40, 80, o.h + 80) : null;
+  // 영사 빛 — 칸 위를 왼쪽에서 오른쪽으로 늘 지나간다(scan 초에 한 번)
+  const lamp = o.scan ? div(doc, `top:${o.y - 10}px;width:6px;height:${o.h + 20}px;background:${col(ctx, "accent")};border-radius:3px`, el) : null;
+  const red = col(ctx, "accent");
+  return (t) => {
+    const k = t - o.at;
+    const len = k < 0 ? 0 : o.w * ease.outCubic(clamp(k / (o.feed ?? 0.45)));
+    a.s.style.display = len > 0 ? "" : "none";
+    a.s.style.left = `${o.x}px`;
+    a.s.style.width = `${Math.min(len, keepW).toFixed(1)}px`;
+    if (label) {
+      label.style.display = len > 0 ? "" : "none";
+      label.style.left = `${o.x + holeW * 0.6}px`;
+      label.style.clipPath = `inset(0 ${Math.max(0, label.offsetWidth - len).toFixed(1)}px 0 0)`;
+    }
+    if (lamp && o.scan) {
+      lamp.style.display = len >= o.w ? "" : "none";
+      lamp.style.left = `${(o.x + ((((t - o.at) / o.scan) % 1) + 1) % 1 * o.w - 3).toFixed(1)}px`;
+    }
+    if (!b || !mark || o.cutAt === undefined) return;
+    const after = t - o.cutAt;
+    const rest = Math.max(0, len - keepW);
+    const gone = after > 0.12 ? ease.inCubic(clamp((after - 0.12) / 0.35)) : 0;
+    b.s.style.display = rest > 0 && gone < 1 ? "" : "none";
+    b.s.style.left = `${o.x + keepW + 6 * clamp(after / 0.12)}px`;
+    b.s.style.width = `${rest.toFixed(1)}px`;
+    b.s.style.transform = gone > 0 ? `translate(${(gone * 500).toFixed(1)}px, ${(gone * 900).toFixed(1)}px) rotate(${(gone * 24).toFixed(1)}deg)` : "";
+    // 편집 연필 X — 자를 자리
+    mark.clear();
+    const xp = clamp((t - (o.cutAt - 0.25)) / 0.2);
+    if (xp > 0 && after < 0.6) {
+      const cx = o.x + keepW;
+      const cy = o.y + o.h / 2;
+      const s = o.h * 0.55;
+      mark.g.strokeStyle = red;
+      mark.g.lineWidth = 6;
+      mark.g.lineCap = "round";
+      mark.g.beginPath();
+      const p1 = clamp(xp * 2);
+      const p2 = clamp(xp * 2 - 1);
+      mark.g.moveTo(cx - s, cy - s);
+      mark.g.lineTo(cx - s + 2 * s * p1, cy - s + 2 * s * p1);
+      if (p2 > 0) {
+        mark.g.moveTo(cx + s, cy - s);
+        mark.g.lineTo(cx + s - 2 * s * p2, cy - s + 2 * s * p2);
+      }
+      mark.g.stroke();
+    }
+    if (label && after > 0.12) label.style.clipPath = `inset(0 ${Math.max(0, label.offsetWidth - keepW + holeW).toFixed(1)}px 0 0)`;
+  };
+}
+
+/** 편집 연필(그리스 펜슬) — 점을 따라 손으로 두 번 긋는 빨간 선. 동그라미·밑줄·화살표 표시 */
+export function grease(el: HTMLElement, o: { ctx: SceneCtx; points: Pt[]; at: number; dur?: number; width?: number; seed?: string | number; arrow?: boolean }): (t: number) => void {
+  const { ctx } = o;
+  const xs = o.points.map((p) => p[0]);
+  const ys = o.points.map((p) => p[1]);
+  const pad = 40;
+  const { g, clear } = canvasIn(el, Math.min(...xs) - pad, Math.min(...ys) - pad, Math.max(...xs) - Math.min(...xs) + pad * 2, Math.max(...ys) - Math.min(...ys) + pad * 2);
+  const seed = o.seed ?? `${ctx.id}:grease:${o.at}`;
+  // 손 떨림 — 두 번째 선은 조금 비켜 간다
+  const shaky = (k: number) => o.points.map((p, i) => [p[0] + (rand(seed, i * 4 + k) - 0.5) * 6, p[1] + (rand(seed, i * 4 + k + 1) - 0.5) * 6] as Pt);
+  const lines = [shaky(0), shaky(2)];
+  const red = col(ctx, "accent");
+  const w = o.width ?? 7;
+  return (t) => {
+    clear();
+    const p = clamp((t - o.at) / (o.dur ?? 0.3));
+    if (p <= 0) return;
+    g.strokeStyle = red;
+    g.lineCap = "round";
+    g.lineJoin = "round";
+    lines.forEach((ln, k) => {
+      const pts = partial(ln, clamp(p * 1.15 - k * 0.15));
+      if (pts.length < 2) return;
+      g.globalAlpha = k ? 0.6 : 0.95;
+      g.lineWidth = k ? w * 0.6 : w;
+      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();
+    });
+    g.globalAlpha = 1;
+    if (o.arrow && p >= 1) {
+      const [a, b] = [o.points[o.points.length - 2], o.points[o.points.length - 1]];
+      const ang = Math.atan2(b[1] - a[1], b[0] - a[0]);
+      g.lineWidth = w;
+      g.beginPath();
+      g.moveTo(b[0] - Math.cos(ang - 0.5) * 30, b[1] - Math.sin(ang - 0.5) * 30);
+      g.lineTo(b[0], b[1]);
+      g.lineTo(b[0] - Math.cos(ang + 0.5) * 30, b[1] - Math.sin(ang + 0.5) * 30);
+      g.stroke();
+    }
+  };
+}
+
+/** 교체 신호(큐 마크) — 릴을 갈아 끼우기 직전, 칸 오른쪽 위에 동그라미가 네 칸(0.17초) 뜬다. 모델 바꾸기·폴백 직전에 */
+export function cueMark(el: HTMLElement, o: { ctx: SceneCtx; times: number[]; x?: number; y?: number; r?: number }): (t: number) => void {
+  const { ctx } = o;
+  const G = gauge35(ctx);
+  const r = o.r ?? Math.round(G.H * 0.03);
+  const dot = div(el.ownerDocument, `left:${(o.x ?? G.x + G.w - r * 4) - r}px;top:${(o.y ?? r * 3.2) - r}px;width:${r * 2}px;height:${r * 2}px;border-radius:50%;background:${col(ctx, "ink")};box-shadow:0 0 0 ${Math.round(r * 0.35)}px ${col(ctx, "bg")}`, el);
+  return (t) => {
+    dot.style.display = o.times.some((c) => t >= c - 0.17 && t < c) ? "" : "none";
+  };
+}
+
+/**
+ * 드롭 — 필름이 게이트를 튄다: 칸 줄·구멍이 세로로 번지며 몇 칸이 한꺼번에 지나가고 흔들림과 함께 새 칸에 선다.
+ * 흔들림·한 번 튐을 돌려준다(shake 는 필름 틀에, punch 는 주인공에)
+ */
+export function gateJump(el: HTMLElement, o: { ctx: SceneCtx; drop?: number; frames?: number }): (t: number) => DropBurstState {
+  const { ctx } = o;
+  const G = gauge35(ctx);
+  const { g, clear } = canvasIn(el, 0, 0, G.W, G.H);
+  const at = ctx.beats.drop(o.drop ?? 0);
+  const n = o.frames ?? 5;
+  const base = col(ctx, "base");
+  const hole = col(ctx, "hole");
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "gateJump" });
+    clear();
+    const k = t - at;
+    if (k < 0 || k > 0.32) return s;
+    // 칸 줄이 가는 선으로 번져 지나간다 — 칸 n 개가 0.3초에(굵은 띠로 쓸면 섬광이 된다)
+    const p = ease.outCubic(clamp(k / 0.3));
+    const off = p * n * G.pitch;
+    g.globalAlpha = 0.8 * (1 - p);
+    g.fillStyle = base;
+    for (let i = -1; i <= n + 1; i++) {
+      const y = (((i * G.pitch - off) % G.pitch) + G.pitch) % G.pitch;
+      for (const d of [-60, 0, 60]) g.fillRect(G.x, y + d - 2, G.w, 4);
+    }
+    g.fillStyle = hole;
+    const perf = G.pitch / 8;
+    for (let y = -(off % perf); y < G.H; y += perf) {
+      g.fillRect(G.left * 0.32 - 6, y, 12, perf * 0.7);
+      g.fillRect(G.W - G.right * 0.38 - 6, y, 12, perf * 0.7);
+    }
+    g.globalAlpha = 1;
+    return s;
+  };
+}
+
+/** 칸 안 글 하나 — 타자기처럼 한 자씩 찍힌다(가장자리 글과 같은 고정폭 결) */
+export function typeLine(el: HTMLElement, o: { ctx: SceneCtx; text: string; x: number; y: number; size: number; at: number; font?: "display" | "sans" | "mono"; color?: string; anchor?: "left" | "center"; cps?: number }): (t: number) => void {
+  const { ctx } = o;
+  const f = o.font ?? "mono";
+  const d = div(el.ownerDocument, `${o.anchor === "center" ? `left:${o.x - 1500}px;width:3000px;text-align:center;` : `left:${o.x}px;`}top:${o.y}px;font:${f === "display" ? 400 : f === "mono" ? 700 : 800} ${o.size}px ${ctx.style.fonts[f]};color:${col(ctx, o.color ?? "ink")};white-space:pre;line-height:1`, el);
+  const chars = Array.from(o.text);
+  const spans = chars.map((ch) => {
+    const s = el.ownerDocument.createElement("span");
+    s.textContent = ch;
+    d.append(s);
+    return s;
+  });
+  const cps = o.cps ?? 60;
+  return (t) => {
+    const n = t < o.at ? 0 : Math.min(chars.length, Math.floor((t - o.at) * cps) + 1);
+    d.style.display = n ? "" : "none";
+    spans.forEach((s, i) => (s.style.visibility = i < n ? "visible" : "hidden"));
+  };
+}

package/themes/film-reel/sample/assets/og/logo.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140 650" width="1140" height="650" fill="none" role="img" aria-label="OpenGateway">
+  <title>OpenGateway</title>
+  <g id="logo" stroke="currentColor" fill="currentColor">
+    <rect id="node-in" x="36" y="36" width="420" height="578" rx="89" fill="none" stroke-width="72"/>
+    <rect id="bar-in" x="72" y="272" width="277" height="106" stroke="none"/>
+    <path id="node-out" d="M684 213 L684 125 A89 89 0 0 1 773 36 L1015 36 A89 89 0 0 1 1104 125 L1104 525 A89 89 0 0 1 1015 614 L773 614 A89 89 0 0 1 684 525 L684 436" fill="none" stroke-width="72" stroke-linecap="butt"/>
+    <g id="arrow">
+      <rect id="arrow-shaft" x="420" y="272" width="394" height="106" stroke="none"/>
+      <path id="arrow-head" d="M833 220 L970 325 L833 430 Z" stroke-width="38" stroke-linejoin="round"/>
+    </g>
+  </g>
+</svg>