kasaframe 0.1.1 → 0.1.4

package/themes/cartography/style.json

@@ -0,0 +1,103 @@
+{
+  "name": "cartography",
+  "label": "지도 — 요청은 땅 위 길로, 지연은 거리로",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F6F4EC",
+    "surface": "#FBFAF5",
+    "raised": "#ECE8DA",
+    "line": "#C9C3B0",
+    "ink": "#1E2321",
+    "inkSoft": "#2F3532",
+    "dim": "#575E58",
+    "accent": "#D2362B",
+    "accentSoft": "#F2C2BA",
+    "accentText": "#B02A20",
+    "onAccent": "#FFFFFF",
+    "success": "#2E7D46",
+    "danger": "#D2362B",
+    "warning": "#B9772A",
+    "paper": "#F6F4EC",
+    "contour": "#B8763D",
+    "contourDeep": "#8E5526",
+    "water": "#2D78B8",
+    "forest": "#D5E5BE",
+    "relief": "#8F989C"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Gowun Batang\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", serif",
+    "mono": "\"DM Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Gowun Batang",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/gowunbatang/GowunBatang-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": "DM Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/dmmono/DMMono-Medium.ttf",
+        "weight": "500"
+      }
+    ]
+  },
+  "type": {
+    "hero": 190,
+    "title": 96,
+    "body": 42,
+    "caption": 30,
+    "weightDisplay": 700,
+    "weightBody": 600,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 2,
+    "md": 3,
+    "lg": 4,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 8
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "outCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.3,
+      "slow": 0.7
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F6F4EC 지도 종이",
+      "#B8763D 등고선 갈색 · #2D78B8 물 파랑 · #D5E5BE 숲",
+      "#D2362B 길(요청) 빨강 — 강조",
+      "#1E2321 지명·격자 검정"
+    ],
+    "texture": "선으로만 — 등고선(다섯 줄마다 굵게), 점선 길, 킬로미터 격자, 아주 옅은 지형 음영(북서쪽 빛). 지명 글자 둘레에 바탕색 테",
+    "movement": "지도는 서 있다. 측량 지점에서 등고선이 번져 그려지고, 길이 땅을 따라 그어지며 나그네 점이 그 위를 늘 간다. 지명은 내려앉으며 자간이 벌어진다. 시간은 등시선 고리로 안에서 밖으로 번진다"
+  },
+  "notes": [
+    "출처: swisstopo 1:25000·Galton 1881 등시선·Tjukanov Vintage Isochrones — refs/NOTES.md",
+    "contour·water·forest·relief 는 재료 색이라 변주에서 색상을 지킨다(fixedHue).",
+    "지명 글은 바탕색 헤일로를 두른다 — 등고선 위에서도 대비가 선다."
+  ]
+}

package/themes/cartography/theme.json

@@ -0,0 +1,160 @@
+{
+  "id": "cartography",
+  "name": "지도",
+  "metaphor": "요청이 지도 위 길로 그어지고, 거리가 곧 지연이다 — 회사는 봉우리, 한 주소는 고개, 시간은 등시선으로 번진다",
+  "status": "approved",
+  "approvedAt": "2026-10-11",
+  "purposes": [
+    "promo",
+    "explainer",
+    "launch",
+    "shorts",
+    "square"
+  ],
+  "aspect": [
+    "16:9",
+    "9:16",
+    "1:1"
+  ],
+  "effects": [
+    {
+      "name": "mapPaper",
+      "kind": "layer",
+      "does": "지도 종이 — 킬로미터 격자와 두 줄 도곽선. 서 있다(격자에 좌표 숫자를 달지 않는다)",
+      "use": "mapPaper(root, { ctx })"
+    },
+    {
+      "name": "contourMap",
+      "kind": "layer",
+      "does": "봉우리 높이 장에서 등고선을 뽑아(다섯 줄마다 굵게) 측량 지점에서 번져 그린다. 옅은 지형 음영·숲. 봉우리 = 회사, 높이 = 그 값",
+      "use": "const terrain = contourMap(el, { ctx, peaks: [{ x: 560, y: 470, h: 41, r: 260 }], interval: 2, at: 0, dur: 1.4, origin: [960, 540] })"
+    },
+    {
+      "name": "route",
+      "kind": "layer",
+      "does": "길 = 요청 — 빨간 점선이 땅을 따라 굽어 그어지고(머리에 나그네 점), 다 그은 뒤엔 점선이 흐르고 나그네(이름표를 든)가 늘 간다. 길이 = 거리 = 지연",
+      "use": "const req = route(el, { ctx, points: [[210, 860], [610, 700], [960, 470]], at: 0.35, dur: 0.5, walkers: 3, tags: [\"POST /v1/chat/completions\"] })"
+    },
+    {
+      "name": "placeMark",
+      "kind": "layer",
+      "does": "지점 기호(마을·봉우리·고개·출발점) — 측량 고리가 한 번 번지며 찍히고 곁에 지명이 내려앉는다",
+      "use": "const pass = placeMark(el, { ctx, x: 960, y: 470, at: 0.7, kind: \"pass\", label: \"apis.opengateway.ai/v1\", side: \"below\", font: \"mono\" })"
+    },
+    {
+      "name": "lettering",
+      "kind": "layer",
+      "does": "지명 글자 — 바탕색 테(헤일로)를 두르고 한 자씩 쓰이며 넓게 벌어졌던 자간이 제자리로 모인다. 넓은 지역 이름은 spaced 로 벌린다",
+      "use": "const name = lettering(el, { ctx, text: \"OpenAI\", x: 600, y: 440, at: 0.3, size: 40, font: \"display\", spaced: 0.12 })"
+    },
+    {
+      "name": "scaleBar",
+      "kind": "layer",
+      "does": "축척 막대 — 흑백 번갈이 칸이 한 칸씩 붙어 값만큼 길어진다(칸 하나 = 단위). shrinkAt 에 keep 칸만 남기고 접혀 들어간다 — 값이 줄었다",
+      "use": "const cost = scaleBar(el, { ctx, x: 420, y: 530, seg: 100, count: 12, at: 3.2, shrinkAt: 3.6, keep: 1.2, start: \"0\", ends: [\"$1.20\", \"$0.12\"] })"
+    },
+    {
+      "name": "isochrones",
+      "kind": "layer",
+      "does": "등시선 — 출발점에서 같은 시간에 닿는 굽은 고리가 한 겹씩 번진다(inward 면 밖에서 안으로 좁혀 온다). 고리 사이 = 같은 ms",
+      "use": "const iso = isochrones(el, { ctx, origin: [300, 600], step: 90, rings: 8, at: 0, labels: [\"100 ms\", \"200 ms\"] })"
+    },
+    {
+      "name": "profile",
+      "kind": "layer",
+      "does": "단면도 — 값을 높이로 본 땅의 옆모습이 왼쪽부터 그려지고, 낮은 골(water 구간)엔 물이 차오른다. 다 그린 뒤엔 나그네 점이 단면 위를 걷는다",
+      "use": "const day = profile(el, { ctx, rect: { x: 160, y: 250, w: 1600, h: 380 }, value: (u) => price(u), at: 1.5, water: [0, 0.44] })"
+    },
+    {
+      "name": "legendBox",
+      "kind": "layer",
+      "does": "범례 상자 — 두 줄 도곽 테 안 제목과 기호·낱말 줄. logo·sub 를 주면 지도 표제(끝 카드)",
+      "use": "const card = legendBox(el, { ctx, rect: { x: 460, y: 150, w: 1000, h: 640 }, title: \"opengateway.ai\", logo: svg, sub: \"https://apis.opengateway.ai/v1\", at: 1.5 })"
+    },
+    {
+      "name": "mapBurst",
+      "kind": "layer",
+      "does": "드롭 — 고개에서 충격 고리 셋이 땅을 따라 굽어 번지고 측량 십자가 짚고, 사방 trails 갈래 길이 한꺼번에 그 고개로 모인다. shake·punch 를 돌려준다",
+      "use": "const s = burst(t); applyStyle(frame, s.shake); applyStyle(hero, s.punch)  // burst = mapBurst(el, { ctx, drop: 0, origin: [960, 600], trails: 102 })"
+    }
+  ],
+  "vary": {
+    "scheme": [
+      "light",
+      "dark"
+    ],
+    "hue": [
+      [
+        0,
+        360
+      ]
+    ],
+    "chroma": [
+      0.8,
+      1.15
+    ],
+    "tint": [
+      0.005,
+      0.03
+    ],
+    "bg": {
+      "light": [
+        0.92,
+        0.97
+      ],
+      "dark": [
+        0.16,
+        0.24
+      ]
+    },
+    "fixedHue": [
+      "contour",
+      "contourDeep",
+      "water",
+      "forest",
+      "relief"
+    ],
+    "fonts": [
+      "base",
+      "gowun-batang",
+      "hahmlet",
+      "myeongjo",
+      "plex",
+      "gothic-a1",
+      "plex-mono"
+    ],
+    "texture": [
+      "none",
+      "paper",
+      "grain"
+    ],
+    "stroke": [
+      0.8,
+      1.4
+    ],
+    "tempo": [
+      0.9,
+      1.15
+    ]
+  },
+  "tags": {
+    "mood": [
+      "정밀",
+      "차분한",
+      "탐험",
+      "지적인",
+      "클래식"
+    ],
+    "light": "light",
+    "use": [
+      "경로",
+      "지연",
+      "거리",
+      "비교",
+      "흐름",
+      "인프라",
+      "설명"
+    ],
+    "dims": "2D"
+  }
+}

package/themes/cartography/variants/blush-amber.json

@@ -0,0 +1,128 @@
+{
+  "id": "blush-amber",
+  "world": "cartography",
+  "name": "Blush Amber",
+  "desc": "연분홍 바탕에 호박색 강조 · 굵은 명조 제목에 고딕 본문 · 고운 필름 입자",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9389,
+    "tint": {
+      "h": 29.1973,
+      "c": 0.0143
+    },
+    "inkL": 0.1684,
+    "hue": 62.1509,
+    "chroma": 1.042,
+    "fonts": "myeongjo",
+    "texture": {
+      "kind": "grain",
+      "amount": 0.55
+    },
+    "stroke": 1.29,
+    "radius": null,
+    "tempo": 1.14,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#F4E7E5",
+      "surface": "#FAEEEF",
+      "raised": "#E9DBD3",
+      "line": "#C3B4A7",
+      "ink": "#0E0F12",
+      "inkSoft": "#1F2123",
+      "dim": "#494A4A",
+      "accent": "#965500",
+      "accentSoft": "#E0BC9D",
+      "accentText": "#774300",
+      "onAccent": "#FEF3F9",
+      "success": "#2E7D46",
+      "danger": "#965500",
+      "warning": "#B9772A",
+      "paper": "#F4E7E5",
+      "contour": "#A86527",
+      "contourDeep": "#7C420A",
+      "water": "#0E66A8",
+      "forest": "#CADBB2",
+      "relief": "#858690"
+    },
+    "fonts": {
+      "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"Nanum Myeongjo\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", serif",
+      "mono": "\"Geist Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Nanum Myeongjo",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/nanummyeongjo/NanumMyeongjo-ExtraBold.ttf",
+          "weight": "800"
+        },
+        {
+          "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"
+    },
+    "look": {
+      "texture": {
+        "kind": "grain",
+        "amount": 0.55
+      },
+      "stroke": 1.29,
+      "tempo": 1.14
+    }
+  },
+  "tags": {
+    "mood": [
+      "정밀",
+      "차분한",
+      "탐험",
+      "지적인",
+      "클래식",
+      "밝은",
+      "따뜻한",
+      "아날로그",
+      "고전적"
+    ],
+    "light": "light",
+    "use": [
+      "경로",
+      "지연",
+      "거리",
+      "비교",
+      "흐름",
+      "인프라",
+      "설명"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-11",
+    "colors": {
+      "ink": 15.95,
+      "inkSoft": 13.47,
+      "dim": 7.38,
+      "accentText": 6.76,
+      "accent": 4.87,
+      "onAccent": 5.41,
+      "success~danger": 0.059,
+      "success~warning": 0.053,
+      "danger~warning": 0.112,
+      "accent~ink": 0.32
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.slam"
+  }
+}

package/themes/cartography/variants/blush-indigo.json

@@ -0,0 +1,128 @@
+{
+  "id": "blush-indigo",
+  "world": "cartography",
+  "name": "Blush Indigo",
+  "desc": "연분홍 바탕에 남색 강조 · 현대적인 가변 명조 · 고운 필름 입자",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9379,
+    "tint": {
+      "h": 34.0492,
+      "c": 0.0287
+    },
+    "inkL": 0.1866,
+    "hue": 268.1474,
+    "chroma": 1.109,
+    "fonts": "hahmlet",
+    "texture": {
+      "kind": "grain",
+      "amount": 0.55
+    },
+    "stroke": 1.02,
+    "radius": null,
+    "tempo": 1.05,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#FDE4DE",
+      "surface": "#FFECE9",
+      "raised": "#F2D8CC",
+      "line": "#CBB2A2",
+      "ink": "#151213",
+      "inkSoft": "#272424",
+      "dim": "#514C49",
+      "accent": "#3857E4",
+      "accentSoft": "#B3C3EE",
+      "accentText": "#2B43BC",
+      "onAccent": "#FFF3F4",
+      "success": "#2E7D46",
+      "danger": "#3857E4",
+      "warning": "#B9772A",
+      "paper": "#FDE4DE",
+      "contour": "#AE6620",
+      "contourDeep": "#824403",
+      "water": "#0169AF",
+      "forest": "#CADBB0",
+      "relief": "#8E878D"
+    },
+    "fonts": {
+      "sans": "Hahmlet, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", serif",
+      "display": "Hahmlet, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", serif",
+      "mono": "\"Geist Mono\", ui-monospace, Hahmlet, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Hahmlet",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/hahmlet/Hahmlet%5Bwght%5D.ttf",
+          "weight": "100 900"
+        },
+        {
+          "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": 400,
+      "tracking": "-0.02em"
+    },
+    "look": {
+      "texture": {
+        "kind": "grain",
+        "amount": 0.55
+      },
+      "stroke": 1.02,
+      "tempo": 1.05
+    }
+  },
+  "tags": {
+    "mood": [
+      "정밀",
+      "차분한",
+      "탐험",
+      "지적인",
+      "클래식",
+      "밝은",
+      "차가운",
+      "아날로그",
+      "고전적"
+    ],
+    "light": "light",
+    "use": [
+      "경로",
+      "지연",
+      "거리",
+      "비교",
+      "흐름",
+      "인프라",
+      "설명"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-11",
+    "colors": {
+      "ink": 15.37,
+      "inkSoft": 12.79,
+      "dim": 6.98,
+      "accentText": 6.57,
+      "accent": 4.77,
+      "onAccent": 5.31,
+      "success~danger": 0.06,
+      "success~warning": 0.053,
+      "danger~warning": 0.238,
+      "accent~ink": 0.368
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.slam"
+  }
+}

package/themes/cartography/variants/blush-pink.json

@@ -0,0 +1,136 @@
+{
+  "id": "blush-pink",
+  "world": "cartography",
+  "name": "Blush Pink",
+  "desc": "연분홍 바탕에 분홍 강조 · 단정한 기술 문서체 · 종이 결",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9406,
+    "tint": {
+      "h": 7.9277,
+      "c": 0.0125
+    },
+    "inkL": 0.1429,
+    "hue": 359.9321,
+    "chroma": 1.0912,
+    "fonts": "plex",
+    "texture": {
+      "kind": "paper",
+      "amount": 0.8
+    },
+    "stroke": 0.92,
+    "radius": null,
+    "tempo": 1.07,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#F3E8EA",
+      "surface": "#F9EFF3",
+      "raised": "#E8DBD6",
+      "line": "#C0B3A9",
+      "ink": "#080A0D",
+      "inkSoft": "#191B1F",
+      "dim": "#444647",
+      "accent": "#A20054",
+      "accentSoft": "#E6B3C1",
+      "accentText": "#8F0049",
+      "onAccent": "#FEF4FE",
+      "success": "#2E7D46",
+      "danger": "#A20054",
+      "warning": "#B9772A",
+      "paper": "#F3E8EA",
+      "contour": "#A7601B",
+      "contourDeep": "#783D00",
+      "water": "#0062A5",
+      "forest": "#C9DBB0",
+      "relief": "#828490"
+    },
+    "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": {
+      "texture": {
+        "kind": "paper",
+        "amount": 0.8
+      },
+      "stroke": 0.92,
+      "tempo": 1.07
+    }
+  },
+  "tags": {
+    "mood": [
+      "정밀",
+      "차분한",
+      "탐험",
+      "지적인",
+      "클래식",
+      "밝은",
+      "아날로그"
+    ],
+    "light": "light",
+    "use": [
+      "경로",
+      "지연",
+      "거리",
+      "비교",
+      "흐름",
+      "인프라",
+      "설명"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-11",
+    "colors": {
+      "ink": 16.59,
+      "inkSoft": 14.37,
+      "dim": 7.96,
+      "accentText": 7.77,
+      "accent": 5.61,
+      "onAccent": 6.26,
+      "success~danger": 0.066,
+      "danger~warning": 0.165,
+      "success~warning": 0.053,
+      "accent~ink": 0.228
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.slam"
+  }
+}