kasaframe 0.1.3 → 0.1.5

package/themes/lab-notebook/slots.ts

@@ -0,0 +1,75 @@
+import { clamp, ease, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { cssVar, layer, letters, partial, shownCount, traceCanvas } from "@kasaframe/themes/slotkit";
+import { gridPaper, resultStamp } from "./effects.ts";
+import { handPath, strokeHand } from "./kit.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 실험 노트 한 쪽의 결로. 펜으로 쓰고, 자 대고 긋고, 출력물을 테이프로 붙인다
+export const slots: ThemeSlots = {
+  surface(el, { ctx }) {
+    return gridPaper(el, { ctx });
+  },
+
+  // 붙인 출력물 — 흰 종이가 위에서 내려와 놓이고 위 두 모서리에 테이프. 강조 판은 빨간 펜 테
+  panel(el, { at, tone, seed }) {
+    const box = layer(el, `inset:0;background:var(--kf-print, var(--kf-surface));box-shadow:0 2px 0 var(--kf-raised), 6px 10px 18px rgba(30,30,40,0.16);${tone === "accent" ? "outline:4px solid var(--kf-accent);outline-offset:6px;" : ""}`, true);
+    const tilt = ((seed.length % 5) - 2) * 0.4;
+    const tapes = [0, 1].map((k) =>
+      layer(box, `top:-18px;${k ? "right" : "left"}:-26px;width:120px;height:40px;background:var(--kf-tape, #E3D3A4);opacity:0.82;transform:rotate(${k ? 36 : -36}deg)`),
+    );
+    return (t) => {
+      const p = ease.outCubic(clamp((t - at) / 0.2));
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      box.style.transform = `translateY(${((1 - p) * -40).toFixed(1)}px) rotate(${tilt.toFixed(2)}deg)`;
+      tapes.forEach((s, k) => (s.style.visibility = t >= at + 0.18 + k * 0.08 ? "visible" : "hidden"));
+    };
+  },
+
+  // 적어 넣은 값에 펜을 꾹 — 아주 조금 눌렸다 선다
+  land(_el, { at }) {
+    return (t): Style => {
+      if (t < at) return {};
+      const k = t - at;
+      return k < 0.12 ? { y: 3 * (1 - k / 0.12), scale: 1 + 0.03 * (1 - k / 0.12) } : {};
+    };
+  },
+
+  // 펜 글씨 — 한 자씩, 쓰는 중인 글자는 잉크가 덜 말라 진하게
+  write(el, { text, at, dur }) {
+    const spans = letters(el, text);
+    return (t) => {
+      const n = shownCount(spans.length, t, at, dur);
+      const writing = t >= at && t < at + dur;
+      spans.forEach((s, i) => {
+        s.style.visibility = i < n ? "visible" : "hidden";
+        s.style.textShadow = writing && i === n - 1 ? "0 0 1px currentColor" : "";
+      });
+    };
+  },
+
+  // 손으로 긋는 선 — 연필로 흔들리며 그어지고, 다 그은 뒤엔 빨간 펜 점이 선을 따라 짚어 간다
+  trace(el, { points, at, dur, tone, seed }) {
+    const { g, clear } = traceCanvas(el, points, 24);
+    const path = handPath(points.map((p) => [p[0], p[1]]), { seed, wobble: 2 });
+    const ink = tone === "accent" ? cssVar(el, "accent", "#C81E2B") : cssVar(el, "pencil", cssVar(el, "dim", "#5B6070"));
+    const red = cssVar(el, "accent", "#C81E2B");
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      strokeHand(g, path, p, { color: ink, width: 4 });
+      if (p < 1) return;
+      const k = ((t - at - dur) / 1.1) % 1;
+      const [x, y] = partial(points, k).at(-1)!;
+      g.fillStyle = red;
+      g.beginPath();
+      g.arc(x, y, 7, 0, Math.PI * 2);
+      g.fill();
+    };
+  },
+
+  // 드롭 — 화면 가운데 빨간 「확인」 도장이 쾅
+  drop(el, { ctx, drop }) {
+    return resultStamp(el, { ctx, drop, x: ctx.meta.width * 0.78, y: ctx.meta.height * 0.2, text: "확인", size: Math.round(Math.min(ctx.meta.width, ctx.meta.height) * 0.09), rot: -10 });
+  },
+};

package/themes/lab-notebook/style.json

@@ -0,0 +1,109 @@
+{
+  "name": "lab-notebook",
+  "label": "실험 노트 — 요청 한 번이 시행 한 줄",
+  "scheme": "light",
+  "colors": {
+    "bg": "#F4F0E5",
+    "surface": "#FFFFFF",
+    "raised": "#E6DFCD",
+    "line": "#A9C3DB",
+    "ink": "#1E3270",
+    "inkSoft": "#34467E",
+    "dim": "#5B6070",
+    "accent": "#C81E2B",
+    "accentSoft": "#F2C4C4",
+    "accentText": "#B3121F",
+    "onAccent": "#FFFFFF",
+    "success": "#2F7D4A",
+    "danger": "#C81E2B",
+    "warning": "#A86A12",
+    "grid": "#D3E1EE",
+    "gridBold": "#B4CBE0",
+    "margin": "#E3A0A0",
+    "pencil": "#5B6070",
+    "tape": "#E3D3A4",
+    "highlight": "#FFE45C",
+    "print": "#FFFFFF",
+    "printInk": "#222222"
+  },
+  "fonts": {
+    "sans": "Gaegu, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Nanum Pen Script\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Courier Prime\", ui-monospace, \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Nanum Pen Script",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/nanumpenscript/NanumPenScript-Regular.ttf",
+        "weight": "100 900"
+      },
+      {
+        "family": "Gaegu",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/gaegu/Gaegu-Bold.ttf",
+        "weight": "100 900"
+      },
+      {
+        "family": "Courier Prime",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/courierprime/CourierPrime-Regular.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"
+      }
+    ]
+  },
+  "type": {
+    "hero": 220,
+    "title": 104,
+    "body": 48,
+    "caption": 36,
+    "weightDisplay": 400,
+    "weightBody": 400,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 2,
+    "md": 3,
+    "lg": 4,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "0 2px 0 #E6DFCD, 6px 10px 18px rgba(30,30,40,0.16)",
+    "lift": "0 2px 0 #E6DFCD, 10px 16px 26px rgba(30,30,40,0.2)"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 10
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "outCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.25,
+      "slow": 0.5
+    }
+  },
+  "theme": {
+    "inks": [
+      "#F4F0E5 노트 종이 · #D3E1EE 모눈(5mm) · #E3A0A0 여백 줄",
+      "#1E3270 파란 볼펜(적는 글) · #5B6070 연필(자 대고 그은 선·메모) · #C81E2B 빨간 펜(고친 값·결과·동그라미)",
+      "#FFFFFF 출력물 · #E3D3A4 마스킹 테이프 · #FFE45C 형광펜"
+    ],
+    "texture": "모눈 종이 위 손글씨(나눔손글씨 펜), 붙인 출력물은 흰 종이에 고정폭 글(Courier Prime)과 얇은 그림자, 모서리에 반투명 테이프. 틀린 값은 지우지 않고 두 줄 긋기",
+    "movement": "글은 펜 끝을 따라 왼쪽부터 드러나고(초당 18자 안팎), 선은 자를 대고 긋거나 손으로 돌린다. 출력물은 위에서 내려와 놓이고 테이프가 차례로 붙는다. 드롭은 빨간 도장 한 번"
+  },
+  "notes": [
+    "요청 한 번 = 시행 한 줄(No.), 모델 = 시료, 한 주소 = 장치 하나 — 아래 줄은 같음표로 「같은 장치」.",
+    "손글씨는 Nanum Pen Script·Gaegu(OFL), 출력물은 Courier Prime(OFL), 한글 대체는 Pretendard.",
+    "카메라 없음 — 노트는 책상에 펼쳐져 있다. 쪽을 넘기면 새 구도."
+  ]
+}

package/themes/lab-notebook/theme.json

@@ -0,0 +1,142 @@
+{
+  "id": "lab-notebook",
+  "name": "실험 노트",
+  "metaphor": "요청 한 번이 실험 한 번이 되어 노트 한 쪽에 적힌다 — 시료(모델)를 같은 장치(한 주소)에 넣은 시행이 손으로 적히고, 측정값은 테이프로 붙이고, 틀린 값은 줄을 그어 고쳐 쓴다",
+  "status": "approved",
+  "approvedAt": "2026-10-11",
+  "purposes": [
+    "explainer",
+    "shorts",
+    "promo",
+    "square"
+  ],
+  "aspect": [
+    "16:9",
+    "9:16",
+    "1:1"
+  ],
+  "vary": {
+    "scheme": [
+      "light"
+    ],
+    "hue": [
+      [
+        0,
+        45
+      ]
+    ],
+    "chroma": [
+      0.8,
+      1.1
+    ],
+    "tint": [
+      0.004,
+      0.022
+    ],
+    "bg": {
+      "light": [
+        0.92,
+        0.985
+      ]
+    },
+    "fonts": [
+      "base",
+      "gowun-dodum",
+      "tag:hand"
+    ],
+    "texture": [
+      "none",
+      "grain"
+    ],
+    "stroke": [
+      0.85,
+      1.3
+    ],
+    "tempo": [
+      0.9,
+      1.15
+    ]
+  },
+  "tags": {
+    "mood": [
+      "손맛",
+      "꼼꼼한",
+      "지적인",
+      "정직한",
+      "아날로그"
+    ],
+    "light": "light",
+    "use": [
+      "실험",
+      "벤치마크",
+      "측정",
+      "비교",
+      "기록",
+      "검증",
+      "설명"
+    ],
+    "dims": "2D"
+  },
+  "effects": [
+    {
+      "name": "gridPaper",
+      "kind": "layer",
+      "does": "모눈 노트 종이 — 5mm 파란 칸, 다섯 칸마다 진한 줄, 왼쪽 빨간 여백 줄. 서 있다",
+      "use": "const paper = gridPaper(layer, { ctx })"
+    },
+    {
+      "name": "penWrite",
+      "kind": "layer",
+      "does": "펜 글씨 — 펜 끝을 따라 왼쪽부터 드러나고 펜촉 점이 앞서 간다, 줄마다 조금 기운다(손글씨 글꼴)",
+      "use": "const title = penWrite(el, { ctx, text: \"공급처 · 모델 수\", x: 200, y: 128, size: 104, at: 0.06, dur: 0.4 })"
+    },
+    {
+      "name": "ruleLine",
+      "kind": "layer",
+      "does": "자 대고 긋는 선 — 꺾은선을 앞에서부터 dur 초에 긋는다(표 칸·밑줄·상자), hand 면 손으로 긋듯 흔들린다",
+      "use": "const rule = ruleLine(el, { ctx, points: [[200, 316], [1700, 316]], at: 1.45, dur: 0.2 })"
+    },
+    {
+      "name": "strikeFix",
+      "kind": "layer",
+      "does": "고쳐 쓰기 — 틀린 값에 두 줄을 긋고 빨간 펜으로 옆에 맞는 값을 쓴다, 지우지 않는다",
+      "use": "const fix = strikeFix(el, { ctx, x: 520, y: 362, w: 230, at: 3.19, fix: \"$0.03\", fixX: 840, fixY: 290, size: 112 })"
+    },
+    {
+      "name": "penTrack",
+      "kind": "layer",
+      "does": "쓰는 펜 — 볼펜 한 자루가 penWrite·ruleLine·strikeFix·arrowNote 가 내보낸 획을 차례로 따라가고(글씨면 펜촉이 오르내린다), 획 사이엔 들어 올려 다음 자리로 옮긴다. 노트에서 쉬지 않는 몫",
+      "use": "const pen = penTrack(layer(root), { ctx, from: [title, row1, rule] })  // 맨 위 층, 장면 끝에 pen(t)"
+    },
+    {
+      "name": "highlighter",
+      "kind": "layer",
+      "does": "형광펜 — 노란 띠가 왼쪽부터 칠해진다(곱하기라 아래 글이 비친다), 가장자리가 조금 거칠다",
+      "use": "const hl = highlighter(el, { ctx, x: 226, y: 294, w: 420, h: 62, at: 2.76 })"
+    },
+    {
+      "name": "tapeOn",
+      "kind": "layer",
+      "does": "출력물 붙이기 — 흰 출력 종이가 위에서 내려와 놓이고 마스킹 테이프 두 조각이 모서리에 차례로 붙는다, 안은 build 로 짓는다",
+      "use": "const sheet = tapeOn(el, { ctx, x: 920, y: 280, w: 840, h: 640, at: 1.7, build: (card) => plotPoints(card, { … }) })"
+    },
+    {
+      "name": "plotPoints",
+      "kind": "layer",
+      "does": "출력 그래프 — 축·눈금이 찍혀 있고 점이 하나씩 동그라미로 찍히며 선(또는 계단)이 이어진다, 점 옆에 값",
+      "use": "const plot = plotPoints(card, { ctx, x: 80, y: 100, w: 960, h: 400, points, xMax: 24, yMax: 0.33, at: 1.7, line: \"step\" })"
+    },
+    {
+      "name": "arrowNote",
+      "kind": "layer",
+      "does": "여백 메모 — 손으로 그은 휜 화살표가 메모에서 짚을 곳으로 뻗고 메모 글이 빨간 펜으로 적힌다",
+      "use": "const note = arrowNote(el, { ctx, from: [1560, 520], to: [800, 710], text: \"-90%\", textAt: [1480, 420], at: 2.48 })"
+    },
+    {
+      "name": "resultStamp",
+      "kind": "layer",
+      "does": "드롭 — 빨간 고무 도장이 드롭 박에 쾅 찍혀 앉는다(이중 테·잉크 덜 묻은 결), 흔들림·튐을 돌려준다",
+      "use": "const s = stamp(t); applyStyle(content, s.shake)  // stamp = resultStamp(el, { ctx, drop: 0, x: 960, y: 430, text: \"102\", size: 280 })"
+    }
+  ]
+}

package/themes/lab-notebook/variants/blush-orange.json

@@ -0,0 +1,125 @@
+{
+  "id": "blush-orange",
+  "world": "lab-notebook",
+  "name": "Blush Orange",
+  "desc": "연분홍 바탕에 주황 강조 · 손맛 나는 부드러운 돋움",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9724,
+    "tint": {
+      "h": 30.7715,
+      "c": 0.0175
+    },
+    "inkL": 0.214,
+    "hue": 44.6133,
+    "chroma": 0.9187,
+    "fonts": "gowun-dodum",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 0.9,
+    "radius": null,
+    "tempo": 1.13,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#FFF3F0",
+      "surface": "#FFFFFF",
+      "raised": "#EFDDD3",
+      "line": "#AEBAD5",
+      "ink": "#190944",
+      "inkSoft": "#2D2356",
+      "dim": "#46455B",
+      "accent": "#8F3800",
+      "accentSoft": "#EDC5B9",
+      "accentText": "#762E00",
+      "onAccent": "#FFFFFF",
+      "success": "#2F7D4A",
+      "danger": "#8F3800",
+      "warning": "#A86A12",
+      "grid": "#DCDFF4",
+      "gridBold": "#B8C4E1",
+      "margin": "#D69D8A",
+      "pencil": "#46455B",
+      "tape": "#D3D7AB",
+      "highlight": "#DEF381",
+      "print": "#FFFFFF",
+      "printInk": "#050307"
+    },
+    "fonts": {
+      "sans": "\"Gowun Dodum\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"Gowun Dodum\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"JetBrains Mono\", ui-monospace, \"Gowun Dodum\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Gowun Dodum",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/gowundodum/GowunDodum-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.3.0/files/jetbrains-mono-latin-wght-normal.woff2",
+          "weight": "100 800"
+        }
+      ]
+    },
+    "type": {
+      "weightDisplay": 400,
+      "weightBody": 400,
+      "tracking": "-0.01em"
+    },
+    "look": {
+      "stroke": 0.9,
+      "tempo": 1.13
+    }
+  },
+  "tags": {
+    "mood": [
+      "손맛",
+      "꼼꼼한",
+      "지적인",
+      "정직한",
+      "아날로그",
+      "밝은",
+      "따뜻한",
+      "귀여운"
+    ],
+    "light": "light",
+    "use": [
+      "실험",
+      "벤치마크",
+      "측정",
+      "비교",
+      "기록",
+      "검증",
+      "설명"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 16.56,
+      "inkSoft": 12.94,
+      "dim": 8.55,
+      "accentText": 8.94,
+      "accent": 7.05,
+      "onAccent": 7.66,
+      "success~danger": 0.08,
+      "success~warning": 0.05,
+      "danger~warning": 0.122,
+      "accent~ink": 0.242
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}

package/themes/lab-notebook/variants/chalk-coral.json

@@ -0,0 +1,126 @@
+{
+  "id": "chalk-coral",
+  "world": "lab-notebook",
+  "name": "Chalk Coral",
+  "desc": "분필빛 바탕에 산호색 강조 · 손맛 나는 부드러운 돋움",
+  "params": {
+    "scheme": "light",
+    "bgL": 0.9318,
+    "tint": {
+      "h": 221.9398,
+      "c": 0.011
+    },
+    "inkL": 0.3396,
+    "hue": 31.7879,
+    "chroma": 0.8132,
+    "fonts": "gowun-dodum",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 0.92,
+    "radius": null,
+    "tempo": 0.95,
+    "density": 1
+  },
+  "style": {
+    "scheme": "light",
+    "colors": {
+      "bg": "#E1EAEE",
+      "surface": "#F1F8FF",
+      "raised": "#D4DAD6",
+      "line": "#AABCD1",
+      "ink": "#2A3265",
+      "inkSoft": "#3E4573",
+      "dim": "#525F7A",
+      "accent": "#B73B27",
+      "accentSoft": "#E6C1BD",
+      "accentText": "#A4311C",
+      "onAccent": "#F1F8FF",
+      "success": "#2F7D4A",
+      "danger": "#B73B27",
+      "warning": "#A86A12",
+      "grid": "#C1DBF6",
+      "gridBold": "#A3C6E8",
+      "margin": "#D6A099",
+      "pencil": "#525F7A",
+      "tape": "#D5CEA8",
+      "highlight": "#E8E17A",
+      "print": "#F1F8FF",
+      "printInk": "#1D232C"
+    },
+    "fonts": {
+      "sans": "\"Gowun Dodum\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "\"Gowun Dodum\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "mono": "\"JetBrains Mono\", ui-monospace, \"Gowun Dodum\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+      "faces": [
+        {
+          "family": "Gowun Dodum",
+          "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/gowundodum/GowunDodum-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.3.0/files/jetbrains-mono-latin-wght-normal.woff2",
+          "weight": "100 800"
+        }
+      ]
+    },
+    "type": {
+      "weightDisplay": 400,
+      "weightBody": 400,
+      "tracking": "-0.01em"
+    },
+    "look": {
+      "stroke": 0.92,
+      "tempo": 0.95
+    }
+  },
+  "tags": {
+    "mood": [
+      "손맛",
+      "꼼꼼한",
+      "지적인",
+      "정직한",
+      "아날로그",
+      "밝은",
+      "따뜻한",
+      "차분한",
+      "귀여운"
+    ],
+    "light": "light",
+    "use": [
+      "실험",
+      "벤치마크",
+      "측정",
+      "비교",
+      "기록",
+      "검증",
+      "설명"
+    ],
+    "dims": "2D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 9.85,
+      "inkSoft": 7.5,
+      "dim": 5.27,
+      "accentText": 5.7,
+      "accent": 4.72,
+      "onAccent": 5.35,
+      "success~danger": 0.054,
+      "success~warning": 0.05,
+      "danger~warning": 0.049,
+      "accent~ink": 0.185
+    },
+    "frame": "kf check 통과 — 표준 장면 0–4초",
+    "pattern": "hook-number.roll"
+  }
+}