kasaframe 0.1.1 → 0.1.4

package/themes/paper-cutout/slots.ts

@@ -0,0 +1,87 @@
+import { clamp, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, shownCount, traceCanvas } from "@kasaframe/themes/slotkit";
+import { layerBurst, lift, paperBoard, paperSheet } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 대지 위에 색종이·오린 글자가 내려앉는 결로. 빛은 위 왼쪽 한 방향, 높이는 그림자 길이
+export const slots: ThemeSlots = {
+  surface(el, { ctx }) {
+    return paperBoard(el, { ctx });
+  },
+
+  // 색종이 카드 한 장이 위에서 떨어져 대지에 붙는다 — 강조 판은 주홍 종이
+  panel(el, { ctx, at, tone }) {
+    return paperSheet(layer(el, "inset:0", true), { ctx, color: tone === "accent" ? "accent" : "surface", at, drop: 30 });
+  },
+
+  // 오린 숫자가 높이 들린 채 와서 내려앉고 한 번 튄다 — 그림자가 멀고 흐렸다가 붙는다
+  land(el, { ctx, at }) {
+    const rest = lift(-1, { at: 0, ctx }).shadow;
+    return (t): Style => {
+      const L = lift(t, { at, height: 44, dur: 0.22, ctx });
+      el.style.textShadow = L.on ? L.shadow : rest;
+      return L.on ? L.style : {};
+    };
+  },
+
+  // 글자 한 장씩 떨어져 붙는다 — 갓 떨어진 글자는 그림자가 멀다
+  write(el, { ctx, text, at, dur }) {
+    const spans = letters(el, text);
+    const gap = dur / Math.max(1, spans.length);
+    return (t) => {
+      const n = shownCount(spans.length, t, at, dur);
+      spans.forEach((s, i) => {
+        s.style.visibility = i < n ? "visible" : "hidden";
+        if (i < n) s.style.textShadow = lift(t, { at: at + i * gap, height: 26, dur: 0.14, ctx }).shadow;
+      });
+    };
+  },
+
+  // 종이 띠를 점 따라 붙여 나간다. 다 붙인 뒤엔 띠 안 칼집 눈금이 흐름 쪽으로 간다
+  trace(el, { ctx, points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points, 60);
+    const paper = ctx.style.colors[tone === "accent" ? "accent" : "ink"] ?? "#1D2556";
+    const notch = ctx.style.colors.paper ?? "#F1EDE4";
+    const shade = ctx.style.colors.shade ?? "#3B2615";
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      const pts = partial(points, p);
+      if (pts.length < 2) return;
+      g.lineCap = "butt";
+      g.lineJoin = "miter";
+      g.save();
+      g.shadowColor = alpha(shade, 0.32);
+      g.shadowOffsetX = 2;
+      g.shadowOffsetY = 3.5;
+      g.shadowBlur = 4;
+      g.strokeStyle = paper;
+      g.lineWidth = 14;
+      g.beginPath();
+      g.moveTo(pts[0][0], pts[0][1]);
+      for (const q of pts.slice(1)) g.lineTo(q[0], q[1]);
+      g.stroke();
+      g.restore();
+      g.strokeStyle = notch;
+      g.lineWidth = 3;
+      g.setLineDash([6, 14]);
+      g.lineDashOffset = -(t - at) * 70;
+      g.stroke();
+      g.setLineDash([]);
+    };
+  },
+
+  // 드롭 — 대지 층들이 화면 가장자리에서 한꺼번에 들려 바깥으로 터져 나간다
+  drop(el, { ctx, drop }) {
+    return layerBurst(el, { ctx, drop, closed: false });
+  },
+};
+
+// 캔버스 그림자 색 — 캔버스는 color-mix 를 못 읽는 판이 있어 #rrggbb 를 rgba 로
+function alpha(c: string, a: number): string {
+  const m = /^#([0-9a-f]{6})$/i.exec(c.trim());
+  if (!m) return c;
+  const n = parseInt(m[1], 16);
+  return `rgba(${n >> 16}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
+}

package/themes/paper-cutout/style.json

@@ -0,0 +1,104 @@
+{
+  "name": "paper-cutout",
+  "label": "종이 오리기 — 대지에 창을 오려 아래 층이 드러난다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F1EDE4",
+    "surface": "#F8F5EF",
+    "raised": "#E6DFD1",
+    "line": "#CFC6B4",
+    "ink": "#1D2556",
+    "inkSoft": "#2C346B",
+    "dim": "#4A4F6E",
+    "accent": "#E1422F",
+    "accentSoft": "#F3B7A6",
+    "accentText": "#B3301F",
+    "onAccent": "#F8F5EF",
+    "success": "#1D2556",
+    "danger": "#E1422F",
+    "warning": "#EFB02E",
+    "paper": "#F1EDE4",
+    "sheet1": "#E1422F",
+    "sheet2": "#EFB02E",
+    "sheet3": "#1D2556",
+    "sheet1Deep": "#A92E1E",
+    "sheet2Deep": "#B57E12",
+    "sheet3Deep": "#0F1538",
+    "shade": "#3B2615"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Do Hyeon\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"IBM Plex Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Do Hyeon",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/dohyeon/DoHyeon-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      },
+      {
+        "family": "IBM Plex Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/ibmplexmono/IBMPlexMono-SemiBold.ttf",
+        "weight": "600"
+      }
+    ]
+  },
+  "type": {
+    "hero": 200,
+    "title": 104,
+    "body": 44,
+    "caption": 32,
+    "weightDisplay": 400,
+    "weightBody": 600,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "2px 4px 7px rgba(59, 38, 21, 0.28)",
+    "lift": "8px 16px 22px rgba(59, 38, 21, 0.22)"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "drop",
+    "ease": "outCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.3,
+      "slow": 0.6
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F1EDE4 흰 수채화지 대지 — 화면 대부분",
+      "#E1422F 주홍 · #EFB02E 겨자 · #1D2556 남색 색종이 — 창 안 층과 오린 글자",
+      "#3B2615 그림자 — 빛은 위 왼쪽 한 방향, 높이마다 거리·흐림이 정해져 있다"
+    ],
+    "texture": "옅은 종이 섬유결(서 있다). 모서리는 칼로 자른 곧은 선, 그라데이션 없음 — 어두운 곳은 전부 위 층이 드리운 그림자",
+    "movement": "카메라는 서 있고 종이만 움직인다. 칼선이 그어지고 오린 조각이 들려 떨어지며 아래 층이 드러난다. 종이는 천천히 들리고(그림자가 멀어지며 흐려진다) 빨리 내려앉아 한 번 튄다. 바뀔 때는 위 층이 들려 걷힌다"
+  },
+  "notes": [
+    "출처: Owen Gildersleeve 「Intersections」·「A Dozen Greetings」, Hari & Deepti 라이트박스 — refs/NOTES.md",
+    "글은 남색 종이(ink)로 오린 글자 — 주홍·겨자 종이 위 작은 글은 남색이나 대지 흰색으로만.",
+    "sheet1–3 은 층 색종이 차례(강조·셋째·글 잉크), Deep 은 그 종이가 그림자 속에 있을 때."
+  ]
+}

package/themes/paper-cutout/theme.json

@@ -0,0 +1,144 @@
+{
+  "id": "paper-cutout",
+  "name": "종이 오리기",
+  "metaphor": "대지에 창을 오려 아래 종이 층이 드러난다 — 깊을수록 그림자가 길고, 위 층이 들려 바뀐다",
+  "status": "approved",
+  "approvedAt": "2026-10-11",
+  "purposes": [
+    "promo",
+    "explainer",
+    "launch",
+    "shorts",
+    "square"
+  ],
+  "aspect": [
+    "16:9",
+    "9:16",
+    "1:1"
+  ],
+  "vary": {
+    "scheme": [
+      "light"
+    ],
+    "hue": [
+      [
+        0,
+        360
+      ]
+    ],
+    "chroma": [
+      0.8,
+      1.2
+    ],
+    "tint": [
+      0.005,
+      0.035
+    ],
+    "bg": {
+      "light": [
+        0.9,
+        0.97
+      ]
+    },
+    "keep": [
+      "shade"
+    ],
+    "fonts": [
+      "base",
+      "do-hyeon",
+      "black-han",
+      "gasoek",
+      "sunflower",
+      "wanted",
+      "bagel"
+    ],
+    "texture": [
+      "none"
+    ],
+    "tempo": [
+      0.9,
+      1.15
+    ]
+  },
+  "tags": {
+    "mood": [
+      "손맛",
+      "따뜻한",
+      "차분한",
+      "아날로그",
+      "입체감"
+    ],
+    "light": "light",
+    "use": [
+      "구조",
+      "단계",
+      "층",
+      "흐름",
+      "소개",
+      "설명"
+    ],
+    "dims": "2D"
+  },
+  "effects": [
+    {
+      "name": "paperBoard",
+      "kind": "layer",
+      "does": "화면 전체 흰 수채화지 대지 — 서 있는 종이결만, 움직이지 않는다",
+      "use": "paperBoard(root, { ctx })"
+    },
+    {
+      "name": "paperSheet",
+      "kind": "layer",
+      "does": "색종이 한 장 — 높이만큼 위 왼쪽 빛의 그림자를 드리우고, at 에 위에서 떨어져 내려앉아 한 번 튄다. build 로 글을 붙이면 같이 움직인다",
+      "use": "const sheet = paperSheet(el, { ctx, rect: { x: 300, y: 200, w: 800, h: 400 }, color: \"sheet1\", at: 0.35, build: (face) => face.append(label) })"
+    },
+    {
+      "name": "lift",
+      "kind": "value",
+      "does": "종이 높이 곡선 — land(떨어져 내려앉음)·raise(들려 뜸)·hop. 높이 h·그 높이의 그림자 CSS·배율을 돌려준다",
+      "use": "const L = lift(t, { at: 1.4, mode: \"land\", height: 30, ctx }); el.style.boxShadow = L.shadow; applyStyle(el, L.style)"
+    },
+    {
+      "name": "cutWindows",
+      "kind": "layer",
+      "does": "대지에 창을 오린다 — at 앞 cut 초 동안 칼선이 둘레를 긋고 at 에 조각이 들려 걷히면 아래 층이 보인다. 창 위·왼쪽 그림자 띠 = depth(깊이). cut 0 은 이미 오려 둔 창(캐시)",
+      "use": "const mat = cutWindows(layer, { ctx, windows: [{ x: 360, y: 290, w: 1200, h: 440, at: 0.7, cut: 0.35, depth: 26 }] })"
+    },
+    {
+      "name": "liftSwap",
+      "kind": "layer",
+      "does": "층 바꾸기 — 다 본 판이 들려(그림자가 멀어지고) 한쪽으로 0.28초에 걷히며 아래 층이 드러난다. 모델 바꾸기·폴백·컷",
+      "use": "const swap = liftSwap(pageEl, { ctx, at: 1.41, dir: \"left\" })"
+    },
+    {
+      "name": "cutLetters",
+      "kind": "layer",
+      "does": "오린 글자 — 글자 한 장씩 위에서 떨어져 손으로 붙인 듯 조금 기울어 붙는다. 붙은 뒤엔 1–2px 종이 그림자",
+      "use": "const title = cutLetters(el, { ctx, text: \"opengateway.ai\", at: 1.8, color: \"ink\", css: \"left:300px;top:460px;font:400 170px var(--kf-font-display)\" })"
+    },
+    {
+      "name": "depthWell",
+      "kind": "layer",
+      "does": "깊이 우물 — 같은 꼴 종이 고리를 안으로 한 장씩 깊게 겹친다(동심 사각). 겹수 = 깊이 = 지연, every 초마다 한 장씩 오려 내려간다",
+      "use": "const well = depthWell(el, { ctx, rect: { x: 170, y: 250, w: 470, h: 470 }, rings: 6, at: 0.1, every: 0.08 })"
+    },
+    {
+      "name": "paperStrip",
+      "kind": "layer",
+      "does": "요청 띠 — 낱말이 찍힌 종이 띠가 대지 칼집(거쳐 가는 단계)을 꿰고 오른쪽으로 늘 끌려간다. 요청이 오가는 동안 화면이 서지 않는다",
+      "use": "const req = paperStrip(el, { ctx, y: 900, x0: 80, x1: 1840, words: [\"POST /v1/chat/completions\"], speed: 400, at: 0.3, slits: [560, 1000, 1440] })"
+    },
+    {
+      "name": "trimBar",
+      "kind": "layer",
+      "does": "비용 막대 — 종이 띠 길이가 값. keep 자리에 칼선이 내려가고 나머지(그 위 정가 글자째)가 떼어져 나간다 — 할인",
+      "use": "const bar = trimBar(el, { ctx, rect: { x: 420, y: 540, w: 1120, h: 110 }, keep: 0.1, at: 3.5, landAt: 3.2, build: (keep, cut) => cut.append(oldPrice) })"
+    },
+    {
+      "name": "layerBurst",
+      "kind": "layer",
+      "does": "드롭 — 창이 한 장마다 커지는 동심 대지 층(계단 우물)이 드롭에 위 층부터 한꺼번에 바깥으로 터져 나가며 창이 활짝 열린다. landAt 이면 드롭 앞에 박마다 한 장씩 쌓인다. shake·punch 를 돌려준다",
+      "use": "const s = burst(t); applyStyle(frame, s.shake); applyStyle(hero, s.punch)  // burst = layerBurst(top, { ctx, drop: 0, layers: 4 })"
+    }
+  ]
+}

package/themes/paper-cutout/variants/blush-coral.json

@@ -0,0 +1,122 @@
+{
+  "id": "blush-coral",
+  "world": "paper-cutout",
+  "name": "Blush Coral",
+  "desc": "연분홍 바탕에 산호색 강조 · 획이 꽉 들어찬 초굵은 제목",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9156,
+    "tint": {
+      "h": 348.7611,
+      "c": 0.0298
+    },
+    "inkL": 0.17,
+    "hue": 23.7889,
+    "chroma": 1.192,
+    "fonts": "gasoek",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 1.01,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#F3DCE6",
+      "surface": "#FCE4F2",
+      "raised": "#E6CCD2",
+      "line": "#CBB1B1",
+      "ink": "#01033C",
+      "inkSoft": "#091554",
+      "dim": "#2B3557",
+      "accent": "#CC0026",
+      "accentSoft": "#ECA397",
+      "accentText": "#950017",
+      "onAccent": "#FCE4F2",
+      "success": "#01033C",
+      "danger": "#CC0026",
+      "warning": "#DD9E06",
+      "paper": "#F3DCE6",
+      "sheet1": "#CC0026",
+      "sheet2": "#DD9E06",
+      "sheet3": "#01033C",
+      "sheet1Deep": "#8A0015",
+      "sheet2Deep": "#A16600",
+      "sheet3Deep": "#000015",
+      "shade": "#3B2615"
+    },
+    "fonts": {
+      "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"Gasoek One\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"Geist Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Gasoek One",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/gasoekone/GasoekOne-Regular.ttf",
+          "weight": "400"
+        },
+        {
+          "family": "Pretendard Variable",
+          "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+          "weight": "45 920"
+        },
+        {
+          "family": "Geist Mono",
+          "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2",
+          "weight": "100 900"
+        }
+      ]
+    },
+    "type": {
+      "weightDisplay": 400,
+      "weightBody": 500,
+      "tracking": "-0.01em"
+    },
+    "look": {
+      "tempo": 1.01
+    }
+  },
+  "tags": {
+    "mood": [
+      "손맛",
+      "따뜻한",
+      "차분한",
+      "아날로그",
+      "입체감",
+      "밝은",
+      "선명한"
+    ],
+    "light": "light",
+    "use": [
+      "구조",
+      "단계",
+      "층",
+      "흐름",
+      "소개",
+      "설명"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 14.96,
+      "inkSoft": 12.98,
+      "dim": 9.21,
+      "accentText": 7.07,
+      "accent": 4.49,
+      "onAccent": 4.87,
+      "success~danger": 0.26,
+      "success~warning": 0.558,
+      "danger~warning": 0.206,
+      "accent~ink": 0.26
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}

package/themes/paper-cutout/variants/blush-violet.json

@@ -0,0 +1,122 @@
+{
+  "id": "blush-violet",
+  "world": "paper-cutout",
+  "name": "Blush Violet",
+  "desc": "연분홍 바탕에 보라 강조 · 기하 획의 경쾌한 제목 고딕",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9427,
+    "tint": {
+      "h": 16.4986,
+      "c": 0.0281
+    },
+    "inkL": 0.2069,
+    "hue": 289.9117,
+    "chroma": 1.1195,
+    "fonts": "sunflower",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 0.99,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#FFE5E5",
+      "surface": "#FFF1F3",
+      "raised": "#F1D6D1",
+      "line": "#D6BAB2",
+      "ink": "#001D15",
+      "inkSoft": "#003025",
+      "dim": "#164A3F",
+      "accent": "#7A50EC",
+      "accentSoft": "#C6B7F2",
+      "accentText": "#5B35B6",
+      "onAccent": "#FFF1F3",
+      "success": "#001D15",
+      "danger": "#7A50EC",
+      "warning": "#E4A61C",
+      "paper": "#FFE5E5",
+      "sheet1": "#7A50EC",
+      "sheet2": "#E4A61C",
+      "sheet3": "#001D15",
+      "sheet1Deep": "#5531AA",
+      "sheet2Deep": "#B1599D",
+      "sheet3Deep": "#000905",
+      "shade": "#3B2615"
+    },
+    "fonts": {
+      "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "Sunflower, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"JetBrains Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Sunflower",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/sunflower/Sunflower-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"
+        },
+        {
+          "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": {
+      "weightDisplay": 700,
+      "weightBody": 500,
+      "tracking": "-0.01em"
+    },
+    "look": {
+      "tempo": 0.99
+    }
+  },
+  "tags": {
+    "mood": [
+      "손맛",
+      "따뜻한",
+      "차분한",
+      "아날로그",
+      "입체감",
+      "밝은",
+      "차가운"
+    ],
+    "light": "light",
+    "use": [
+      "구조",
+      "단계",
+      "층",
+      "흐름",
+      "소개",
+      "설명"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 14.76,
+      "inkSoft": 12.14,
+      "dim": 8.39,
+      "accentText": 6.66,
+      "accent": 4.2,
+      "onAccent": 4.57,
+      "success~danger": 0.349,
+      "success~warning": 0.527,
+      "danger~warning": 0.277,
+      "accent~ink": 0.349
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}