kasaframe 0.0.0-stage → 0.1.3

package/packages/studio/src/ui/timeline.ts

@@ -0,0 +1,317 @@
+export interface TimelineData {
+  duration: number;
+  fps: number;
+  scenes: { id: string; from: number; end: number }[];
+  sections: { t: number; kind: string; strength?: number }[];
+  beats: number[];
+  downbeats: number[];
+  phrases: number[];
+  drops: { t: number; label: string }[];
+  energy?: { hz: number; low: number[]; mid: number[]; high: number[] };
+}
+
+export interface TimelineHooks {
+  /** snap 이면 가까운 박·마커에 붙인 시각이다 */
+  seek(t: number, snapped: boolean): void;
+  scrubStart(): void;
+  scrubEnd(): void;
+}
+
+const C = {
+  bg: "#14161b",
+  line: "#262a33",
+  ink: "#e9ebf0",
+  dim: "#8b91a0",
+  faint: "#5a606d",
+  sceneA: "#20252f",
+  sceneB: "#272d39",
+  accent: "#ff6b9a",
+  sky: "#7cc4ff",
+  energy: "rgba(124,196,255,0.16)",
+};
+const RULER = [0, 18];
+const SCENES = [20, 46];
+const SECTIONS = [48, 64];
+const BEATS = [66, 152];
+const SNAP_PX = 10;
+const STEPS = [1 / 60, 0.05, 0.1, 0.25, 0.5, 1, 2, 5, 10, 15, 30, 60, 120];
+
+export class Timeline {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private hooks: TimelineHooks;
+  private data: TimelineData = { duration: 1, fps: 60, scenes: [], sections: [], beats: [], downbeats: [], phrases: [], drops: [] };
+  private a = 0;
+  private b = 1;
+  private t = 0;
+  private hover: number | null = null;
+  private dragging = false;
+  private W = 0;
+  private H = 0;
+
+  constructor(host: HTMLElement, hooks: TimelineHooks) {
+    this.hooks = hooks;
+    this.canvas = document.createElement("canvas");
+    host.appendChild(this.canvas);
+    this.ctx = this.canvas.getContext("2d")!;
+    new ResizeObserver(() => this.resize()).observe(host);
+    this.bind();
+  }
+
+  setData(d: TimelineData) {
+    const fresh = d.duration !== this.data.duration;
+    this.data = d;
+    if (fresh) {
+      this.a = 0;
+      this.b = d.duration;
+    }
+    this.draw();
+  }
+
+  setTime(t: number, follow: boolean) {
+    this.t = t;
+    const span = this.b - this.a;
+    if (follow && (t > this.b - span * 0.02 || t < this.a)) {
+      this.a = Math.max(0, Math.min(t - span * 0.1, this.data.duration - span));
+      this.b = this.a + span;
+    }
+    this.draw();
+  }
+
+  private resize() {
+    const r = this.canvas.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    this.W = r.width;
+    this.H = r.height;
+    this.canvas.width = Math.round(r.width * dpr);
+    this.canvas.height = Math.round(r.height * dpr);
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.draw();
+  }
+
+  private x(t: number) {
+    return ((t - this.a) / (this.b - this.a)) * this.W;
+  }
+
+  private tAt(x: number) {
+    return this.a + (x / this.W) * (this.b - this.a);
+  }
+
+  private snapTargets(): number[] {
+    const d = this.data;
+    return [...d.beats, ...d.downbeats, ...d.phrases, ...d.drops.map((m) => m.t), ...d.scenes.map((s) => s.from), ...d.sections.map((s) => s.t), 0, d.duration];
+  }
+
+  private pick(x: number, snap: boolean): { t: number; snapped: boolean } {
+    const t = Math.max(0, Math.min(this.data.duration, this.tAt(x)));
+    if (!snap) return { t, snapped: false };
+    let best = t;
+    let bestPx = SNAP_PX;
+    for (const s of this.snapTargets()) {
+      const px = Math.abs(this.x(s) - x);
+      if (px < bestPx) {
+        bestPx = px;
+        best = s;
+      }
+    }
+    return { t: best, snapped: best !== t };
+  }
+
+  private bind() {
+    const c = this.canvas;
+    const local = (e: PointerEvent | WheelEvent | MouseEvent) => e.clientX - c.getBoundingClientRect().left;
+    c.addEventListener("pointerdown", (e) => {
+      if (e.button !== 0) return;
+      c.setPointerCapture(e.pointerId);
+      this.dragging = true;
+      this.hooks.scrubStart();
+      const p = this.pick(local(e), e.shiftKey);
+      this.hooks.seek(p.t, p.snapped);
+    });
+    c.addEventListener("pointermove", (e) => {
+      this.hover = local(e);
+      if (this.dragging) {
+        const p = this.pick(this.hover, e.shiftKey);
+        this.hooks.seek(p.t, p.snapped);
+      } else this.draw();
+    });
+    const end = (e: PointerEvent) => {
+      if (!this.dragging) return;
+      this.dragging = false;
+      if (c.hasPointerCapture(e.pointerId)) c.releasePointerCapture(e.pointerId);
+      this.hooks.scrubEnd();
+    };
+    c.addEventListener("pointerup", end);
+    c.addEventListener("pointercancel", end);
+    c.addEventListener("pointerleave", () => {
+      this.hover = null;
+      this.draw();
+    });
+    c.addEventListener(
+      "wheel",
+      (e) => {
+        e.preventDefault();
+        const span = this.b - this.a;
+        const D = this.data.duration;
+        if (Math.abs(e.deltaX) > Math.abs(e.deltaY) || e.shiftKey) {
+          const dt = ((e.shiftKey ? e.deltaY : e.deltaX) / this.W) * span;
+          this.a = Math.max(0, Math.min(D - span, this.a + dt));
+          this.b = this.a + span;
+        } else {
+          const at = this.tAt(local(e));
+          const next = Math.max(Math.min(1, D), Math.min(D, span * Math.exp(e.deltaY * 0.004)));
+          const k = (at - this.a) / span;
+          this.a = Math.max(0, Math.min(D - next, at - k * next));
+          this.b = this.a + next;
+        }
+        this.draw();
+      },
+      { passive: false },
+    );
+    c.addEventListener("dblclick", () => {
+      this.a = 0;
+      this.b = this.data.duration;
+      this.draw();
+    });
+  }
+
+  private label(text: string, x: number, y: number, color: string, maxW?: number) {
+    const g = this.ctx;
+    g.fillStyle = color;
+    if (maxW !== undefined && maxW < 14) return;
+    if (maxW !== undefined && g.measureText(text).width > maxW) {
+      let s = text;
+      while (s.length > 1 && g.measureText(`${s}…`).width > maxW) s = s.slice(0, -1);
+      text = `${s}…`;
+    }
+    g.fillText(text, x, y);
+  }
+
+  draw() {
+    const g = this.ctx;
+    const { W, H } = this;
+    if (!W || !H) return;
+    const d = this.data;
+    const pxPerSec = W / (this.b - this.a);
+    g.clearRect(0, 0, W, H);
+    g.fillStyle = C.bg;
+    g.fillRect(0, 0, W, H);
+    g.font = "11px ui-monospace, SFMono-Regular, Menlo, monospace";
+    g.textBaseline = "middle";
+
+    const step = STEPS.find((s) => s * pxPerSec >= 64) ?? 300;
+    g.strokeStyle = C.line;
+    g.lineWidth = 1;
+    for (let t = Math.ceil(this.a / step) * step; t <= this.b + 1e-9; t += step) {
+      const x = Math.round(this.x(t)) + 0.5;
+      g.beginPath();
+      g.moveTo(x, RULER[1] - 5);
+      g.lineTo(x, RULER[1]);
+      g.stroke();
+      const txt = step < 1 ? t.toFixed(step < 0.1 ? 3 : 2) : step < 60 ? `${Math.round(t)}s` : `${Math.floor(t / 60)}:${String(Math.round(t % 60)).padStart(2, "0")}`;
+      this.label(txt, x + 3, 8, C.faint);
+    }
+    g.fillStyle = C.line;
+    g.fillRect(0, RULER[1], W, 1);
+
+    d.scenes.forEach((s, i) => {
+      const x0 = this.x(s.from);
+      const x1 = this.x(s.end);
+      if (x1 < 0 || x0 > W) return;
+      g.fillStyle = i % 2 ? C.sceneB : C.sceneA;
+      g.fillRect(x0, SCENES[0], Math.max(1, x1 - x0 - 1), SCENES[1] - SCENES[0]);
+      const lx = Math.max(x0, 0) + 6;
+      this.label(s.id, lx, (SCENES[0] + SCENES[1]) / 2, C.ink, x1 - lx - 6);
+    });
+
+    d.sections.forEach((s, i) => {
+      const x0 = this.x(s.t);
+      const x1 = i + 1 < d.sections.length ? this.x(d.sections[i + 1].t) : this.x(d.duration);
+      if (x1 < 0 || x0 > W) return;
+      g.fillStyle = s.kind === "drop" ? C.accent : C.dim;
+      g.fillRect(Math.round(x0), SECTIONS[0] + 2, 2, SECTIONS[1] - SECTIONS[0] - 4);
+      const strength = s.strength !== undefined ? ` ${s.strength.toFixed(2)}` : "";
+      this.label(`${s.kind}${strength}`, Math.max(x0, 0) + 6, (SECTIONS[0] + SECTIONS[1]) / 2, s.kind === "drop" ? C.accent : C.dim, x1 - Math.max(x0, 0) - 10);
+    });
+
+    const laneTop = BEATS[0];
+    const laneBot = BEATS[1];
+    const laneH = laneBot - laneTop;
+    if (d.energy && d.energy.low.length) {
+      const { hz, low } = d.energy;
+      const curve = (vals: number[]) => {
+        const pts: [number, number][] = [];
+        for (let x = 0; x <= W; x += 2) {
+          const i = Math.floor(this.tAt(x) * hz);
+          const v = vals[Math.max(0, Math.min(vals.length - 1, i))] ?? 0;
+          pts.push([x, laneBot - v * laneH * 0.92]);
+        }
+        return pts;
+      };
+      g.beginPath();
+      g.moveTo(0, laneBot);
+      for (const [x, y] of curve(low)) g.lineTo(x, y);
+      g.lineTo(W, laneBot);
+      g.closePath();
+      g.fillStyle = C.energy;
+      g.fill();
+    }
+
+    const visible = (ts: number[]) => ts.filter((t) => t >= this.a - 1 && t <= this.b + 1);
+    const beatPx = d.beats.length > 1 ? (pxPerSec * d.duration) / d.beats.length : 99;
+    g.fillStyle = C.faint;
+    if (beatPx >= 3) for (const t of visible(d.beats)) g.fillRect(Math.round(this.x(t)), laneTop, 1, 7);
+    g.fillStyle = C.dim;
+    if (beatPx * 4 >= 3) for (const t of visible(d.downbeats)) g.fillRect(Math.round(this.x(t)), laneTop, 1, 15);
+    g.fillStyle = "rgba(233,235,240,0.35)";
+    for (const t of visible(d.phrases)) g.fillRect(Math.round(this.x(t)), laneTop, 1, laneH);
+
+    for (const m of d.drops) {
+      const x = Math.round(this.x(m.t));
+      if (x < -40 || x > W + 40) continue;
+      g.fillStyle = C.accent;
+      g.fillRect(x, SCENES[0], 2, laneBot - SCENES[0]);
+      g.beginPath();
+      g.moveTo(x + 1, laneTop - 1);
+      g.lineTo(x + 6, laneTop + 5);
+      g.lineTo(x + 1, laneTop + 11);
+      g.lineTo(x - 4, laneTop + 5);
+      g.closePath();
+      g.fill();
+    }
+
+    if (this.hover !== null && !this.dragging) {
+      const x = Math.round(this.hover) + 0.5;
+      g.strokeStyle = "rgba(233,235,240,0.25)";
+      g.beginPath();
+      g.moveTo(x, 0);
+      g.lineTo(x, H);
+      g.stroke();
+      const ht = this.tAt(this.hover);
+      const txt = ht.toFixed(3);
+      const w = g.measureText(txt).width + 8;
+      const bx = Math.min(W - w, x + 4);
+      g.fillStyle = "#0c0d10";
+      g.fillRect(bx, H - 18, w, 16);
+      this.label(txt, bx + 4, H - 10, C.dim);
+    }
+
+    const px = Math.round(this.x(this.t)) + 0.5;
+    if (px >= -1 && px <= W + 1) {
+      g.strokeStyle = C.ink;
+      g.lineWidth = 1.5;
+      g.beginPath();
+      g.moveTo(px, 0);
+      g.lineTo(px, H);
+      g.stroke();
+      g.lineWidth = 1;
+      g.fillStyle = C.ink;
+      g.beginPath();
+      g.moveTo(px - 5, 0);
+      g.lineTo(px + 5, 0);
+      g.lineTo(px, 7);
+      g.closePath();
+      g.fill();
+    }
+  }
+}

package/packages/themes/kit/THEME-MAKE.md

@@ -0,0 +1,68 @@
+# 테마 만들기 지시서 — `{{id}}`
+
+너는 kasaframe 테마 하나를 처음부터 끝까지 만든다: 참고 자료를 보고 → 비유를 정하고 → 스타일·효과를 짜고 → 공통 브리프로 견본을 만들어 → 검사를 통과시키고 → review 로 올린다. 사람은 견본 영상만 보고 OK 한다. **OK 전에 approved 로 바꾸지 않는다.**
+
+- 테마 폴더: `themes/{{id}}/` — 이 폴더 밖은 고치지 않는다. 커밋은 `git commit -m "<명사형 제목>" -- themes/{{id}}`(남의 스테이징을 쓸어 가지 않게 경로를 꼭 준다). 커밋 제목·주석에 개인 호칭·페르소나 표현 금지.
+- 이름: {{name}} · 브리프: {{brief}} · 결이 비슷한 기존 테마: {{like}}
+- 명령은 레포 뿌리에서 `npx kf …`. `kf render`·`kf check`·`kf sheet` 는 스스로 렌더 잠금(`.render-lock`)을 잡고 기다린다 — **밖에서 잠금을 따로 잡고 그 안에서 kf 를 부르지 않는다**(교착). 탭은 `--tabs 2` 까지.
+{{kindNote}}
+
+## 1. 읽기 (10분)
+
+1. `SPEC.md` 의 「계약 9 테마 팩」과 `docs/AGENTS.md`(장면 파일 쓰는 법).
+2. approved 테마 둘 이상을 통째로 — `themes/<id>/THEME.md`·`effects.ts`·`sample/scenes/*.ts`. `npx kf theme list` 로 목록을 본다. 비유·색이 이미 있는 테마와 겹치면 안 된다.
+3. 브리프 `{{briefDoc}}` — 화면에 쓰는 사실·숫자는 여기 적힌 것만. 숫자를 지어내지 않는다. 사실 모음은 `sample/lib/facts.ts` 에 이미 옮겨 두었다.
+
+## 2. 참고 자료 보기 → `refs/NOTES.md`
+
+참고 자료: {{refs}}
+
+- 그림은 Read 로 직접 본다. 영상은 `refs/frames/` 에 뽑아 둔 장면을 본다. 주소는 `kc navigate <url>` 뒤 `kc screenshot --path <절대경로>` 로 찍어 Read 하거나 WebFetch.
+- `refs/NOTES.md` 에 적는다: 색(실제 값 몇 개) · 질감 · 형태 언어 · 움직임 성격 · 공간감(평면/깊이/등각) · 빛 · 이 자료에서 **가져올 것 셋**과 **안 가져올 것**.
+
+## 3. 비유·스타일 — `THEME.md` 앞부분 · `style.json` · `theme.json`
+
+- 비유 한 줄: 「무엇이 무엇처럼 되며 화면이 찍힌다/드러난다」. 내용(정보가 화면에 오르는 방식)에서 나온 개념이어야 한다 — 장식 이름이 아니라 동사가 있는 문장.
+- `style.json`: 프리셋과 같은 KfStyle 꼴 통째, `name` = `{{id}}`. 잉크 2–3색 + 그 어두운 단(`colors`), 바탕 `bg`, 글 `ink`, 강조 `accent`. 글꼴 셋(`sans`·`display`·`mono`)은 **한글이 서는 글꼴로 끝나게**(Pretendard 를 마지막에), `faces` 는 **한 파일 주소**(jsdelivr `gh/google/fonts@main/ofl/<이름>/<파일>.ttf` 나 `npm/pretendard@1.3.9/.../PretendardVariable.woff2`). 구글 폰트 CSS(unicode-range 조각)는 글이 투명하게 찍히니 쓰지 않는다. `theme` 칸에 `inks`·`texture`·`movement` 를 글로.
+- `theme.json`: `name`·`metaphor`·`purposes`·`aspect`. status 는 draft 그대로.
+- 글자 대비는 찍힌 픽셀로 3:1 이상 — 옅은 잉크로 작은 글을 쓰지 않는다.
+
+## 4. 효과 — `effects.ts` (5–10개)
+
+- `value` = `(t, opts) => Style | number | string | 객체` · `layer` = `(el, opts) => (t) => void`(장면 `build` 처럼 DOM·캔버스를 한 번 짓고 t 마다 칠한다). **같은 t 면 같은 화면** — 앞 프레임 상태를 쌓지 않는다, `Math.random`·`Date.now` 금지(`rand(seed, i)`·`noise1`).
+- 비유 전용이어야 한다: 등장·전환·드롭·늘 흐르는 바탕·숫자/글 찍기·끝 카드 쪽이 하나씩은 있으면 견본이 테마 효과만으로 선다.
+- 흔들림·섬광·박 펄스·카메라는 `@kasaframe/motion` 의 `dropBurst`·`shake`·`beatPulse`·`camera` 를 거쳐 검사가 셀 수 있게. 드롭 연출은 `ctx.beats.drop(0)` 으로 잰 시각에만.
+- 캔버스는 **그리는 자리만큼만** 잡고 `translate(-x, -y)` 로 화면 좌표를 그대로 쓴다(화면 전체 캔버스 수십 장이면 탭 셋이 GB 를 먹는다).
+- `theme.json` 의 `effects` 를 `{ name, kind, does, use }` 로 채운다 — 이름이 `effects.ts` 의 함수 내보내기와 정확히 같아야 한다(시험이 본다). `use` 는 모델이 그대로 베낄 한 줄.
+
+## 5. 견본 — `sample/` (브리프 그대로, 15초)
+
+뼈대는 이미 있다: `kf.json`(장면 넷 — 경계가 마디·드롭에 붙어 있다)·`beats.json`·곡·`lib/facts.ts`·`assets/`. `scenes/*.ts` 넷을 다시 쓴다.
+
+공통 규칙(검사가 오류로 잡는다):
+
+- **0.1초도 서지 않는다** — 늘 흐르는 층 하나(바탕 흐름·눈금·드리프트·끓는 결)를 깔아 둔다. 깜빡이는 점 몇 개로는 모자란다(160×90 회색조 평균 차 0.35).
+- **같은 구도 1.5초 안** — 마디(약 1.41초)마다 컷을 바꾼다. 컷은 `display: none` 으로 숨긴다 — `visibility: hidden` 은 안쪽 요소가 visible 을 주면 부모를 뚫고 보여서 지난 컷이 비치고 같은 t 의 그림이 달라진다(`frame.nondeterministic`).
+- **박마다 눈에 보이는 큰 사건 하나** — 찍히고, 갈리고, 뛰고, 바뀐다. 미세한 떨림으로 때우지 않는다.
+- **꽉 찬 화면** — 글·그림이 화면 가운데 작게 몰리지 않게. 안전 영역(가로 80px·세로 60px) 안에.
+- **문구 금지** — 슬로건·감성 카피·말 거는 문장 없이 실제 주소·모델 ID·숫자·짧은 낱말·끝 카드만.
+- 영상 생성 모델은 쓰지 않는다. 모자란 그림은 `npx kf gen img` 몇 장까지(돈 규칙은 `packages/gen/PROVIDERS.md`).
+- 로고 SVG 는 `import svg from "../assets/og/logo.svg?raw"` 로 받아 `currentColor` 로 칠한다. 속성을 바꿀 때 `height="auto"` 는 SVG 오류다 — `width="100%"` 만 두고 높이는 viewBox 에 맡긴다.
+
+## 6. 검사 고리
+
+1. `npx kf theme check {{id}}` — 계약(파일·효과 이름·글꼴·남은 TODO) + `kf check sample`. 오류가 0 이 될 때까지.
+2. `npx kf sheet themes/{{id}}/sample --count 16` 을 **Read 로 직접 보고** 고친다: 빈 화면·겹친 글·잘린 글·지난 컷 비침·읽히지 않는 대비. 숫자 검사만 보고 넘기지 않는다.
+3. 렌더를 되풀이하기 전에 고칠 것을 모아서 한 번에(맥북 부하).
+
+## 7. review
+
+`npx kf theme review {{id}}` — 굽기 → mp4 검사 → 장면 모음·대표 장면 → `sample.mp4`·`still.png` 갱신 → 공유 폴더(`kasaframe-테마-{{id}}`)에 `{{id}}-{{share}}.mp4`·장면 모음·대표 장면·THEME.md → status review. 끝나면 커밋하고 맡긴 사람에게 공유 폴더 경로와 비유 한 줄·흐름·검사 결과를 알린다.
+
+## 함정(앞 테마들이 밟은 것)
+
+- 한글은 모노 글꼴 뒤 Pretendard 로 그려져 폭이 다르다 — 셀·고정 폭 배치면 한글 한 자를 두 칸으로.
+- 캔버스에 글을 그리는 효과는 `document.fonts` 가 다 받은 뒤(장면 `build` 는 그 뒤에 불린다) 쓴다. 떨어져 있는 캔버스에 미리 그려 둔 글은 검사가 화면 글로 읽지 않는다.
+- 장면 박자 `ctx.beats.beats` 는 곡 끝까지 들어 있다 — 「이 장면의 마지막 박」은 `ctx.dur` 로 거른다.
+- 흔들림을 바탕째 걸면 가장자리에 페이지 검정이 비친다 — 내용 틀에만.
+- 렌더가 무거우면(종이결·잡음) mp4 가 수십 MB — 레포의 `sample.mp4` 는 `kf theme review` 가 줄여 넣는다.

package/packages/themes/kit/THEME.md

@@ -0,0 +1,30 @@
+# {{name}} `{{id}}`
+
+**비유: TODO 한 줄 — 내용에서 나온 개념(무엇이 무엇처럼 되며 화면이 찍힌다).** TODO 두세 줄로 풀어 쓴다.
+
+## 맞는 내용·용도
+
+- TODO 어떤 내용에 맞나
+- 용도: TODO(promo·shorts·explainer·launch·demo·ad·square·mv 중)
+- 화면 글: TODO
+
+## 금지
+
+- TODO 이 비유를 깨는 것(색·글꼴·움직임·질감)
+- 슬로건·감성 문장.
+
+## 움직임
+
+- 쉬지 않는다: TODO(0.1초도 서지 않게 늘 흐르는 것)
+- 구도는 마디마다 바꾼다: TODO
+- 박마다 큰 사건 하나: TODO
+
+## 효과
+
+같은 레포 안에서는 `effects.ts` 를 바로, 프로젝트에서는 `fx("{{id}}")`. layer 는 `build` 에서 만들고 `(t) => …` 에서 부른다.
+
+| 효과 | 꼴 | 하는 일 |
+|---|---|---|
+| TODO | | |
+
+견본: `sample/` — {{brief}}.

package/packages/themes/kit/briefs/og-intro-15s/brief.json

@@ -0,0 +1,16 @@
+{
+  "id": "og-intro-15s",
+  "doc": "docs/briefs/og-intro-15s.md",
+  "label": "OpenGateway 소개 15초",
+  "share": "OG견본",
+  "music": "kawaii-friends.mp3",
+  "from": 4.0,
+  "to": 19.0,
+  "assets": { "og/logo.svg": "logo.svg" },
+  "scenes": [
+    { "id": "gather", "role": "hook", "until": "bar:3.1", "idea": "여러 회사 모델이 흩어져 있다 → 회사별 모델 수" },
+    { "id": "models", "role": "explain", "until": "drop:0", "idea": "한 주소(https://apis.opengateway.ai/v1) → 박마다 바뀌는 모델 ID 가 같은 주소로 → 드롭 앞 모아 올리기" },
+    { "id": "price", "role": "drop", "until": "bar:11.5", "idea": "드롭에 가장 크게 102 · 한 주소 → 하루 시계에서 00–10시 창이 -90% → deepseek 가격" },
+    { "id": "end", "role": "end", "until": "end", "idea": "첫 토큰 실측 셋 → 끝 카드(OG 로고 · opengateway.ai)" }
+  ]
+}

package/packages/themes/kit/briefs/og-intro-15s/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/packages/themes/kit/briefs/og-intro-15s/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>

package/packages/themes/kit/effects.ts

@@ -0,0 +1,5 @@
+// 테마 {{id}} 전용 효과 — THEME-MAKE.md 4단계. 5–10개, 이름 있는 내보내기 = theme.json effects[].name
+// value: (t, opts) => Style·수·글 · layer: (el, opts) => (t) => void. 같은 t 면 같은 화면, Math.random 금지(rand(seed, i))
+import type { SceneCtx } from "@kasaframe/core";
+
+export type { SceneCtx };

package/packages/themes/kit/sample/index.html

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

package/packages/themes/kit/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/packages/themes/kit/sample/scenes/scene.ts

@@ -0,0 +1,15 @@
+import type { SceneCtx } from "@kasaframe/core";
+// THEME-MAKE.md 5단계에서 이 파일을 통째로 다시 쓴다 — 할 일: {{idea}}
+import * as fx from "../../effects.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    void fx;
+    const el = document.createElement("div");
+    el.style.cssText = `position:absolute;inset:0;display:grid;place-items:center;font:700 64px ${ctx.style.fonts.sans};color:${ctx.style.colors.dim};`;
+    root.append(el);
+    return (t: number) => {
+      el.textContent = `{{scene}} ${t.toFixed(2)}`;
+    };
+  },
+};

package/packages/themes/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@kasaframe/themes",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./fx": "./src/fx.ts",
+    "./factory": "./src/factory.ts",
+    "./stage3d": "./src/stage3d.ts",
+    "./slots": "./src/slots.ts",
+    "./slotkit": "./src/slotkit.ts"
+  },
+  "dependencies": {
+    "@kasaframe/core": "0.0.0",
+    "three": "^0.186.1",
+    "@kasaframe/motion": "^0.0.0"
+  }
+}