kasaframe 0.0.0-stage → 0.1.3

package/themes/riso-zine/sample/scenes/gather.ts

@@ -0,0 +1,62 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { paperGrain } from "../../effects.ts";
+import { OG } from "../lib/og.ts";
+import { sheets, type Word } from "../lib/shot.ts";
+import { blobs, layer } from "../lib/zine.ts";
+
+// 회사 아홉이 흩어진 자리 [x, y, 크기] — 화면을 고르게 덮게 손으로 놓았다
+const SPOT: [number, number, number][] = [
+  [100, 90, 170], [900, 140, 130], [1240, 330, 160],
+  [180, 420, 160], [720, 470, 190], [1450, 640, 150],
+  [120, 760, 130], [640, 800, 130], [1300, 880, 110],
+];
+const WAVE = [0, 1, 2, 0, 1, 2, 0, 1, 2];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = paperGrain(layer(root), { ctx });
+    const art = layer(root);
+    const names: Word[] = OG.providers.map(([name], i) => ({ text: name, x: SPOT[i][0], y: SPOT[i][1], size: SPOT[i][2] }));
+    const cells = OG.providers.map(([name, n], i) => {
+      const x = 120 + (i % 3) * 600;
+      const y = 80 + Math.floor(i / 3) * 310;
+      return { name, n, x, y };
+    });
+    const pages = sheets(art, ctx, [
+      {
+        // 박마다 셋씩 흩어져 찍히고 넷째 박에 핑크로 한 번 더
+        plates: [
+          ...[0, 1, 2].map((k) => ({ beat: k, ink: "blue" as const, words: names.filter((_, i) => WAVE[i] === k) })),
+          { beat: 3, ink: "pink", words: names, px: 7 },
+        ],
+        tones: [{ beat: 1, x: 0, y: 0, w: 1920, h: 1080, ink: "pink", angle: 75, pitch: 20, value: blobs([[0.2, 0.25, 0.22], [0.75, 0.3, 0.18], [0.45, 0.6, 0.2], [0.85, 0.75, 0.2], [0.15, 0.82, 0.16]]) }],
+      },
+      {
+        // 회사별 모델 수 — 줄마다 한 박, 넷째 박에 숫자만 핑크로 겹친다
+        plates: [
+          ...[0, 1, 2].map((r) => ({
+            beat: r,
+            ink: "blue" as const,
+            words: cells.slice(r * 3, r * 3 + 3).flatMap((c) => [
+              { text: String(c.n), x: c.x, y: c.y, size: 210 },
+              { text: c.name, x: c.x + 4, y: c.y + 200, size: 48, font: "sans" as const, weight: 800 },
+            ]),
+          })),
+          { beat: 3, ink: "pink", words: cells.map((c) => ({ text: String(c.n), x: c.x, y: c.y, size: 210 })), px: 8 },
+        ],
+        tones: [{ beat: 0, x: 0, y: 0, w: 1920, h: 1080, ink: "pink", angle: 75, pitch: 14, reveal: "sweep", dir: "down", dur: 1.0, value: (u, v) => {
+          const c = cells[Math.min(2, Math.floor(v * 3.48)) * 3 + Math.min(2, Math.floor(u * 3.2))];
+          const lu = u * 1920 - c.x;
+          const lv = v * 1080 - c.y;
+          return lv > 190 && lv < 260 && lu > 0 && lu < (480 * c.n) / 41 ? 0.6 : 0;
+        } }],
+      },
+    ]);
+    const mottle = paperGrain(layer(root), { ctx, mode: "mottle" });
+    return (t: number) => {
+      paper(t);
+      for (const p of pages) p(t);
+      mottle(t);
+    };
+  },
+};

package/themes/riso-zine/sample/scenes/models.ts

@@ -0,0 +1,52 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { paperGrain } from "../../effects.ts";
+import { OG } from "../lib/og.ts";
+import { sheets } from "../lib/shot.ts";
+import { layer, rings } from "../lib/zine.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = paperGrain(layer(root), { ctx, seed: "models" });
+    const art = layer(root);
+    const FULL = { x: 0, y: 0, w: 1920, h: 1080 };
+    const pages = sheets(art, ctx, [
+      {
+        // 한 주소 — 블루 주소, 핑크 띠, 엔드포인트, 핑크 /v1
+        plates: [
+          { beat: 0, ink: "blue", words: [{ text: "apis.opengateway.ai", size: 150, y: 110 }, { text: "/v1", size: 420, y: 300 }] },
+          { beat: 2, ink: "blue", words: OG.endpoints.map((e, i) => ({ text: `POST /v1${e}`, x: 140 + (i % 2) * 860, y: 790 + Math.floor(i / 2) * 80, size: 50, font: "mono" as const, weight: 600 })) },
+          { beat: 3, ink: "pink", words: [{ text: "/v1", size: 420, y: 300 }], px: 9 },
+        ],
+        tones: [{ beat: 1, x: 0, y: 300, w: 1920, h: 440, ink: "pink", angle: 75, pitch: 16, reveal: "sweep", dir: "right", dur: 0.3, value: (u) => ((u * 22) % 1 < 0.5 ? 0.55 : 0.08) }],
+      },
+      {
+        // 같은 주소에 모델만 박마다 바뀐다 — 앞 판은 걷고 새 판을 찍는다
+        plates: [
+          { beat: 0, ink: "blue", words: [{ text: "POST /v1/chat/completions", size: 52, y: 90, font: "mono", weight: 600 }] },
+          ...OG.ids.slice(0, 4).map((id, k) => {
+            const [who, model] = id.split("/");
+            return { beat: k, until: k + 1, ink: "blue" as const, words: [{ text: who, size: 300, y: 220 }, { text: model, size: 96, y: 620 }] };
+          }),
+          ...OG.ids.slice(0, 4).map((id, k) => ({ beat: k, until: k + 1, ink: "pink" as const, px: 8, words: [{ text: id.split("/")[0], size: 300, y: 220 }] })),
+        ],
+        tones: [{ beat: 0, ...FULL, ink: "pink", angle: 75, pitch: 22, value: rings(0.5, 10) }],
+      },
+      {
+        // OpenAI·Anthropic 두 형식 — 두 판이 겹쳐 보라, 드롭 앞 망점이 아래서 차오른다
+        plates: [
+          { beat: 0, ink: "blue", words: [{ text: "OpenAI", size: 280, x: 130, y: 120 }] },
+          { beat: 1, ink: "pink", words: [{ text: "Anthropic", size: 260, x: 220, y: 430 }] },
+          { beat: 1, ink: "blue", words: [{ text: "Anthropic", size: 260, x: 220, y: 430 }], px: 6 },
+          { beat: 2, ink: "blue", words: [{ text: "/chat/completions  /messages", size: 56, y: 800, font: "mono", weight: 600 }] },
+        ],
+        tones: [{ beat: 3, x: 0, y: 560, w: 1920, h: 480, ink: "pink", angle: 75, pitch: 16, value: (_, v) => 0.06 + 0.85 * v ** 1.4 }],
+      },
+    ]);
+    const mottle = paperGrain(layer(root), { ctx, mode: "mottle", seed: "models-m" });
+    return (t: number) => {
+      paper(t);
+      for (const p of pages) p(t);
+      mottle(t);
+    };
+  },
+};

package/themes/riso-zine/sample/scenes/price.ts

@@ -0,0 +1,82 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { dropPlate, paperGrain } from "../../effects.ts";
+import { OG } from "../lib/og.ts";
+import { sheets } from "../lib/shot.ts";
+import { layer, rings } from "../lib/zine.ts";
+
+// 하루 시계 — 00시가 위, 시계 방향. 00–10시 창은 진하게
+const DIAL = { x: 120, y: 100, w: 880, h: 880 };
+const dial = (u: number, v: number) => {
+  const dx = u - 0.5;
+  const dy = v - 0.5;
+  const d = Math.hypot(dx, dy);
+  if (d < 0.3 || d > 0.47) return 0;
+  const hour = Math.floor((((Math.atan2(dx, -dy) / (Math.PI * 2)) + 1) % 1) * 24);
+  return hour >= OG.night.from && hour < OG.night.to ? 0.9 : 0.22;
+};
+const hourAt = (h: number, r: number): [number, number] => {
+  const a = (h / 24) * Math.PI * 2;
+  return [DIAL.x + DIAL.w / 2 + Math.sin(a) * r, DIAL.y + DIAL.h / 2 - Math.cos(a) * r];
+};
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const paper = paperGrain(layer(root), { ctx, seed: "price" });
+    const cam = layer(root);
+    const FULL = { x: 0, y: 0, w: 1920, h: 1080 };
+    const [ds, glm] = [OG.deepseek, OG.glm];
+    // 드롭 구간이라 망점이 박마다 부푼다(beatPulse drops-only)
+    const pages = sheets(
+      cam,
+      ctx,
+      [
+        {
+          plates: [
+            { beat: 0, ink: "blue", words: [{ text: String(OG.models), size: 760, y: 20 }] },
+            { beat: 1, ink: "pink", words: [{ text: String(OG.models), size: 760, y: 20 }], px: 10 },
+            { beat: 2, ink: "blue", words: [{ text: "한 주소", size: 150, y: 760 }] },
+            { beat: 3, ink: "blue", words: [{ text: OG.host, size: 46, y: 950, font: "mono", weight: 600 }] },
+          ],
+          tones: [{ beat: 0, ...FULL, ink: "pink", angle: 75, pitch: 22, value: rings(0.5, 12) }],
+        },
+        {
+          plates: [
+            {
+              beat: 0,
+              ink: "blue",
+              words: [0, 6, 12, 18].map((h) => {
+                const [x, y] = hourAt(h, 470 * 0.88);
+                return { text: String(h).padStart(2, "0"), x: x - 40, y: y - 30, size: 60, font: "mono" as const, weight: 700 };
+              }),
+            },
+            { beat: 2, ink: "blue", words: [{ text: "00:00-10:00", size: 120, x: 1060, y: 160 }, { text: OG.night.tz, size: 90, x: 1060, y: 300 }] },
+            { beat: 3, ink: "blue", words: [{ text: ds.off, size: 300, x: 1060, y: 520 }] },
+            { beat: 3, ink: "pink", words: [{ text: ds.off, size: 300, x: 1060, y: 520 }], px: 9 },
+          ],
+          tones: [{ beat: 1, ...DIAL, ink: "pink", angle: 75, pitch: 14, value: dial }],
+        },
+        {
+          plates: [
+            { beat: 0, ink: "blue", words: [{ text: ds.id, size: 52, x: 120, y: 80, font: "mono", weight: 600 }, { text: "입력", size: 80, x: 120, y: 250, font: "sans", weight: 800 }, { text: ds.input[0], size: 150, x: 330, y: 220 }] },
+            { beat: 1, ink: "blue", words: [{ text: ds.input[1], size: 300, x: 960, y: 150 }] },
+            { beat: 2, ink: "blue", words: [{ text: "출력", size: 80, x: 120, y: 640, font: "sans", weight: 800 }, { text: ds.output[0], size: 150, x: 330, y: 610 }, { text: ds.output[1], size: 300, x: 960, y: 540 }] },
+            { beat: 3, ink: "pink", words: [{ text: ds.input[1], size: 300, x: 960, y: 150 }, { text: ds.output[1], size: 300, x: 960, y: 540 }], px: 8 },
+            { beat: 3, ink: "blue", words: [{ text: `${glm.id}  ${glm.off}`, size: 48, x: 120, y: 950, font: "mono", weight: 600 }] },
+          ],
+          // 정가 위에 핑크 줄 — 지운 값
+          tones: [{ beat: 1, x: 320, y: 290, w: 560, h: 30, ink: "pink", angle: 75, pitch: 8, reveal: "sweep", dir: "right", dur: 0.15, value: () => 0.9 }, { beat: 2, x: 320, y: 680, w: 560, h: 30, ink: "pink", angle: 75, pitch: 8, reveal: "sweep", dir: "right", dur: 0.15, value: () => 0.9 }],
+        },
+      ],
+      { pulse: true },
+    );
+    const plate = dropPlate(layer(root), { ctx, drop: 0, origin: [960, 400] });
+    const mottle = paperGrain(layer(root), { ctx, mode: "mottle", seed: "price-m" });
+    return (t: number) => {
+      paper(t);
+      for (const p of pages) p(t);
+      const s = plate(t);
+      applyStyle(cam, s.shake);
+      mottle(t);
+    };
+  },
+};

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

@@ -0,0 +1,99 @@
+{
+  "name": "riso-zine",
+  "label": "리소 잡지 — 잉크 판을 한 장씩 찍는다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F2EDE4",
+    "surface": "#FAF7F1",
+    "raised": "#E9E2D4",
+    "line": "#CFC5B3",
+    "ink": "#3255A4",
+    "inkSoft": "#3255A4",
+    "dim": "#5B74B0",
+    "accent": "#FF48B0",
+    "accentSoft": "#FFB3DA",
+    "accentText": "#3255A4",
+    "onAccent": "#F2EDE4",
+    "success": "#3255A4",
+    "danger": "#FF48B0",
+    "warning": "#FF48B0",
+    "blue": "#3255A4",
+    "pink": "#FF48B0",
+    "paper": "#F2EDE4"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Black Han Sans\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Black Han Sans",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/blackhansans/BlackHanSans-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": "JetBrains Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+        "weight": "100 800"
+      }
+    ]
+  },
+  "type": {
+    "hero": 220,
+    "title": 110,
+    "body": 44,
+    "caption": 32,
+    "weightDisplay": 400,
+    "weightBody": 600,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.5,
+    "enter": "fade",
+    "ease": "linear",
+    "durations": {
+      "fast": 0.083,
+      "base": 0.25,
+      "slow": 0.5
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F2EDE4 신문 종이",
+      "#3255A4 미디엄 블루 판",
+      "#FF48B0 형광 핑크 판 — 겹치면 곱하기로 보라"
+    ],
+    "texture": "종이결(섬유·얼룩)이 초당 8번 바뀌며 끓는다. 판마다 2–4px 어긋남, 망점(각도 블루 15° 핑크 75°), 잉크는 곱하기로 겹친다. 그라데이션은 망점으로만",
+    "movement": "초당 12장으로 끊어 움직인다(on twos). 판은 박에서 찍히고, 찍히는 순간 한 장 어긋났다가 제자리 근처로 앉는다. 미끄러지는 보간·흐림 없음"
+  },
+  "notes": [
+    "리소그래프 잉크 이름: Medium Blue #3255A4 · Fluorescent Pink #FF48B0.",
+    "핑크 한 판으로 작은 글을 쓰지 않는다(종이 위 2.6:1). 글은 블루 판, 큰 글은 두 판을 겹쳐 보라 테두리가 생기게.",
+    "카메라 이동 없음 — 종이는 책상에 놓여 있다."
+  ]
+}

package/themes/riso-zine/slots.ts

@@ -0,0 +1,81 @@
+import { clamp, randRange, spring, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, shownCount, strokePath, traceCanvas } from "@kasaframe/themes/slotkit";
+import { dropPlate, misregister, paperGrain, printFrames } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 잉크 판을 한 장씩 찍는 결로. 움직임은 printFrames 로 초당 12장에 끊는다
+export const slots: ThemeSlots = {
+  surface(el, { ctx, seed }) {
+    return paperGrain(el, { ctx, seed });
+  },
+
+  // 판 두 장 — 블루 테두리 판이 먼저, 핑크 면 판이 한 장 늦게 어긋나 찍힌다. 둘 다 곱하기라 겹친 곳이 보라
+  panel(el, { at, seed, tone }) {
+    const box = layer(el, "inset:0", true);
+    const face = layer(box, `inset:0;mix-blend-mode:multiply;background:${tone === "accent" ? "var(--kf-accent)" : "color-mix(in srgb, var(--kf-accent) 22%, transparent)"}`);
+    const edge = layer(box, "inset:0;mix-blend-mode:multiply;border:6px solid var(--kf-ink)");
+    const late = at + 1 / 12;
+    return (t) => {
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      edge.style.transform = toTransform(misregister(t, { seed: `${seed}:edge`, px: 3, at }));
+      face.style.visibility = t >= late ? "visible" : "hidden";
+      face.style.transform = toTransform(misregister(t, { seed: `${seed}:face`, px: 7, at: late }));
+    };
+  },
+
+  // 판이 크게 어긋나 찍혔다가 두 장 만에 제자리 — 배율도 초당 12장으로 끊어 내려앉는다
+  land(_el, { at, seed }) {
+    return (t): Style => {
+      if (t < at) return {};
+      const q = printFrames(t - at);
+      if (q > 0.5) return {};
+      const m = misregister(t, { seed, px: 10, at, boil: 0 });
+      const k = 1 - clamp(q / 0.5);
+      return { x: (m.x ?? 0) * k, y: (m.y ?? 0) * k, scale: spring(q, { from: 1.12, to: 1, stiffness: 300, damping: 18 }) };
+    };
+  },
+
+  // 글자가 한 장씩 찍히고, 핑크 판 그림자가 어긋나 비친다(앉은 뒤에도 인쇄 결로 끓는다)
+  write(el, { text, at, dur, seed }) {
+    const spans = letters(el, text);
+    return (t) => {
+      const n = shownCount(spans.length, printFrames(t), at, dur);
+      spans.forEach((s, i) => (s.style.visibility = i < n ? "visible" : "hidden"));
+      const m = misregister(t, { seed, px: 3, at });
+      el.style.textShadow = `${(m.x ?? 0).toFixed(1)}px ${(m.y ?? 0).toFixed(1)}px 0 color-mix(in srgb, var(--kf-accent) 75%, transparent)`;
+    };
+  },
+
+  // 블루 선이 드럼처럼 끊어 그어지고, 핑크 판 선이 어긋나 뒤따른다
+  trace(el, { points, at, dur, seed, tone }) {
+    const { g, clear } = traceCanvas(el, points);
+    const blue = getComputedStyle(el).getPropertyValue("--kf-ink").trim() || "#3255A4";
+    const pink = getComputedStyle(el).getPropertyValue("--kf-accent").trim() || "#FF48B0";
+    const dx = randRange(seed, 0, -5, 5);
+    const dy = randRange(seed, 1, -5, 5);
+    return (t) => {
+      clear();
+      const p = clamp(printFrames(t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      g.lineCap = "round";
+      g.lineJoin = "round";
+      g.globalCompositeOperation = "multiply";
+      g.lineWidth = 10;
+      g.strokeStyle = tone === "accent" ? pink : blue;
+      strokePath(g, partial(points, p));
+      g.save();
+      g.translate(dx, dy);
+      g.strokeStyle = tone === "accent" ? blue : pink;
+      g.globalAlpha = 0.7;
+      strokePath(g, partial(points, clamp(p - 0.08)));
+      g.restore();
+      g.globalAlpha = 1;
+    };
+  },
+
+  drop(el, { ctx, drop }) {
+    return dropPlate(el, { ctx, drop });
+  },
+};
+
+const toTransform = (s: Style): string => `translate(${(s.x ?? 0).toFixed(2)}px, ${(s.y ?? 0).toFixed(2)}px)`;

package/themes/riso-zine/style.json

@@ -0,0 +1,99 @@
+{
+  "name": "riso-zine",
+  "label": "리소 잡지 — 잉크 판을 한 장씩 찍는다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F2EDE4",
+    "surface": "#FAF7F1",
+    "raised": "#E9E2D4",
+    "line": "#CFC5B3",
+    "ink": "#3255A4",
+    "inkSoft": "#3255A4",
+    "dim": "#5B74B0",
+    "accent": "#FF48B0",
+    "accentSoft": "#FFB3DA",
+    "accentText": "#3255A4",
+    "onAccent": "#F2EDE4",
+    "success": "#3255A4",
+    "danger": "#FF48B0",
+    "warning": "#FF48B0",
+    "blue": "#3255A4",
+    "pink": "#FF48B0",
+    "paper": "#F2EDE4"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Black Han Sans\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Black Han Sans",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/blackhansans/BlackHanSans-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": "JetBrains Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+        "weight": "100 800"
+      }
+    ]
+  },
+  "type": {
+    "hero": 220,
+    "title": 110,
+    "body": 44,
+    "caption": 32,
+    "weightDisplay": 400,
+    "weightBody": 600,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.5,
+    "enter": "fade",
+    "ease": "linear",
+    "durations": {
+      "fast": 0.083,
+      "base": 0.25,
+      "slow": 0.5
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F2EDE4 신문 종이",
+      "#3255A4 미디엄 블루 판",
+      "#FF48B0 형광 핑크 판 — 겹치면 곱하기로 보라"
+    ],
+    "texture": "종이결(섬유·얼룩)이 초당 8번 바뀌며 끓는다. 판마다 2–4px 어긋남, 망점(각도 블루 15° 핑크 75°), 잉크는 곱하기로 겹친다. 그라데이션은 망점으로만",
+    "movement": "초당 12장으로 끊어 움직인다(on twos). 판은 박에서 찍히고, 찍히는 순간 한 장 어긋났다가 제자리 근처로 앉는다. 미끄러지는 보간·흐림 없음"
+  },
+  "notes": [
+    "리소그래프 잉크 이름: Medium Blue #3255A4 · Fluorescent Pink #FF48B0.",
+    "핑크 한 판으로 작은 글을 쓰지 않는다(종이 위 2.6:1). 글은 블루 판, 큰 글은 두 판을 겹쳐 보라 테두리가 생기게.",
+    "카메라 이동 없음 — 종이는 책상에 놓여 있다."
+  ]
+}

package/themes/riso-zine/theme.json

@@ -0,0 +1,75 @@
+{
+  "id": "riso-zine",
+  "name": "리소 잡지",
+  "metaphor": "잉크 판을 한 장씩 찍어 화면을 인쇄한다",
+  "status": "approved",
+  "approvedAt": "2026-10-08",
+  "purposes": [
+    "promo",
+    "mv",
+    "square",
+    "shorts",
+    "launch"
+  ],
+  "aspect": [
+    "16:9",
+    "1:1",
+    "9:16"
+  ],
+  "effects": [
+    {
+      "name": "printFrames",
+      "kind": "value",
+      "does": "t 를 초당 12장으로 끊는다 — 손으로 짠 움직임도 이걸 거쳐 인쇄물처럼 끊긴다",
+      "use": "const tq = printFrames(t)"
+    },
+    {
+      "name": "misregister",
+      "kind": "value",
+      "does": "판 어긋남 — 시드로 정한 ±px 에 머물고 찍히는 두 장은 더 어긋났다 앉는다, 초당 12번 끓는다",
+      "use": "applyStyle(el, misregister(t, { seed: \"title-pink\", px: 6, at: 1.4 }))"
+    },
+    {
+      "name": "plateStamp",
+      "kind": "layer",
+      "does": "같은 그림을 잉크 판 여러 장으로 찍는다 — 곱하기로 겹쳐 블루+핑크가 보라, 어긋난 가장자리에 두 색",
+      "use": "const title = plateStamp(el, { ctx, plates: [{ ink: \"blue\", at: 0 }, { ink: \"pink\", at: 1.4, px: 7 }], build: (p) => { p.textContent = \"170\" } })"
+    },
+    {
+      "name": "halftone",
+      "kind": "layer",
+      "does": "망점 판 — 값이 클수록 점이 크다, grow 로 자라거나 sweep 으로 드럼이 지나간 줄부터 찍힌다, 드롭 구간에선 박마다 부푼다",
+      "use": "const dots = halftone(el, { ctx, x, y, w, h, ink: \"pink\", angle: 75, value: (u, v) => 1 - v, at: 1.4 })"
+    },
+    {
+      "name": "paperGrain",
+      "kind": "layer",
+      "does": "종이결 — paper 는 바탕·섬유·티끌, mottle 은 잉크 위 흰 반점. 초당 12번 끓어 멈춘 화면이 안 생긴다",
+      "use": "const paper = paperGrain(el, { ctx }); const mottle = paperGrain(top, { ctx, mode: \"mottle\" })"
+    },
+    {
+      "name": "sheetDrift",
+      "kind": "value",
+      "does": "종이 밀림 — 판면이 드럼에 물려 한 방향으로 끌려가며 조금 돈다(초당 12장), 다 찍힌 판면도 쉬지 않는다",
+      "use": "applyStyle(sheet, sheetDrift(t, { from: bar, seed: \"p3\", dur: 1.41 }))"
+    },
+    {
+      "name": "drumPass",
+      "kind": "value",
+      "does": "드럼이 종이 위를 지나가며 판이 찍힌다 — 지나간 쪽만 보이는 clip(초당 24장)",
+      "use": "plateStamp(el, { …, style: (t) => drumPass(t, { at: 2.8, dir: \"right\" }) })"
+    },
+    {
+      "name": "sheetFeed",
+      "kind": "layer",
+      "does": "장면 끝에 새 종이가 들어와 앞 장을 덮는다 — 다음 장면은 빈 종이에서 판을 찍기 시작",
+      "use": "const feed = sheetFeed(el, { ctx, at: ctx.dur - 0.42, from: \"bottom\" })"
+    },
+    {
+      "name": "dropPlate",
+      "kind": "layer",
+      "does": "드롭 — 핑크 판이 통째로 찍혔다 걷히고 망점 고리가 퍼진다, 흔들림을 돌려준다",
+      "use": "const s = plate(t); applyStyle(content, s.shake)  // plate = dropPlate(el, { ctx, drop: 0 })"
+    }
+  ]
+}