kasaframe 0.1.1 → 0.1.4

package/themes/swiss-poster/sample/index.html

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

package/themes/swiss-poster/sample/kf.json

@@ -0,0 +1,59 @@
+{
+  "template": "promo",
+  "title": "swiss-poster · OpenGateway 소개 15초",
+  "theme": "swiss-poster",
+  "fps": 60,
+  "width": 1920,
+  "height": 1080,
+  "duration": 15,
+  "mode": "seek",
+  "style": "style.json",
+  "music": "assets/music/kawaii-friends-0400.mp3",
+  "beats": "beats.json",
+  "captions": "none",
+  "safeArea": {
+    "top": 60,
+    "bottom": 60,
+    "left": 80,
+    "right": 80
+  },
+  "text": {
+    "policy": "terms-only",
+    "maxOnScreen": 0,
+    "minPx": 0
+  },
+  "scenes": [
+    {
+      "id": "gather",
+      "from": 0,
+      "dur": 3.1169,
+      "file": "scenes/gather.ts",
+      "role": "hook",
+      "idea": "여러 회사 모델이 흩어져 있다 → 회사별 모델 수"
+    },
+    {
+      "id": "models",
+      "from": 3.1169,
+      "dur": 4.2191,
+      "file": "scenes/models.ts",
+      "role": "explain",
+      "idea": "한 주소(https://apis.opengateway.ai/v1) → 박마다 바뀌는 모델 ID 가 같은 주소로 → 드롭 앞 모아 올리기"
+    },
+    {
+      "id": "price",
+      "from": 7.336,
+      "dur": 4.2388,
+      "file": "scenes/price.ts",
+      "role": "drop",
+      "idea": "드롭에 가장 크게 102 · 한 주소 → 하루 시계에서 00–10시 창이 -90% → deepseek 가격"
+    },
+    {
+      "id": "end",
+      "from": 11.5748,
+      "dur": 3.4252,
+      "file": "scenes/end.ts",
+      "role": "end",
+      "idea": "첫 토큰 실측 셋 → 끝 카드(OG 로고 · opengateway.ai)"
+    }
+  ]
+}

package/themes/swiss-poster/sample/lib/facts.ts

@@ -0,0 +1,29 @@
+// OpenGateway 사실 — docs/briefs/og-intro-15s.md 에 적힌 것만. 숫자를 여기서 새로 만들지 않는다
+export const OG = {
+  url: "https://apis.opengateway.ai/v1",
+  host: "apis.opengateway.ai/v1",
+  site: "opengateway.ai",
+  models: 102,
+  endpoints: ["/chat/completions", "/responses", "/messages", "/images/generations"],
+  providers: [
+    ["OpenAI", 41],
+    ["Anthropic", 15],
+    ["Google", 15],
+    ["Z.ai", 7],
+    ["xAI", 6],
+    ["Qwen", 5],
+    ["Moonshot", 4],
+    ["DeepSeek", 4],
+    ["MiniMax", 3],
+  ] as [string, number][],
+  ids: ["openai/gpt-6.1-sol", "anthropic/claude-opus-5-5", "google/gemini-3.5-flash-lite", "deepseek/deepseek-v4.1-flash-ultrafast", "z-ai/glm-5.3-flash-ultrafast"],
+  night: { from: 0, to: 10, tz: "KST" },
+  deepseek: { id: "deepseek-v4.1-flash-ultrafast", input: ["$0.30", "$0.03"], output: ["$1.20", "$0.12"], off: "-90%" },
+  glm: { id: "glm-5.3-flash-ultrafast", off: "-70%" },
+  ttft: [
+    ["gpt-5.4-nano", "612.5ms", 612.5],
+    ["gemini-3.5-flash-lite", "693.0ms", 693.0],
+    ["claude-haiku-5-5", "760.5ms", 760.5],
+  ] as [string, string, number][],
+  calls: "18번 합 $0.0004",
+};

package/themes/swiss-poster/sample/lib/poster.ts

@@ -0,0 +1,36 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { grid } from "../../grid.ts";
+
+export const G = grid(1920, 1080);
+
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.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;
+}
+
+/** from 부터 to 까지만 보이는 컷 — 숨은 컷은 그리지 않는다 */
+export function cut(parent: HTMLElement, from: number, to: number) {
+  const el = layer(parent);
+  return {
+    el,
+    on(t: number): boolean {
+      const v = t >= from && t < to;
+      // visibility 로 숨기면 안쪽 요소가 visible 을 주는 순간 부모를 뚫고 보인다 — display 로 통째로 뺀다
+      el.style.display = v ? "" : "none";
+      return v;
+    },
+  };
+}
+
+/** OG 로고(currentColor SVG) */
+export function logo(parent: HTMLElement, svg: string, x: number, y: number, w: number, color: string): HTMLElement {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:${w}px;color:${color};`;
+  el.innerHTML = svg.replace(/ width="\d+" height="\d+"/, ' width="100%" style="display:block"');
+  parent.append(el);
+  return el;
+}

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

@@ -0,0 +1,70 @@
+import { clamp, type SceneCtx } from "@kasaframe/core";
+import { gridType, numeral, paperGrid, redField, rule, stripWipe } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { G, beatsIn, cut, layer, logo } from "../lib/poster.ts";
+import svg from "../assets/og/logo.svg?raw";
+
+// 지연 = 길이. 괘선 셋이 같은 순간 출발해 실측 ms 만큼의 실제 시간 동안 자란다(1ms = 1.6px) — 가장 빨리 선 것만 빨강.
+// 다음 판: 18번 호출 = 괘선 18 개를 한 개씩 조판, 합 $0.0004. 끝: 로고와 opengateway.ai, 빨강 한 칸
+const PX = 1.6;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const paper = paperGrid(layer(root), { ctx });
+
+    const a = cut(root, 0, b[4]);
+    const go = b[2] - 0.1;
+    const rows = OG.ttft.map(([name, label, ms], i) => ({ name, label, ms, y: G.y(3) + i * 200 }));
+    const fastest = Math.min(...rows.map((r) => r.ms));
+    let at = 0.08;
+    const aParts = [
+      gridType(a.el, { ctx, text: "첫 토큰", x: G.x(0), y: G.y(0) + 8, size: 110, at: 0, dur: 0.3 }),
+      ...rows.flatMap((r) => {
+        const nameAt = at;
+        at += r.name.length * 0.012;
+        const elapsed = (t: number) => Math.min(r.ms, Math.max(0, (t - go) * 1000));
+        const won = (t: number) => r.ms === fastest && elapsed(t) >= r.ms;
+        return [
+          gridType(a.el, { ctx, text: r.name, x: G.x(0), y: r.y - 82, size: 56, weight: 600, typeset: 0.012, at: nameAt }),
+          rule(a.el, { ctx, x: G.x(0), y: r.y, len: (t) => elapsed(t) * PX, weight: 40, at: go, dur: 0.01, color: (t) => (won(t) ? "red" : "ink") }),
+          numeral(a.el, { ctx, text: (t) => elapsed(t).toFixed(1), x: G.x(12) - 20, y: r.y + 40, size: 96, align: "right", at: go, dur: 0.01, color: (t) => (won(t) ? "red" : "ink") }),
+        ];
+      }),
+    ];
+
+    const m = cut(root, b[4], b[6]);
+    const N = 18;
+    const tally = (k: number) => b[4] + 0.03 + k * 0.03;
+    const doneAt = tally(N - 1);
+    const mParts = [
+      ...Array.from({ length: N }, (_, k) => rule(m.el, { ctx, x: G.x(0) + k * 46, y: G.y(1), len: 300, weight: 24, dir: "v", at: tally(k), dur: 0.14 })),
+      numeral(m.el, { ctx, text: (t) => String(Array.from({ length: N }, (_, k) => k).filter((k) => tally(k) <= t).length), x: G.x(7), y: G.y(4), size: 360, at: b[4], dur: 0.01 }),
+      gridType(m.el, { ctx, text: "호출", x: G.x(7), y: G.y(4) + 40, size: 52, at: b[4] + 0.1, dur: 0.25 }),
+      gridType(m.el, { ctx, text: "합", x: G.x(0), y: G.y(5) + 20, size: 52, at: doneAt, dur: 0.2 }),
+      gridType(m.el, { ctx, text: "$0.0004", x: G.x(0), y: G.y(6) - 10, size: 190, color: "red", typeset: 0.03, at: doneAt }),
+    ];
+
+    const e = cut(root, b[6], ctx.dur);
+    const mark = logo(e.el, svg, G.x(0), G.y(0) + 30, 640, ctx.style.colors.ink);
+    const eParts = [
+      gridType(e.el, { ctx, text: OG.site, x: G.x(0), y: G.y(5) - 10, size: 150, typeset: 0.032, at: b[6] + 0.16 }),
+      gridType(e.el, { ctx, text: OG.host, x: G.x(0), y: G.y(7) - 20, size: 40, weight: 500, typeset: 0.02, at: b[7] }),
+      rule(e.el, { ctx, x: G.x(0), y: G.y(6) + 70, len: G.w(12), weight: 22, color: "red", at: b[7] + 0.1, dur: ctx.dur - b[7] - 0.1, linear: true }),
+      redField(e.el, { ctx, rect: [G.x(10), G.y(0), G.w(2), G.h(2)], at: b[8], from: "top", dur: 0.3 }),
+    ];
+    const wipes = [stripWipe(layer(root), { ctx, at: b[4], dur: 0.3 })];
+
+    return (t: number) => {
+      paper(t);
+      if (a.on(t)) for (const p of aParts) p(t);
+      if (m.on(t)) for (const p of mParts) p(t);
+      if (e.on(t)) {
+        // 로고는 제 칸 마스크 안으로 올라와 앉는다
+        mark.style.clipPath = `inset(0 0 ${((1 - clamp((t - b[6]) / 0.16)) * 100).toFixed(1)}% 0)`;
+        for (const p of eParts) p(t);
+      }
+      for (const w of wipes) w(t);
+    };
+  },
+};

package/themes/swiss-poster/sample/scenes/gather.ts

@@ -0,0 +1,68 @@
+import { clamp, type SceneCtx } from "@kasaframe/core";
+import { gridType, numeral, paperGrid, rule, stripWipe } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { G, beatsIn, cut, layer } from "../lib/poster.ts";
+
+// 회사 아홉이 격자 여기저기 흩어진 칸에 한 자씩 조판되고, 아래 빨강 괘선이 회사 하나에 한 칸씩 자란다.
+// 다음 판: 회사별 모델 수 — 크기가 곧 값. 숫자가 세어 올라가며 그만큼 커지고, 지금 센 묶음만 빨강
+const SPOTS: [number, number][] = [[0, 0], [5, 1], [9, 0], [2, 3], [7, 3], [10, 4], [0, 5], [4, 6], [9, 6]];
+const PER = 0.026;
+const K = 16;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const paper = paperGrid(layer(root), { ctx });
+
+    const a = cut(root, 0, b[4]);
+    let clock = 0;
+    const done: number[] = [];
+    const names = OG.providers.map(([name], i) => {
+      const at = clock;
+      clock += name.length * PER + 0.02;
+      done.push(clock);
+      const [c, r] = SPOTS[i];
+      return gridType(a.el, { ctx, text: name, x: G.x(c), y: G.y(r) + 6, size: 78, typeset: PER, at });
+    });
+    // 회사 하나가 다 조판될 때마다 괘선이 한 칸(1/9)씩
+    const count = rule(a.el, { ctx, x: G.x(0), y: 1020 - 30, len: (t) => (G.w(12) / 9) * done.reduce((s, d) => s + clamp((t - d) / 0.2), 0), weight: 30, color: "red", at: 0, dur: 0.01 });
+
+    const c = cut(root, b[4], ctx.dur);
+    const groups = [[0], [1, 2], [3, 4, 5], [6, 7, 8]];
+    const starts = [b[4], b[5], b[6], b[7]];
+    const BASE = 820;
+    let x = G.x(0);
+    const parts = OG.providers.map(([name, n], i) => {
+      const g = groups.findIndex((gg) => gg.includes(i));
+      const at = starts[g];
+      const next = starts[g + 1] ?? Number.POSITIVE_INFINITY;
+      const shown = (t: number) => Math.round(n * clamp((t - at) / 0.33));
+      const x0 = x;
+      x += String(n).length * 0.54 * n * K + 28;
+      return [
+        numeral(c.el, { ctx, text: (t) => String(Math.max(1, shown(t))), x: x0, y: BASE, size: (t) => Math.max(1, shown(t)) * K, at, dur: 0.01, color: (t) => (t < next ? "red" : "ink") }),
+        // 이름은 기준선 아래로 세로로 — 작은 숫자 옆에도 겹치지 않게
+        gridType(c.el, { ctx, text: name, x: x0 + 36, y: BASE + 56, size: 30, weight: 500, rotate: 90, typeset: 0.02, at }),
+      ];
+    });
+    // 기준선이 판 내내 일정한 빠르기로 그어진다 — 숫자들이 앉을 한 줄
+    const base = rule(c.el, { ctx, x: G.x(0), y: BASE + 10, len: G.w(12), weight: 36, at: b[4], dur: ctx.dur - b[4], linear: true });
+    const wipe = stripWipe(layer(root), { ctx, at: b[4], dur: 0.3 });
+
+    return (t: number) => {
+      paper(t);
+      if (a.on(t)) {
+        for (const p of names) p(t);
+        count(t);
+      }
+      if (c.on(t)) {
+        base(t);
+        for (const [n, l] of parts) {
+          n(t);
+          l(t);
+        }
+      }
+      wipe(t);
+    };
+  },
+};

package/themes/swiss-poster/sample/scenes/models.ts

@@ -0,0 +1,63 @@
+import { clamp, type SceneCtx } from "@kasaframe/core";
+import { gridType, numeral, paperGrid, rule, stripWipe } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { G, beatsIn, cut, layer } from "../lib/poster.ts";
+
+// 한 주소 = 기준선. 주소가 한 자씩 조판되고 그 밑에 빨강 기준선이 그어진다, 박마다 같은 기준선 위로 다른 모델 ID 가 조판된다.
+// 다음 판: 두 단 — OpenAI 형식과 Anthropic 형식의 엔드포인트가 한 「/v1」 위에. 셋째 판: 드롭 앞 — 모델 수가 세어 오르며 그만큼 커진다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const paper = paperGrid(layer(root), { ctx });
+
+    const a = cut(root, 0, b[4]);
+    const prints = [b[1], b[2], b[3]];
+    const idAt = (t: number) => OG.ids[Math.max(0, prints.filter((p) => p <= t).length - 1)];
+    const aParts = [
+      gridType(a.el, { ctx, text: OG.host, x: G.x(0), y: G.y(1), size: 136, typeset: 0.03, at: 0 }),
+      rule(a.el, { ctx, x: G.x(0), y: G.y(1) + 180, len: G.w(12), weight: 16, color: "red", at: b[1], dur: 0.3 }),
+      gridType(a.el, { ctx, text: "model", x: G.x(0), y: G.y(4) - 52, size: 30, weight: 500, color: "dim", typeset: 0.03, at: b[1] }),
+      gridType(a.el, { ctx, text: idAt, x: G.x(0), y: G.y(4), size: 76, typeset: 0.011, at: b[1], prints: [b[2], b[3]] }),
+    ];
+
+    const m = cut(root, b[4], b[8]);
+    const left = ["/chat/completions", "/responses", "/images/generations"];
+    let at = b[5];
+    const mParts = [
+      gridType(m.el, { ctx, text: "OpenAI", x: G.x(0), y: G.y(1) - 40, size: 120, typeset: 0.04, at: b[4] }),
+      gridType(m.el, { ctx, text: "Anthropic", x: G.x(6), y: G.y(1) - 40, size: 120, typeset: 0.03, at: b[4] }),
+      rule(m.el, { ctx, x: G.x(6) - 12, y: G.y(1) - 30, len: G.h(5), weight: 4, dir: "v", at: b[4], dur: 0.3 }),
+      // 머리 밑 괘선이 마디 내내 그어진다 — 두 단이 한 판
+      rule(m.el, { ctx, x: G.x(0), y: G.y(2) + 10, len: G.w(12), weight: 24, at: b[4], dur: b[7] - b[4], linear: true }),
+      ...left.map((e, i) => {
+        const p = gridType(m.el, { ctx, text: e, x: G.x(0), y: G.y(3) + i * 116, size: 72, weight: 600, typeset: 0.016, at });
+        at += e.length * 0.016 + 0.02;
+        return p;
+      }),
+      gridType(m.el, { ctx, text: "/messages", x: G.x(6), y: G.y(3), size: 72, weight: 600, typeset: 0.03, at: b[6] }),
+      // 두 형식이 같은 「/v1」 한 기준선 위에
+      gridType(m.el, { ctx, text: "/v1", x: G.x(0), y: G.y(6) + 10, size: 130, color: "red", at: b[7], dur: 0.28 }),
+      rule(m.el, { ctx, x: G.x(0), y: 1020 - 20, len: G.w(12), weight: 20, color: "red", at: b[7], dur: b[8] - b[7], linear: true }),
+    ];
+
+    const c = cut(root, b[8], ctx.dur);
+    const end = ctx.dur - 0.05;
+    const v = (t: number) => Math.round(OG.models * clamp((t - b[8]) / (end - b[8])) ** 2);
+    const cParts = [
+      gridType(c.el, { ctx, text: OG.host, x: G.x(0), y: G.y(0) + 8, size: 44, weight: 500, typeset: 0.012, at: b[8] }),
+      gridType(c.el, { ctx, text: "모델", x: G.x(10), y: G.y(0) + 8, size: 64, at: b[8], dur: 0.25 }),
+      // 크기 = 값 — 세는 만큼 커진다. 드롭에서 102 가 화면 높이를 다 쓴다
+      numeral(c.el, { ctx, text: (t) => String(v(t)), x: G.x(0), y: 820, size: (t) => 60 + v(t) * 5.6, at: b[8], dur: 0.01 }),
+      rule(c.el, { ctx, x: G.x(0), y: 1020 - 22, len: G.w(12), weight: 22, color: "red", at: b[8], dur: end - b[8], linear: true }),
+    ];
+    const wipes = [stripWipe(layer(root), { ctx, at: b[4], dur: 0.3 }), stripWipe(layer(root), { ctx, at: b[8], dur: 0.3, color: "red" })];
+
+    return (t: number) => {
+      paper(t);
+      if (a.on(t)) for (const p of aParts) p(t);
+      if (m.on(t)) for (const p of mParts) p(t);
+      if (c.on(t)) for (const p of cParts) p(t);
+      for (const w of wipes) w(t);
+    };
+  },
+};

package/themes/swiss-poster/sample/scenes/price.ts

@@ -0,0 +1,74 @@
+import { clamp, type SceneCtx } from "@kasaframe/core";
+import { disc, gridType, invert, numeral, paperGrid, redField, rule } from "../../effects.ts";
+import { areaSize } from "../../grid.ts";
+import { OG } from "../lib/facts.ts";
+import { G, beatsIn, cut, layer } from "../lib/poster.ts";
+
+// 드롭 = 반전: 단마다 빨강 띠가 떨어져 바탕이 빨강으로 뒤집히고, 102 가 종이색으로 화면 높이를 다 쓴다.
+// 다음 판: 하루 = 24 조각 원(Müller-Brockmann), 00–10시 조각만 빨강, -90% 가 세어 내려간다.
+// 셋째 판: 값 = 면적 — 값이 내리면 숫자가 그 면적만큼(크기는 제곱근) 줄어든다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const paper = paperGrid(layer(root), { ctx });
+    const flip = invert(layer(root), { ctx, drop: 0, until: b[4] - 0.2 });
+
+    const a = cut(root, 0, b[4]);
+    const back = b[4] - 0.2;
+    // 앞 장면 끝의 검정 102 가 그대로 이어지다 빨강 띠가 다 덮은 뒤에 종이색으로 — 밝기가 한 번씩만 오르내리게(섬광 안전)
+    const covered = 0.24;
+    const onRed = (t: number) => (t >= covered && t < back ? "paper" : "ink");
+    const aParts = [
+      numeral(a.el, { ctx, text: String(OG.models), x: G.x(0), y: 820, size: (t) => 631 + 129 * clamp(t / covered), at: 0, dur: 0.01, color: onRed }),
+      gridType(a.el, { ctx, text: "한 주소", x: G.x(9), y: G.y(1), size: 120, typeset: 0.09, at: b[1], color: onRed }),
+      gridType(a.el, { ctx, text: OG.host, x: G.x(9), y: G.y(3), size: 34, weight: 500, typeset: 0.024, at: b[2], color: onRed }),
+      // 모든 요청이 앉는 한 기준선 — 마디 내내 그어진다
+      rule(a.el, { ctx, x: G.x(0), y: 1020 - 26, len: G.w(12), weight: 26, color: onRed, at: covered, dur: back - covered, linear: true }),
+    ];
+
+    const B = cut(root, b[4], b[8]);
+    const night = (h: number) => h >= OG.night.from && h < OG.night.to;
+    const R = 360;
+    const C = [G.x(0) + R + 60, 560] as const;
+    const swept = (t: number) => Math.floor((t - b[4]) / 0.028);
+    const off = (t: number) => Math.round(90 * clamp((t - b[6]) / 0.34));
+    const bParts = [
+      disc(B.el, { ctx, cx: C[0], cy: C[1], r: R, at: b[4], dur: 0.01, sectors: { n: 24, color: (h, t) => (h < swept(t) ? (night(h) ? "red" : "ink") : null) } }),
+      ...([[0, 0, -R - 64], [6, R + 22, -18], [12, 0, R + 22], [18, -R - 56, -18]] as const).map(([h, dx, dy]) =>
+        gridType(B.el, { ctx, text: String(h).padStart(2, "0"), x: C[0] + dx - (h % 12 === 0 ? 22 : 0), y: C[1] + dy, size: 36, weight: 500, typeset: 0.05, at: b[5] }),
+      ),
+      numeral(B.el, { ctx, text: (t) => `-${off(t)}%`, x: G.x(6), y: G.y(3) + 40, size: 300, at: b[6], dur: 0.01, color: "red" }),
+      gridType(B.el, { ctx, text: "00:00-10:00 KST", x: G.x(6), y: G.y(4), size: 64, typeset: 0.02, at: b[7] }),
+      gridType(B.el, { ctx, text: `${OG.glm.id} ${OG.glm.off}`, x: G.x(6), y: G.y(5) + 10, size: 34, weight: 500, color: "dim", typeset: 0.01, at: b[7] + 0.3 }),
+    ];
+
+    const c = cut(root, b[8], ctx.dur);
+    const ds = OG.deepseek;
+    const num = (s: string) => Number.parseFloat(s.replace("$", ""));
+    // 1.20 달러가 420px — 면적이 값이라 크기는 제곱근
+    const sz = (v: number) => areaSize(v, 1.2, 420);
+    const roll = (from: number, to: number, at: number) => (t: number) => from + (to - from) * clamp((t - at) / 0.34);
+    const rows = [
+      { name: "입력", base: 520, label: G.y(2), v: roll(num(ds.input[0]), num(ds.input[1]), b[9]), at: b[9] },
+      { name: "출력", base: 960, label: G.y(5) + 30, v: roll(num(ds.output[0]), num(ds.output[1]), b[10]), at: b[10] },
+    ];
+    const cParts = [
+      gridType(c.el, { ctx, text: ds.id, x: G.x(0), y: G.y(0) + 8, size: 56, typeset: 0.011, at: b[8] }),
+      ...rows.flatMap((r) => [
+        gridType(c.el, { ctx, text: r.name, x: G.x(0), y: r.label, size: 52, at: b[8] + 0.05, dur: 0.25 }),
+        numeral(c.el, { ctx, text: (t) => `$${r.v(t).toFixed(2)}`, x: G.x(2), y: r.base, size: (t) => sz(r.v(t)), at: b[8], color: (t) => (t >= r.at ? "red" : "ink") }),
+        // 값만큼의 면 — 같은 값이 길이로도
+        redField(c.el, { ctx, rect: (t) => [G.x(0), r.base - 24, (G.w(2) - 20) * (r.v(t) / 1.2), 24], at: b[8], color: "ink" }),
+      ]),
+      gridType(c.el, { ctx, text: `00:00-10:00 KST ${ds.off}`, x: G.x(6) + 40, y: G.y(2) + 10, size: 64, color: "red", typeset: 0.017, at: b[11] }),
+    ];
+
+    return (t: number) => {
+      paper(t);
+      flip(t);
+      if (a.on(t)) for (const p of aParts) p(t);
+      if (B.on(t)) for (const p of bParts) p(t);
+      if (c.on(t)) for (const p of cParts) p(t);
+    };
+  },
+};

package/themes/swiss-poster/sample/style.json

@@ -0,0 +1,100 @@
+{
+  "name": "swiss-poster",
+  "label": "스위스 타이포 포스터 — 격자에 조판되고, 크기가 곧 값이다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F1EEE5",
+    "surface": "#F1EEE5",
+    "raised": "#E6E2D7",
+    "line": "#D9D4C8",
+    "ink": "#121317",
+    "inkSoft": "#2E2F33",
+    "dim": "#5F5C55",
+    "accent": "#D7261E",
+    "accentSoft": "#EFCFC6",
+    "accentText": "#C0211A",
+    "onAccent": "#F1EEE5",
+    "success": "#121317",
+    "danger": "#D7261E",
+    "warning": "#D7261E",
+    "paper": "#F1EEE5",
+    "black": "#121317",
+    "red": "#D7261E",
+    "guide": "#E3DFD5"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Inter Tight\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Inter Tight",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/intertight/InterTight%5Bwght%5D.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": {
+    "hero": 320,
+    "title": 120,
+    "body": 40,
+    "caption": 28,
+    "weightDisplay": 700,
+    "weightBody": 500,
+    "tracking": "-0.035em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "off",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 3
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "outExpo",
+    "durations": {
+      "fast": 0.16,
+      "base": 0.28,
+      "slow": 0.5
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F1EEE5 종이 — 따뜻한 회백, 바탕은 늘 이 한 면",
+      "#121317 검정 — 글·괘선·원",
+      "#D7261E 빨강 한 색 — 지금 말하는 것 하나에만. 드롭엔 바탕째 빨강으로 뒤집힌다"
+    ],
+    "texture": "질감 없음 — 평평한 인쇄 면. 종이결·그림자·그라데이션·투명도 없음. 바탕에 12단 격자 안내선이 아주 옅게 서 있다(인쇄되지 않는 선)",
+    "movement": "조판의 동작 — 글자가 격자 칸 마스크 안으로 미끄러져 착 앉고(outExpo), 괘선이 그어지고, 면이 칸만큼 찬다. 크기·길이·면적이 값이라 값이 바뀌면 그 크기가 바뀐다. 튕김·흔들림·회전 없음"
+  },
+  "notes": [
+    "크기 = 값 — 숫자는 값만큼 크게, 면적이 값이면 크기는 제곱근. 크기를 장식으로 키우지 않는다.",
+    "모든 요소는 왼쪽 맞춤으로 격자 칸 선에 붙는다. 가운데 맞춤 없음.",
+    "빨강은 한 화면에 한 가지 뜻에만 — 둘 이상을 빨강으로 칠하면 강조가 사라진다."
+  ]
+}

package/themes/swiss-poster/slots.ts

@@ -0,0 +1,69 @@
+import { clamp, ease, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { cssVar, layer, letters, partial, shownCount, strokePath, traceCanvas } from "@kasaframe/themes/slotkit";
+import { invert, paperGrid } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 격자 포스터의 결로. 움직임은 조판의 동작(끼워 앉기·괘선 긋기·면 채우기)뿐, 멈춤은 outExpo 한 손
+const snap = (t: number, at: number, dur: number): number => ease.outExpo(clamp((t - at) / Math.max(1e-3, dur)));
+
+export const slots: ThemeSlots = {
+  surface(el, { ctx }) {
+    return paperGrid(el, { ctx });
+  },
+
+  // 판은 면 대신 괘선 — 위 변에 굵은 검정 괘선이 그어진다. 강조 판은 빨강 면이 칸만큼 쓸려 찬다(글은 그 위에 검정)
+  panel(el, { at, tone }) {
+    const box = layer(el, "inset:0;overflow:hidden", true);
+    const face = tone === "accent" ? layer(box, "inset:0;background:var(--kf-accent)") : null;
+    const bar = layer(box, "left:0;top:0;height:12px;width:100%;background:var(--kf-ink)");
+    return (t) => {
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      const k = snap(t, at, 0.3);
+      bar.style.width = `${(k * 100).toFixed(2)}%`;
+      if (face) face.style.clipPath = `inset(0 ${((1 - snap(t, at + 0.05, 0.3)) * 100).toFixed(2)}% 0 0)`;
+    };
+  },
+
+  // 아래에서 제 칸으로 착 끼워 앉는다
+  land(_el, { at }) {
+    return (t): Style => {
+      if (t < at || t > at + 0.5) return {};
+      return { y: (1 - snap(t, at, 0.32)) * 48 };
+    };
+  },
+
+  // 한 자씩 조판 — 색·굴림 없이 자리만 채운다
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    return (t) => {
+      const n = shownCount(spans.length, t, at, dur);
+      spans.forEach((s, i) => (s.style.visibility = i < n ? "visible" : "hidden"));
+    };
+  },
+
+  // 검정 괘선이 일정한 빠르기로 그어지고, 다 그은 뒤엔 빨강 눈금 하나가 선을 따라 잰다
+  trace(el, { points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points);
+    const black = cssVar(el, "ink", "#121317");
+    const red = cssVar(el, "accent", "#D7261E");
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      g.lineCap = "butt";
+      g.lineJoin = "miter";
+      g.lineWidth = 8;
+      g.strokeStyle = tone === "accent" ? red : black;
+      strokePath(g, partial(points, p));
+      if (p < 1) return;
+      const head = partial(points, ((t - at - dur) * 0.5) % 1).at(-1)!;
+      g.fillStyle = tone === "accent" ? black : red;
+      g.fillRect(head[0] - 8, head[1] - 22, 16, 44);
+    };
+  },
+
+  // 드롭 — 빨강 띠가 단마다 떨어졌다 바로 걷힌다(반전이 한 번 지나간다)
+  drop(el, { ctx, drop }) {
+    return invert(el, { ctx, drop, until: ctx.beats.drop(drop) + 0.22 });
+  },
+};