kasaframe 0.1.1 → 0.1.4

package/themes/conveyor-factory/variants/slate-amber.json

@@ -0,0 +1,125 @@
+{
+  "id": "slate-amber",
+  "world": "conveyor-factory",
+  "name": "Slate Amber",
+  "desc": "짙은 회색 바탕에 호박색 강조 · 손간판 같은 각진 좁은 제목체 · 고운 필름 입자",
+  "params": {
+    "scheme": "dark",
+    "bgL": 0.2563,
+    "tint": {
+      "h": 102.7872,
+      "c": 0.0151
+    },
+    "inkL": 0.9114,
+    "hue": 77.9317,
+    "chroma": 0.906,
+    "fonts": "do-hyeon",
+    "texture": {
+      "kind": "grain",
+      "amount": 0.55
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 1.14,
+    "density": 1
+  },
+  "style": {
+    "scheme": "dark",
+    "colors": {
+      "bg": "#24241B",
+      "surface": "#2F2F28",
+      "raised": "#393A34",
+      "line": "#50534E",
+      "ink": "#E4E2D8",
+      "inkSoft": "#C3C3BD",
+      "dim": "#989C98",
+      "accent": "#ECAA2E",
+      "accentSoft": "#5E4617",
+      "accentText": "#ECAA2E",
+      "onAccent": "#201E15",
+      "success": "#3FBF6A",
+      "danger": "#E5483C",
+      "warning": "#ECAA2E",
+      "floor": "#32322C",
+      "steel": "#8D928D",
+      "belt": "#1C1A11",
+      "kraft": "#BE9265",
+      "tape": "#9A734B"
+    },
+    "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": "\"Geist Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Do Hyeon",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/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": "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": "0em"
+    },
+    "look": {
+      "texture": {
+        "kind": "grain",
+        "amount": 0.55
+      },
+      "tempo": 1.14
+    }
+  },
+  "tags": {
+    "mood": [
+      "산업",
+      "역동적",
+      "묵직한",
+      "리듬감",
+      "기계적",
+      "어두운",
+      "따뜻한",
+      "아날로그"
+    ],
+    "light": "dark",
+    "use": [
+      "처리량",
+      "파이프라인",
+      "흐름",
+      "생산",
+      "배치",
+      "시스템",
+      "설명"
+    ],
+    "dims": "3D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 12.07,
+      "inkSoft": 8.88,
+      "dim": 5.63,
+      "accent": 7.74,
+      "onAccent": 8.26,
+      "success~danger": 0.085,
+      "success~warning": 0.054,
+      "danger~warning": 0.159,
+      "accent~danger": 0.159,
+      "accent~ink": 0.173
+    },
+    "frame": "kf check 통과 — 끝 구간 3.183–4초(입체라 가볍게)·끝 프레임 한 장",
+    "pattern": "hook-number.counter"
+  }
+}

package/themes/conveyor-factory/variants/slate-gold-bold.json

@@ -0,0 +1,120 @@
+{
+  "id": "slate-gold-bold",
+  "world": "conveyor-factory",
+  "name": "Slate Gold Bold",
+  "desc": "짙은 회색 바탕에 금빛 강조 · 꽉 찬 검은 고딕 제목",
+  "params": {
+    "scheme": "dark",
+    "bgL": 0.2554,
+    "tint": {
+      "h": 184.2546,
+      "c": 0.0202
+    },
+    "inkL": 0.9542,
+    "hue": 86.6199,
+    "chroma": 1.0298,
+    "fonts": "black-han",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 1.16,
+    "density": 1
+  },
+  "style": {
+    "scheme": "dark",
+    "colors": {
+      "bg": "#182624",
+      "surface": "#233232",
+      "raised": "#2E3E3E",
+      "line": "#475859",
+      "ink": "#EBF2ED",
+      "inkSoft": "#C6D1D0",
+      "dim": "#97A7A9",
+      "accent": "#F1BA00",
+      "accentSoft": "#5E4B0C",
+      "accentText": "#F1BA00",
+      "onAccent": "#13201D",
+      "success": "#3FBF6A",
+      "danger": "#E5483C",
+      "warning": "#F1BA00",
+      "floor": "#273636",
+      "steel": "#8B9C9D",
+      "belt": "#0F1C19",
+      "kraft": "#C69D61",
+      "tape": "#9F7A46"
+    },
+    "fonts": {
+      "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"Black Han Sans\", \"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": "Black Han Sans",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/blackhansans/BlackHanSans-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": "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": 400,
+      "weightBody": 500,
+      "tracking": "-0.01em"
+    },
+    "look": {
+      "tempo": 1.16
+    }
+  },
+  "tags": {
+    "mood": [
+      "산업",
+      "역동적",
+      "묵직한",
+      "리듬감",
+      "기계적",
+      "어두운",
+      "따뜻한"
+    ],
+    "light": "dark",
+    "use": [
+      "처리량",
+      "파이프라인",
+      "흐름",
+      "생산",
+      "배치",
+      "시스템",
+      "설명"
+    ],
+    "dims": "3D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 13.73,
+      "inkSoft": 10.02,
+      "dim": 6.26,
+      "accent": 8.74,
+      "onAccent": 9.37,
+      "success~danger": 0.085,
+      "success~warning": 0.072,
+      "danger~warning": 0.197,
+      "accent~danger": 0.197,
+      "accent~ink": 0.182
+    },
+    "frame": "kf check 통과 — 끝 구간 3.183–4초(입체라 가볍게)·끝 프레임 한 장",
+    "pattern": "hook-number.counter"
+  }
+}

package/themes/conveyor-factory/variants/slate-gold.json

@@ -0,0 +1,120 @@
+{
+  "id": "slate-gold",
+  "world": "conveyor-factory",
+  "name": "Slate Gold",
+  "desc": "짙은 회색 바탕에 금빛 강조 · 손간판 같은 각진 좁은 제목체",
+  "params": {
+    "scheme": "dark",
+    "bgL": 0.1826,
+    "tint": {
+      "h": 75.4019,
+      "c": 0.0019
+    },
+    "inkL": 0.9542,
+    "hue": 93.5277,
+    "chroma": 1.0049,
+    "fonts": "do-hyeon",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 1.12,
+    "density": 1
+  },
+  "style": {
+    "scheme": "dark",
+    "colors": {
+      "bg": "#131211",
+      "surface": "#1E1E1F",
+      "raised": "#292B2C",
+      "line": "#444749",
+      "ink": "#F2EFEB",
+      "inkSoft": "#CBCBCB",
+      "dim": "#999C9F",
+      "accent": "#E2BA00",
+      "accentSoft": "#4A3E00",
+      "accentText": "#E2BA00",
+      "onAccent": "#0D0C0A",
+      "success": "#3FBF6A",
+      "danger": "#E5483C",
+      "warning": "#E2BA00",
+      "floor": "#222223",
+      "steel": "#8C9092",
+      "belt": "#090807",
+      "kraft": "#B9985A",
+      "tape": "#8F723B"
+    },
+    "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": "\"Geist Mono\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Do Hyeon",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/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": "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": "0em"
+    },
+    "look": {
+      "tempo": 1.12
+    }
+  },
+  "tags": {
+    "mood": [
+      "산업",
+      "역동적",
+      "묵직한",
+      "리듬감",
+      "기계적",
+      "어두운",
+      "따뜻한"
+    ],
+    "light": "dark",
+    "use": [
+      "처리량",
+      "파이프라인",
+      "흐름",
+      "생산",
+      "배치",
+      "시스템",
+      "설명"
+    ],
+    "dims": "3D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 16.38,
+      "inkSoft": 11.53,
+      "dim": 6.79,
+      "accent": 10.06,
+      "onAccent": 10.5,
+      "success~danger": 0.085,
+      "success~warning": 0.068,
+      "danger~warning": 0.181,
+      "accent~danger": 0.181,
+      "accent~ink": 0.171
+    },
+    "frame": "kf check 통과 — 끝 구간 3.183–4초(입체라 가볍게)·끝 프레임 한 장",
+    "pattern": "hook-number.counter"
+  }
+}

package/themes/data-journal/THEME.md

@@ -0,0 +1,74 @@
+# 데이터 저널 `data-journal`
+
+**비유: 신문 데이터 면처럼 편집된 차트 위에서 강조 한 색이 값을 짚고, 독자의 커서가 점을 하나씩 짚어 읽는다.** FT·NYT 결의 지면 — 연어색 종이, 얇은 가로 눈금선, 회갈색 맥락 사이 강조 한 색, 범례 대신 직접 라벨과 가는 지시선 주석. og-measure(실시간 계측·로그)와 달리 여기는 이미 잰 값을 골라 편집해 보여 준다 — 제목이 결론을 말하고 차트가 그것을 증명한다.
+
+## 기술 개념이 이 데이터 면에서 되는 것
+
+| 개념 | 데이터 면에서 | 효과 |
+|---|---|---|
+| 모델 목록·개수 | 점 하나 = 모델 하나(점 줄 그림), 흩어진 점이 회사 열로 모인다 | `dotStrip` |
+| 게이트웨이·한 주소 | 머리 글로 선 주소에 엔드포인트 지시선이 닿는다 | `headline` · `annotation` |
+| 요청 | 한 줄 위에 이어지는 요청 점, 머리 글의 모델 ID 가 갈린다 | `lineSeries` dots · `headline` swap |
+| 지연 | 막대 순위 — 짧을수록 빠르다, 가장 빠른 것만 강조색 | `barRank` |
+| 비용·시간대 가격 | 계단 선 그래프와 빗금 구간 띠(00–10 시), 정가→밤값 기울기 | `lineSeries` step · `rangeBand` · `slopeLines` |
+| 할인율·핵심 숫자 | 기사 머리의 큰 숫자, 세어 오른다 | `bigNumber` |
+| 폴백·예외 | 구간 띠와 주석(「여기서 다른 공급자로」) | `rangeBand` · `annotation` |
+| 캐시 | 전·후 기울기(캐시 전 → 캐시 후) | `slopeLines` |
+| 로그·실측 | 출처 줄(날짜·호출 수·합계) | `headline` source |
+
+## 맞는 내용·용도
+
+- 비교·순위·가격·벤치마크처럼 숫자로 결론을 보여 줄 이야기. 「무엇이 얼마나, 누가 가장」.
+- 용도: 설명(explainer)·쇼츠(shorts)·홍보(promo)·공개(launch)·피드(square). 드롭에 `bigNumber` drop.
+- 화면 글: 세리프 제목(결론 한 줄 — 감성 문장이 아니라 사실), 산세리프 라벨·주석, 고정폭 주소·모델 ID, 작은 회색 출처.
+
+## 금지
+
+- 강조색 둘 이상 — 화면마다 강조할 값 하나만 색을 받는다. 나머지는 회갈색 맥락.
+- 범례 상자·3D 차트·그라데이션·그림자·장식 아이콘·세로 축선(가로 눈금선과 바닥선만).
+- 계기판·로그 결(실시간 게이지·스크롤 로그) — og-measure 의 몫.
+- 출처 없는 숫자, 지어낸 값(목록 합이 전체와 다르면 남는 것을 지어 넣지 않는다 — 견본의 102 − 100 은 흐린 점으로 둔다).
+- 슬로건·감성 문장.
+
+## 움직임
+
+- 쉬지 않는다: 짚어 읽는 커서(`readout`)가 늘 움직인다 — 박마다 다음 값에 닿고 그 사이엔 차트 위를 미끄러진다(빠르기 아래 한계). 그 밖엔 선이 그어지고 막대가 자라고 점이 앉고 숫자가 센다.
+- 구도는 마디마다 바꾼다: 컷마다 다른 차트(지면의 다른 판) — `display:none` 으로 갈아 끼운다. 같은 판 안에서 흩어진 점이 열로 모이는 것도 구도 바꿈이다.
+- 박마다 큰 사건 하나: 막대 하나가 자라고, 지시선이 닿고, 머리 글이 갈리고, 커서가 다음 값에 앉는다.
+- 카메라는 없다 — 지면은 정면에 서 있다. 드롭에만 지면 틀이 한 번 흔들린다.
+
+## 효과
+
+같은 레포 안에서는 `effects.ts` 를 바로, 프로젝트에서는 `fx("data-journal")`. 효과는 화면 좌표(1920×1080 기준 px)를 받고 `(t) => void` 를 돌려준다 — 장면 paint 에서 차례로 부른다.
+
+| 효과 | 꼴 | 하는 일 |
+|---|---|---|
+| `paperPage` | layer | 연어색 종이 지면, 서 있다 |
+| `headline` | layer | 제목·부제·머리말·출처 — 낱말이 올라와 앉는다, `swap` 으로 갈린다 |
+| `barRank` | layer | 막대 순위 — 맥락 막대 사이 강조 하나, `end(i)` |
+| `lineSeries` | layer | 선 그래프 — 눈금선·강조선·직접 라벨, `step`·`dots`, `px`·`py` |
+| `dotStrip` | layer | 점 줄 그림 — 점 하나가 항목 하나, `scatter`→열, `loose`, `shown`·`at` |
+| `slopeLines` | layer | 기울기 차트 — 전·후 |
+| `rangeBand` | layer | 구간 띠 — 옅은 띠·사선 빗금과 머리 글 |
+| `annotation` | layer | 주석 — 가는 지시선과 글 |
+| `bigNumber` | layer | 큰 숫자 — 세어 오른다, `track`, `drop` |
+| `readout` | layer | 짚어 읽는 커서 — 고리·기준선·값 상자, 서지 않는다 |
+
+## 장면 문법 슬롯 — `slots.ts`
+
+패턴이 테마 이름 없이 부르는 자리(`themeSlots("data-journal")`). 전부 DOM·캔버스 2D.
+
+| 슬롯 | 채운 것 |
+|---|---|
+| `surface` | 연어색 종이 지면(`paperPage`) — 서 있다 |
+| `panel` | 차트 칸 — 판 없이 위 짧은 강조 줄과 아래 바닥선이 그어진다(편집 지면은 상자를 두르지 않는다). 강조면 옅은 강조색 띠 |
+| `land` | 바닥선에서 솟아 앉는다 — 아래에서 올라오며 짧은 강조 줄이 그 밑에 그어진다(0.5초) |
+| `write` | 낱말이 아래에서 올라와 앉는다(글자 굴림) |
+| `trace` | 강조선이 왼쪽에서 그어지고 끝에 점, 다 그은 뒤엔 커서 고리가 선을 따라 짚는다 |
+| `drop` | 강조 띠가 화면을 가로로 훑고 옅은 섬광(dropBurst) |
+
+견본: `sample/` — 공통 주제 「OpenGateway 소개 15초」(docs/briefs/og-intro-15s.md), kawaii-friends 4.0–19.0초(드롭 7.34초), 장면 넷 × 마디마다 판. 모델 102 개가 점으로 흩어졌다 회사 열로 모인다(OpenAI 41 강조) → 한 주소에 엔드포인트 지시선 → 같은 요청에 모델 ID 가 박마다 갈리고 요청 점이 한 줄로 → 점이 앉는 만큼 세는 102 → 드롭: 강조 띠의 102 → 시간대별 입력 가격 계단과 00–10 시 빗금 띠, −90% 주석 → 정가→밤값 기울기 → 첫 토큰 막대 순위(가장 빠른 것 강조) → OG 로고와 숫자 셋.
+
+## 변주가 바꿔도 되는 것
+
+밝은 지면이 기본이고 어두운 지면(야간판)도 된다. 강조 색상은 어디로 돌아도 되지만 늘 한 색, 글꼴은 명조·바탕 제목과 기술 고딕 짝까지, 종이 결은 없음·종이까지.