kasaframe 0.1.1 → 0.1.4

package/themes/origami-fold/variants/sage-pink.json

@@ -0,0 +1,127 @@
+{
+  "id": "sage-pink",
+  "world": "origami-fold",
+  "name": "Sage Pink",
+  "desc": "세이지 바탕에 분홍 강조 · 또렷한 기하 고딕 · 종이 결",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.985,
+    "tint": {
+      "h": 129.2492,
+      "c": 0.0453
+    },
+    "inkL": 0.1439,
+    "hue": 352.7451,
+    "chroma": 0.9584,
+    "fonts": "suit",
+    "texture": {
+      "kind": "paper",
+      "amount": 0.8
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 1.08,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#F3FFE8",
+      "surface": "#FFFFFF",
+      "raised": "#D8E8C4",
+      "line": "#A4B391",
+      "ink": "#0E0806",
+      "inkSoft": "#2B211D",
+      "dim": "#404434",
+      "accent": "#E1609E",
+      "accentSoft": "#7B3957",
+      "accentText": "#60263D",
+      "onAccent": "#060606",
+      "success": "#609F79",
+      "danger": "#C5386A",
+      "warning": "#B68C00",
+      "paper": "#140D0A",
+      "print": "#FFFFFF",
+      "indigo": "#E3F7FF",
+      "mustard": "#803300",
+      "sakura": "#663C68",
+      "kraft": "#86544A",
+      "matline": "#BFCEAA"
+    },
+    "fonts": {
+      "sans": "\"SUIT Variable\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"SUIT Variable\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"JetBrains Mono\", ui-monospace, \"SUIT Variable\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "SUIT Variable",
+          "src": "https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2.0.5/fonts/variable/ttf/SUIT-Variable.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": "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": 800,
+      "weightBody": 500,
+      "tracking": "-0.02em"
+    },
+    "look": {
+      "texture": {
+        "kind": "paper",
+        "amount": 0.8
+      },
+      "tempo": 1.08
+    }
+  },
+  "tags": {
+    "mood": [
+      "손맛",
+      "따뜻한",
+      "정갈한",
+      "공예",
+      "친근한",
+      "밝은",
+      "아날로그"
+    ],
+    "light": "light",
+    "use": [
+      "압축",
+      "캐시",
+      "비용 절감",
+      "요청 흐름",
+      "개수",
+      "설명",
+      "소개"
+    ],
+    "dims": "3D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 19.16,
+      "inkSoft": 15.15,
+      "dim": 9.73,
+      "accentText": 11,
+      "accent": 3.18,
+      "onAccent": 6.17,
+      "success~danger": 0.076,
+      "success~warning": 0.094,
+      "danger~warning": 0.146,
+      "accent~danger": 0.106,
+      "accent~ink": 0.463
+    },
+    "frame": "kf check 통과 — 끝 구간 3.183–4초(입체라 가볍게)·끝 프레임 한 장",
+    "pattern": "hook-number.counter"
+  }
+}

package/themes/paper-cutout/THEME.md

@@ -0,0 +1,63 @@
+# 종이 오리기 `paper-cutout`
+
+**비유: 대지에 창을 오려 아래 종이 층이 드러난다 — 깊을수록 그림자가 길고, 위 층이 들려 바뀐다.** 화면은 흰 수채화지 한 장이고, 정보는 그 아래 색종이 층에 붙어 있다. 칼선이 둘레를 긋고 오린 조각이 들려 걷히면 창 안으로 아래 층이 보인다. 빛은 위 왼쪽 한 방향이라 깊은 창일수록 위 가장자리 그림자 띠가 길다 — 깊이가 뜻을 가진다.
+
+## 기술 개념이 이 세계에서 되는 것
+
+| 개념 | 종이 오리기에서 | 효과 |
+|---|---|---|
+| 요청 | 낱말이 찍힌 종이 띠 — 대지의 칼집을 꿰고 끌려간다. 칼집 하나 = 거쳐 가는 단계(앱 → 게이트웨이 → 공급자) | `paperStrip` |
+| 게이트웨이·한 주소 | 대지에 낸 창 하나 — 모든 띠·모델이 그 창으로 보인다 | `cutWindows` |
+| 모델 | 창 바닥에 깔린 색종이 한 장. 모델을 바꾸면 위 대지(주소)는 그대로, 창 아래 종이만 빼내고 다음 장이 드러난다 | `liftSwap` |
+| 공급자 | 같은 색 종이 묶음 | `sheet1`–`sheet3` |
+| 지연 | 깊이 — 겹친 고리 수와 그림자 띠 길이(100ms 마다 한 장) | `depthWell` |
+| 캐시 | 이미 오려 둔 창 — 칼선 없이 처음부터 열려 있다 | `cutWindows` 의 `cut: 0` |
+| 비용 | 종이 띠 길이. 할인은 칼선을 내려 잘라 떼어 낸 몫 | `trimBar` |
+| 값의 높낮이 | 종이 높이 — 비싼 시간은 도드라진 종이, 싼 시간은 깊이 가라앉힌 창 | `paperSheet` 높이 · `cutWindows` 깊이 |
+| 폴백 | 위 층이 들려 걷히면 그 아래 층이 이미 받치고 있다 — 다음 공급자 | `liftSwap` |
+| 한도 | 창 크기 — 띠보다 좁은 창으로는 못 지나간다 | `cutWindows` |
+
+## 맞는 내용·용도
+
+- 단계를 거쳐 가는 것(요청 경로·처리 단계), 겹쳐 쌓이는 것(층·캐시·폴백), 깊이·높이로 비교할 수 있는 숫자(지연·가격·횟수) — 「무엇이 무엇 아래에 있나」가 내용인 것.
+- 용도: 홍보(promo)·설명(explainer)·공개(launch)·쇼츠(shorts)·피드(square). 밝고 차분한 곡, 퓨처베이스·어쿠스틱.
+- 화면 글은 오린 글자 — 주소·모델 ID·숫자·짧은 낱말. 큰 글은 도현(Do Hyeon), 작은 글은 Pretendard, 주소·ID 는 IBM Plex Mono.
+
+## 금지
+
+- 그라데이션·광택·유리·네온·발광. 어두운 곳은 전부 위 층이 드리운 그림자로만.
+- 빛 방향을 섞기 — 그림자는 늘 오른쪽 아래(위 왼쪽 빛). 그림자를 따로 그리지 말고 `lift`·`paperSheet`·`cutWindows` 가 높이로 정한 값을 쓴다.
+- 흰 테두리 스티커(카와이 스티커 테마)·잉크 판 곱하기(리소 테마)·손으로 찢은 가장자리·사진 콜라주. 모서리는 칼로 자른 곧은 선.
+- 주홍·겨자 종이 위 작은 글을 같은 계열 색으로 쓰기 — 종이 위 글은 남색(ink)이나 대지 흰색(paper)으로.
+- 카메라 이동·흔들기. 카메라는 책상 위에 서 있고 종이만 움직인다. 흔들림은 드롭의 `layerBurst` 가 돌려준 값을 화면 틀에 한 번.
+- 바탕을 흐르게 하기 — 대지는 서 있다. 쉬지 않는 몫은 칼선·요청 띠·내려앉는 종이(내용)가 진다.
+- 슬로건·감성 문장.
+
+## 움직임
+
+- 쉬지 않는다: 요청 띠(`paperStrip`)가 늘 끌려가고, 다음 창의 칼선이 미리 그어지고, 종이가 내려앉아 튄다 — 바탕은 서 있다.
+- 구도는 마디마다 바꾼다: 다 본 판이 들려 걷히고(`liftSwap`) 다음 판이 드러난다. 같은 창 안 종이만 바꿔도 된다(모델 바꾸기).
+- 박마다 큰 사건 하나: 창이 열리고(칼선이 다 돈 순간 조각이 걷힌다), 색종이·오린 글자가 내려앉고, 우물이 한 장 깊어지고, 띠가 잘려 떼어진다.
+- 종이는 가볍다 — 천천히 들리고(그림자가 멀어지고 흐려진다) 빨리 내려앉아 한 번 튄다. 큰 판은 0.3초 안에 걷는다(오래 미끄러지면 카메라 이동으로 읽힌다).
+- 드롭: 앞 마디에 박마다 대지 한 장씩 얹어 창을 계단처럼 깊게 쌓고(`layerBurst` 의 `landAt`), 드롭에 위 층부터 한꺼번에 터져 나가며 주인공이 드러난다.
+
+## 효과
+
+같은 레포 안에서는 `effects.ts` 를 바로, 프로젝트에서는 `fx("paper-cutout")`. layer 는 `build` 에서 만들고 `(t) => …` 에서 부른다. 한 판은 보통 `paperBoard`(맨 아래) → 창 아래 색종이(`paperSheet`·글) → `cutWindows`(대지, 창) → 대지 위에 붙는 것(`cutLetters`·`paperSheet`·`paperStrip`) 차례로 쌓는다.
+
+| 효과 | 꼴 | 하는 일 |
+|---|---|---|
+| `paperBoard` | layer | 화면 전체 흰 대지 — 서 있는 종이결 |
+| `paperSheet` | layer | 색종이 한 장 — 높이만큼 그림자, `at` 에 떨어져 내려앉는다, `build` 로 글을 붙인다 |
+| `lift` | value | 높이 곡선(land·raise·hop) → 높이·그림자 CSS·배율 |
+| `cutWindows` | layer | 대지에 창 오리기 — 칼선 → 조각 걷힘 → 깊이만큼 그림자 띠. `cut: 0` 은 이미 오린 창 |
+| `liftSwap` | layer | 다 본 판이 들려 걷히고 아래 층이 드러난다(0.28초) |
+| `cutLetters` | layer | 오린 글자 — 한 장씩 떨어져 조금 기울어 붙는다 |
+| `depthWell` | layer | 동심 고리 우물 — 겹수 = 깊이(지연) |
+| `paperStrip` | layer | 요청 띠 — 칼집을 꿰고 늘 끌려간다 |
+| `trimBar` | layer | 비용 띠 — 칼선 뒤 나머지가 떼어져 나간다(할인) |
+| `layerBurst` | layer | 드롭 — 계단 우물 층이 바깥으로 터져 창이 열린다, shake·punch |
+
+색 키: `paper`(대지) · `sheet1`·`sheet2`·`sheet3`(층 색종이 — 강조·셋째·글 잉크) · `sheet1Deep` 따위(그림자 속 종이) · `shade`(그림자 색) · `ink`(글).
+
+견본: `sample/` — OpenGateway 소개 15초(docs/briefs/og-intro-15s.md), 곡 kawaii-friends.mp3 4–19초(드롭 7.34초). 흩어진 회사 아홉 창이 박마다 열림 → 모델 수 띠 → 주소와 /v1 창, 요청 띠가 칼집 셋을 꿰고 → 같은 창 아래 모델 종이만 박마다 바뀜 → 대지가 계단으로 쌓여 드롭에 터지며 102 → 하루 띠의 00–10시 창이 깊이 가라앉고 -90% → deepseek 정가 띠가 10% 만 남기고 잘려 나감 → 첫 토큰 지연 = 우물 깊이 셋 → 남색 종이 로고·이름·주소 창.