kasaframe 0.1.1 → 0.1.4

package/themes/kawaii-sticker/sample/kf.json

@@ -0,0 +1,66 @@
+{
+  "title": "카와이 스티커 — OpenGateway 소개 15초",
+  "theme": "kawaii-sticker",
+  "fps": 60,
+  "width": 1920,
+  "height": 1080,
+  "duration": 15.0,
+  "mode": "seek",
+  "style": "style.json",
+  "music": "assets/music/kawaii-friends-og.mp3",
+  "beats": "beats.json",
+  "captions": "none",
+  "safeArea": {
+    "top": 0,
+    "bottom": 0,
+    "left": 0,
+    "right": 0
+  },
+  "text": {
+    "policy": "terms-only",
+    "maxOnScreen": 20,
+    "minPx": 44
+  },
+  "scenes": [
+    {
+      "id": "gather",
+      "from": 0,
+      "dur": 3.117,
+      "file": "scenes/gather.ts",
+      "role": "hook",
+      "idea": "회사 접두 이름표가 박마다 흩어져 붙었다 떼어지고 서버·주소 스티커가 톡"
+    },
+    {
+      "id": "models",
+      "from": 3.117,
+      "dur": 4.219,
+      "file": "scenes/models.ts",
+      "role": "explain",
+      "idea": "같은 주소 아래 모델 ID 이름표가 박마다(마지막 마디는 반 박마다) 위에 덮여 쌓인다"
+    },
+    {
+      "id": "one",
+      "from": 7.336,
+      "dur": 1.412,
+      "file": "scenes/one.ts",
+      "role": "drop",
+      "idea": "드롭 — 102 철썩·조각 터짐, 주소, 두 형식"
+    },
+    {
+      "id": "price",
+      "from": 8.748,
+      "dur": 4.249,
+      "file": "scenes/price.ts",
+      "role": "explain",
+      "idea": "달·시계, 가격표가 떼어지고 싼 값이 붙는다, −90%"
+    },
+    {
+      "id": "end",
+      "from": 12.997,
+      "dur": 2.003,
+      "file": "scenes/end.ts",
+      "role": "end",
+      "idea": "실측 숫자 → OG 로고 스티커 → 주소, 다 함께 뛴다"
+    }
+  ]
+}

package/themes/kawaii-sticker/sample/lib/og.ts

@@ -0,0 +1,54 @@
+import type { SceneCtx } from "@kasaframe/core";
+
+// 브리프(docs/briefs/og-intro-15s.md)에 적힌 OG 사실만 — 회사 표시는 모델 ID 글자로만, 로고는 OG 것만.
+export const OG = {
+  host: "apis.opengateway.ai",
+  models: 102,
+  owners: [
+    ["openai/", 41],
+    ["anthropic/", 15],
+    ["google/", 15],
+    ["z-ai/", 7],
+    ["x-ai/", 6],
+    ["qwen/", 5],
+    ["moonshotai/", 4],
+    ["deepseek/", 4],
+    ["minimax/", 3],
+  ] as [string, number][],
+  modelIds: [
+    "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",
+    "openai/gpt-5.4-nano",
+    "x-ai/grok-4.7",
+    "moonshotai/kimi-k3",
+    "anthropic/claude-haiku-5-5",
+    "minimax/MiniMax-M3",
+    "google/gemini-3.5-flash",
+    "anthropic/claude-sonnet-5-5",
+    "deepseek/deepseek-v4-pro",
+    "openai/o3",
+    "google/gemini-3.1-pro-preview",
+    "openai/gpt-image-2.5-sunburst",
+  ],
+  price: { model: "deepseek/deepseek-v4.1-flash-ultrafast", input: [0.3, 0.03], output: [1.2, 0.12], glm: "z-ai/glm-5.3-flash-ultrafast" },
+  // og-measure 테마 견본이 OG 를 실제로 18번 불러 잰 값(2026-10-08) — 브리프에 옮겨 적힌 그대로
+  measured: { model: "openai/gpt-5.4-nano", ttftMs: 612.5, calls: 18, cost: "$0.0004" },
+};
+
+export const FILLS = ["#FFD1E6", "#FFE48A", "#C9F0E4", "#D9D0FF", "#CFEAFF", "#FFFFFF"];
+
+/** 장면 시작 이후의 박 시각(장면 안 초) — 박마다 큰 움직임 하나를 두는 데 쓴다 */
+export function beatsOf(ctx: SceneCtx): number[] {
+  return ctx.beats.beats.filter((b) => b > -0.01);
+}
+
+/** 카메라가 잡는 무대 — 왼쪽 위를 축으로 shotCam 을 붙인다 */
+export function stageOf(root: HTMLElement): HTMLElement {
+  const stage = document.createElement("div");
+  stage.style.cssText = "position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0";
+  root.append(stage);
+  return stage;
+}

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

@@ -0,0 +1,37 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { fx } from "@kasaframe/themes/fx";
+import { OG, beatsOf, stageOf } from "../lib/og.ts";
+
+const { paper, sticker, stickerBurst, shotCam } = fx("kawaii-sticker");
+
+// 끝: 직접 잰 숫자 하나 → OG 로고 스티커 → 주소, 마지막 박에 조각이 터지며 다 함께 뛴다.
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const bg = paper(root, { seed: "og-end", phase: ctx.from });
+    const stage = stageOf(root);
+    const b = beatsOf(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const s = (p: string) => ctx.asset(p);
+    const M = OG.measured;
+    const last = [B(5)];
+    const items = [
+      sticker(stage, { text: `${M.ttftMs}ms`, x: 640, y: 300, w: 700, rotate: -4, at: 0, hops: last, fill: "#FFE48A", size: 170, outline: 16, seed: "ms", z: 3 }),
+      sticker(stage, { text: `${M.model} · 첫 토큰`, x: 640, y: 520, w: 420, rotate: 2, at: B(1), hops: last, fill: "#FFFFFF", size: 56, outline: 10, seed: "who", z: 4 }),
+      sticker(stage, { text: `실측 · 호출 ${M.calls}번 · ${M.cost}`, x: 640, y: 650, w: 420, rotate: -2, at: B(2), hops: last, fill: "#C9F0E4", size: 52, outline: 10, seed: "meas", z: 4 }),
+      sticker(stage, { src: s("stickers/og-logo.svg"), x: 1460, y: 380, w: 520, rotate: 3, at: B(3), hops: last, seed: "og", z: 3 }),
+      sticker(stage, { text: "opengateway.ai", x: 1460, y: 700, w: 420, rotate: -3, at: B(4), hops: last, fill: "#CFEAFF", size: 76, outline: 12, seed: "site", z: 4 }),
+    ];
+    const burst = stickerBurst(stage, { at: B(5), x: 1000, y: 500, srcs: ["server", "coin", "bolt", "bubble", "moon", "clock"].map((n) => s(`stickers/${n}.png`)), count: 18, size: 120, seed: "end" });
+    const shots = [
+      { at: 0, x: 700, y: 440, zoom: 1.12, rotate: -1.5 },
+      { at: B(3), x: 960, y: 540, zoom: 1.0, rotate: 0 },
+      { at: B(5), x: 1000, y: 520, zoom: 1.05, rotate: 1 },
+    ];
+    return (t: number) => {
+      bg(t);
+      for (const p of items) p(t);
+      burst(t);
+      applyStyle(stage, shotCam(t, { shots, scene: ctx.id }));
+    };
+  },
+};

package/themes/kawaii-sticker/sample/scenes/gather.ts

@@ -0,0 +1,50 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { fx } from "@kasaframe/themes/fx";
+import { FILLS, OG, beatsOf, stageOf } from "../lib/og.ts";
+
+const { paper, sticker, stickerBurst, shotCam } = fx("kawaii-sticker");
+
+// 회사마다 흩어진 모델 — 모델 ID 접두 이름표가 박마다(반 박도) 곳곳에 톡 → 여섯째 박에 한꺼번에 떼어져 날아가고 서버·주소 스티커가 붙는다.
+const SPOTS = [
+  [360, 170],
+  [1520, 160],
+  [920, 300],
+  [1560, 470],
+  [330, 560],
+  [1180, 650],
+  [640, 820],
+  [1460, 880],
+  [330, 930],
+] as const;
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const bg = paper(root, { seed: "og-gather", phase: ctx.from });
+    const stage = stageOf(root);
+    const b = beatsOf(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const half = 60 / ctx.beats.bpm / 2;
+    // 첫 이름표는 0초에 — 첫 박(0.29초)까지 화면이 비어 멈춰 있지 않게
+    const at = [0, B(0), B(1), B(2), B(3), B(3) + half, B(4), B(4) + half, B(5)];
+    const s = (p: string) => ctx.asset(p);
+    const tags = OG.owners.map(([owner, n], i) =>
+      sticker(stage, { text: `${owner} ${n}`, x: SPOTS[i][0], y: SPOTS[i][1], w: 260, rotate: (i % 2 ? 1 : -1) * (3 + i), at: at[i], peelAt: B(6) + i * 0.025, peelDir: SPOTS[i][0] < 960 ? -1 : 1, fill: FILLS[i % FILLS.length], size: 64, outline: 10, seed: owner }),
+    );
+    const server = sticker(stage, { src: s("stickers/server.png"), x: 960, y: 450, w: 380, at: B(6) + 0.08, seed: "server", z: 3 });
+    const host = sticker(stage, { text: `${OG.host}/v1`, x: 960, y: 770, w: 400, at: B(7), fill: "#FFFFFF", size: 80, outline: 12, seed: "host", z: 4 });
+    const burst = stickerBurst(stage, { at: B(6) + 0.1, x: 960, y: 450, srcs: [s("stickers/coin.png"), s("stickers/bolt.png")], count: 10, size: 110, seed: "gather" });
+    const shots = [
+      { at: 0, x: 960, y: 540, zoom: 1.0 },
+      { at: B(4), x: 1000, y: 560, zoom: 1.06, rotate: 1.5 },
+      { at: B(6), x: 960, y: 590, zoom: 1.0, rotate: 0 },
+    ];
+    return (t: number) => {
+      bg(t);
+      for (const p of tags) p(t);
+      server(t);
+      host(t);
+      burst(t);
+      applyStyle(stage, shotCam(t, { shots, scene: ctx.id }));
+    };
+  },
+};

package/themes/kawaii-sticker/sample/scenes/models.ts

@@ -0,0 +1,43 @@
+import { applyStyle, rand, type SceneCtx } from "@kasaframe/core";
+import { fx } from "@kasaframe/themes/fx";
+import { FILLS, OG, beatsOf, stageOf } from "../lib/og.ts";
+
+const { paper, sticker, shotCam } = fx("kawaii-sticker");
+
+// 같은 주소 아래 스티커 더미 — 박마다 모델 ID 이름표가 위에 톡 덮이고, 드롭 앞 마지막 마디는 반 박마다. 곁의 말풍선·번개는 몰아 올리기에 뛴다.
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const bg = paper(root, { seed: "og-models", phase: ctx.from });
+    const stage = stageOf(root);
+    const b = beatsOf(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const half = 60 / ctx.beats.bpm / 2;
+    const s = (p: string) => ctx.asset(p);
+    const phase = ctx.from;
+    const times = OG.modelIds.map((_, i) => (i < 8 ? B(i) : B(8 + Math.floor((i - 8) / 2)) + ((i - 8) % 2) * half));
+    const ups = [B(8), B(8) + half, B(9), B(9) + half, B(10), B(10) + half, B(11), B(11) + half];
+    const server = sticker(stage, { src: s("stickers/server.png"), x: 960, y: 290, w: 300, phase, seed: "server", z: 3, hops: ups.filter((_, i) => i % 2 === 0) });
+    const host = sticker(stage, { text: `${OG.host}/v1`, x: 960, y: 520, w: 400, phase, fill: "#FFFFFF", size: 72, outline: 12, seed: "host", z: 4 });
+    // 떼어 내지 않고 위에 덮어 쌓는다 — 날아가는 이름표가 주소를 가로지르지 않고, 맨 위 하나만 또렷이 읽힌다
+    const ids = OG.modelIds.map((id, i) =>
+      sticker(stage, { text: id, x: 960 + (rand(id, 1) - 0.5) * 160, y: 790 + (rand(id, 2) - 0.5) * 70, w: 420, rotate: (rand(id, 3) - 0.5) * 12, at: times[i], fill: FILLS[i % 5], size: 60, outline: 10, seed: id, z: 5 + i }),
+    );
+    const bubble = sticker(stage, { src: s("stickers/bubble.png"), x: 300, y: 700, w: 240, rotate: -8, at: 0, hops: ups.filter((_, i) => i % 2 === 1), phase, seed: "bubble", z: 2 });
+    const bolt = sticker(stage, { src: s("stickers/bolt.png"), x: 1620, y: 690, w: 220, rotate: 8, at: B(4), hops: ups.filter((_, i) => i % 2 === 0), phase, seed: "bolt", z: 2 });
+    const shots = [
+      { at: 0, x: 960, y: 540, zoom: 1.0 },
+      { at: B(4), x: 960, y: 610, zoom: 1.08, rotate: -1.5 },
+      { at: B(8), x: 960, y: 600, zoom: 1.1, rotate: 1.5 },
+      { at: B(10), x: 960, y: 560, zoom: 0.98, rotate: 0 },
+    ];
+    return (t: number) => {
+      bg(t);
+      server(t);
+      host(t);
+      bubble(t);
+      bolt(t);
+      for (const p of ids) p(t);
+      applyStyle(stage, shotCam(t, { shots, scene: ctx.id }));
+    };
+  },
+};

package/themes/kawaii-sticker/sample/scenes/one.ts

@@ -0,0 +1,45 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { fx } from "@kasaframe/themes/fx";
+import { OG, beatsOf, stageOf } from "../lib/og.ts";
+
+const { paper, sticker, slap, stickerBurst, shotCam } = fx("kawaii-sticker");
+
+// 드롭: 거대한 102 가 철썩(섬광·고리·조각 터짐, 카메라가 확 물러남) → 박마다 주소 · 두 형식.
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const bg = paper(root, { seed: "og-one", phase: ctx.from });
+    const stage = stageOf(root);
+    const b = beatsOf(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const s = (p: string) => ctx.asset(p);
+    const big = sticker(stage, { text: String(OG.models), x: 960, y: 420, w: 900, fill: "#FFE48A", size: 330, outline: 18, seed: "102", z: 3, with: (t: number) => slap(t, { beats: ctx.beats, drop: 0, rules: ctx.style.motion, scene: ctx.id }).style });
+    const host = sticker(stage, { text: `https://${OG.host}/v1`, x: 960, y: 760, w: 500, at: B(1), fill: "#FFFFFF", size: 72, outline: 12, seed: "host-1", z: 4 });
+    const a = sticker(stage, { text: "OpenAI 형식", x: 600, y: 940, w: 300, rotate: -4, at: B(2), fill: "#C9F0E4", size: 64, outline: 10, seed: "fmt-a", z: 4 });
+    const c = sticker(stage, { text: "Anthropic 형식", x: 1320, y: 940, w: 300, rotate: 4, at: B(3), fill: "#FFD1E6", size: 64, outline: 10, seed: "fmt-b", z: 4 });
+    const burst = stickerBurst(stage, { at: 0, x: 960, y: 420, srcs: ["server", "coin", "bolt", "bubble"].map((n) => s(`stickers/${n}.png`)), count: 16, size: 130, seed: "drop" });
+    const ring = document.createElement("div");
+    ring.style.cssText = "position:absolute;left:960px;top:420px;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;border:30px solid var(--kf-accent);pointer-events:none;z-index:6";
+    stage.append(ring);
+    const flash = document.createElement("div");
+    flash.style.cssText = "position:absolute;inset:0;background:#FFFFFF;pointer-events:none;z-index:9";
+    root.append(flash);
+    const shots = [
+      { at: -1, x: 960, y: 540, zoom: 1.5 },
+      { at: 0, x: 960, y: 560, zoom: 1.0 },
+      { at: B(2), x: 960, y: 640, zoom: 1.06, rotate: -1.5 },
+    ];
+    return (t: number) => {
+      bg(t);
+      big(t);
+      host(t);
+      a(t);
+      c(t);
+      burst(t);
+      const sl = slap(t, { beats: ctx.beats, drop: 0, rules: ctx.style.motion, scene: ctx.id });
+      flash.style.opacity = String(0.85 * sl.flash);
+      ring.style.opacity = String(sl.ring.opacity);
+      ring.style.transform = `scale(${sl.ring.scale})`;
+      applyStyle(stage, shotCam(t, { shots, scene: ctx.id }));
+    };
+  },
+};

package/themes/kawaii-sticker/sample/scenes/price.ts

@@ -0,0 +1,47 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { fx } from "@kasaframe/themes/fx";
+import { OG, beatsOf, stageOf } from "../lib/og.ts";
+
+const { paper, sticker, shotCam } = fx("kawaii-sticker");
+
+// 시간대 가격 — 달·시계가 톡, 00–10시 창, 정가 가격표가 떼어지고 싼 값이 붙는다(같은 모델 ID), −90% 가 크게. 마지막 박에 다 함께 뛴다.
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const bg = paper(root, { seed: "og-price", phase: ctx.from });
+    const stage = stageOf(root);
+    const b = beatsOf(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const s = (p: string) => ctx.asset(p);
+    const P = OG.price;
+    const money = (v: number) => `$${v.toFixed(2)} /M`;
+    const off = Math.round((1 - P.output[1] / P.output[0]) * 100);
+    const all = [B(11)];
+    const items = [
+      sticker(stage, { src: s("stickers/moon.png"), x: 290, y: 250, w: 270, rotate: -6, at: 0, hops: all, seed: "moon", z: 2 }),
+      sticker(stage, { src: s("stickers/clock.png"), x: 1630, y: 250, w: 260, rotate: 6, at: B(1), hops: all, seed: "clock", z: 2 }),
+      sticker(stage, { text: "KST 00:00–10:00", x: 960, y: 150, w: 360, at: B(2), hops: all, fill: "#D9D0FF", size: 70, outline: 12, seed: "kst", z: 4 }),
+      sticker(stage, { text: P.model, x: 960, y: 320, w: 420, at: B(3), fill: "#FFFFFF", size: 56, outline: 10, seed: "pm", z: 4 }),
+      sticker(stage, { text: `출력 ${money(P.output[0])}`, x: 580, y: 540, w: 360, rotate: -4, at: B(4), peelAt: B(5) - 0.02, peelDir: -1, fill: "#FFFFFF", size: 72, outline: 12, seed: "o0", z: 4 }),
+      sticker(stage, { text: `출력 ${money(P.output[1])}`, x: 580, y: 540, w: 360, rotate: 3, at: B(5), hops: all, fill: "#C9F0E4", size: 72, outline: 12, seed: "o1", z: 4 }),
+      sticker(stage, { text: `입력 ${money(P.input[0])}`, x: 1340, y: 540, w: 360, rotate: 4, at: B(6), peelAt: B(7) - 0.02, peelDir: 1, fill: "#FFFFFF", size: 72, outline: 12, seed: "i0", z: 4 }),
+      sticker(stage, { text: `입력 ${money(P.input[1])}`, x: 1340, y: 540, w: 360, rotate: -3, at: B(7), hops: all, fill: "#C9F0E4", size: 72, outline: 12, seed: "i1", z: 4 }),
+      sticker(stage, { text: `−${off}%`, x: 960, y: 780, w: 600, rotate: -5, at: B(8), hops: all, fill: "#FFD1E6", size: 180, outline: 16, seed: "off", z: 5 }),
+      sticker(stage, { src: s("stickers/coin.png"), x: 430, y: 800, w: 200, rotate: -10, at: B(8) + 0.09, hops: [B(10), B(11)], seed: "coin-a", z: 3 }),
+      sticker(stage, { src: s("stickers/coin.png"), x: 1490, y: 800, w: 190, rotate: 12, at: B(8) + 0.18, hops: [B(10) + 0.09, B(11)], seed: "coin-b", z: 3 }),
+      sticker(stage, { text: `${P.glm} · 밤 −70%`, x: 960, y: 975, w: 420, at: B(9), peelAt: B(10) - 0.02, fill: "#CFEAFF", size: 52, outline: 10, seed: "glm", z: 6 }),
+      sticker(stage, { text: "신청 없이 · 같은 모델 ID", x: 960, y: 975, w: 420, at: B(10), hops: all, fill: "#FFE48A", size: 56, outline: 10, seed: "auto", z: 6 }),
+    ];
+    const shots = [
+      { at: 0, x: 960, y: 540, zoom: 1.0 },
+      { at: B(4), x: 800, y: 540, zoom: 1.08, rotate: -1.5 },
+      { at: B(6), x: 1120, y: 540, zoom: 1.08, rotate: 1.5 },
+      { at: B(8), x: 960, y: 600, zoom: 1.04, rotate: 0 },
+      { at: B(10), x: 960, y: 560, zoom: 0.98 },
+    ];
+    return (t: number) => {
+      bg(t);
+      for (const p of items) p(t);
+      applyStyle(stage, shotCam(t, { shots, scene: ctx.id }));
+    };
+  },
+};

package/themes/kawaii-sticker/sample/style.json

@@ -0,0 +1,99 @@
+{
+  "name": "kawaii-sticker",
+  "label": "카와이 스티커 — 오려 붙인 스티커 앨범",
+  "scheme": "light",
+  "colors": {
+    "bg": "#FFF3F8",
+    "surface": "#FFFFFF",
+    "raised": "#FDE8F3",
+    "line": "#F6CFE4",
+    "ink": "#4A2B4F",
+    "inkSoft": "#6B4A70",
+    "dim": "#7E5F84",
+    "accent": "#FF7EB6",
+    "accentSoft": "#FFD1E6",
+    "accentText": "#C2387A",
+    "onAccent": "#4A2B4F",
+    "mint": "#7FD8C3",
+    "lavender": "#B9A7FF",
+    "sky": "#8FD3FF",
+    "lemon": "#FFE48A",
+    "peach": "#FFB59E",
+    "success": "#3CBF9A",
+    "danger": "#E5537A",
+    "warning": "#F2A93B",
+    "sheet": "#EFE6FF",
+    "tape": "rgba(143, 211, 255, 0.82)",
+    "shadow": "rgba(74, 43, 79, 0.28)"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Jua\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "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"
+      },
+      {
+        "family": "Jua",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/jua/Jua-Regular.ttf",
+        "weight": "400"
+      }
+    ]
+  },
+  "type": {
+    "hero": 136,
+    "title": 80,
+    "body": 40,
+    "caption": 32,
+    "weightDisplay": 400,
+    "weightBody": 600,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 16,
+    "md": 28,
+    "lg": 44,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "0 10px 30px rgba(255, 126, 182, 0.22)",
+    "lift": "0 6px 0 rgba(74, 43, 79, 0.12)"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "free",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "pop",
+    "ease": "outBack",
+    "durations": {
+      "fast": 0.18,
+      "base": 0.42,
+      "slow": 0.7
+    }
+  },
+  "notes": [
+    "잉크 셋: 종이 분홍(bg) · 스티커 흰색(surface) · 진보라 잉크(ink). 분홍 accent 는 면·테이프·부스러기에만, 글자는 ink·accentText.",
+    "질감: 점 격자 앨범 종이 위에, 모든 그림이 흰 다이컷 테두리 + 짧은 종이 그림자를 두른 스티커다. 들린 만큼(lift) 그림자가 길고 옅어진다.",
+    "움직임 성격: 톡(들린 채 내려와 눌리며 붙고 짧게 출렁) · 숨 쉬는 모서리 · 떼어짐(모서리부터 젖혀져 날아감). 미끄러지거나 페이드로 나타나지 않는다.",
+    "제목·이름표는 Jua(한 굵기, weightDisplay 400), 나머지는 Pretendard 600. 글꼴은 한 파일로 받는다.",
+    "드롭 철썩(slap)만 섬광·흔들림을 쓴다 — 드롭 한 번에 한 번. 박 펄스는 드롭 구간만.",
+    "도트 학생 그림은 pixel:true(image-rendering:pixelated) 로 붙인다.",
+    "쉬지 않는다: 0.1초 넘게 멈춘 프레임이 없게 — 카메라(shotCam)는 컷 사이에도 흐르고, 색종이는 늘 떨어지고, 박마다 스티커가 붙거나 뛴다. 구도는 마디(약 1.4초)마다 바꾼다."
+  ]
+}

package/themes/kawaii-sticker/slots.ts

@@ -0,0 +1,95 @@
+import { clamp, rand, 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 { stickOn } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 무엇이든 흰 테두리 스티커가 되어 톡 붙는 앨범의 결.
+// 바탕은 서 있는 점박이 종이만(떠다니는 색종이는 뜻이 없어 뺐다) — 움직이는 것은 붙는 스티커뿐
+export const slots: ThemeSlots = {
+  surface(el) {
+    layer(el, "inset:0;background:var(--kf-bg);background-image:radial-gradient(rgba(255,126,182,.18) 2.2px,transparent 2.6px);background-size:44px 44px");
+    return () => {};
+  },
+
+  // 스티커 판 — 흰 테두리·둥근 모서리·그림자, 떨어지듯 기울어 붙는다(판만 — 상자 자리는 패턴 몫)
+  panel(el, { at, seed, tone }) {
+    const sheet = layer(
+      el,
+      `inset:0;border-radius:var(--kf-radius-lg);border:10px solid #fff;box-shadow:0 6px 0 rgba(74,43,79,.12),0 14px 30px rgba(74,43,79,.14);background:${tone === "accent" ? "var(--kf-accent)" : "var(--kf-raised)"}`,
+      true,
+    );
+    const rotate = (rand(seed, 0) - 0.5) * 6;
+    return (t) => {
+      const s = stickOn(t, { at, rotate, seed });
+      sheet.style.visibility = t >= at ? "visible" : "hidden";
+      sheet.style.opacity = String(s.opacity ?? 1);
+      const sx = (s.scale ?? 1) * (s.scaleX ?? 1);
+      const sy = (s.scale ?? 1) * (s.scaleY ?? 1);
+      sheet.style.transform = `translateY(${(s.y ?? 0).toFixed(1)}px) rotate(${(s.rotate ?? rotate).toFixed(2)}deg) scale(${sx.toFixed(4)}, ${sy.toFixed(4)})`;
+    };
+  },
+
+  // 철썩 — 앉는 순간 납작해졌다 출렁이며 선다
+  land(_el, { at }) {
+    return (t): Style => {
+      const s = t - at;
+      if (s < 0 || s > 0.6) return {};
+      const wob = Math.exp(-s / 0.14) * Math.cos(s * 26);
+      return { scaleX: 1 + 0.16 * wob, scaleY: 1 - 0.16 * wob };
+    };
+  },
+
+  // 글자 스티커가 한 자씩 톡 — 눌렸다 튀어 오른다(배치는 그대로, 글자 상자만)
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    for (const s of spans) {
+      s.style.display = "inline-block";
+      s.style.whiteSpace = "pre";
+    }
+    return (t) => {
+      const n = shownCount(spans.length, t, at, dur);
+      const each = dur / Math.max(1, spans.length);
+      spans.forEach((s, i) => {
+        s.style.visibility = i < n ? "visible" : "hidden";
+        const local = t - (at + i * each);
+        const k = local < 0 ? 1 : clamp(local / 0.18);
+        s.style.transform = k >= 1 ? "" : `translateY(${(-18 * Math.sin(k * Math.PI)).toFixed(1)}px) scale(${(1 + 0.25 * (1 - k)).toFixed(3)})`;
+      });
+    };
+  },
+
+  // 마스킹테이프 선 — 굵고 둥근 반투명 띠가 붙어 나간다
+  trace(el, { points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points);
+    const css = getComputedStyle(el);
+    const color = (tone === "accent" ? css.getPropertyValue("--kf-accent") : css.getPropertyValue("--kf-ink")).trim() || "#FF7EB6";
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      g.lineCap = "round";
+      g.lineJoin = "round";
+      g.strokeStyle = "#ffffff";
+      g.lineWidth = 26;
+      strokePath(g, partial(points, p));
+      g.strokeStyle = color;
+      g.globalAlpha = 0.85;
+      g.lineWidth = 16;
+      strokePath(g, partial(points, p));
+      g.globalAlpha = 1;
+    };
+  },
+
+  drop(el, { ctx, drop }) {
+    const ring = layer(el, "left:50%;top:50%;width:40vmin;height:40vmin;margin:-20vmin 0 0 -20vmin;border-radius:50%;border:14px solid var(--kf-accent);opacity:0");
+    const flash = layer(el, "inset:0;background:#fff;opacity:0");
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "kawaii-drop" });
+      flash.style.opacity = String(Math.round(s.flash * 0.9 * 100) / 100);
+      ring.style.opacity = String(s.ring.opacity);
+      ring.style.transform = `scale(${s.ring.scale.toFixed(3)})`;
+      return s;
+    };
+  },
+};

package/themes/kawaii-sticker/style.json

@@ -0,0 +1,99 @@
+{
+  "name": "kawaii-sticker",
+  "label": "카와이 스티커 — 오려 붙인 스티커 앨범",
+  "scheme": "light",
+  "colors": {
+    "bg": "#FFF3F8",
+    "surface": "#FFFFFF",
+    "raised": "#FDE8F3",
+    "line": "#F6CFE4",
+    "ink": "#4A2B4F",
+    "inkSoft": "#6B4A70",
+    "dim": "#7E5F84",
+    "accent": "#FF7EB6",
+    "accentSoft": "#FFD1E6",
+    "accentText": "#C2387A",
+    "onAccent": "#4A2B4F",
+    "mint": "#7FD8C3",
+    "lavender": "#B9A7FF",
+    "sky": "#8FD3FF",
+    "lemon": "#FFE48A",
+    "peach": "#FFB59E",
+    "success": "#3CBF9A",
+    "danger": "#E5537A",
+    "warning": "#F2A93B",
+    "sheet": "#EFE6FF",
+    "tape": "rgba(143, 211, 255, 0.82)",
+    "shadow": "rgba(74, 43, 79, 0.28)"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Jua\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "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"
+      },
+      {
+        "family": "Jua",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/jua/Jua-Regular.ttf",
+        "weight": "400"
+      }
+    ]
+  },
+  "type": {
+    "hero": 136,
+    "title": 80,
+    "body": 40,
+    "caption": 32,
+    "weightDisplay": 400,
+    "weightBody": 600,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 16,
+    "md": 28,
+    "lg": 44,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "0 10px 30px rgba(255, 126, 182, 0.22)",
+    "lift": "0 6px 0 rgba(74, 43, 79, 0.12)"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "free",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "pop",
+    "ease": "outBack",
+    "durations": {
+      "fast": 0.18,
+      "base": 0.42,
+      "slow": 0.7
+    }
+  },
+  "notes": [
+    "잉크 셋: 종이 분홍(bg) · 스티커 흰색(surface) · 진보라 잉크(ink). 분홍 accent 는 면·테이프·부스러기에만, 글자는 ink·accentText.",
+    "질감: 점 격자 앨범 종이 위에, 모든 그림이 흰 다이컷 테두리 + 짧은 종이 그림자를 두른 스티커다. 들린 만큼(lift) 그림자가 길고 옅어진다.",
+    "움직임 성격: 톡(들린 채 내려와 눌리며 붙고 짧게 출렁) · 숨 쉬는 모서리 · 떼어짐(모서리부터 젖혀져 날아감). 미끄러지거나 페이드로 나타나지 않는다.",
+    "제목·이름표는 Jua(한 굵기, weightDisplay 400), 나머지는 Pretendard 600. 글꼴은 한 파일로 받는다.",
+    "드롭 철썩(slap)만 섬광·흔들림을 쓴다 — 드롭 한 번에 한 번. 박 펄스는 드롭 구간만.",
+    "도트 학생 그림은 pixel:true(image-rendering:pixelated) 로 붙인다.",
+    "쉬지 않는다: 0.1초 넘게 멈춘 프레임이 없게 — 색종이는 늘 떨어지고, 박마다 스티커가 붙거나 뛴다. 구도는 스티커가 붙고 떼어지며 바뀐다. 카메라(shotCam)는 이유가 있을 때만 휙 넘어가고 사이에는 선다."
+  ]
+}