kasaframe 0.1.1 → 0.1.4

package/themes/isotype/variants/sand-orange.json

@@ -0,0 +1,128 @@
+{
+  "id": "sand-orange",
+  "world": "isotype",
+  "name": "Sand Orange",
+  "desc": "모래빛 바탕에 주황 강조 · 단정한 기술 문서체",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9559,
+    "tint": {
+      "h": 51.8483,
+      "c": 0.0171
+    },
+    "inkL": 0.1403,
+    "hue": 51.0568,
+    "chroma": 1.0103,
+    "fonts": "plex",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 0.91,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#FAEEE6",
+      "surface": "#FFFBFA",
+      "raised": "#EDDED5",
+      "line": "#0A080D",
+      "ink": "#0A080D",
+      "inkSoft": "#282426",
+      "dim": "#605653",
+      "accent": "#BD5900",
+      "accentSoft": "#E5A97B",
+      "accentText": "#954500",
+      "onAccent": "#FFFBFA",
+      "success": "#557F3F",
+      "danger": "#954500",
+      "warning": "#9C7A3A",
+      "guide": "#9C8D68",
+      "grey": "#D1C3B9",
+      "green": "#557F3F",
+      "blue": "#3E5786"
+    },
+    "fonts": {
+      "sans": "\"IBM Plex Sans KR\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"IBM Plex Sans KR\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"IBM Plex Mono\", ui-monospace, \"IBM Plex Sans KR\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "IBM Plex Sans KR",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/ibmplexsanskr/IBMPlexSansKR-Medium.ttf",
+          "weight": "500"
+        },
+        {
+          "family": "IBM Plex Sans KR",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/ibmplexsanskr/IBMPlexSansKR-Bold.ttf",
+          "weight": "700"
+        },
+        {
+          "family": "IBM Plex Mono",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/ibmplexmono/IBMPlexMono-Medium.ttf",
+          "weight": "500"
+        },
+        {
+          "family": "IBM Plex Mono",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/ibmplexmono/IBMPlexMono-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": {
+      "weightDisplay": 700,
+      "weightBody": 500,
+      "tracking": "-0.01em"
+    },
+    "look": {
+      "tempo": 0.91
+    }
+  },
+  "tags": {
+    "mood": [
+      "정보적",
+      "명료한",
+      "클래식",
+      "차분한",
+      "교육적",
+      "밝은",
+      "따뜻한"
+    ],
+    "light": "light",
+    "use": [
+      "개수",
+      "비율",
+      "통계",
+      "비교",
+      "규모",
+      "설명"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 17.46,
+      "inkSoft": 13.45,
+      "dim": 6.25,
+      "accentText": 5.86,
+      "accent": 4,
+      "onAccent": 4.44,
+      "success~danger": 0.066,
+      "danger~warning": 0.11,
+      "accent~danger": 0.084,
+      "accent~ink": 0.393
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.counter"
+  }
+}

package/themes/kawaii-sticker/THEME.md

@@ -0,0 +1,44 @@
+# 카와이 스티커 — 오려 붙인 스티커 앨범
+
+**비유 한 줄**: 화면은 앨범 종이이고, 보여 줄 것(캐릭터·아이콘·이름표)은 전부 흰 테두리를 두른 스티커다 — 톡 붙고, 모서리가 숨 쉬듯 들리고, 떼어져 다음 자리로 간다.
+
+## 맞는 내용·용도
+
+- 캐릭터·마스코트·아이콘이 주인공인 것 — 카사텀 쌍둥이·학생 도트, 앱 아이콘, 굿즈·스티커 팩 소개.
+- 「모은다」·「붙인다」·「고른다」가 내용인 것 — 기능 여럿을 한 장씩 붙여 보여 주기, 멤버 소개, 컬렉션.
+- 용도: 홍보(promo) · 쇼츠 · 광고 범퍼 · 피드(1:1) · 뮤비 간주. 밝은 퓨처베이스·팝 곡에 맞는다.
+
+## 금지
+
+- 스티커가 아닌 것을 섞지 않는다 — 테두리 없는 사진·그라데이션 카드·유리 패널·네온. 무엇이든 `sticker` 로 감싼다.
+- 미끄러져 들어오기·서서히 나타나기(fade·slide) 금지. 등장은 톡(`stickOn`), 퇴장은 떼어짐(`peelOff`).
+- 박마다 스티커를 흔들거나 키우지 않는다. 섬광·흔들림은 드롭 철썩(`slap`) 한 번뿐.
+- 문구·슬로건·감성 카피 금지. 글은 이름표 스티커의 짧은 낱말(이름·기능 낱말)만.
+- 그림자를 진하게·길게 깔지 않는다 — 붙은 스티커는 2px 남짓의 짧은 종이 그림자다. 길고 옅은 그림자는 들린 동안만.
+- 도트 그림을 매끄럽게 키우지 않는다(`pixel: true`).
+
+## 효과 쓰는 법
+
+```ts
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { fx } from "@kasaframe/themes/fx";
+const { paper, sticker, stickerSheet, washiTape, slap } = fx("kawaii-sticker");
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const bg = paper(root);
+    const twins = sticker(root, { src: ctx.asset("stickers/twins.webp"), x: 960, y: 540, w: 560, at: 0.2, shine: [2.4] });
+    const tape = washiTape(root, { x: 700, y: 300, len: 240, angle: -14, at: 1.4 });
+    return (t: number) => { bg(t); twins(t); tape(t); };
+  },
+};
+```
+
+- 모든 효과는 시각 t 의 순수 함수다. layer 효과는 `build` 에서 한 번 부르고 돌려받은 `(t) => void` 를 장면 함수에서 부른다.
+- 스티커 크기는 화면 짧은 변의 15–50%. 한 화면에 스티커 3–9장, 이름표는 그 곁에 하나씩(카메라가 물러난 뒤에도 56px 이상). 이름표는 스티커마다 한 낱말이라 `kf.json` 의 `text.maxOnScreen` 을 이름표 수만큼(견본은 6) 둔다 — 문장을 늘리는 핑계로 쓰지 않는다.
+- **쉬지 않는다** — 박마다 눈에 보이는 큰 움직임 하나 이상(스티커가 톡 붙거나·떼어지거나·`hops` 로 뛰거나)으로 구도를 새로(같은 구도 1.5초 안), `paper` 색종이가 떨어져 0.1초도 멈춘 프레임이 없게. `shotCam` 샷은 이유 있는 순간(더미가 서고·철썩·마무리)에만 — 샷 사이 카메라는 선다.
+- 붙이는 시각은 박에(`ctx.beats.beats`), 드롭에는 `slap` + `stickerBurst` 하나.
+- 반짝(`shine`)은 한 장면에 한두 번, 주인공 스티커에만.
+- 회사 로고·상표는 그림으로 넣지 않는다 — 회사 표시는 모델 ID 이름표 글자로만, 제품 로고는 그 제품의 실제 파일만(견본은 OG styleguide 의 logo.svg).
+- 견본은 공통 주제 「OpenGateway 소개 15초」(`docs/briefs/og-intro-15s.md`) — 서버·시계·동전·말풍선·번개·달 스티커는 gpt-image 로 만들었다.
+- 그림이 모자라면 `kf gen img "<대상>, kawaii flat vector, thick soft navy outline, no text, isolated object" --transparent` — 흰 테두리는 효과가 두르니 그림에 넣지 않는다.

package/themes/kawaii-sticker/effects.ts

@@ -0,0 +1,412 @@
+import { applyStyle, clamp, combine, emit, ease, progress, rand, safeTime, type Beats, type MotionRules, type Style } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+
+// 비유: 오려 붙인 스티커 앨범. 무엇이든 흰 테두리를 두른 스티커가 되어 톡 붙고, 모서리가 살짝 들리고, 떼어진다.
+// 스티커가 얼마나 떠 있는지(lift 0..1)가 그림자 크기를 정한다 — 붙어 있으면 짧고 진한 그림자, 들리면 길고 옅은 그림자.
+// 화면은 0.1초도 쉬지 않는다 — 카메라는 컷 사이에도 흐르고, 바탕 색종이는 늘 떨어지고, 박마다 스티커 하나가 붙거나 뛴다.
+
+const INK = "74, 43, 79";
+
+type Lifted = Style & { lift: number };
+
+const nil: Lifted = { lift: 0 };
+
+// 흰 다이컷 테두리는 SVG 필터(알파를 굵혀 흰색으로 칠하고 원본을 위에)로 — 투명 PNG 면 무엇이든 모양 그대로 테두리가 선다.
+function cutFilter(doc: Document, px: number): string {
+  const id = `kfs-cut-${Math.round(px)}`;
+  if (doc.getElementById(id)) return id;
+  let defs = doc.getElementById("kfs-defs") as SVGSVGElement | null;
+  if (!defs) {
+    defs = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+    defs.id = "kfs-defs";
+    defs.setAttribute("width", "0");
+    defs.setAttribute("height", "0");
+    defs.style.position = "absolute";
+    doc.body.append(defs);
+  }
+  defs.insertAdjacentHTML(
+    "beforeend",
+    `<filter id="${id}" x="-50%" y="-50%" width="200%" height="200%" color-interpolation-filters="sRGB">
+      <feMorphology in="SourceAlpha" operator="dilate" radius="${Math.round(px)}" result="grow"/>
+      <feFlood flood-color="#ffffff"/>
+      <feComposite in2="grow" operator="in" result="rim"/>
+      <feMerge><feMergeNode in="rim"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>`,
+  );
+  return id;
+}
+
+function shadowOf(lift: number, k: number): string {
+  const l = clamp(lift);
+  return `drop-shadow(0 ${(2 + l * 22) * k}px ${(1.5 + l * 26) * k}px rgba(${INK}, ${0.3 - l * 0.12}))`;
+}
+
+/** 톡 붙기 — 들린 채 내려와 눌리며(납작) 붙고, 짧게 출렁인 뒤 멈춘다. at 전에는 안 보인다 */
+export function stickOn(t: number, o: { at: number; dur?: number; rotate?: number; fall?: number; seed?: string | number }): Lifted {
+  t = safeTime(t);
+  const dur = o.dur ?? 0.36;
+  const u = (t - o.at) / dur;
+  if (u < 0) return { opacity: 0, lift: 1 };
+  const tilt = (rand(o.seed ?? "stick", 1) - 0.5) * 22;
+  if (u < 0.45) {
+    const p = ease.inQuad(u / 0.45);
+    return {
+      opacity: clamp(u / 0.1),
+      y: -(o.fall ?? 110) * (1 - p),
+      scale: 1.45 - 0.55 * p,
+      rotate: (o.rotate ?? 0) + tilt * (1 - p),
+      lift: 1 - p,
+    };
+  }
+  const s = (u - 0.45) * dur;
+  const wob = Math.exp(-s / 0.1) * Math.cos(s * 36);
+  return { rotate: o.rotate ?? 0, scaleX: 1 + 0.12 * wob, scaleY: 1 - 0.12 * wob, lift: 0 };
+}
+
+/** 떼어짐 — 모서리부터 들려(앞으로 젖혀지며) 들린 채 날아간다. at 전에는 아무것도 안 바꾼다 */
+export function peelOff(t: number, o: { at?: number; dur?: number; dir?: 1 | -1 }): Lifted {
+  t = safeTime(t);
+  if (o.at === undefined || t < o.at) return nil;
+  const dur = o.dur ?? 0.6;
+  const u = (t - o.at) / dur;
+  const dir = o.dir ?? 1;
+  const curl = ease.outCubic(clamp(u / 0.3));
+  const fly = ease.inCubic(clamp((u - 0.25) / 0.75));
+  return {
+    rotateX: -40 * curl,
+    rotateY: 16 * dir * curl,
+    rotate: dir * (8 * curl + 30 * fly),
+    scale: 1 + 0.1 * curl + 0.5 * fly,
+    x: dir * 520 * fly,
+    y: -14 * curl - 1100 * fly,
+    opacity: 1 - clamp((u - 0.85) / 0.15),
+    lift: Math.max(curl, fly),
+  };
+}
+
+/** 붙은 스티커가 숨 쉬듯 모서리를 들었다 놓는다(시드마다 위상이 다르다) */
+export function cornerLift(t: number, o: { seed?: string | number; amount?: number; period?: number } = {}): Lifted {
+  t = safeTime(t);
+  const a = o.amount ?? 1;
+  const per = (o.period ?? 2.2) * (0.85 + 0.3 * rand(o.seed ?? "lift", 2));
+  const w = (Math.PI * 2 * t) / per + rand(o.seed ?? "lift", 3) * Math.PI * 2;
+  const up = 0.5 + 0.5 * Math.sin(w);
+  return { rotate: 2 * a * Math.sin(w * 0.5), rotateX: -9 * a * up, y: -5 * a * up, lift: 0.1 * a * up };
+}
+
+// 붙은 스티커가 한 번 뛰어올랐다 다시 톡 붙는다 — 박에 맞춰 큰 움직임을 내는 자리
+function hop(t: number, at: number): Lifted {
+  const u = (t - at) / 0.34;
+  if (u < 0 || u > 1) return nil;
+  const up = Math.sin(Math.PI * Math.min(1, u / 0.7));
+  const land = u > 0.7 ? Math.exp(-(u - 0.7) * 10) * Math.cos((u - 0.7) * 40) : 0;
+  return { y: -70 * up, scale: 1 + 0.14 * up, rotate: 8 * up * (rand(at, 1) - 0.5) * 2, scaleX: 1 + 0.1 * land, scaleY: 1 - 0.1 * land, lift: up };
+}
+
+/** 드롭 철썩 — 아주 크게(2.6배) 다가와 드롭 박에 정확히 철썩 붙고 크게 출렁인다. 섬광·고리·흔들림은 motion dropBurst 를 거쳐 기록된다 */
+export function slap(
+  t: number,
+  o: { beats: Beats; drop?: number; rules?: MotionRules; scene?: string; rotate?: number; lead?: number },
+): { style: Lifted; flash: number; ring: { scale: number; opacity: number } } {
+  t = safeTime(t);
+  const at = o.beats.drop(o.drop ?? 0);
+  const lead = o.lead ?? 0.26;
+  const b = dropBurst(t, { beats: o.beats, drop: o.drop ?? 0, rules: o.rules, scene: o.scene, source: "slap" });
+  let s: Lifted;
+  if (t < at - lead) s = { opacity: 0, lift: 1 };
+  else if (t < at) {
+    const p = ease.inCubic(progress(t, at - lead, lead));
+    s = { opacity: clamp(p * 3), scale: 2.6 - 1.6 * p, blur: 12 * (1 - p), rotate: (o.rotate ?? 0) - 14 * (1 - p), lift: 1 - p };
+  } else {
+    const s0 = t - at;
+    const wob = Math.exp(-s0 / 0.16) * Math.cos(s0 * 26);
+    s = { rotate: o.rotate ?? 0, scaleX: 1 + 0.22 * wob, scaleY: 1 - 0.22 * wob, lift: 0 };
+  }
+  return { style: { ...combine(s, b.shake), lift: s.lift }, flash: b.flash, ring: b.ring };
+}
+
+export interface Shot {
+  at: number;
+  /** 화면 가운데에 둘 무대 좌표 */
+  x: number;
+  y: number;
+  zoom?: number;
+  rotate?: number;
+}
+
+/**
+ * 컷 카메라 — 샷이 바뀌는 시각에 휙(whip초) 넘어가고, 샷 사이에는 선다. 0.1초도 멈추지 않는 몫은 색종이·스티커가 진다
+ * (늘 흐르는 카메라는 kf check camera.wander). drift·pan 을 주면 샷 사이에도 흐르지만 이벤트가 안 남는다. 기울기는 샷의 rotate 만 — 흐르며 돌지 않는다.
+ * 무대 상자(transform-origin 0 0)에 applyStyle 로 붙인다. 휙 넘어가는 동안 camera 기록을 남긴다(style.json cameraMove: free).
+ */
+export function shotCam(t: number, o: { shots: Shot[]; whip?: number; drift?: number; pan?: number; w?: number; h?: number; scene?: string }): Style {
+  t = safeTime(t);
+  const shots = o.shots;
+  if (!shots.length) return {};
+  const whip = o.whip ?? 0.24;
+  const drift = o.drift ?? 0;
+  const pan = o.pan ?? 0;
+  const W = o.w ?? 1920;
+  const H = o.h ?? 1080;
+  // 샷 i 를 시각 u 에 본 모습 — drift·pan 을 준 때만 흐른 만큼 다가가고(drift/초) 옆으로 민다(pan px/초, 샷마다 방향을 바꾼다)
+  const frame = (i: number, u: number) => {
+    const s = shots[i];
+    const e = Math.max(0, u - s.at);
+    const dir = i % 2 ? -1 : 1;
+    return { x: s.x + dir * pan * e, y: s.y + pan * 0.3 * e, z: (s.zoom ?? 1) * (1 + drift * e), r: s.rotate ?? 0 };
+  };
+  let i = 0;
+  for (let k = 0; k < shots.length; k++) if (shots[k].at <= t) i = k;
+  let f = frame(i, t);
+  if (i > 0 && t < shots[i].at + whip) {
+    const p = ease.outQuart(progress(t, shots[i].at, whip));
+    const a = frame(i - 1, shots[i].at);
+    f = { x: a.x + (f.x - a.x) * p, y: a.y + (f.y - a.y) * p, z: a.z + (f.z - a.z) * p, r: a.r + (f.r - a.r) * p };
+    emit({ kind: "camera", source: "shotCam", scene: o.scene, value: Math.round((1 - p) * 1000) });
+  }
+  const th = (f.r * Math.PI) / 180;
+  const zx = f.z * f.x;
+  const zy = f.z * f.y;
+  return { x: W / 2 - (Math.cos(th) * zx - Math.sin(th) * zy), y: H / 2 - (Math.sin(th) * zx + Math.cos(th) * zy), rotate: f.r, scale: f.z };
+}
+
+interface StickerParts {
+  pos: HTMLElement;
+  mov: HTMLElement;
+  face: HTMLElement;
+  cut: string;
+  k: number;
+}
+
+function buildSticker(el: HTMLElement, o: StickerOpts): StickerParts {
+  const doc = el.ownerDocument;
+  const pos = doc.createElement("div");
+  pos.style.cssText = `position:absolute;left:${o.x}px;top:${o.y}px;width:${o.w}px;transform:translate(-50%,-50%);perspective:900px;z-index:${o.z ?? 1}`;
+  const mov = doc.createElement("div");
+  mov.style.cssText = "position:relative;transform-origin:50% 60%;will-change:transform";
+  let face: HTMLElement;
+  if (o.src) {
+    const img = doc.createElement("img");
+    img.src = o.src;
+    img.style.cssText = `display:block;width:100%;height:auto;${o.pixel ? "image-rendering:pixelated;" : ""}`;
+    face = img;
+  } else {
+    face = doc.createElement("div");
+    face.textContent = o.text ?? "";
+    face.style.cssText = `display:inline-block;white-space:nowrap;padding:0.18em 0.62em 0.24em;border-radius:999px;background:${o.fill ?? "#FFFFFF"};color:${o.ink ?? `rgb(${INK})`};font-family:var(--kf-font-display);font-size:${o.size ?? 44}px;line-height:1.1`;
+    pos.style.width = "auto";
+  }
+  mov.append(face);
+  pos.append(mov);
+  el.append(pos);
+  const outline = o.outline ?? Math.min(18, Math.max(6, o.w * 0.035));
+  return { pos, mov, face, cut: cutFilter(doc, outline), k: Math.max(0.6, o.w / 320) };
+}
+
+function paintShine(layer: HTMLElement, t: number, at: number[], dur: number): void {
+  let pos = -1;
+  for (const a of at) {
+    const p = (t - a) / dur;
+    if (p >= 0 && p <= 1) pos = ease.inOutCubic(p);
+  }
+  layer.style.opacity = pos < 0 ? "0" : "1";
+  if (pos >= 0) layer.style.backgroundPosition = `${-60 + 220 * pos}% 0`;
+}
+
+function shineLayer(doc: Document, mask?: string): HTMLElement {
+  const s = doc.createElement("div");
+  const m = mask ? `-webkit-mask:url("${mask}") center/100% 100% no-repeat;mask:url("${mask}") center/100% 100% no-repeat;` : "border-radius:inherit;";
+  s.style.cssText =
+    `position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;${m}` +
+    "background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.0) 38%,rgba(255,240,250,.85) 46%,rgba(200,240,255,.9) 50%,rgba(255,255,220,.8) 54%,transparent 62%) 0 0/300% 100% no-repeat";
+  return s;
+}
+
+export interface StickerOpts {
+  /** 투명 배경 그림(PNG·WebP). 없으면 text 로 이름표 스티커 */
+  src?: string;
+  text?: string;
+  /** 무대 좌표의 가운데(px) · 폭(px) */
+  x: number;
+  y: number;
+  w: number;
+  rotate?: number;
+  /** 톡 붙는 시각. 안 주면 처음부터 붙어 있다 */
+  at?: number;
+  /** 떼어지는 시각 */
+  peelAt?: number;
+  peelDir?: 1 | -1;
+  /** 붙은 채 한 번씩 뛰어올랐다 다시 붙는 시각들 — 박에 맞춘다 */
+  hops?: number[];
+  /** 라미네이트 반짝이 지나가는 시각들 */
+  shine?: number[];
+  /** 흰 테두리 굵기(px) */
+  outline?: number;
+  /** 도트 그림은 true — 픽셀을 뭉개지 않는다 */
+  pixel?: boolean;
+  seed?: string | number;
+  /** 다른 움직임을 겹친다 — 예: (t) => slap(t, {...}).style */
+  with?: (t: number) => Style & { lift?: number };
+  /** 숨 위상(초) — 장면을 넘어 이어지는 스티커는 ctx.from 을 줘야 컷에서 모서리가 튀지 않는다 */
+  phase?: number;
+  z?: number;
+  fill?: string;
+  ink?: string;
+  size?: number;
+}
+
+/** 스티커 한 장의 일생 — 흰 다이컷 테두리·종이 그림자를 두르고, at 에 톡 붙고, 붙은 동안 모서리가 숨 쉬고 hops 에 뛰고, peelAt 에 떼어진다 */
+export function sticker(el: HTMLElement, o: StickerOpts): (t: number) => void {
+  const p = buildSticker(el, o);
+  const shine = o.shine?.length ? shineLayer(el.ownerDocument, o.src) : null;
+  if (shine) p.mov.append(shine);
+  const seed = o.seed ?? o.src ?? o.text ?? "sticker";
+  return (t: number) => {
+    const on = o.at === undefined ? nil : stickOn(t, { at: o.at, rotate: 0, seed });
+    const idle = cornerLift(t + (o.phase ?? 0), { seed });
+    const off = peelOff(t, { at: o.peelAt, dir: o.peelDir });
+    const jumps = (o.hops ?? []).map((h) => hop(t, h));
+    const extra = o.with?.(t) ?? {};
+    const settled = o.at === undefined ? 1 : clamp((t - o.at - 0.36) / 0.25);
+    const s = combine(
+      { rotate: o.rotate ?? 0 },
+      on,
+      { ...idle, rotate: (idle.rotate ?? 0) * settled, rotateX: (idle.rotateX ?? 0) * settled, y: (idle.y ?? 0) * settled },
+      ...jumps,
+      off,
+      extra,
+    );
+    applyStyle(p.mov, s);
+    const lift = Math.max(on.lift, idle.lift * settled, off.lift, extra.lift ?? 0, ...jumps.map((j) => j.lift));
+    p.face.style.filter = `url(#${p.cut}) ${shadowOf(lift, p.k)}`;
+    if (shine) paintShine(shine, t, o.shine!, 0.6);
+  };
+}
+
+/** 스티커 시트 — 연보라 뒷종이 위 칼선 자리에 스티커가 박마다 톡 붙고, 떼어 간 자리는 빈 모양으로 남는다 */
+export function stickerSheet(el: HTMLElement, o: { x: number; y: number; w: number; h: number; at?: number; color?: string; slots: StickerOpts[] }): (t: number) => void {
+  const doc = el.ownerDocument;
+  const sheet = doc.createElement("div");
+  sheet.style.cssText =
+    `position:absolute;left:${o.x}px;top:${o.y}px;width:${o.w}px;height:${o.h}px;border-radius:40px;` +
+    `background:${o.color ?? "#EFE6FF"};background-image:radial-gradient(rgba(${INK},.07) 1.6px,transparent 1.8px);background-size:28px 28px;` +
+    `box-shadow:0 10px 0 rgba(${INK},.08),0 24px 50px rgba(${INK},.14);transform-origin:50% 50%`;
+  el.append(sheet);
+  const ghosts = o.slots.map((s) => {
+    if (!s.src) return null;
+    const g = doc.createElement("img");
+    g.src = s.src;
+    g.style.cssText = `position:absolute;left:${s.x - o.x}px;top:${s.y - o.y}px;width:${s.w}px;transform:translate(-50%,-50%) rotate(${s.rotate ?? 0}deg);filter:brightness(0);opacity:0;${s.pixel ? "image-rendering:pixelated;" : ""}`;
+    sheet.append(g);
+    return g;
+  });
+  const paints = o.slots.map((s) => sticker(sheet, { ...s, x: s.x - o.x, y: s.y - o.y }));
+  return (t: number) => {
+    const on = o.at === undefined ? nil : stickOn(t, { at: o.at, dur: 0.45, fall: 60, seed: "sheet" });
+    applyStyle(sheet, on);
+    o.slots.forEach((s, i) => {
+      const g = ghosts[i];
+      if (g) g.style.opacity = s.peelAt !== undefined && t > s.peelAt ? String(0.12 * clamp((t - s.peelAt) / 0.2)) : "0";
+      paints[i](t);
+    });
+  };
+}
+
+/** 마스킹 테이프 — 한쪽 끝에서 풀려 나가며 붙는다. 반투명 줄무늬, 양 끝은 손으로 찢은 톱니 */
+export function washiTape(
+  el: HTMLElement,
+  o: { x: number; y: number; len: number; w?: number; angle?: number; at: number; dur?: number; color?: string; seed?: string | number },
+): (t: number) => void {
+  const doc = el.ownerDocument;
+  const w = o.w ?? 74;
+  const tape = doc.createElement("div");
+  const c = o.color ?? "rgba(143, 211, 255, 0.82)";
+  tape.style.cssText =
+    `position:absolute;left:${o.x}px;top:${o.y}px;width:${o.len}px;height:${w}px;transform-origin:0 50%;` +
+    `transform:translate(0,-50%) rotate(${o.angle ?? -8}deg);background:${c};` +
+    `background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.38) 0 14px,transparent 14px 30px);` +
+    `box-shadow:0 2px 6px rgba(${INK},.12);z-index:5`;
+  el.append(tape);
+  const teeth = 7;
+  const jag = (side: number, x: number) =>
+    Array.from({ length: teeth + 1 }, (_, i) => {
+      const yy = (i / teeth) * 100;
+      const dx = (i % 2 ? 1 : -1) * (4 + 4 * rand(o.seed ?? "tape", side * 20 + i));
+      return `${x + dx}px ${yy}%`;
+    });
+  return (t: number) => {
+    const p = ease.outCubic(progress(t, o.at, o.dur ?? 0.24));
+    const shown = Math.max(0, o.len * p);
+    if (shown <= 0) {
+      tape.style.visibility = "hidden";
+      return;
+    }
+    tape.style.visibility = "visible";
+    tape.style.clipPath = `polygon(${[...jag(0, 6), ...jag(1, shown - 6).reverse()].join(",")})`;
+  };
+}
+
+/** 스티커 터짐 — 한 점에서 작은 스티커 조각들이 사방으로 튀어 올랐다가 떨어진다(드롭·마무리에). 자리·속도·회전은 시드에서 */
+export function stickerBurst(
+  el: HTMLElement,
+  o: { at: number; x: number; y: number; srcs: string[]; count?: number; seed?: string | number; speed?: number; size?: number; pixel?: boolean },
+): (t: number) => void {
+  const doc = el.ownerDocument;
+  const n = o.count ?? 14;
+  const seed = o.seed ?? "burst";
+  const cut = cutFilter(doc, 5);
+  const bits = Array.from({ length: n }, (_, i) => {
+    const img = doc.createElement("img");
+    img.src = o.srcs[i % o.srcs.length];
+    const size = (o.size ?? 120) * (0.7 + 0.6 * rand(seed, i * 6));
+    img.style.cssText = `position:absolute;left:0;top:0;width:${size}px;height:auto;margin:${-size / 2}px 0 0 ${-size / 2}px;filter:url(#${cut}) drop-shadow(0 6px 8px rgba(${INK},.2));opacity:0;z-index:8;${o.pixel ? "image-rendering:pixelated;" : ""}`;
+    el.append(img);
+    const a = rand(seed, i * 6 + 1) * Math.PI * 2;
+    const v = (o.speed ?? 1500) * (0.55 + 0.6 * rand(seed, i * 6 + 2));
+    return { img, vx: Math.cos(a) * v, vy: Math.sin(a) * v - 500, spin: (rand(seed, i * 6 + 3) - 0.5) * 900, r0: (rand(seed, i * 6 + 4) - 0.5) * 60 };
+  });
+  return (t: number) => {
+    const s = safeTime(t) - o.at;
+    for (const b of bits) {
+      if (s < 0 || s > 1.4) {
+        b.img.style.opacity = "0";
+        continue;
+      }
+      const x = o.x + b.vx * s;
+      const y = o.y + b.vy * s + 0.5 * 2200 * s * s;
+      const pop = clamp(s / 0.06);
+      b.img.style.opacity = String(pop * (1 - clamp((s - 1.0) / 0.4)));
+      b.img.style.transform = `translate(${x}px, ${y}px) rotate(${b.r0 + b.spin * s}deg) scale(${0.3 + 0.7 * pop})`;
+    }
+  };
+}
+
+/** 앨범 종이 바탕 — 점 격자 종이 위로 시드 고정 색종이가 늘 떨어진다(바탕만으로도 화면이 멈추지 않게) */
+export function paper(el: HTMLElement, o: { color?: string; dot?: string; specks?: number; seed?: string | number; colors?: string[]; phase?: number } = {}): (t: number) => void {
+  const doc = el.ownerDocument;
+  const bg = doc.createElement("div");
+  bg.style.cssText =
+    `position:absolute;inset:-60px;overflow:hidden;background:${o.color ?? "var(--kf-bg)"};` +
+    `background-image:radial-gradient(${o.dot ?? "rgba(255,126,182,.22)"} 2.2px,transparent 2.6px);background-size:44px 44px`;
+  el.append(bg);
+  const colors = o.colors ?? ["#FF7EB6", "#7FD8C3", "#B9A7FF", "#8FD3FF", "#FFE48A"];
+  const seed = o.seed ?? "paper";
+  const specks = Array.from({ length: o.specks ?? 40 }, (_, i) => {
+    const d = doc.createElement("div");
+    const size = 12 + 20 * rand(seed, i * 6);
+    const round = rand(seed, i * 6 + 1) > 0.5;
+    d.style.cssText = `position:absolute;left:0;top:0;width:${size}px;height:${round ? size : size * 0.45}px;border-radius:${round ? "50%" : "3px"};background:${colors[Math.floor(rand(seed, i * 6 + 2) * colors.length)]};opacity:.6`;
+    bg.append(d);
+    return { d, x: rand(seed, i * 6 + 3), y: rand(seed, i * 6 + 4), v: 70 + 90 * rand(seed, i * 6 + 5), r: rand(seed, i * 6 + 1) * 180 };
+  });
+  return (t: number) => {
+    t = safeTime(t) + (o.phase ?? 0);
+    bg.style.backgroundPosition = `${(t * 10) % 44}px ${(t * 18) % 44}px`;
+    const W = (el.clientWidth || 1920) + 120;
+    const H = (el.clientHeight || 1080) + 120;
+    for (const s of specks) {
+      const y = (((s.y * H + t * s.v) % H) + H) % H;
+      s.d.style.transform = `translate(${s.x * W + Math.sin(t * 1.3 + s.r) * 24}px, ${y}px) rotate(${s.r + t * 90}deg)`;
+    }
+  };
+}

package/themes/kawaii-sticker/sample/assets/stickers/og-logo.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140 650" width="1140" height="650" fill="none" role="img" aria-label="OpenGateway">
+  <title>OpenGateway</title>
+  <g id="logo" stroke="currentColor" fill="currentColor">
+    <rect id="node-in" x="36" y="36" width="420" height="578" rx="89" fill="none" stroke-width="72"/>
+    <rect id="bar-in" x="72" y="272" width="277" height="106" stroke="none"/>
+    <path id="node-out" d="M684 213 L684 125 A89 89 0 0 1 773 36 L1015 36 A89 89 0 0 1 1104 125 L1104 525 A89 89 0 0 1 1015 614 L773 614 A89 89 0 0 1 684 525 L684 436" fill="none" stroke-width="72" stroke-linecap="butt"/>
+    <g id="arrow">
+      <rect id="arrow-shaft" x="420" y="272" width="394" height="106" stroke="none"/>
+      <path id="arrow-head" d="M833 220 L970 325 L833 430 Z" stroke-width="38" stroke-linejoin="round"/>
+    </g>
+  </g>
+</svg>

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

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

package/themes/kawaii-sticker/sample/index.html

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