kasaframe 0.0.0-stage → 0.1.1

package/themes/riso-zine/effects.ts

@@ -0,0 +1,321 @@
+import { applyStyle, clamp, rand, randRange, type SceneCtx, type Style } from "@kasaframe/core";
+import { beatPulse, dropBurst, type DropBurstState } from "@kasaframe/motion";
+
+// 리소는 판을 한 장씩 찍어 넘기는 인쇄라 움직임도 초당 12장으로 끊는다 — 60fps 보간이 들어가면 화면이 아니라 영상처럼 보인다
+const FPS = 12;
+
+const ink = (ctx: SceneCtx, key: string): string => ctx.style.colors[key] ?? key;
+
+type Area = [x: number, y: number, w: number, h: number];
+const areas = new WeakMap<CanvasRenderingContext2D, Area>();
+
+// 판면을 마디마다 갈아 끼우면 한 장면에 망점 판이 열 개 넘게 — 화면 전체 캔버스를 다 잡지 않고 그리는 자리만큼만, 좌표는 화면 기준 그대로
+function canvas(el: HTMLElement, ctx: SceneCtx, blend = "multiply", area?: Area): CanvasRenderingContext2D {
+  const [x, y, w, h] = (area ?? [0, 0, ctx.meta.width, ctx.meta.height]).map((v, i) => (i < 2 ? Math.floor(v) : Math.ceil(v))) as Area;
+  const c = document.createElement("canvas");
+  c.width = Math.max(1, w);
+  c.height = Math.max(1, h);
+  c.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:${w}px;height:${h}px;pointer-events:none;mix-blend-mode:${blend};`;
+  el.append(c);
+  const g = c.getContext("2d")!;
+  g.translate(-x, -y);
+  areas.set(g, [x, y, w, h]);
+  return g;
+}
+
+const clear = (g: CanvasRenderingContext2D): void => {
+  const [x, y, w, h] = areas.get(g)!;
+  g.clearRect(x, y, w, h);
+};
+
+/** t 를 초당 fps 장으로 끊는다(on twos). 다른 효과도 이걸 거쳐 같은 박자로 끊긴다 */
+export function printFrames(t: number, fps = FPS): number {
+  return Math.floor(t * fps + 1e-6) / fps;
+}
+
+/**
+ * 판 어긋남. 판마다 시드로 정한 어긋남(±px)에 머물고, 찍히는 순간 두 장은 더 크게 어긋났다가 앉는다.
+ * 앉은 뒤에도 초당 12번 0.6px 안팎으로 끓는다 — 흔들림이 아니라 인쇄 결이라 검사가 세는 shake 가 아니다
+ */
+export function misregister(t: number, o: { seed: string | number; px?: number; at?: number; boil?: number } = { seed: 0 }): Style {
+  const px = o.px ?? 3;
+  const bx = randRange(o.seed, 0, -px, px);
+  const by = randRange(o.seed, 1, -px, px);
+  const f = Math.floor((t - (o.at ?? 0)) * FPS + 1e-6);
+  const land = f <= 0 ? 3 : f === 1 ? 1.7 : 1;
+  const k = Math.floor(t * FPS + 1e-6);
+  const boil = o.boil ?? 0.6;
+  return { x: bx * land + randRange(o.seed, 10 + k * 2, -boil, boil), y: by * land + randRange(o.seed, 11 + k * 2, -boil, boil) };
+}
+
+export interface PlateOpts {
+  ctx: SceneCtx;
+  /** 판마다 잉크(style.colors 키나 색)·찍는 시각 */
+  plates: { ink: string; at: number; px?: number; seed?: string | number }[];
+  /** 판 하나에 들어갈 내용을 짓는다 — 글·SVG 는 currentColor 로 칠하면 판 잉크가 된다 */
+  build(plate: HTMLElement, ink: string, i: number): void;
+  /** 판 위에서 다른 효과가 고칠 여지(드럼 지나가기 clip 따위) */
+  style?(t: number, i: number): Style;
+}
+
+/** 같은 그림을 잉크 판 여러 장으로 찍는다. 판은 곱하기로 겹쳐 블루+핑크가 보라가 되고, 어긋난 가장자리에 두 색이 비친다 */
+export function plateStamp(el: HTMLElement, o: PlateOpts): (t: number) => void {
+  const plates = o.plates.map((p, i) => {
+    const div = document.createElement("div");
+    const color = ink(o.ctx, p.ink);
+    div.style.cssText = `position:absolute;inset:0;mix-blend-mode:multiply;color:${color};`;
+    o.build(div, color, i);
+    el.append(div);
+    return { div, p, seed: p.seed ?? `${o.ctx.id}:${p.ink}:${i}` };
+  });
+  return (t) => {
+    plates.forEach(({ div, p, seed }, i) => {
+      const on = t >= p.at;
+      div.style.visibility = on ? "visible" : "hidden";
+      if (!on) return;
+      const m = misregister(t, { seed, px: p.px, at: p.at });
+      const extra = o.style?.(t, i) ?? {};
+      applyStyle(div, { ...extra, x: (m.x ?? 0) + (extra.x ?? 0), y: (m.y ?? 0) + (extra.y ?? 0) });
+    });
+  };
+}
+
+export interface HalftoneOpts {
+  ctx: SceneCtx;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  ink: string;
+  /** 0..1 잉크 양 — (u, v) 는 상자 안 0..1. 그림을 쓰려면 src */
+  value?: (u: number, v: number) => number;
+  src?: string;
+  /** 망 각도. 리소 관례 블루 15° · 핑크 75° */
+  angle?: number;
+  /** 망점 간격(px) */
+  pitch?: number;
+  at?: number;
+  dur?: number;
+  /** grow: 망점이 끊어 자란다 · sweep: 드럼이 지나간 줄부터 찍힌다(dir 방향) */
+  reveal?: "grow" | "sweep";
+  dir?: "down" | "right";
+  /** 드롭 구간에서 박마다 망점이 부푼다(style.json beatPulse) */
+  pulse?: boolean;
+}
+
+/** 망점 판. 값이 큰 곳일수록 점이 크다 — 그라데이션은 이것으로만 */
+export function halftone(el: HTMLElement, o: HalftoneOpts): (t: number) => void {
+  const { ctx } = o;
+  const g = canvas(el, ctx, "multiply", [o.x - 20, o.y - 20, o.w + 40, o.h + 40]);
+  const pitch = o.pitch ?? 14;
+  const a = ((o.angle ?? 15) * Math.PI) / 180;
+  const cx = o.x + o.w / 2;
+  const cy = o.y + o.h / 2;
+  const half = Math.hypot(o.w, o.h) / 2;
+  const n = Math.ceil(half / pitch);
+  const pts: { x: number; y: number; u: number; v: number }[] = [];
+  for (let j = -n; j <= n; j++) {
+    for (let i = -n; i <= n; i++) {
+      const x = cx + Math.cos(a) * i * pitch - Math.sin(a) * j * pitch;
+      const y = cy + Math.sin(a) * i * pitch + Math.cos(a) * j * pitch;
+      if (x < o.x || x > o.x + o.w || y < o.y || y > o.y + o.h) continue;
+      pts.push({ x, y, u: (x - o.x) / o.w, v: (y - o.y) / o.h });
+    }
+  }
+  let vals: number[] | null = o.value ? pts.map((p) => clamp(o.value!(p.u, p.v))) : null;
+  let img: HTMLImageElement | null = null;
+  if (o.src) {
+    img = document.createElement("img");
+    img.src = o.src;
+    img.style.cssText = "position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;";
+    el.append(img);
+  }
+  const fromImage = (): number[] | null => {
+    if (!img || !img.complete || !img.naturalWidth) return null;
+    const off = document.createElement("canvas");
+    off.width = Math.ceil(o.w / 4);
+    off.height = Math.ceil(o.h / 4);
+    const s = off.getContext("2d", { willReadFrequently: true })!;
+    const k = Math.min(off.width / img.naturalWidth, off.height / img.naturalHeight);
+    s.drawImage(img, (off.width - img.naturalWidth * k) / 2, (off.height - img.naturalHeight * k) / 2, img.naturalWidth * k, img.naturalHeight * k);
+    const px = s.getImageData(0, 0, off.width, off.height).data;
+    return pts.map((p) => {
+      const q = (Math.min(off.height - 1, Math.floor(p.v * off.height)) * off.width + Math.min(off.width - 1, Math.floor(p.u * off.width))) * 4;
+      const lum = (0.2126 * px[q] + 0.7152 * px[q + 1] + 0.0722 * px[q + 2]) / 255;
+      return (1 - lum) * (px[q + 3] / 255);
+    });
+  };
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 0.33;
+  const color = ink(ctx, o.ink);
+  return (t) => {
+    clear(g);
+    if (t < at) return;
+    vals ??= fromImage();
+    if (!vals) return;
+    const p = clamp(printFrames(t - at) / dur);
+    const swell = o.pulse ? 1 + 0.35 * beatPulse(t, { beats: ctx.beats, rules: ctx.style.motion, scene: ctx.id, source: "halftone" }).v : 1;
+    const grow = (o.reveal ?? "grow") === "grow" ? p : 1;
+    g.fillStyle = color;
+    g.beginPath();
+    for (let i = 0; i < pts.length; i++) {
+      const q = pts[i];
+      if (o.reveal === "sweep" && (o.dir === "right" ? q.u : q.v) > p) continue;
+      const r = Math.min(pitch * 0.75, pitch * 0.58 * Math.sqrt(vals[i]) * grow * swell);
+      if (r < 0.4) continue;
+      g.moveTo(q.x + r, q.y);
+      g.arc(q.x, q.y, r, 0, Math.PI * 2);
+    }
+    g.fill();
+  };
+}
+
+/**
+ * 종이결. paper: 종이 바탕 + 섬유·얼룩(맨 아래) · mottle: 잉크 위에 흰 반점(맨 위, screen) — 잉크가 고르게 안 먹은 리소 면.
+ * 결은 초당 12번 바뀌어 끓는다
+ */
+export function paperGrain(el: HTMLElement, o: { ctx: SceneCtx; mode?: "paper" | "mottle"; fps?: number; seed?: string | number; strength?: number }): (t: number) => void {
+  const { ctx } = o;
+  const mode = o.mode ?? "paper";
+  const g = canvas(el, ctx, mode === "paper" ? "normal" : "screen");
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const seed = o.seed ?? `grain:${mode}`;
+  const strength = o.strength ?? 1;
+  const tiles = [0, 1, 2, 3].map((f) => {
+    const off = document.createElement("canvas");
+    off.width = Math.ceil(W / 4);
+    off.height = Math.ceil(H / 4);
+    const s = off.getContext("2d")!;
+    const im = s.createImageData(off.width, off.height);
+    for (let i = 0; i < off.width * off.height; i++) {
+      const v = rand(`${seed}:${f}`, i);
+      const p = i * 4;
+      if (mode === "paper") {
+        // 어두운 티끌만 — 종이를 밝게 덮지 않는다
+        const d = v < 0.5 ? 0 : (v - 0.5) * 2;
+        im.data[p] = 120;
+        im.data[p + 1] = 105;
+        im.data[p + 2] = 80;
+        im.data[p + 3] = Math.round(d * d * 34 * strength);
+      } else {
+        const d = v > 0.82 ? (v - 0.82) / 0.18 : 0;
+        im.data[p] = im.data[p + 1] = im.data[p + 2] = 255;
+        im.data[p + 3] = Math.round(d * 120 * strength);
+      }
+    }
+    s.putImageData(im, 0, 0);
+    return off;
+  });
+  const fibers = Array.from({ length: mode === "paper" ? 260 : 0 }, (_, i) => ({
+    x: rand(seed, i * 5) * W,
+    y: rand(seed, i * 5 + 1) * H,
+    len: 12 + rand(seed, i * 5 + 2) * 40,
+    a: rand(seed, i * 5 + 3) * Math.PI,
+    bend: (rand(seed, i * 5 + 4) - 0.5) * 18,
+  }));
+  const paper = ink(ctx, "bg");
+  const line = ink(ctx, "line");
+  return (t) => {
+    const f = Math.floor(t * (o.fps ?? FPS) + 1e-6) % tiles.length;
+    clear(g);
+    if (mode === "paper") {
+      g.fillStyle = paper;
+      g.fillRect(0, 0, W, H);
+      g.globalAlpha = 0.55;
+      g.strokeStyle = line;
+      g.lineWidth = 1.2;
+      g.beginPath();
+      for (const q of fibers) {
+        const ex = q.x + Math.cos(q.a) * q.len;
+        const ey = q.y + Math.sin(q.a) * q.len;
+        g.moveTo(q.x, q.y);
+        g.quadraticCurveTo((q.x + ex) / 2 + q.bend, (q.y + ey) / 2 - q.bend, ex, ey);
+      }
+      g.stroke();
+      g.globalAlpha = 1;
+    }
+    g.imageSmoothingEnabled = true;
+    g.drawImage(tiles[f], 0, 0, W, H);
+  };
+}
+
+/**
+ * 종이 밀림 — 판면이 드럼에 물려 한 방향으로 끌려가며 조금 돈다. 초당 12장으로 끊어 0.1초 안에 늘 몇 px 씩 옮겨
+ * 판이 다 찍힌 뒤에도 화면이 쉬지 않는다. 방향·도는 쪽은 시드로
+ */
+export function sheetDrift(t: number, o: { from: number; seed: string | number; px?: number; deg?: number; dur?: number }): Style {
+  const k = clamp(printFrames(t - o.from) / (o.dur ?? 1.4));
+  const a = rand(o.seed, 0) * Math.PI * 2;
+  const px = o.px ?? 70;
+  const deg = (rand(o.seed, 1) - 0.5) * 2 * (o.deg ?? 1.6);
+  return { x: Math.cos(a) * px * (k - 0.5), y: Math.sin(a) * px * 0.6 * (k - 0.5), rotate: deg * (k - 0.5) };
+}
+
+/** 드럼이 종이 위를 지나가며 판이 찍힌다 — 지나간 쪽만 보이는 clip. 초당 24장으로 끊는다 */
+export function drumPass(t: number, o: { at: number; dur?: number; dir?: "down" | "right" | "up" }): Style {
+  const p = clamp(printFrames(t - o.at, 24) / (o.dur ?? 0.33));
+  const rest = 1 - p;
+  if (o.dir === "right") return { clip: { right: rest } };
+  if (o.dir === "up") return { clip: { top: rest } };
+  return { clip: { bottom: rest } };
+}
+
+/** 새 종이가 들어와 앞 장을 덮는다(장면 끝). 다음 장면은 빈 종이에서 판을 찍기 시작하면 이어진다 */
+export function sheetFeed(el: HTMLElement, o: { ctx: SceneCtx; at: number; dur?: number; from?: "right" | "bottom" }): (t: number) => void {
+  const { ctx } = o;
+  const sheet = document.createElement("div");
+  sheet.style.cssText = `position:absolute;left:-40px;top:-40px;width:${ctx.meta.width + 80}px;height:${ctx.meta.height + 80}px;background:${ink(ctx, "bg")};border-left:3px solid ${ink(ctx, "line")};border-top:3px solid ${ink(ctx, "line")};visibility:hidden;`;
+  el.append(sheet);
+  const dur = o.dur ?? 0.42;
+  return (t) => {
+    if (t < o.at) {
+      sheet.style.visibility = "hidden";
+      return;
+    }
+    sheet.style.visibility = "visible";
+    const p = clamp(printFrames(t - o.at) / dur);
+    const e = 1 - (1 - p) ** 3;
+    const off = 1 - e;
+    const s: Style = o.from === "bottom" ? { y: off * (ctx.meta.height + 80), rotate: off * 3 } : { x: off * (ctx.meta.width + 80), rotate: -off * 4 };
+    applyStyle(sheet, s);
+  };
+}
+
+/** 드롭 — 화면 전체에 핑크 판이 한 번 통째로 찍혔다 걷히고 망점 고리가 퍼진다. 반환한 흔들림을 판들 틀에 건다 */
+export function dropPlate(el: HTMLElement, o: { ctx: SceneCtx; drop?: number; ink?: string; origin?: [number, number] }): (t: number) => DropBurstState {
+  const { ctx } = o;
+  const flood = document.createElement("div");
+  flood.style.cssText = `position:absolute;inset:0;background:${ink(ctx, o.ink ?? "accent")};mix-blend-mode:multiply;opacity:0;`;
+  el.append(flood);
+  const g = canvas(el, ctx);
+  const [ox, oy] = o.origin ?? [ctx.meta.width / 2, ctx.meta.height / 2];
+  const far = Math.hypot(Math.max(ox, ctx.meta.width - ox), Math.max(oy, ctx.meta.height - oy));
+  const color = ink(ctx, o.ink ?? "accent");
+  const pitch = 22;
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "dropPlate" });
+    // 섬광도 끊어 — 한 장 통째로 찍히고 다음 장들에 걷힌다
+    const tq = printFrames(t);
+    const sq = dropBurst(tq, { beats: ctx.beats, drop: o.drop ?? 0, scene: ctx.id, emit: false });
+    flood.style.opacity = String(Math.round(sq.flash * 100) / 100);
+    clear(g);
+    if (sq.ring.opacity > 0.02) {
+      const R = (sq.ring.scale / 2.8) * far;
+      g.fillStyle = color;
+      g.beginPath();
+      for (let y = oy - R - 80; y <= oy + R + 80; y += pitch) {
+        for (let x = ox - R - 80; x <= ox + R + 80; x += pitch) {
+          const d = Math.abs(Math.hypot(x - ox, y - oy) - R);
+          if (d > 70) continue;
+          const r = (pitch * 0.55 * (1 - d / 70)) * sq.ring.opacity;
+          if (r < 0.5) continue;
+          g.moveTo(x + r, y);
+          g.arc(x, y, r, 0, Math.PI * 2);
+        }
+      }
+      g.fill();
+    }
+    return s;
+  };
+}

package/themes/riso-zine/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>

package/themes/riso-zine/sample/beats.json

@@ -0,0 +1 @@
+{"source": "assets/music/kawaii-friends-0400.mp3", "from": 0, "duration": 15.0, "bpm": 170.0, "beats": [0.2899, 0.6382, 0.9923, 1.3464, 1.6947, 2.0546, 2.4029, 2.757, 3.1169, 3.4652, 3.8251, 4.1734, 4.5275, 4.8758, 5.2299, 5.584, 5.9381, 6.2922, 6.6463, 6.9946, 7.336, 7.6971, 8.0628, 8.4053, 8.7478, 9.1135, 9.4676, 9.8159, 10.1816, 10.5241, 10.8782, 11.2265, 11.5748, 11.9405, 12.3004, 12.6487, 12.997, 13.3453, 13.7052, 14.0477, 14.396, 14.7617], "downbeats": [0.2899, 1.6947, 3.1169, 4.5275, 5.9381, 7.336, 8.7478, 10.1816, 11.5748, 12.997, 14.396], "bars": [0.2899, 1.6947, 3.1169, 4.5275, 5.9381, 7.336, 8.7478, 10.1816, 11.5748, 12.997, 14.396], "phrases": [0.0, 1.6947, 7.336, 12.997], "sections": [{"t": 0.0, "kind": "intro"}, {"t": 7.336, "kind": "drop", "strength": 0.99}], "drops": [7.336], "energy": {"hz": 20, "low": [0.0, 0.144, 0.183, 0.0, 0.0, 0.001, 0.0, 0.0, 0.208, 0.21, 0.0, 0.0, 0.0, 0.0, 0.0, 0.226, 0.241, 0.0, 0.0, 0.394, 0.25, 0.0, 0.131, 0.19, 0.033, 0.024, 0.245, 0.101, 0.009, 0.0, 0.0, 0.016, 0.134, 0.285, 0.097, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.371, 0.335, 0.0, 0.0, 0.148, 0.0, 0.0, 0.265, 0.171, 0.0, 0.0, 0.184, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.249, 0.015, 0.0, 0.0, 0.0, 0.0, 0.072, 0.297, 0.092, 0.009, 0.312, 0.389, 0.096, 0.031, 0.133, 0.021, 0.112, 0.0, 0.0, 0.074, 0.0, 0.227, 0.089, 0.018, 0.0, 0.091, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.022, 0.0, 0.0, 0.026, 0.02, 0.006, 0.184, 0.411, 0.068, 0.0, 0.156, 0.083, 0.0, 0.055, 0.182, 0.074, 0.0, 0.288, 0.232, 0.072, 0.022, 0.0, 0.0, 0.0, 0.0, 0.0, 0.015, 0.018, 0.053, 0.0, 0.03, 0.0, 0.0, 0.004, 0.094, 0.461, 0.453, 0.505, 0.55, 0.588, 0.627, 0.672, 0.72, 0.752, 0.759, 0.767, 0.772, 0.761, 0.724, 0.896, 0.998, 0.973, 0.838, 0.624, 0.667, 0.733, 0.796, 0.819, 0.8, 0.747, 0.833, 0.811, 0.816, 0.733, 0.507, 0.341, 0.066, 0.062, 0.0, 0.0, 0.798, 0.981, 1.0, 0.943, 0.813, 0.803, 0.799, 0.747, 0.606, 0.6, 0.606, 0.622, 0.649, 0.684, 0.812, 0.992, 0.986, 0.92, 0.668, 0.628, 0.572, 0.479, 0.365, 0.0, 0.0, 0.075, 0.0, 0.0, 0.758, 1.0, 1.0, 0.979, 0.876, 0.899, 0.9, 0.844, 0.772, 0.805, 0.811, 0.83, 0.858, 0.897, 0.945, 1.0, 0.961, 0.898, 0.862, 0.911, 0.902, 0.822, 0.611, 0.352, 0.0, 0.083, 0.0, 0.0, 0.682, 0.999, 0.985, 0.983, 0.897, 0.871, 0.869, 0.855, 0.74, 0.678, 0.686, 0.705, 0.733, 0.771, 0.793, 0.956, 0.999, 0.955, 0.815, 0.738, 0.75, 0.757, 0.672, 0.597, 0.618, 0.761, 0.977, 0.994, 0.935, 0.8, 0.8, 0.792, 0.782, 0.743, 0.643, 0.522, 0.898, 0.996, 0.975, 0.829, 0.577, 0.615, 0.683, 0.739, 0.765, 0.748, 0.703, 0.763, 0.752, 0.757, 0.68, 0.478, 0.287, 0.03, 0.055, 0.0, 0.022, 0.832, 0.99, 0.967, 0.886, 0.739, 0.749, 0.76, 0.719, 0.607, 0.613, 0.628, 0.645, 0.669, 0.713, 0.823, 1.0, 0.989, 0.916, 0.754, 0.736], "mid": [0.625, 0.806, 0.843, 0.738, 0.642, 0.71, 0.726, 0.582, 0.708, 0.759, 0.668, 0.544, 0.611, 0.572, 0.451, 0.785, 0.835, 0.629, 0.607, 0.911, 0.834, 0.737, 0.856, 0.806, 0.755, 0.566, 0.739, 0.759, 0.685, 0.742, 0.708, 0.66, 0.649, 0.834, 0.819, 0.654, 0.626, 0.747, 0.713, 0.526, 0.65, 0.711, 0.616, 0.518, 0.679, 0.644, 0.437, 0.861, 0.792, 0.499, 0.6, 0.773, 0.665, 0.541, 0.865, 0.918, 0.817, 0.666, 0.852, 0.772, 0.629, 0.697, 0.756, 0.683, 0.585, 0.767, 0.706, 0.55, 0.633, 0.706, 0.632, 0.595, 0.805, 0.726, 0.689, 0.822, 0.841, 0.661, 0.738, 0.746, 0.585, 0.553, 0.588, 0.601, 0.599, 0.566, 0.831, 0.755, 0.6, 0.698, 0.863, 0.782, 0.543, 0.66, 0.617, 0.593, 0.647, 0.707, 0.746, 0.728, 0.746, 0.741, 0.665, 0.748, 0.881, 0.656, 0.472, 0.682, 0.66, 0.618, 0.719, 0.915, 0.852, 0.797, 0.899, 0.862, 0.789, 0.769, 0.7, 0.637, 0.575, 0.608, 0.638, 0.653, 0.664, 0.714, 0.763, 0.732, 0.705, 0.722, 0.722, 0.794, 0.908, 0.714, 0.575, 0.602, 0.584, 0.615, 0.628, 0.732, 0.814, 0.826, 0.779, 0.756, 0.718, 0.641, 0.947, 0.785, 0.711, 0.7, 0.742, 0.817, 0.844, 0.879, 0.896, 0.888, 0.878, 0.878, 0.864, 0.82, 0.876, 0.775, 0.496, 0.503, 0.591, 0.607, 0.65, 0.945, 0.901, 0.821, 0.799, 0.845, 0.875, 0.891, 0.863, 0.757, 0.747, 0.77, 0.796, 0.821, 0.837, 0.935, 0.898, 0.746, 0.732, 0.823, 0.791, 0.805, 0.854, 0.843, 0.515, 0.434, 0.63, 0.711, 0.701, 0.893, 0.92, 0.775, 0.78, 0.834, 0.793, 0.723, 0.708, 0.777, 0.773, 0.82, 0.845, 0.876, 0.918, 0.993, 1.0, 1.0, 0.9, 0.954, 0.887, 0.84, 0.841, 0.888, 0.601, 0.394, 0.659, 0.815, 0.862, 0.939, 1.0, 0.974, 0.953, 0.891, 0.902, 0.903, 0.91, 0.818, 0.778, 0.724, 0.712, 0.78, 0.789, 0.831, 0.966, 0.839, 0.816, 0.822, 0.822, 0.823, 0.843, 0.891, 0.736, 0.674, 0.871, 0.882, 0.8, 0.831, 0.886, 0.902, 0.898, 0.884, 0.909, 0.859, 0.787, 0.949, 0.796, 0.732, 0.753, 0.82, 0.825, 0.862, 0.904, 0.887, 0.883, 0.891, 0.89, 0.876, 0.789, 0.877, 0.733, 0.36, 0.504, 0.736, 0.773, 0.788, 0.977, 0.945, 0.924, 0.905, 0.866, 0.864, 0.867, 0.828, 0.737, 0.731, 0.776, 0.775, 0.75, 0.804, 0.959, 0.923, 0.796, 0.789, 0.85, 0.849], "high": [0.498, 0.853, 0.762, 0.559, 0.557, 0.552, 0.53, 0.517, 0.82, 0.775, 0.541, 0.543, 0.521, 0.483, 0.506, 0.845, 0.835, 0.601, 0.653, 0.952, 0.836, 0.629, 0.85, 0.779, 0.549, 0.583, 0.814, 0.62, 0.566, 0.76, 0.644, 0.544, 0.692, 0.884, 0.66, 0.547, 0.555, 0.615, 0.504, 0.5, 0.528, 0.522, 0.522, 0.513, 0.482, 0.507, 0.549, 0.923, 0.885, 0.563, 0.615, 0.731, 0.497, 0.47, 0.745, 0.681, 0.508, 0.594, 0.784, 0.576, 0.546, 0.547, 0.52, 0.543, 0.638, 0.806, 0.585, 0.587, 0.633, 0.633, 0.643, 0.713, 0.881, 0.809, 0.828, 0.905, 0.936, 0.696, 0.726, 0.85, 0.646, 0.663, 0.682, 0.705, 0.706, 0.728, 0.892, 0.764, 0.738, 0.731, 0.693, 0.645, 0.625, 0.653, 0.654, 0.695, 0.751, 0.773, 0.773, 0.782, 0.837, 0.836, 0.832, 0.884, 0.96, 0.761, 0.678, 0.85, 0.793, 0.786, 0.871, 0.962, 0.906, 0.882, 0.903, 0.888, 0.891, 0.864, 0.758, 0.674, 0.697, 0.712, 0.726, 0.752, 0.807, 0.838, 0.836, 0.848, 0.85, 0.868, 0.897, 0.907, 0.977, 0.839, 0.709, 0.726, 0.751, 0.78, 0.825, 0.863, 0.856, 0.857, 0.864, 0.875, 0.874, 1.0, 1.0, 0.811, 0.806, 0.793, 0.789, 0.826, 0.86, 0.895, 0.892, 0.888, 0.883, 0.879, 0.87, 0.847, 0.948, 0.885, 0.649, 0.574, 0.654, 0.671, 0.696, 0.831, 0.804, 0.843, 0.812, 0.839, 0.899, 0.906, 0.845, 0.707, 0.727, 0.774, 0.771, 0.783, 0.813, 0.877, 0.77, 0.659, 0.672, 0.81, 0.843, 0.864, 0.932, 0.928, 0.637, 0.439, 0.61, 0.671, 0.644, 0.802, 0.77, 0.736, 0.728, 0.714, 0.616, 0.503, 0.548, 0.683, 0.71, 0.714, 0.705, 0.758, 0.831, 0.872, 0.872, 0.875, 0.885, 0.89, 0.854, 0.82, 0.892, 0.961, 0.726, 0.496, 0.603, 0.74, 0.744, 0.828, 0.847, 0.846, 0.831, 0.786, 0.846, 0.859, 0.837, 0.747, 0.713, 0.673, 0.715, 0.84, 0.868, 0.829, 0.848, 0.796, 0.803, 0.838, 0.921, 0.944, 0.927, 0.968, 0.831, 0.699, 0.812, 0.798, 0.799, 0.863, 0.888, 0.847, 0.839, 0.861, 0.884, 0.834, 0.78, 0.832, 0.689, 0.707, 0.686, 0.702, 0.801, 0.858, 0.88, 0.871, 0.862, 0.852, 0.882, 0.867, 0.806, 0.946, 0.851, 0.52, 0.458, 0.679, 0.739, 0.75, 0.862, 0.857, 0.873, 0.821, 0.899, 0.924, 0.921, 0.846, 0.77, 0.781, 0.774, 0.783, 0.81, 0.867, 0.948, 0.824, 0.734, 0.722, 0.894, 0.935]}}

package/themes/riso-zine/sample/index.html

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

package/themes/riso-zine/sample/kf.json

@@ -0,0 +1,59 @@
+{
+  "template": "promo",
+  "title": "riso-zine · OpenGateway 15초",
+  "theme": "riso-zine",
+  "fps": 60,
+  "width": 1920,
+  "height": 1080,
+  "duration": 15.0,
+  "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": "한 주소와 /v1 이 판으로, 같은 주소에 모델 ID 만 박마다 새 판으로 바뀌고, OpenAI·Anthropic 두 형식이 겹친다"
+    },
+    {
+      "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/riso-zine/sample/lib/og.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/riso-zine/sample/lib/shot.ts

@@ -0,0 +1,86 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { drumPass, halftone, plateStamp, sheetDrift, type HalftoneOpts } from "../../effects.ts";
+import { layer, text } from "./zine.ts";
+
+export interface Word {
+  text: string;
+  size: number;
+  y: number;
+  /** 없으면 가운데 */
+  x?: number;
+  font?: "display" | "sans" | "mono";
+  weight?: number;
+}
+
+/** 판 한 장 — 그 마디의 몇째 박(0–3)에 찍고, until 박에 걷는다 */
+export interface Plate {
+  beat: number;
+  ink: "blue" | "pink";
+  words?: Word[];
+  build?(plate: HTMLElement, ctx: SceneCtx): void;
+  px?: number;
+  until?: number;
+}
+
+export interface Tone extends Omit<HalftoneOpts, "ctx" | "at"> {
+  beat: number;
+}
+
+/** 판면 하나 = 마디 하나 */
+export interface Sheet {
+  plates: Plate[];
+  tones?: Tone[];
+}
+
+const DIRS = ["down", "right", "up", "right"] as const;
+
+export function place(p: HTMLElement, ctx: SceneCtx, w: Word) {
+  const f = ctx.style.fonts[w.font ?? "display"];
+  const where = w.x === undefined ? "left:0;width:1920px;text-align:center;" : `left:${w.x}px;`;
+  text(p, w.text, `${where}top:${w.y}px;font:${w.weight ?? (w.font === "display" || !w.font ? 400 : 700)} ${w.size}px ${f};`);
+}
+
+/** 장면을 마디마다 판면 하나로. 새 판면은 드럼이 지나가며 드러나고, 그동안 판면은 늘 끌려간다 */
+export function sheets(parent: HTMLElement, ctx: SceneCtx, list: Sheet[], o: { pulse?: boolean } = {}) {
+  const bars = ctx.beats.bars.filter((x) => x >= -1e-6 && x < ctx.dur - 1e-6);
+  const beats = ctx.beats.beats;
+  const edge = (i: number) => (i === 0 ? 0 : i >= list.length ? ctx.dur + 1 : (bars[i] ?? (ctx.dur * i) / list.length));
+  return list.map((s, i) => {
+    const from = edge(i);
+    const to = edge(i + 1);
+    // 첫 판면은 장면 처음(0초)부터 — 마디 첫 박이 조금 뒤에 올 수 있다
+    const first = beats.find((x) => x >= (i === 0 ? 0 : from) - 0.05) ?? from;
+    const bb = [0, 1, 2, 3, 4].map((k) => (k === 0 ? from : (beats.find((x) => x >= first + k * 0.3 - 0.05) ?? from + k * 0.35)));
+    const box = layer(parent);
+    const sheet = layer(box);
+    const seed = `${ctx.id}:${i}`;
+    const tones = (s.tones ?? []).map((tn) => halftone(sheet, { ctx, ...tn, at: bb[tn.beat], pulse: o.pulse ?? tn.pulse }));
+    const plates = s.plates.map((pl, k) => {
+      const holder = layer(sheet);
+      const draw = plateStamp(holder, {
+        ctx,
+        plates: [{ ink: pl.ink, at: bb[pl.beat], px: pl.px, seed: `${seed}:${k}` }],
+        build: (p) => {
+          for (const w of pl.words ?? []) place(p, ctx, w);
+          pl.build?.(p, ctx);
+        },
+      });
+      const until = pl.until === undefined ? Infinity : bb[pl.until];
+      return (t: number) => {
+        const on = t < until;
+        holder.style.display = on ? "" : "none";
+        if (on) draw(t);
+      };
+    });
+    return (t: number) => {
+      const on = t >= from && t < to;
+      // visibility 로 숨기면 판(plateStamp)이 visible 을 줄 때 부모를 뚫고 보인다 — display 로 통째로 뺀다
+      box.style.display = on ? "" : "none";
+      if (!on) return;
+      applyStyle(box, drumPass(t, { at: from, dir: DIRS[i % DIRS.length], dur: 0.25 }));
+      applyStyle(sheet, sheetDrift(t, { from, seed, dur: to - from }));
+      for (const tn of tones) tn(t);
+      for (const p of plates) p(t);
+    };
+  });
+}

package/themes/riso-zine/sample/lib/zine.ts

@@ -0,0 +1,42 @@
+import type { SceneCtx } from "@kasaframe/core";
+
+export const barsFrom0 = (ctx: SceneCtx): number[] => ctx.beats.bars.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+export function layer(parent: HTMLElement, css = ""): HTMLElement {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;inset:0;${css}`;
+  parent.append(el);
+  return el;
+}
+
+/** 판 안에 글 한 덩어리 — 자리는 px, 색은 판 잉크(currentColor) */
+export function text(plate: HTMLElement, s: string, css: string): HTMLElement {
+  const el = document.createElement("div");
+  el.textContent = s;
+  el.style.cssText = `position:absolute;white-space:pre;line-height:0.9;${css}`;
+  plate.append(el);
+  return el;
+}
+
+/** OG 로고(currentColor SVG) 를 판에 — 판 잉크로 칠해진다 */
+export function logo(plate: HTMLElement, svg: string, x: number, y: number, w: number) {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:${w}px;`;
+  el.innerHTML = svg.replace(/ width="\d+" height="\d+"/, ' width="100%" style="display:block"');
+  plate.append(el);
+}
+
+/** 망점 값 — 원판 몇 개(가운데 진하고 가장자리 옅게) */
+export const blobs = (spots: [number, number, number][]) => (u: number, v: number) => {
+  let best = 0;
+  for (const [cx, cy, r] of spots) {
+    const d = Math.hypot((u - cx) * 1.78, v - cy);
+    if (d < r) best = Math.max(best, 0.25 + 0.65 * (1 - d / r));
+  }
+  return best;
+};
+
+export const rings = (cx: number, n: number) => (u: number, v: number) => {
+  const d = Math.hypot((u - cx) * 1.78, v - 0.5);
+  return d > 1.1 ? 0 : 0.14 + 0.34 * (0.5 + 0.5 * Math.cos(d * Math.PI * n));
+};

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

@@ -0,0 +1,61 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { paperGrain } from "../../effects.ts";
+import svg from "../assets/og/logo.svg?raw";
+import { OG } from "../lib/og.ts";
+import { sheets } from "../lib/shot.ts";
+import { layer, logo, rings } from "../lib/zine.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = paperGrain(layer(root), { ctx, seed: "end" });
+    const art = layer(root);
+    const FULL = { x: 0, y: 0, w: 1920, h: 1080 };
+    const max = Math.max(...OG.ttft.map(([, , ms]) => ms));
+    const pages = sheets(
+      art,
+      ctx,
+      [
+        {
+          // 첫 토큰 가운데값 셋 — 줄마다 한 박, ms 만큼 핑크 막대
+          plates: [
+            ...OG.ttft.map(([id, label], k) => ({
+              beat: k,
+              ink: "blue" as const,
+              words: [
+                { text: id, x: 120, y: 70 + k * 290, size: 48, font: "mono" as const, weight: 600 },
+                { text: label, x: 120, y: 125 + k * 290, size: 160 },
+              ],
+            })),
+            { beat: 3, ink: "blue", words: [{ text: OG.calls, x: 1180, y: 940, size: 60, font: "sans", weight: 800 }] },
+          ],
+          tones: OG.ttft.map(([, , ms], k) => ({ beat: k, x: 960, y: 140 + k * 290, w: (840 * ms) / max, h: 130, ink: "pink" as const, angle: 75, pitch: 14, reveal: "sweep" as const, dir: "right" as const, dur: 0.2, value: () => 0.7 })),
+        },
+        {
+          plates: [
+            { beat: 0, ink: "blue", build: (p) => logo(p, svg, 560, 80, 800) },
+            { beat: 1, ink: "pink", build: (p) => logo(p, svg, 560, 80, 800), px: 10 },
+            { beat: 2, ink: "blue", words: [{ text: OG.site, size: 150, y: 640 }] },
+            { beat: 3, ink: "blue", words: [{ text: OG.url, size: 48, y: 860, font: "mono", weight: 600 }] },
+          ],
+          tones: [{ beat: 3, ...FULL, ink: "pink", angle: 75, pitch: 24, value: rings(0.5, 8) }],
+        },
+        {
+          plates: [
+            { beat: 0, ink: "blue", build: (p) => logo(p, svg, 140, 120, 420) },
+            { beat: 0, ink: "blue", words: [{ text: OG.site, size: 150, x: 640, y: 230 }] },
+            { beat: 1, ink: "pink", words: [{ text: OG.site, size: 150, x: 640, y: 230 }], px: 9 },
+            { beat: 1, ink: "blue", words: [{ text: OG.url, size: 48, x: 650, y: 420, font: "mono", weight: 600 }] },
+          ],
+          tones: [{ beat: 0, ...FULL, ink: "pink", angle: 75, pitch: 22, value: rings(0.2, 10) }],
+        },
+      ],
+      { pulse: true },
+    );
+    const mottle = paperGrain(layer(root), { ctx, mode: "mottle", seed: "end-m" });
+    return (t: number) => {
+      paper(t);
+      for (const p of pages) p(t);
+      mottle(t);
+    };
+  },
+};