kasaframe 0.1.1 → 0.1.4

package/themes/subway-map/sample/style.json

@@ -0,0 +1,108 @@
+{
+  "name": "subway-map",
+  "label": "지하철 노선도 — 노선이 그어지고 요청이 열차로 달린다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F4F1E9",
+    "surface": "#FFFFFF",
+    "raised": "#E9E4D8",
+    "line": "#D3CCBC",
+    "ink": "#1F1D1A",
+    "inkSoft": "#3A3732",
+    "dim": "#6B655A",
+    "accent": "#00A84D",
+    "accentSoft": "#BFE6CF",
+    "accentText": "#00773A",
+    "onAccent": "#FFFFFF",
+    "success": "#00A84D",
+    "danger": "#E6186C",
+    "warning": "#EF7C1C",
+    "water": "#C7E6EF",
+    "route1": "#0052A4",
+    "route2": "#00A84D",
+    "route3": "#EF7C1C",
+    "route4": "#00A5DE",
+    "route5": "#996CAC",
+    "route6": "#CD7C2F",
+    "route7": "#747F00",
+    "route8": "#E6186C",
+    "route9": "#9A8448"
+  },
+  "fonts": {
+    "sans": "\"Overpass\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Overpass\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Overpass Mono\", ui-monospace, \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Overpass",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/overpass@5/files/overpass-latin-wght-normal.woff2",
+        "weight": "100 900"
+      },
+      {
+        "family": "Overpass Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/overpass-mono@5/files/overpass-mono-latin-wght-normal.woff2",
+        "weight": "300 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": 96,
+    "body": 44,
+    "caption": 32,
+    "weightDisplay": 800,
+    "weightBody": 700,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 6,
+    "md": 14,
+    "lg": 28,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "inOutCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.3,
+      "slow": 0.6
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F4F1E9 지도 종이 — 바탕은 꼼짝 않는다",
+      "#1F1D1A 역 테두리·역 이름 먹",
+      "#00A84D 게이트웨이 노선(2호선 초록) — 강조",
+      "route1–9 서울 1–9호선 색 — 노선(회사·경로) 하나에 색 하나",
+      "#C7E6EF 물 — 45° 로 꺾인 강 띠 하나, 바탕에만"
+    ],
+    "texture": "평평한 단색 면과 같은 굵기의 둥근 끝 노선뿐. 그림자·그라데이션·종이결·흐림 없음. 역은 흰 바탕 검은 테두리 점, 환승역은 흰 캡슐",
+    "movement": "노선이 0°·45°·90° 로 꺾이며 그어지고, 역이 박에 톡 서고, 열차(요청)가 역마다 서며 가속·감속해 달린다. 바탕은 정적이고 움직이는 것은 노선이 그어지는 끝·역·열차뿐"
+  },
+  "notes": [
+    "route1–9 는 서울 1–9호선 공식 색(9호선만 종이 위에서 보이게 조금 짙게). 회사 아홉을 노선 아홉에 그대로 붙인다.",
+    "작은 글은 ink 로만. accent 초록은 노선·표지(흰 글)용, 글로 쓸 때는 accentText.",
+    "카메라 이동 없음 — 지도는 벽에 붙어 있다. 구도는 컷으로 바꾼다."
+  ]
+}

package/themes/subway-map/slots.ts

@@ -0,0 +1,66 @@
+import { clamp, ease, rand, spring, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer } from "@kasaframe/themes/slotkit";
+import { hubDrop, nameplate, paperMap, routeDraw, trainRun } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 노선도 결로. 판은 역 이름판(흰 판·먹 테두리·위에 노선 색 띠),
+// 앉기는 열차가 역에 들어와 서는 제동, 선은 노선이 그어지고 그 위로 열차가 달린다
+
+// 판·선마다 노선 색 하나 — 시드로 1–9호선 중에서
+const routeVar = (seed: string): string => `var(--kf-route${1 + Math.floor(rand(seed, 0) * 9)}, var(--kf-accent))`;
+
+export const slots: ThemeSlots = {
+  surface(el, { ctx }) {
+    return paperMap(el, { ctx });
+  },
+
+  // 역 이름판 — 흰 판에 먹 테두리, 위 띠는 노선 색이 왼쪽부터 그어진다. 강조 판은 노선 색 면
+  panel(el, { at, seed, tone }) {
+    const box = layer(el, "inset:0", true);
+    const board = layer(box, `inset:0;border-radius:18px;border:6px solid var(--kf-ink);background:${tone === "accent" ? "var(--kf-accent-soft)" : "var(--kf-surface)"}`);
+    const band = layer(box, `left:0;right:0;top:0;height:14px;border-radius:18px 18px 0 0;background:${tone === "accent" ? "var(--kf-accent)" : routeVar(seed)}`);
+    return (t) => {
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      const k = t < at ? 0 : spring(t - at, { from: 0.94, to: 1, stiffness: 520, damping: 20 });
+      board.style.transform = `scale(${k.toFixed(4)})`;
+      const p = t < at ? 0 : ease.inOutCubic(clamp((t - at) / 0.3));
+      band.style.clipPath = `inset(0 ${((1 - p) * 100).toFixed(2)}% 0 0)`;
+    };
+  },
+
+  // 열차가 역에 서는 제동 — 앞으로 한 번 쏠렸다 제자리, 둘레에 정차 고리가 한 번 퍼진다. at 전에는 손대지 않는다(패턴이 이미 보이는 판에 건다)
+  land(el, { at, seed }) {
+    const ring = layer(el, `inset:-14px;border-radius:24px;border:5px solid ${routeVar(seed)};visibility:hidden`);
+    const dir = rand(seed, 1) < 0.5 ? -1 : 1;
+    return (t): Style => {
+      const w = clamp((t - at) / 0.5);
+      ring.style.visibility = t >= at && w < 1 ? "visible" : "hidden";
+      if (t >= at && w < 1) {
+        const e = ease.outCubic(w);
+        ring.style.transform = `scale(${(1 + 0.18 * e).toFixed(4)})`;
+        ring.style.opacity = (1 - e).toFixed(3);
+      }
+      if (t < at) return {};
+      return { x: spring(t - at, { from: 0, to: 0, velocity: dir * 520, stiffness: 320, damping: 15 }) };
+    };
+  },
+
+  write(el, { ctx, text, at, dur }) {
+    return nameplate(el, { ctx, text, at, dur });
+  },
+
+  // 노선이 그어지고, 다 그어진 뒤엔 그 위로 열차가 오간다
+  trace(el, { ctx, points, at, dur, seed, tone }) {
+    const color = tone === "accent" ? "accent" : `route${1 + Math.floor(rand(seed, 0) * 9)}`;
+    const draw = routeDraw(el, { ctx, points, color, at, dur, ends: "bar" });
+    const run = trainRun(el, { ctx, points, color, at: at + dur, count: 2, headway: 0.7, hop: 0.6 });
+    return (t) => {
+      draw(t);
+      run(t);
+    };
+  },
+
+  drop(el, { ctx, drop }) {
+    return hubDrop(el, { ctx, drop });
+  },
+};

package/themes/subway-map/style.json

@@ -0,0 +1,108 @@
+{
+  "name": "subway-map",
+  "label": "지하철 노선도 — 노선이 그어지고 요청이 열차로 달린다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F4F1E9",
+    "surface": "#FFFFFF",
+    "raised": "#E9E4D8",
+    "line": "#D3CCBC",
+    "ink": "#1F1D1A",
+    "inkSoft": "#3A3732",
+    "dim": "#6B655A",
+    "accent": "#00A84D",
+    "accentSoft": "#BFE6CF",
+    "accentText": "#00773A",
+    "onAccent": "#FFFFFF",
+    "success": "#00A84D",
+    "danger": "#E6186C",
+    "warning": "#EF7C1C",
+    "water": "#C7E6EF",
+    "route1": "#0052A4",
+    "route2": "#00A84D",
+    "route3": "#EF7C1C",
+    "route4": "#00A5DE",
+    "route5": "#996CAC",
+    "route6": "#CD7C2F",
+    "route7": "#747F00",
+    "route8": "#E6186C",
+    "route9": "#9A8448"
+  },
+  "fonts": {
+    "sans": "\"Overpass\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Overpass\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Overpass Mono\", ui-monospace, \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Overpass",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/overpass@5/files/overpass-latin-wght-normal.woff2",
+        "weight": "100 900"
+      },
+      {
+        "family": "Overpass Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/overpass-mono@5/files/overpass-mono-latin-wght-normal.woff2",
+        "weight": "300 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": 96,
+    "body": 44,
+    "caption": 32,
+    "weightDisplay": 800,
+    "weightBody": 700,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 6,
+    "md": 14,
+    "lg": 28,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "inOutCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.3,
+      "slow": 0.6
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F4F1E9 지도 종이 — 바탕은 꼼짝 않는다",
+      "#1F1D1A 역 테두리·역 이름 먹",
+      "#00A84D 게이트웨이 노선(2호선 초록) — 강조",
+      "route1–9 서울 1–9호선 색 — 노선(회사·경로) 하나에 색 하나",
+      "#C7E6EF 물 — 45° 로 꺾인 강 띠 하나, 바탕에만"
+    ],
+    "texture": "평평한 단색 면과 같은 굵기의 둥근 끝 노선뿐. 그림자·그라데이션·종이결·흐림 없음. 역은 흰 바탕 검은 테두리 점, 환승역은 흰 캡슐",
+    "movement": "노선이 0°·45°·90° 로 꺾이며 그어지고, 역이 박에 톡 서고, 열차(요청)가 역마다 서며 가속·감속해 달린다. 바탕은 정적이고 움직이는 것은 노선이 그어지는 끝·역·열차뿐"
+  },
+  "notes": [
+    "route1–9 는 서울 1–9호선 공식 색(9호선만 종이 위에서 보이게 조금 짙게). 회사 아홉을 노선 아홉에 그대로 붙인다.",
+    "작은 글은 ink 로만. accent 초록은 노선·표지(흰 글)용, 글로 쓸 때는 accentText.",
+    "카메라 이동 없음 — 지도는 벽에 붙어 있다. 구도는 컷으로 바꾼다."
+  ]
+}

package/themes/subway-map/theme.json

@@ -0,0 +1,161 @@
+{
+  "id": "subway-map",
+  "name": "지하철 노선도",
+  "metaphor": "노선이 그어지고 역이 찍히며 화면이 드러나고, 요청은 열차가 되어 그 위를 역마다 서며 달린다",
+  "status": "approved",
+  "approvedAt": "2026-10-11",
+  "purposes": [
+    "promo",
+    "launch",
+    "explainer",
+    "shorts",
+    "square"
+  ],
+  "aspect": [
+    "16:9",
+    "1:1",
+    "9:16"
+  ],
+  "vary": {
+    "scheme": [
+      "light",
+      "dark"
+    ],
+    "hue": [
+      [
+        135,
+        200
+      ]
+    ],
+    "chroma": [
+      0.85,
+      1.1
+    ],
+    "tint": [
+      0,
+      0.025
+    ],
+    "bg": {
+      "light": [
+        0.92,
+        0.98
+      ],
+      "dark": [
+        0.14,
+        0.22
+      ]
+    },
+    "fixedHue": [
+      "route1",
+      "route3",
+      "route4",
+      "route5",
+      "route6",
+      "route7",
+      "route8",
+      "route9",
+      "water"
+    ],
+    "fonts": [
+      "base",
+      "suit",
+      "wanted",
+      "pretendard-geist",
+      "plex",
+      "gothic-a1"
+    ],
+    "texture": [
+      "none"
+    ],
+    "radius": [
+      8,
+      20
+    ],
+    "tempo": [
+      0.9,
+      1.2
+    ]
+  },
+  "tags": {
+    "mood": [
+      "정돈된",
+      "명료한",
+      "도시",
+      "모던",
+      "체계적"
+    ],
+    "light": "light",
+    "use": [
+      "경로",
+      "라우팅",
+      "흐름",
+      "연결",
+      "지연",
+      "단계",
+      "구조"
+    ],
+    "dims": "2D"
+  },
+  "effects": [
+    {
+      "name": "paperMap",
+      "kind": "layer",
+      "does": "지도 종이 바탕 한 장 — 꼼짝 않는다, 움직임은 노선·역·열차가 진다. 내용에 경계(두 형식·두 지역)가 있으면 45° 로 꺾인 강 띠 하나",
+      "use": "paperMap(layer(root), { ctx })  // 경계가 있으면 { ctx, river: [[-80, 0], [700, 0], [1000, 300], [1000, 1160]] }"
+    },
+    {
+      "name": "routeDraw",
+      "kind": "layer",
+      "does": "노선 긋기 — 꼭짓점을 따라 0°·45°·90° 로 꺾이며 그어지고(꺾인 곳은 짧게 둥글게), ends: bar 면 종점 막대가 선다",
+      "use": "const line = routeDraw(el, { ctx, points: [[120, 540], [700, 540], [900, 340], [1800, 340]], color: \"route2\", at: 0.3, dur: 0.4, ends: \"bar\" })"
+    },
+    {
+      "name": "stationStop",
+      "kind": "layer",
+      "does": "역 찍기 — 박에 톡 서며 둘레 고리가 한 번 퍼진다. stop 역 점 · hub 환승 캡슐 · tick 노선 옆 눈금",
+      "use": "const st = stationStop(el, { ctx, x: 700, y: 540, at: 0.64, kind: \"hub\", length: 60 })"
+    },
+    {
+      "name": "nameplate",
+      "kind": "layer",
+      "does": "역 이름 펼치기 — 역 쪽 글자부터 한 자씩 서고 막 선 글자는 노선 색으로 켜졌다 먹으로 앉는다(글꼴·자리는 그대로)",
+      "use": "const name = nameplate(label, { ctx, text: \"Anthropic\", at: 0.64, from: \"left\" })"
+    },
+    {
+      "name": "timetable",
+      "kind": "value",
+      "does": "시간표 — t 에 열차가 노선 어디(s)에 있나. 역 사이 가속·감속, 역마다 dwell 만큼 섬, express 는 급행(캐시)으로 서지 않고 통과",
+      "use": "const { s, dwelling } = timetable(t, { stops: [0, 420, 900], at: 1.0, hop: 0.5, dwell: 0.12, mode: \"pingpong\" })"
+    },
+    {
+      "name": "trainRun",
+      "kind": "layer",
+      "does": "열차 = 요청 — 노선을 따라 역마다 서며 달린다(몸통은 노선 색, 흰 칸은 실은 토큰). 여러 대가 간격을 두고, transfer 는 환승(폴백)해 색이 바뀐다",
+      "use": "const run = trainRun(el, { ctx, points, stops, color: \"route1\", at: 1.0, count: 3, headway: 0.5, transfer: { at: [900, 340], color: \"route3\" } })"
+    },
+    {
+      "name": "legTime",
+      "kind": "layer",
+      "does": "지연 = 역 사이 시간 — 두 역 사이 분(分) 점이 한 알씩 차오르고 가운데 시간 딱지가 0 에서 값까지 센다",
+      "use": "const lat = legTime(el, { ctx, from: [420, 300], to: [1386, 300], at: 0.37, dur: 0.6125, value: 612.5, decimals: 1, unit: \"ms\", color: \"route1\" })"
+    },
+    {
+      "name": "hourLoop",
+      "kind": "layer",
+      "does": "하루 = 순환선 — 24 시를 역 스물넷으로 둔 팔각 순환선이 한 바퀴 그어지고, 한 시간대(00–10)가 다른 운임 색으로 덧칠되고, 열차가 늘 돈다",
+      "use": "const day = hourLoop(el, { ctx, cx: 700, cy: 540, w: 900, h: 780, at: 0, window: [0, 10], windowAt: 0.36 })"
+    },
+    {
+      "name": "routeTally",
+      "kind": "layer",
+      "does": "노선으로 세기 — 노선 표지·이름 옆으로 노선이 그어지며 역(= 하나)이 서고 끝의 수가 선 역만큼 센다, 다 그은 뒤 급행이 오간다",
+      "use": "const row = routeTally(el, { ctx, x: 100, y: 130, length: 1180, count: 41, max: 41, color: \"route1\", bullet: \"1\", name: \"OpenAI\", at: 0, train: true })"
+    },
+    {
+      "name": "hubDrop",
+      "kind": "layer",
+      "does": "드롭 — 모든 노선이 한 환승역에서 사방으로 한꺼번에 뻗고 신호 고리가 퍼진다, 흔들림을 돌려준다",
+      "use": "const s = hub(t); applyStyle(frame, s.shake)  // hub = hubDrop(el, { ctx, drop: 0 })"
+    }
+  ]
+}

package/themes/subway-map/variants/blush-jade.json

@@ -0,0 +1,131 @@
+{
+  "id": "blush-jade",
+  "world": "subway-map",
+  "name": "Blush Jade",
+  "desc": "연분홍 바탕에 옥색 강조 · 폭 넓고 힘 있는 브랜드 고딕",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.928,
+    "tint": {
+      "h": 31.7994,
+      "c": 0.0188
+    },
+    "inkL": 0.1991,
+    "hue": 175.8722,
+    "chroma": 0.8927,
+    "fonts": "wanted",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 1,
+    "radius": 19,
+    "tempo": 0.9,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#F4E3DF",
+      "surface": "#FFF1F5",
+      "raised": "#E8D6CF",
+      "line": "#D1BFB3",
+      "ink": "#1A1416",
+      "inkSoft": "#352D2D",
+      "dim": "#675A54",
+      "accent": "#009880",
+      "accentSoft": "#B0DBD5",
+      "accentText": "#006959",
+      "onAccent": "#FFF1F5",
+      "success": "#009880",
+      "danger": "#E6186C",
+      "warning": "#E8760E",
+      "water": "#C8D8E6",
+      "route1": "#074A91",
+      "route2": "#009880",
+      "route3": "#E8760E",
+      "route4": "#219ACC",
+      "route5": "#8D659E",
+      "route6": "#BD7635",
+      "route7": "#6B7512",
+      "route8": "#E6186C",
+      "route9": "#8E7B47"
+    },
+    "fonts": {
+      "sans": "\"Wanted Sans Variable\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"Wanted Sans Variable\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"Geist Mono\", ui-monospace, \"Wanted Sans Variable\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Wanted Sans Variable",
+          "src": "https://cdn.jsdelivr.net/npm/wanted-sans@1.0.3/fonts/webfonts/variable/complete/woff2/WantedSansVariable.woff2",
+          "weight": "400 1000"
+        },
+        {
+          "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": 800,
+      "weightBody": 500,
+      "tracking": "-0.02em"
+    },
+    "radius": {
+      "sm": 8,
+      "md": 19,
+      "lg": 38,
+      "pill": 999
+    },
+    "look": {
+      "tempo": 0.9
+    }
+  },
+  "tags": {
+    "mood": [
+      "정돈된",
+      "명료한",
+      "도시",
+      "모던",
+      "체계적",
+      "밝은"
+    ],
+    "light": "light",
+    "use": [
+      "경로",
+      "라우팅",
+      "흐름",
+      "연결",
+      "지연",
+      "단계",
+      "구조"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 14.62,
+      "inkSoft": 10.79,
+      "dim": 5.36,
+      "accentText": 5.31,
+      "accent": 2.9,
+      "onAccent": 3.29,
+      "success~danger": 0.045,
+      "success~warning": 0.11,
+      "danger~warning": 0.084,
+      "accent~danger": 0.045,
+      "accent~ink": 0.406
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.counter"
+  }
+}