kasaframe 0.1.3 → 0.1.5

package/themes/receipt/sample/index.html

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

package/themes/receipt/sample/kf.json

@@ -0,0 +1,59 @@
+{
+  "template": "promo",
+  "title": "receipt · OpenGateway 소개 15초",
+  "theme": "receipt",
+  "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/receipt/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/receipt/sample/lib/sheet.ts

@@ -0,0 +1,52 @@
+import type { SceneCtx } from "@kasaframe/core";
+
+export function layer(parent: HTMLElement, css = ""): HTMLDivElement {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;inset:0;${css}`;
+  parent.append(el);
+  return el;
+}
+
+export interface Page {
+  el: HTMLDivElement;
+  from: number;
+  to: number;
+  /** 이 판면 k 번째 박(장면 안 초) — 박이 모자라면 박 간격으로 이어 센다 */
+  beat(k: number): number;
+}
+
+/**
+ * 마디마다 판면 하나 — 그 마디 동안만 보인다(display:none 으로 숨겨 지난 컷이 비치지 않게).
+ * 첫 판면은 장면 처음부터, 마지막은 장면 끝까지
+ */
+export function pages(root: HTMLElement, ctx: SceneCtx, n: number): { list: Page[]; show(t: number): void } {
+  // 첫 마디 머리는 장면 처음보다 조금 늦을 수 있다 — 판면 i 는 i 번째 마디 머리에서(첫 판면만 0 초에서)
+  const bars = ctx.beats.bars.filter((b) => b >= -1e-6 && b < ctx.dur - 0.05);
+  const beats = ctx.beats.beats;
+  const gap = beats.length > 1 ? (beats[beats.length - 1] - beats[0]) / (beats.length - 1) : 0.35;
+  const edge = (i: number) => (i <= 0 ? 0 : i >= n ? ctx.dur : (bars[i] ?? (ctx.dur * i) / n));
+  const list = Array.from({ length: n }, (_, i) => {
+    const from = edge(i);
+    const to = edge(i + 1);
+    const mine = beats.filter((b) => b >= from - 0.02 && b < to - 0.02);
+    return {
+      el: layer(root),
+      from,
+      to,
+      beat: (k: number) => mine[k] ?? (mine.length ? mine[mine.length - 1] + (k - mine.length + 1) * gap : from + k * gap),
+    };
+  });
+  return {
+    list,
+    show(t) {
+      for (const p of list) p.el.style.display = t >= p.from && t < p.to ? "block" : "none";
+    },
+  };
+}
+
+/** 가게 머리 — 영수증은 장마다 같은 가게(한 주소)의 이름·주소·점선부터 몰아 찍는다 */
+export const storeHead = (at: number, host: string) => [
+  { at, kind: "big" as const, text: "OpenGateway", align: "center" as const },
+  { at: at + 0.05, text: host, faint: true, align: "center" as const },
+  { at: at + 0.1, kind: "rule" as const },
+];

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

@@ -0,0 +1,44 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { counterTop, printerBody, receiptRoll, tally, type ReceiptLine } from "../../effects.ts";
+import svg from "../assets/og/logo.svg?raw";
+import { OG } from "../lib/facts.ts";
+import { layer, pages, storeHead } from "../lib/sheet.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    counterTop(layer(root), { ctx });
+    const { list, show } = pages(root, ctx, 2);
+    const [a, b] = list;
+    const paints: ((t: number) => void)[] = [];
+
+    // 장 1 — 실측: 첫 토큰 가운데값이 줄마다 그 ms 동안 세어지며 찍히고, 합계 줄이 18번 합
+    const go = a.beat(1);
+    const ttft: ReceiptLine[] = [
+      ...storeHead(a.from, OG.host),
+      { at: a.from + 0.16, text: "첫 토큰 가운데값", bold: true, align: "center" },
+      { at: a.from + 0.24, text: "2026-10-08 · 실측", faint: true, align: "center" },
+      { at: a.beat(1) - 0.06, kind: "rule" },
+      ...OG.ttft.map(([model, , ms], i) => ({ at: go + i * 0.08, kind: "item" as const, text: model, right: (t: number) => tally(t, { at: go + i * 0.08, dur: ms / 1000, to: ms, decimals: 1, suffix: "ms" }) })),
+      { at: a.beat(2) + 0.12, kind: "rule" },
+      { at: a.beat(3), kind: "total", text: OG.calls.split(" $")[0], right: `$${OG.calls.split(" $")[1]}` },
+    ];
+    paints.push(receiptRoll(a.el, { ctx, lines: ttft, tail: a.to - a.beat(3) - 0.15, tear: a.to - 0.06 }), printerBody(a.el, { ctx }));
+
+    // 장 2 — 끝 영수증: 로고·이름·주소·바코드가 찍히고, 마지막 마디에 뜯어 들어 보인다
+    const logo = svg.replace(/ width="\d+" height="\d+"/, ' height="100%" style="display:block"');
+    const card: ReceiptLine[] = [
+      { at: b.from, kind: "html", html: logo, rows: 3, align: "center" },
+      { at: b.beat(1), kind: "big", text: "OpenGateway", align: "center" },
+      { at: b.beat(2), text: OG.site, bold: true, align: "center" },
+      { at: b.beat(2) + 0.12, kind: "rule" },
+      { at: b.beat(3), kind: "barcode", text: OG.site },
+      { at: b.beat(4) + 0.05, text: OG.host, faint: true, align: "center" },
+    ];
+    paints.push(receiptRoll(b.el, { ctx, lines: card, tail: ctx.dur - b.beat(4) - 0.05, tear: b.beat(4), present: true }), printerBody(b.el, { ctx }));
+
+    return (t: number) => {
+      show(t);
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/receipt/sample/scenes/gather.ts

@@ -0,0 +1,57 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { counterTop, printerBody, receiptRoll } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { layer, pages } from "../lib/sheet.ts";
+
+// 도면 1 — 회사마다 따로 뜯어 던진 쪽지가 계산대에 흩어진다 [가운데 x, y, 기울기]
+const SPOT: [number, number, number][] = [
+  [330, 230, -9], [960, 200, 6], [1590, 240, -5],
+  [470, 520, 7], [1120, 500, -11], [1640, 560, 9],
+  [300, 790, 4], [1450, 820, -6], [1700, 860, 10],
+];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    counterTop(layer(root), { ctx });
+    const { list, show } = pages(root, ctx, 2);
+    const [a, b] = list;
+    const paints: ((t: number) => void)[] = [];
+
+    // 장 1 — 따로따로 계산: 한 프린터가 회사 쪽지를 한 장씩 찍어 뜯어 던진다(박마다 셋), 쪽지마다 그 회사 모델 수
+    const span = (a.to - 0.12) / OG.providers.length;
+    OG.providers.forEach(([name, n], i) => {
+      const at = 0.02 + i * span;
+      paints.push(
+        receiptRoll(a.el, {
+          ctx,
+          width: 380,
+          size: 38,
+          lines: [
+            { at, text: name, bold: true, align: "center" },
+            { at: at + span * 0.25, kind: "rule" },
+            { at: at + span * 0.45, kind: "item", text: "모델", right: String(n) },
+          ],
+          tail: span * 0.35,
+          tear: at + span * 0.9,
+          toss: { x: SPOT[i][0], y: SPOT[i][1], rot: SPOT[i][2] },
+        }),
+      );
+    });
+    paints.push(printerBody(a.el, { ctx, width: 500 }));
+
+    // 장 2 — 한 장에 모인다: 회사별 모델 수가 줄마다 찍혀 올라온다(박마다 두세 줄)
+    const lines = [
+      { at: b.beat(0), text: "모델 수", bold: true, align: "center" as const },
+      { at: b.beat(0) + 0.1, text: "/v1/models · 2026-10-08", faint: true, align: "center" as const },
+      { at: b.beat(0) + 0.2, kind: "rule" as const },
+      ...OG.providers.map(([name, n], i) => ({ at: b.beat(Math.floor(i / 3)) + 0.3 + (i % 3) * 0.1, kind: "item" as const, text: name, right: `×${n}` })),
+      { at: b.beat(3) + 0.12, kind: "rule" as const },
+    ];
+    paints.push(receiptRoll(b.el, { ctx, lines, tail: b.to - b.beat(3) - 0.1 }), printerBody(b.el, { ctx }));
+
+    return (t: number) => {
+      show(t);
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/receipt/sample/scenes/models.ts

@@ -0,0 +1,48 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { counterTop, printerBody, receiptRoll, type ReceiptLine } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { layer, pages, storeHead } from "../lib/sheet.ts";
+
+// OpenAI 형식으로 받는 끝점과 Anthropic 형식으로 받는 끝점
+const FORMAT: Record<string, string> = { "/chat/completions": "OpenAI", "/responses": "OpenAI", "/messages": "Anthropic", "/images/generations": "OpenAI" };
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    counterTop(layer(root), { ctx });
+    const { list, show } = pages(root, ctx, 3);
+    const [a, b, c] = list;
+    const paints: ((t: number) => void)[] = [];
+
+    // 장 1 — 한 가게 = 한 주소: 머리에 가게 이름과 주소, 끝점마다 받는 형식이 한 줄씩
+    const head: ReceiptLine[] = [
+      { at: a.beat(0), kind: "big", text: "OpenGateway", align: "center" },
+      { at: a.beat(0) + 0.16, text: OG.url, align: "center" },
+      { at: a.beat(1), kind: "rule" },
+      ...OG.endpoints.map((e, i) => ({ at: a.beat(1) + 0.12 + i * 0.13, kind: "item" as const, text: e, right: FORMAT[e] })),
+      { at: a.beat(3), kind: "rule" },
+      { at: a.beat(3) + 0.12, text: "OpenAI · Anthropic 형식", bold: true, align: "center" },
+    ];
+    paints.push(receiptRoll(a.el, { ctx, lines: head, tail: a.to - a.beat(3) - 0.2, tear: a.to - 0.06 }), printerBody(a.el, { ctx }));
+
+    // 장 2 — 같은 주소, 박마다 다른 모델: 요청 한 건마다 모델 ID 와 그 아래 같은 주소가 찍힌다
+    const calls: ReceiptLine[] = [...storeHead(b.from, OG.host)];
+    OG.ids.slice(0, 4).forEach((id, k) => {
+      calls.push({ at: b.beat(k) + 0.04, kind: "rule" }, { at: b.beat(k) + 0.12, text: id, bold: true }, { at: b.beat(k) + 0.22, text: `→ ${OG.host}`, faint: true });
+    });
+    paints.push(receiptRoll(b.el, { ctx, lines: calls, tail: b.to - b.beat(3) - 0.3, tear: b.to - 0.06 }), printerBody(b.el, { ctx }));
+
+    // 장 3 — 드롭 앞 모아 올리기: 요청 줄이 점점 빠르게 찍혀 종이가 쏟아져 올라온다
+    const rush: ReceiptLine[] = [...storeHead(c.from, OG.host)];
+    let at = c.from + 0.15;
+    for (let k = 0; at < ctx.dur - 0.05; k++) {
+      rush.push({ at, text: OG.ids[k % OG.ids.length], bold: k % 5 === 0 });
+      at += Math.max(0.045, 0.16 - k * 0.006);
+    }
+    paints.push(receiptRoll(c.el, { ctx, lines: rush, tail: 0.1 }), printerBody(c.el, { ctx }));
+
+    return (t: number) => {
+      show(t);
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/receipt/sample/scenes/price.ts

@@ -0,0 +1,64 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { counterTop, paidStamp, printerBody, receiptRoll, type ReceiptLine } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { layer, pages, storeHead } from "../lib/sheet.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    counterTop(layer(root), { ctx });
+    // 흔들림은 영수증 틀에만 — 계산대째 흔들면 가장자리에 페이지 검정이 비친다
+    const frame = layer(root);
+    const { list, show } = pages(frame, ctx, 3);
+    const [a, b, c] = list;
+    const paints: ((t: number) => void)[] = [];
+
+    // 장 1 — 드롭: 한 장에 102 모델이 찍히는 순간 빨간 도장이 쾅
+    const total: ReceiptLine[] = [
+      { at: 0, kind: "big", text: "OpenGateway", align: "center" },
+      { at: 0.1, text: OG.host, align: "center" },
+      { at: 0.2, kind: "rule" },
+      { at: 0.3, kind: "total", text: "모델", right: String(OG.models) },
+      { at: a.beat(1), text: "한 주소", bold: true, align: "center" },
+      { at: a.beat(2), kind: "item", text: "OpenAI 형식", right: "○" },
+      { at: a.beat(2) + 0.14, kind: "item", text: "Anthropic 형식", right: "○" },
+      { at: a.beat(3), kind: "rule" },
+    ];
+    paints.push(receiptRoll(a.el, { ctx, lines: total, tail: a.to - a.beat(3) - 0.1, tear: a.to - 0.06 }), printerBody(a.el, { ctx }));
+    const stamp = paidStamp(layer(a.el), { ctx, drop: 0, x: 1010, y: 760, big: String(OG.models), small: "모델 · 한 주소" });
+
+    // 장 2 — 시간대 할인: 00–10 시 줄에 −90%
+    const time: ReceiptLine[] = [
+      ...storeHead(b.from, OG.host),
+      { at: b.from + 0.16, text: OG.deepseek.id, bold: true, align: "center" },
+      { at: b.from + 0.24, text: "시간대 할인", faint: true, align: "center" },
+      { at: b.beat(1) - 0.12, kind: "rule" },
+      { at: b.beat(1), kind: "item", text: `00:00–10:00 ${OG.night.tz}`, right: OG.deepseek.off.replace("-", "−") },
+      { at: b.beat(2), kind: "total", text: "할인", right: OG.deepseek.off.replace("-", "−") },
+      { at: b.beat(3), kind: "rule" },
+      { at: b.beat(3) + 0.12, kind: "item", text: OG.glm.id, right: OG.glm.off.replace("-", "−") },
+    ];
+    paints.push(receiptRoll(b.el, { ctx, lines: time, tail: b.to - b.beat(3) - 0.25, tear: b.to - 0.06 }), printerBody(b.el, { ctx }));
+
+    // 장 3 — 값 바꿔 찍기: 정가 줄은 VOID 로 긋고 00–10 값이 다음 줄에
+    const [inF, inN] = OG.deepseek.input;
+    const [outF, outN] = OG.deepseek.output;
+    const fare: ReceiptLine[] = [
+      ...storeHead(c.from, OG.host),
+      { at: c.from + 0.16, text: `deepseek/${OG.deepseek.id}`, bold: true },
+      { at: c.beat(0) + 0.15, kind: "rule" },
+      { at: c.beat(1), kind: "void", text: "입력 정가", right: `${inF}/M` },
+      { at: c.beat(1) + 0.14, kind: "item", text: "입력 00–10", right: `${inN}/M` },
+      { at: c.beat(2), kind: "void", text: "출력 정가", right: `${outF}/M` },
+      { at: c.beat(2) + 0.14, kind: "item", text: "출력 00–10", right: `${outN}/M` },
+      { at: c.beat(3), kind: "total", text: "할인", right: OG.deepseek.off.replace("-", "−") },
+    ];
+    paints.push(receiptRoll(c.el, { ctx, lines: fare, tail: ctx.dur - c.beat(3) - 0.05 }), printerBody(c.el, { ctx }));
+
+    return (t: number) => {
+      show(t);
+      const s = stamp(t);
+      applyStyle(frame, s.shake);
+      for (const p of paints) p(t);
+    };
+  },
+};

package/themes/receipt/sample/style.json

@@ -0,0 +1,104 @@
+{
+  "name": "receipt",
+  "label": "감열지 영수증 — 요청 한 번이 영수증 한 장으로 찍혀 나온다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#C9773F",
+    "surface": "#FBFAF6",
+    "raised": "#F1EEE6",
+    "line": "#D8D3C8",
+    "ink": "#1E1E1C",
+    "inkSoft": "#3A3936",
+    "dim": "#3F3C37",
+    "accent": "#D2352B",
+    "accentSoft": "#F4C9C3",
+    "accentText": "#7E1710",
+    "onAccent": "#FFFFFF",
+    "success": "#1E1E1C",
+    "danger": "#D2352B",
+    "warning": "#B8261E",
+    "paper": "#FBFAF6",
+    "body": "#2B2A25",
+    "slot": "#121210",
+    "heat": "#8A8883",
+    "stamp": "#8A1A12"
+  },
+  "fonts": {
+    "sans": "\"Nanum Gothic Coding\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Nanum Gothic Coding\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Nanum Gothic Coding\", ui-monospace, \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Nanum Gothic Coding",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/nanumgothiccoding/NanumGothicCoding-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Nanum Gothic Coding",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/nanumgothiccoding/NanumGothicCoding-Bold.ttf",
+        "weight": "700"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      }
+    ]
+  },
+  "type": {
+    "hero": 200,
+    "title": 88,
+    "body": 36,
+    "caption": 28,
+    "weightDisplay": 700,
+    "weightBody": 400,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 2,
+    "md": 6,
+    "lg": 14,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "0 6px 0 rgba(0, 0, 0, 0.12)",
+    "lift": "0 10px 0 rgba(0, 0, 0, 0.14)"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "rise",
+    "ease": "inOutCubic",
+    "durations": {
+      "fast": 0.1,
+      "base": 0.25,
+      "slow": 0.5
+    }
+  },
+  "theme": {
+    "inks": [
+      "#C9773F 나무 계산대 — 바탕, 서 있다",
+      "#FBFAF6 감열지 — 영수증 한 장",
+      "#1E1E1C 감열 검정 — 모든 글",
+      "#2B2A25 프린터 몸통과 틈",
+      "#8A1A12 빨간 도장 하나 — 드롭에만(종이·계산대 어디서도 읽히는 짙은 빨강)"
+    ],
+    "texture": "평평한 흰 종이 띠, 위 끝은 뜯은 톱니. 고정폭 글 하나, 보통·굵게·두 배 높이. 줄 구분은 점선. 그림자는 종이 밑 짧은 단색 한 단",
+    "movement": "줄을 찍을 때마다 종이가 프린터 틈에서 한 줄씩 밀려 올라온다(다음 줄까지 이어서 민다). 한 건이 끝나면 톱니 칼날에 뜯겨 날아가고 새 장이 나온다. 드롭에 빨간 도장이 한 번 쾅"
+  },
+  "notes": [
+    "감열지 위 글은 늘 검정 한 색 — 옅은 회색은 꼬리 줄(시각·번호)만.",
+    "빨강은 드롭 도장 하나에만.",
+    "카메라 없음 — 계산대 위를 내려다본다. 구도는 영수증 한 장(마디 하나)마다 바뀐다.",
+    "dim·accentText 는 종이와 계산대 어디에 놓여도 3:1 이 넘게 짙게 — 영수증 안 옅은 꼬리 줄은 heat 칸."
+  ]
+}

package/themes/receipt/slots.ts

@@ -0,0 +1,89 @@
+import { clamp, ease, spring, type Style } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, shownCount, strokePath, traceCanvas } from "@kasaframe/themes/slotkit";
+import { counterTop, thermalPrint } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 감열 영수증 결로. 판은 위·아래 톱니로 뜯은 영수증 쪽지,
+// 앉기는 그 아래 합계 이중선이 찍히며 종이가 한 줄 툭 밀리는 것, 글은 네 글자씩 찍히는 감열 인쇄
+
+const zigzag = (tooth: number, n = 24): string => {
+  const top = Array.from({ length: n + 1 }, (_, i) => `${((i * 100) / n).toFixed(2)}% ${i % 2 ? tooth : 0}px`);
+  const bottom = Array.from({ length: n + 1 }, (_, i) => `${(100 - (i * 100) / n).toFixed(2)}% calc(100% - ${i % 2 ? tooth : 0}px)`);
+  return `polygon(${[...top, ...bottom].join(",")})`;
+};
+
+export const slots: ThemeSlots = {
+  surface(el, { ctx }) {
+    return counterTop(el, { ctx });
+  },
+
+  // 영수증 쪽지 — 흰 감열지, 위·아래 톱니, 계산대에 짧은 그림자. 프린터에서 나오듯 위부터 점 줄마다 드러난다. 강조 쪽지는 위에 굵은 이중선
+  panel(el, { at, tone }) {
+    const box = layer(el, "inset:0", true);
+    layer(box, "left:8px;top:8px;right:-8px;bottom:-8px;background:rgba(0,0,0,0.12);clip-path:" + zigzag(10));
+    const sheet = layer(box, `inset:0;background:var(--kf-paper, var(--kf-surface));clip-path:${zigzag(10)}`);
+    layer(sheet, `left:6%;right:6%;top:18px;border-top:${tone === "accent" ? "8px double" : "3px dashed"} var(--kf-ink)`);
+    return (t) => {
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      const st = thermalPrint(t, { at, rows: 6, dur: 0.24 });
+      box.style.clipPath = st.clip ? `inset(0 0 ${((st.clip.bottom ?? 0) * 100).toFixed(1)}% 0)` : "none";
+    };
+  },
+
+  // 합계를 찍는 순간 — 아래에 이중선이 왼쪽부터 찍히고, 종이가 한 줄 툭 밀려 올라갔다 선다
+  land(el, { at }) {
+    const rule = layer(el, "left:0;right:0;bottom:-22px;height:0;border-top:8px double var(--kf-ink);transform-origin:0 50%;visibility:hidden");
+    return (t): Style => {
+      rule.style.visibility = t >= at ? "visible" : "hidden";
+      rule.style.transform = `scaleX(${ease.outCubic(clamp((t - at) / 0.18)).toFixed(4)})`;
+      if (t < at) return {};
+      return { y: spring(t - at, { from: 0, to: 0, velocity: -420, stiffness: 380, damping: 22 }) };
+    };
+  },
+
+  // 감열 인쇄 — 머리가 네 글자씩 찍고, 막 찍힌 글자는 열이 덜 올라 옅었다가 검게 앉는다
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    return (t) => {
+      const n = Math.min(spans.length, Math.ceil(shownCount(spans.length, t, at, dur) / 4) * 4);
+      spans.forEach((s, i) => {
+        s.style.visibility = i < n ? "visible" : "hidden";
+        const born = at + (Math.floor(i / 4) * 4 * dur) / spans.length;
+        s.style.color = i < n && t - born < 0.1 && t < at + dur + 0.1 ? "var(--kf-heat, var(--kf-dim))" : "";
+      });
+    };
+  },
+
+  // 절취 점선 — 점이 찍혀 나가고, 다 찍은 뒤엔 종이가 밀리듯 점이 선을 따라 흐른다
+  trace(el, { ctx, points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points, 30);
+    const ink = tone === "accent" ? ctx.style.colors.accent : ctx.style.colors.ink;
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      g.strokeStyle = ink;
+      g.lineWidth = 8;
+      g.lineCap = "round";
+      g.setLineDash([0.1, 22]);
+      g.lineDashOffset = p >= 1 ? -(t - at - dur) * 90 : 0;
+      strokePath(g, partial(points, ease.inOutCubic(p)));
+    };
+  },
+
+  // 드롭 — 빨간 고무 도장 고리가 쾅 찍힌다(넘쳤다 앉는다), 붉은 섬광 한 번
+  drop(el, { ctx, drop }) {
+    const ring = layer(el, "left:50%;top:50%;width:46vmin;height:46vmin;margin:-23vmin 0 0 -23vmin;border-radius:50%;border:2.4vmin solid var(--kf-accent);box-shadow:inset 0 0 0 1.4vmin var(--kf-paper, #fff), inset 0 0 0 2.4vmin var(--kf-accent);mix-blend-mode:multiply;visibility:hidden");
+    const flash = layer(el, "inset:0;background:var(--kf-accent);opacity:0;mix-blend-mode:multiply");
+    const D = ctx.beats.drop(drop);
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "receipt-drop" });
+      ring.style.visibility = t >= D ? "visible" : "hidden";
+      const k = clamp((t - D) / 0.16);
+      ring.style.transform = `rotate(-8deg) scale(${(1.6 - 0.6 * ease.outBack(k)).toFixed(4)})`;
+      flash.style.opacity = (s.flash * 0.25).toFixed(3);
+      return s;
+    };
+  },
+};