kasaframe 0.1.1 → 0.1.4

package/themes/receipt/style.json

@@ -0,0 +1,104 @@
+{
+  "name": "receipt",
+  "label": "감열지 영수증 — 요청 한 번이 영수증 한 장으로 찍혀 나온다",
+  "scheme": "light",
+  "colors": {
+    "bg": "#C9773F",
+    "surface": "#FBFAF6",
+    "raised": "#F1EEE6",
+    "line": "#D8D3C8",
+    "ink": "#1E1E1C",
+    "inkSoft": "#3A3936",
+    "dim": "#3F3C37",
+    "accent": "#D2352B",
+    "accentSoft": "#F4C9C3",
+    "accentText": "#7E1710",
+    "onAccent": "#FFFFFF",
+    "success": "#1E1E1C",
+    "danger": "#D2352B",
+    "warning": "#B8261E",
+    "paper": "#FBFAF6",
+    "body": "#2B2A25",
+    "slot": "#121210",
+    "heat": "#8A8883",
+    "stamp": "#8A1A12"
+  },
+  "fonts": {
+    "sans": "\"Nanum Gothic Coding\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Nanum Gothic Coding\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Nanum Gothic Coding\", ui-monospace, \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Nanum Gothic Coding",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/nanumgothiccoding/NanumGothicCoding-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Nanum Gothic Coding",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/nanumgothiccoding/NanumGothicCoding-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": {
+    "hero": 200,
+    "title": 88,
+    "body": 36,
+    "caption": 28,
+    "weightDisplay": 700,
+    "weightBody": 400,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 2,
+    "md": 6,
+    "lg": 14,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "0 6px 0 rgba(0, 0, 0, 0.12)",
+    "lift": "0 10px 0 rgba(0, 0, 0, 0.14)"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "rise",
+    "ease": "inOutCubic",
+    "durations": {
+      "fast": 0.1,
+      "base": 0.25,
+      "slow": 0.5
+    }
+  },
+  "theme": {
+    "inks": [
+      "#C9773F 나무 계산대 — 바탕, 서 있다",
+      "#FBFAF6 감열지 — 영수증 한 장",
+      "#1E1E1C 감열 검정 — 모든 글",
+      "#2B2A25 프린터 몸통과 틈",
+      "#8A1A12 빨간 도장 하나 — 드롭에만(종이·계산대 어디서도 읽히는 짙은 빨강)"
+    ],
+    "texture": "평평한 흰 종이 띠, 위 끝은 뜯은 톱니. 고정폭 글 하나, 보통·굵게·두 배 높이. 줄 구분은 점선. 그림자는 종이 밑 짧은 단색 한 단",
+    "movement": "줄을 찍을 때마다 종이가 프린터 틈에서 한 줄씩 밀려 올라온다(다음 줄까지 이어서 민다). 한 건이 끝나면 톱니 칼날에 뜯겨 날아가고 새 장이 나온다. 드롭에 빨간 도장이 한 번 쾅"
+  },
+  "notes": [
+    "감열지 위 글은 늘 검정 한 색 — 옅은 회색은 꼬리 줄(시각·번호)만.",
+    "빨강은 드롭 도장 하나에만.",
+    "카메라 없음 — 계산대 위를 내려다본다. 구도는 영수증 한 장(마디 하나)마다 바뀐다.",
+    "dim·accentText 는 종이와 계산대 어디에 놓여도 3:1 이 넘게 짙게 — 영수증 안 옅은 꼬리 줄은 heat 칸."
+  ]
+}

package/themes/receipt/theme.json

@@ -0,0 +1,133 @@
+{
+  "id": "receipt",
+  "name": "감열지 영수증",
+  "metaphor": "요청 한 번이 영수증 한 장 — 모델·토큰·단가·합계가 한 줄씩 찍혀 프린터 틈에서 밀려 올라오고, 한 건이 끝나면 뜯겨 나간다",
+  "status": "approved",
+  "approvedAt": "2026-10-11",
+  "purposes": [
+    "promo",
+    "shorts",
+    "square",
+    "explainer",
+    "launch"
+  ],
+  "aspect": [
+    "16:9",
+    "1:1",
+    "9:16"
+  ],
+  "vary": {
+    "scheme": [
+      "light"
+    ],
+    "hue": [
+      [
+        15,
+        45
+      ]
+    ],
+    "chroma": [
+      0.7,
+      1.1
+    ],
+    "bg": {
+      "light": [
+        0.5,
+        0.78
+      ]
+    },
+    "keep": [
+      "surface",
+      "raised",
+      "line",
+      "ink",
+      "inkSoft",
+      "dim",
+      "onAccent",
+      "paper",
+      "body",
+      "slot",
+      "heat"
+    ],
+    "fonts": [
+      "base"
+    ],
+    "texture": [
+      "none"
+    ],
+    "tempo": [
+      0.9,
+      1.15
+    ]
+  },
+  "tags": {
+    "mood": [
+      "일상적",
+      "정직한",
+      "또렷한",
+      "아날로그",
+      "친근한"
+    ],
+    "light": "light",
+    "use": [
+      "비용",
+      "가격",
+      "합계",
+      "할인",
+      "청구",
+      "사용량",
+      "비교"
+    ],
+    "dims": "2D"
+  },
+  "effects": [
+    {
+      "name": "counterTop",
+      "kind": "layer",
+      "does": "계산대 — 나무 탁자 한 장, 꼼짝 않는다",
+      "use": "counterTop(layer(root), { ctx })"
+    },
+    {
+      "name": "printerBody",
+      "kind": "layer",
+      "does": "프린터 몸통 — 종이가 나오는 틈을 윗변에 둔 검은 상자, 영수증 위에 얹는다",
+      "use": "printerBody(page, { ctx })  // receiptRoll 다음에 지어 위에 둔다"
+    },
+    {
+      "name": "receiptRoll",
+      "kind": "layer",
+      "does": "영수증 한 장 = 요청 한 건 — 줄이 찍힐 때마다 종이가 틈에서 밀려 올라오고(다음 줄까지 이어서), 이름 … 값·점선·두 배 높이 합계·VOID·바코드, tear 에 뜯겨 날아가거나(toss 면 계산대에 흩어지고, present 면 들어 보인다)",
+      "use": "const r = receiptRoll(page, { ctx, lines: [{ at: 0.3, kind: \"item\", text: \"OpenAI\", right: \"×41\" }, { at: 0.64, kind: \"total\", text: \"합계\", right: \"$0.0004\" }], tear: 1.6 })"
+    },
+    {
+      "name": "leader",
+      "kind": "value",
+      "does": "점 채움 — 고정폭 한 줄에 왼쪽 · 점 · 오른쪽(한글은 두 칸)",
+      "use": "leader(\"OpenAI\", \"×41\", 32)  // \"OpenAI ........ ×41\""
+    },
+    {
+      "name": "thermalPrint",
+      "kind": "value",
+      "does": "감열 인쇄 — 한 줄이 위에서부터 점 줄 몇 번에 나뉘어 찍힌다(가림 Style)",
+      "use": "applyStyle(el, thermalPrint(t, { at: 0.5, rows: 4 }))"
+    },
+    {
+      "name": "tally",
+      "kind": "value",
+      "does": "금액 세기 — 찍히는 동안 0 에서 값까지 자리가 돈다, 그 뒤 값 그대로(글)",
+      "use": "right: (t) => tally(t, { at: 0.37, dur: 0.6125, to: 612.5, decimals: 1, suffix: \"ms\" })"
+    },
+    {
+      "name": "barcode",
+      "kind": "layer",
+      "does": "바코드 — 글에서 정한 막대가 위에서 아래로 점 줄마다 찍힌다(영수증 꼬리)",
+      "use": "barcode(el, { ctx, text: \"opengateway.ai\", at: 2.5, width: 600, height: 90 })  // 영수증 안에선 { kind: \"barcode\" } 줄"
+    },
+    {
+      "name": "paidStamp",
+      "kind": "layer",
+      "does": "드롭 = 도장 — 빨간 고무 도장이 위에서 쾅(넘쳤다 앉고 기운 채), 큰 수 · 작은 말 두 줄, 흔들림을 돌려준다",
+      "use": "const s = stamp(t); applyStyle(frame, s.shake)  // stamp = paidStamp(layer(page), { ctx, drop: 0, big: \"102\", small: \"모델 · 한 주소\" })"
+    }
+  ]
+}

package/themes/receipt/variants/blush-coral.json

@@ -0,0 +1,89 @@
+{
+  "id": "blush-coral",
+  "world": "receipt",
+  "name": "Blush Coral",
+  "desc": "연분홍 바탕에 산호색 강조",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.7237,
+    "tint": {
+      "h": 39.9461,
+      "c": 0.1051
+    },
+    "inkL": 0.2343,
+    "hue": 15.6327,
+    "chroma": 0.8417,
+    "fonts": "base",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 1.06,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#DE8F73",
+      "surface": "#FBFAF6",
+      "raised": "#F1EEE6",
+      "line": "#D8D3C8",
+      "ink": "#1E1E1C",
+      "inkSoft": "#3A3936",
+      "dim": "#3F3C37",
+      "accent": "#CA485A",
+      "accentSoft": "#FFF9FA",
+      "accentText": "#6E1A28",
+      "onAccent": "#FFFFFF",
+      "success": "#1E1E1C",
+      "danger": "#CA485A",
+      "warning": "#B8261E",
+      "paper": "#FBFAF6",
+      "body": "#2B2A25",
+      "slot": "#121210",
+      "heat": "#8A8883",
+      "stamp": "#8C303B"
+    },
+    "look": {
+      "tempo": 1.06
+    }
+  },
+  "tags": {
+    "mood": [
+      "일상적",
+      "정직한",
+      "또렷한",
+      "아날로그",
+      "친근한",
+      "밝은",
+      "차분한"
+    ],
+    "light": "light",
+    "use": [
+      "비용",
+      "가격",
+      "합계",
+      "할인",
+      "청구",
+      "사용량",
+      "비교"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "accentText": 4.5,
+      "accent": 1.8,
+      "success~danger": 0.271,
+      "success~warning": 0.191,
+      "danger~warning": 0.064,
+      "accent~ink": 0.271
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}

package/themes/receipt/variants/sand-coral-2.json

@@ -0,0 +1,89 @@
+{
+  "id": "sand-coral-2",
+  "world": "receipt",
+  "name": "Sand Coral 2",
+  "desc": "모래빛 바탕에 산호색 강조",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.67,
+    "tint": {
+      "h": 40.0666,
+      "c": 0.1
+    },
+    "inkL": 0.2343,
+    "hue": 15.7532,
+    "chroma": 0.8011,
+    "fonts": "base",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 0.92,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#CA8065",
+      "surface": "#FBFAF6",
+      "raised": "#F1EEE6",
+      "line": "#D8D3C8",
+      "ink": "#1E1E1C",
+      "inkSoft": "#3A3936",
+      "dim": "#3F3C37",
+      "accent": "#B63C4E",
+      "accentSoft": "#F9D6D7",
+      "accentText": "#5B0A1B",
+      "onAccent": "#FFFFFF",
+      "success": "#1E1E1C",
+      "danger": "#B63C4E",
+      "warning": "#AA120F",
+      "paper": "#FBFAF6",
+      "body": "#2B2A25",
+      "slot": "#121210",
+      "heat": "#8A8883",
+      "stamp": "#822B36"
+    },
+    "look": {
+      "tempo": 0.92
+    }
+  },
+  "tags": {
+    "mood": [
+      "일상적",
+      "정직한",
+      "또렷한",
+      "아날로그",
+      "친근한",
+      "밝은",
+      "차분한"
+    ],
+    "light": "light",
+    "use": [
+      "비용",
+      "가격",
+      "합계",
+      "할인",
+      "청구",
+      "사용량",
+      "비교"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "accentText": 4.5,
+      "accent": 1.8,
+      "success~danger": 0.226,
+      "success~warning": 0.152,
+      "danger~warning": 0.053,
+      "accent~ink": 0.226
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}

package/themes/receipt/variants/sand-coral-3.json

@@ -0,0 +1,89 @@
+{
+  "id": "sand-coral-3",
+  "world": "receipt",
+  "name": "Sand Coral 3",
+  "desc": "모래빛 바탕에 산호색 강조",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.7269,
+    "tint": {
+      "h": 54.0601,
+      "c": 0.1299
+    },
+    "inkL": 0.2343,
+    "hue": 29.7467,
+    "chroma": 1.0407,
+    "fonts": "base",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 0.94,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#E58F52",
+      "surface": "#FBFAF6",
+      "raised": "#F1EEE6",
+      "line": "#D8D3C8",
+      "ink": "#1E1E1C",
+      "inkSoft": "#3A3936",
+      "dim": "#3F3C37",
+      "accent": "#DC3828",
+      "accentSoft": "#FFFCFB",
+      "accentText": "#790901",
+      "onAccent": "#FFFFFF",
+      "success": "#1E1E1C",
+      "danger": "#DC3828",
+      "warning": "#B8261E",
+      "paper": "#FBFAF6",
+      "body": "#2B2A25",
+      "slot": "#121210",
+      "heat": "#8A8883",
+      "stamp": "#982316"
+    },
+    "look": {
+      "tempo": 0.94
+    }
+  },
+  "tags": {
+    "mood": [
+      "일상적",
+      "정직한",
+      "또렷한",
+      "아날로그",
+      "친근한",
+      "밝은",
+      "따뜻한"
+    ],
+    "light": "light",
+    "use": [
+      "비용",
+      "가격",
+      "합계",
+      "할인",
+      "청구",
+      "사용량",
+      "비교"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "accentText": 4.5,
+      "accent": 1.8,
+      "success~danger": 0.262,
+      "success~warning": 0.191,
+      "danger~warning": 0.072,
+      "accent~ink": 0.262
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}

package/themes/receipt/variants/sand-coral-4.json

@@ -0,0 +1,90 @@
+{
+  "id": "sand-coral-4",
+  "world": "receipt",
+  "name": "Sand Coral 4",
+  "desc": "모래빛 바탕에 산호색 강조",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.7754,
+    "tint": {
+      "h": 51.2758,
+      "c": 0.0989
+    },
+    "inkL": 0.2343,
+    "hue": 26.9624,
+    "chroma": 0.7921,
+    "fonts": "base",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 1.05,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#E9A47B",
+      "surface": "#FBFAF6",
+      "raised": "#F1EEE6",
+      "line": "#D8D3C8",
+      "ink": "#1E1E1C",
+      "inkSoft": "#3A3936",
+      "dim": "#3F3C37",
+      "accent": "#D65D54",
+      "accentSoft": "#FFFFFF",
+      "accentText": "#7A2D26",
+      "onAccent": "#FFFFFF",
+      "success": "#1E1E1C",
+      "danger": "#D65D54",
+      "warning": "#B8261E",
+      "paper": "#FBFAF6",
+      "body": "#2B2A25",
+      "slot": "#121210",
+      "heat": "#8A8883",
+      "stamp": "#913B34"
+    },
+    "look": {
+      "tempo": 1.05
+    }
+  },
+  "tags": {
+    "mood": [
+      "일상적",
+      "정직한",
+      "또렷한",
+      "아날로그",
+      "친근한",
+      "밝은",
+      "따뜻한",
+      "차분한"
+    ],
+    "light": "light",
+    "use": [
+      "비용",
+      "가격",
+      "합계",
+      "할인",
+      "청구",
+      "사용량",
+      "비교"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "accentText": 4.5,
+      "accent": 1.8,
+      "success~danger": 0.325,
+      "success~warning": 0.191,
+      "danger~warning": 0.107,
+      "accent~ink": 0.325
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}

package/themes/receipt/variants/sand-coral-5.json

@@ -0,0 +1,89 @@
+{
+  "id": "sand-coral-5",
+  "world": "receipt",
+  "name": "Sand Coral 5",
+  "desc": "모래빛 바탕에 산호색 강조",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.7702,
+    "tint": {
+      "h": 55.6394,
+      "c": 0.128
+    },
+    "inkL": 0.2343,
+    "hue": 31.326,
+    "chroma": 1.0256,
+    "fonts": "base",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 1.11,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#F29D5F",
+      "surface": "#FBFAF6",
+      "raised": "#F1EEE6",
+      "line": "#D8D3C8",
+      "ink": "#1E1E1C",
+      "inkSoft": "#3A3936",
+      "dim": "#3F3C37",
+      "accent": "#E94931",
+      "accentSoft": "#FFFFFF",
+      "accentText": "#851D0C",
+      "onAccent": "#FFFFFF",
+      "success": "#1E1E1C",
+      "danger": "#E94931",
+      "warning": "#B8261E",
+      "paper": "#FBFAF6",
+      "body": "#2B2A25",
+      "slot": "#121210",
+      "heat": "#8A8883",
+      "stamp": "#9D2C19"
+    },
+    "look": {
+      "tempo": 1.11
+    }
+  },
+  "tags": {
+    "mood": [
+      "일상적",
+      "정직한",
+      "또렷한",
+      "아날로그",
+      "친근한",
+      "밝은",
+      "따뜻한"
+    ],
+    "light": "light",
+    "use": [
+      "비용",
+      "가격",
+      "합계",
+      "할인",
+      "청구",
+      "사용량",
+      "비교"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "accentText": 4.5,
+      "accent": 1.8,
+      "success~danger": 0.304,
+      "success~warning": 0.191,
+      "danger~warning": 0.111,
+      "accent~ink": 0.304
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}