kasaframe 0.1.3 → 0.1.5

package/themes/og-measure/theme.json

@@ -14,35 +14,112 @@
     "16:9",
     "9:16"
   ],
+  "vary": {
+    "scheme": [
+      "dark",
+      "light"
+    ],
+    "palettes": {
+      "light": {
+        "bg": "#FFFFFF",
+        "surface": "#F8FAFC",
+        "raised": "#F1F5F9",
+        "line": "#E2E8F0",
+        "ink": "#020817",
+        "inkSoft": "#020817",
+        "dim": "#64748B",
+        "accent": "#006FD6",
+        "accentSoft": "rgba(0, 111, 214, 0.45)",
+        "accentText": "#01509D",
+        "onAccent": "#FFFFFF",
+        "tint": "rgba(0, 111, 214, 0.1)",
+        "success": "#10B981",
+        "danger": "#EF4444",
+        "warning": "#F59E0B",
+        "bar": "rgba(100, 116, 139, 0.28)"
+      }
+    },
+    "bg": {
+      "dark": [
+        0.1445,
+        0.1964
+      ],
+      "light": [
+        0.9842,
+        1.0
+      ]
+    },
+    "keep": [
+      "accent",
+      "accentSoft",
+      "accentText",
+      "onAccent",
+      "tint",
+      "success",
+      "danger",
+      "warning"
+    ],
+    "fonts": [
+      "base"
+    ],
+    "texture": [
+      "none"
+    ]
+  },
+  "tags": {
+    "mood": [
+      "정밀",
+      "차분한",
+      "신뢰",
+      "기술적"
+    ],
+    "light": "dark",
+    "use": [
+      "측정",
+      "벤치마크",
+      "데이터",
+      "비교",
+      "API",
+      "설명",
+      "소개",
+      "OpenGateway",
+      "오픈게이트웨이",
+      "OG",
+      "게이트웨이",
+      "LLM",
+      "모델"
+    ],
+    "dims": "2D"
+  },
   "effects": [
     {
       "name": "graphPaper",
       "kind": "layer",
-      "does": "측정 바탕 — 흰 모눈과 아주 옅은 파란 주사선이 천천히 지나간다",
-      "use": "const paint = graphPaper(root, { phase: ctx.from })  // 모눈이 흐르고 주사선이 지나간다"
+      "does": "측정 바탕 — 바탕색 위에 구분선 색의 옅은 모눈이 천천히 흐른다(그라데이션·빛 번짐 없음)",
+      "use": "const paint = graphPaper(root, { phase: ctx.from })  // 모눈이 흐른다 — 박 사이는 내용이 메운다"
     },
     {
       "name": "callLine",
       "kind": "layer",
-      "does": "실제 호출 한 줄 — 주소가 박마다 한 조각씩 붙고 모델·보낼 글이 찍히고, 보낸 뒤 경과 시간이 실제 속도로 굴러 잰 ms 에 멈추며 상태·첫 토큰·받은 글·사용량이 붙는다",
+      "does": "실제 호출 한 줄 — 응답 패널(면 12px)에 주소가 박마다 한 조각씩 붙고 모델·보낼 글이 찍히고, 보낸 뒤 경과 시간이 실제 속도로 굴러 잰 ms 에 멈추며(색만 150ms 로 파랑) 상태·첫 토큰·받은 글·사용량이 붙는다",
       "use": "const paint = callLine(stage, { x: 90, y: 140, w: 1740, at: 0, url: [\"apis.opengateway.ai\", \"/v1\", \"/chat\", \"/completions\"], urlAt: [b[0], b[1], b[2], b[3]], model, modelAt: b[4], prompt, promptAt: b[5], sendAt: b[6], status: 200, ms: call.ttft_ms, answer: call.text, usage, usageAt: b[10] })"
     },
     {
       "name": "rawLog",
       "kind": "layer",
-      "does": "원자료 로그 — 줄이 들어온 박에 맨 아래 붙고 한 줄씩 밀려 오르며, 정규식이 잡은 숫자에 파란 칸",
+      "does": "원자료 로그 — 코드 블록(면 12px)에 줄이 들어온 박에 맨 아래 붙고 한 줄씩 밀려 오르며, 정규식이 잡은 숫자에 고름 칠(파랑 /10 알약)",
       "use": "const paint = rawLog(stage, { x: 70, y: 150, w: 1080, rows: 14, lines, times, pick: /ttft_ms=(\\d+)/, size: 34 })"
     },
     {
       "name": "samplePlot",
       "kind": "layer",
-      "does": "샘플 점 그림 — 재 온 값이 꽂히는 시각에 점이 커졌다 자리 잡고 가운데값 눈금·숫자가 따라 미끄러진다",
+      "does": "샘플 점 그림 — 재 온 값이 꽂히는 시각에 점이 6px 올라와 서고 가운데값 눈금·숫자가 300ms 로 따라 미끄러진다(눈금·막대는 각짐)",
       "use": "const paint = samplePlot(stage, { x: 1200, y: 160, w: 650, rows, min: 450, max: 1050, unit: \"ms\", ticks: [500, 750, 1000], best: 0, size: 34 })"
     },
     {
       "name": "pickFly",
       "kind": "layer",
-      "does": "뽑힌 숫자 — 로그 줄의 숫자가 떠올라 호를 그리며 점 그림 자리로 날아가 꽂힌다(박마다 큰 움직임)",
+      "does": "뽑힌 숫자 — 로그 줄의 숫자가 고름 칠 알약째 떠올라 호를 그리며 점 그림 자리로 300ms 감속으로 날아가 꽂힌다(박마다 큰 움직임)",
       "use": "const paint = pickFly(stage, { items: [{ at: b[0], text: \"746\", from: { x: 760, y: 200 }, to: { x: 1500, y: 250 } }] })"
     },
     {
@@ -54,26 +131,26 @@
     {
       "name": "rankBars",
       "kind": "layer",
-      "does": "막대 — 박마다 하나씩 값만큼 자라고(best 만 OG 파랑), delta 칩이 그 박에 튀어나온다",
+      "does": "막대 — 각진 막대가 박마다 하나씩 값만큼 300ms 로 자라고(best 만 브랜드 파랑), 차이 배지(테두리만)가 그 박에 나타난다",
       "use": "const paint = rankBars(stage, { x: 90, y: 400, w: 1740, items: [{ label, value, at: b[2] }, { label, value, at: b[3], delta: \"+80.5ms\", deltaAt: b[5] }], max: 820, best: 0, unit: \"ms\" })"
     },
     {
       "name": "stamp",
       "kind": "layer",
-      "does": "끝 도장 — 「측정 날짜 · 호출 N번 · $비용 · 키 하나」와 OG 로고가 쾅 찍힌다(비용은 첫 유효 자리까지)",
-      "use": "const paint = stamp(stage, { x: 960, y: 975, at: b[14], date, calls: 18, cost, logo: ctx.asset(\"brand/og-logo.svg\") })"
+      "does": "끝 도장 — 구분선 한 줄 위에 「측정 날짜 · 호출 N번 · $비용 · 키 하나」와 마스터 로고(한 색)가 선다, 상자 없이(비용은 첫 유효 자리까지)",
+      "use": "const paint = stamp(stage, { x: 960, y: 975, at: b[14], date, calls: 18, cost, logo: logoSvg, logoInk: ctx.style.scheme === \"dark\" ? \"#FFFFFF\" : \"#000000\" })  // import logoSvg from \"../assets/brand/og-logo.svg?raw\""
     },
     {
       "name": "flag",
       "kind": "layer",
-      "does": "칩 — 짧은 낱말·잰 값 하나가 크게 튀어 들어온다",
-      "use": "const paint = flag(stage, { x: 90, y: 60, text: \"실측\", at: 0 })"
+      "does": "배지 — 짧은 낱말·잰 값 하나가 6px 올라오며 220ms 로 나타난다. 속을 칠하지 않고 흐린 테두리와 글자색만(accent 파랑·plain 글 잉크·soft 흐린 글)",
+      "use": "const paint = flag(stage, { x: 90, y: 60, text: \"실측\", at: 0, tone: \"accent\" })"
     },
     {
       "name": "trackCam",
       "kind": "value",
-      "does": "계측 카메라 — 샷이 바뀌면 220ms 로 옮기며 툭(kick) 치고 사이에는 선다. 샷은 드러냄·결과가 서는 순간에만(긴 로그가 잘리지 않게 배율 1–1.1), 쉬지 않는 몫은 카운터·로그·막대",
-      "use": "applyStyle(stage, trackCam(t, { shots: [{ at: 0, kick: 0.1 }, { at: bar[1], zoom: 1.04 }], scene: ctx.id }))  // stage: transform-origin 0 0"
+      "does": "계측 카메라 — 샷이 바뀌면 300ms 스프링(살짝 넘었다 돌아옴)으로 옮기고 사이에는 선다. kick 은 그만큼 가까이에서 시작해 300ms 감속으로 물러나 앉기. 샷은 드러냄·결과가 서는 순간에만(배율 1–1.1)",
+      "use": "applyStyle(stage, trackCam(t, { shots: [{ at: 0, kick: 0.04 }, { at: bar[1], zoom: 1.04 }], scene: ctx.id }))  // stage: transform-origin 0 0"
     }
   ]
-}
+}

package/themes/og-measure/variants/snow-blue.json

@@ -0,0 +1,90 @@
+{
+  "id": "snow-blue",
+  "world": "og-measure",
+  "name": "Snow Blue",
+  "desc": "새하얀 바탕에 파랑 강조",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9989,
+    "tint": {
+      "h": 89.8756,
+      "c": 0
+    },
+    "inkL": 0.1363,
+    "hue": 254.7525,
+    "chroma": 1,
+    "fonts": "base",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 1,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#FFFFFF",
+      "surface": "#F8FAFC",
+      "raised": "#F1F5F9",
+      "line": "#E2E8F0",
+      "ink": "#020817",
+      "inkSoft": "#020817",
+      "dim": "#64748B",
+      "accent": "#006FD6",
+      "accentSoft": "rgba(0, 111, 214, 0.45)",
+      "accentText": "#01509D",
+      "onAccent": "#FFFFFF",
+      "tint": "rgba(0, 111, 214, 0.1)",
+      "success": "#10B981",
+      "danger": "#EF4444",
+      "warning": "#F59E0B",
+      "bar": "rgba(100, 116, 139, 0.28)"
+    },
+    "look": {}
+  },
+  "tags": {
+    "mood": [
+      "정밀",
+      "차분한",
+      "신뢰",
+      "기술적",
+      "밝은",
+      "차가운"
+    ],
+    "light": "light",
+    "use": [
+      "측정",
+      "벤치마크",
+      "데이터",
+      "비교",
+      "API",
+      "설명",
+      "소개",
+      "OpenGateway",
+      "오픈게이트웨이",
+      "OG",
+      "게이트웨이",
+      "LLM",
+      "모델"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 19.94,
+      "dim": 4.75,
+      "success~danger": 0.081,
+      "success~warning": 0.089,
+      "danger~warning": 0.139,
+      "accent~danger": 0.229,
+      "accent~ink": 0.426
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.counter"
+  }
+}

package/themes/orbit-system/THEME.md

@@ -0,0 +1,77 @@
+# 우주 궤도 `orbit-system`
+
+**비유: 모델은 게이트웨이 별을 도는 행성, 요청은 그 둘레를 도는 위성 — 빠른 모델일수록 안쪽에서 짧은 주기로 돈다.** 짙은 우주에서 궤도면을 비스듬히 내려다본다. 한 주소(게이트웨이)는 가운데 별이고, 모델은 저마다 제 궤도를 도는 행성, 요청은 쏘아 올려 궤도에 드는 위성이다. 움직임이 곧 정보다 — 도는 빠르기가 지연이고, 행성의 밤 반구가 싼 시간대다.
+
+## 기술 개념이 이 세계에서 되는 것
+
+| 개념 | 우주 궤도에서 | 효과 |
+|---|---|---|
+| 게이트웨이·한 주소 | 가운데 별 — 모든 궤도의 중심, 요청이 닿을 때 빛무리가 부푼다 | `gatewayStar` |
+| 모델 | 행성 — 제 궤도를 쉬지 않고 돈다. 회사별 모델 수는 행성 크기, 모델 목록은 행성대 | `modelPlanet` · `modelBelt` |
+| 요청 | 위성 — 쏘아 올려 궤도에 들고 꼬리를 끈다. 한 바퀴 = 한 번 왕복, 많으면 껍질 | `requestSats` |
+| 지연 | 궤도 주기 — 짧을수록 안쪽에서 빨리 돈다(바깥은 케플러대로 느리다) | `modelPlanet` period |
+| 라우팅·폴백 | 궤도 전이 — 위성이 휜 전이 궤도로 다른 천체로 옮겨 간다 | `transferArc` |
+| 비용·시간대 가격 | 자전하는 행성의 하루 고리 — 별 반대쪽 밤 반구에 든 시간대 막대가 줄어든다 | `nightPrice` |
+| 캐시·압축 | 행성이 두른 알갱이 고리 — 지난 문맥이 쌓이고, 압축하면 고리 폭이 그 배수만큼 좁아진다 | `cacheRing` |
+| 로그·관측 | 위성 꼬리(지나온 길)와 이름표 | `requestSats` · `bodyTag` |
+
+## 맞는 내용·용도
+
+- 여럿이 한 중심을 도는 이야기 — 게이트웨이·라우터·로드밸런서·지연 비교·시간대 가격·캐시. 「무엇이 무엇 둘레를 얼마나 빨리 도나」.
+- 용도: 설명(explainer)·홍보(promo)·공개(launch)·쇼츠(shorts)·피드(square). 드롭에 `starFlare`.
+- 화면 글: 짙은 판 이름표(주소·모델 ID·숫자·짧은 낱말). 큰 숫자는 판 없이.
+
+## 금지
+
+- 사진 텍스처(대륙·태양 표면)·은하수 사진·흐르는 별 — 별 점은 서 있고, 움직이는 것은 행성·위성뿐이다.
+- 뜻 없는 회전 — 행성이 도는 빠르기는 그 값(지연·주기)에서 나온다. 박에 맞춰 궤도를 빨리 돌리지 않는다.
+- 이유 없이 떠도는 카메라(늘 공전하는 카메라·사인 드리프트). 카메라는 박에 떠나 박에 내려앉는다.
+- 하늘빛 네온·유리·금속 광택(depth-flight·glass-light 의 결) — 빛은 별의 호박빛 하나.
+- 따라 도는 작은 글 — 빠른 궤도의 행성에 긴 이름표를 붙이지 않는다. 범례(눈금 색 = 행성 색)로 뺀다.
+- 슬로건·감성 문장.
+
+## 움직임
+
+- 쉬지 않는다: 행성은 제 궤도를, 위성은 꼬리를 끌며 행성 둘레를 늘 돈다. 이 둘이 0.1초 정지를 막는다.
+- 구도는 마디마다 바꾼다: 컷마다 다른 행성계(세트를 200 떨어뜨린다 — 별빛 끝 90 보다 멀다)와 다른 높이·거리.
+- 박마다 큰 사건 하나: 행성이 궤도선과 함께 떠오르고, 위성이 쏘아 올라 궤도에 들고, 전이 궤도가 별에 닿아 빛무리가 부풀고, 시간대 막대가 쑥 줄어든다.
+- 카메라는 키 하나가 움직임 하나 — 드러낼 것에 다가가기, 전체를 담게 물러나기, 드롭에 별 곁에서 확 물러나기. 앉을 것이 없으면 다음 컷까지 천천히 이어 다가간다(`linear`).
+
+## 효과
+
+입체 테마 — 바탕은 `@kasaframe/themes/stage3d`. 첫 효과(layer)가 무대를 만들고 나머지(rig)는 `stage.add(…)` 로 얹는다. 같은 레포 안에서는 `effects.ts` 를 바로, 프로젝트에서는 `fx("orbit-system")`. 장면 끝에서 `return (t) => stage(t)`.
+
+| 효과 | 꼴 | 하는 일 |
+|---|---|---|
+| `orbitStage` | layer | 궤도 무대 — 짙은 우주·서 있는 별 점·밤빛 환경광, 박에 맞춘 카메라 키. `key` 는 별이 없는 세트의 먼 별빛 |
+| `gatewayStar` | rig | 게이트웨이 별 — 궤도의 중심, 도착 박마다 빛무리, 행성의 낮·밤을 가르는 빛. `shapes` 면 로고 별 |
+| `modelPlanet` | rig | 행성 = 모델 — 제 궤도를 돈다(period = 지연), 궤도선이 그어지며 떠오른다. `where(t)` |
+| `requestSats` | rig | 위성 = 요청 — 쏘아 올려 궤도에 들고 꼬리를 끈다, 많으면 껍질 |
+| `transferArc` | rig | 궤도 전이 = 라우팅·폴백 — 휜 길로 옮겨 가고 점선이 남았다 잦아든다 |
+| `nightPrice` | rig | 하루 고리 — 24 시 막대, 밤 반구 창이 fall 에 off 만큼 줄어든다. `hour(h)` |
+| `cacheRing` | rig | 캐시 고리 — 알갱이 고리, `squeeze` 로 폭이 by 배 좁아진다 |
+| `modelBelt` | rig | 행성대 — 작은 행성이 하나씩 떠올라 돈다. `shown(t)` 로 숫자와 맞춘다 |
+| `starFlare` | rig | 드롭 — 별 섬광과 궤도면 충격파 고리 둘, 흔들림(dropBurst) |
+| `bodyTag` | rig | 글자판 — 화면 px 크기를 지키는 이름표, 함수 글은 매 프레임 다시 칠한다 |
+
+- 별빛(`gatewayStar`·`nightPrice` 의 빛)은 거리 90 에서 끊긴다 — 한 장면에 세트를 여럿 두면 200 씩 떨어뜨린다.
+- 글자판은 깊이 검사 없이 맨 위에 그린다 — 행성에 가리지 않는다. 대신 행성 위에 겹치지 않게 자리를 잡는다.
+
+## 장면 문법 슬롯 — `slots.ts`
+
+패턴이 테마 이름 없이 부르는 자리(`themeSlots("orbit-system")`). 3D 는 `surface` 하나, 나머지는 DOM·캔버스 2D.
+
+| 슬롯 | 채운 것 |
+|---|---|
+| `surface` | 짙은 우주 한 장 — 서 있는 별 점과 화면 아래로 지나는 옅은 궤도선 넷. 처음 한 번 그려 서 있다(`stillStage`) |
+| `panel` | 관측 창 — 짙은 판에 가는 테, 네 귀퉁이 조준 눈금이 바깥에서 모여 판을 잡는다 |
+| `land` | 궤도 진입 — 짧은 호로 미끄러져 앉고 둘레에 궤도 고리가 번졌다 잦아든다(0.6초) |
+| `write` | 별처럼 켜지는 글 — 글자마다 호박빛으로 반짝였다 크림 글로 앉는다 |
+| `trace` | 전이 궤도 — 점선 길이 위성 머리를 따라 그어지고, 다 그은 뒤엔 위성이 꼬리를 끌며 오간다 |
+| `drop` | 호박빛 섬광과 비스듬한 타원 충격파 고리 둘(dropBurst) |
+
+견본: `sample/` — 공통 주제 「OpenGateway 소개 15초」(docs/briefs/og-intro-15s.md), kawaii-friends 4.0–19.0초(드롭 7.34초), 장면 넷 × 마디마다 컷. 흩어진 행성계 → 한 중심 둘레 궤도(크기 = 모델 수) → 별이 켜지고 엔드포인트가 전이 궤도로 모인다 → 박마다 다른 모델의 요청 → 행성대가 102 로 차오른다 → 드롭 충격파 · 102 → 하루 고리 밤 반구 −90% → 값이 낮은 궤도로 내려앉는다 → 첫 토큰 실측 = 궤도 주기 셋 → 로고 별과 opengateway.ai.
+
+## 변주가 바꿔도 되는 것
+
+밤하늘은 늘 짙다(`scheme: dark`) — 밝은 바탕은 별빛·밤 반구가 뜻을 잃는다. 별빛 강조 색상은 호박·청록·자홍 셋 범위, 글꼴은 Space 계열·기하·기술 고딕 짝, 질감은 없음·옅은 알갱이까지. 행성 흙빛은 강조와 함께 같은 각도로 돈다.