kasaframe 0.1.1 → 0.1.4

package/themes/orbit-system/slots.ts

@@ -0,0 +1,174 @@
+import { clamp, ease, rand, type SceneCtx, type Style } from "@kasaframe/core";
+import { dropBurst } from "@kasaframe/motion";
+import { layer, letters, partial, strokePath, traceCanvas, type Pt } from "@kasaframe/themes/slotkit";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { stillStage, THREE } from "@kasaframe/themes/stage3d";
+import { orbitStage } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 우주 궤도의 결로 채운다. 3D 는 surface 하나, 나머지는 DOM·캔버스 2D
+const col = (ctx: SceneCtx, k: string, fb: string) => ctx.style.colors[k] ?? fb;
+const rgba = (c: string, a: number) => {
+  const h = new THREE.Color(c).getHex();
+  return `rgba(${(h >> 16) & 255},${(h >> 8) & 255},${h & 255},${a})`;
+};
+
+// 꺾은선 위 거리 d 의 자리
+function along(points: readonly Pt[], d: number): [number, number] {
+  for (let i = 1; i < points.length; i++) {
+    const [a, b] = [points[i - 1], points[i]];
+    const seg = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    if (d <= seg) return [a[0] + ((b[0] - a[0]) * d) / (seg || 1), a[1] + ((b[1] - a[1]) * d) / (seg || 1)];
+    d -= seg;
+  }
+  const last = points[points.length - 1];
+  return [last[0], last[1]];
+}
+
+export const slots: ThemeSlots = {
+  // 짙은 우주 한 장 — 서 있는 별 점과 화면 아래로 지나는 옅은 궤도선 넷(빈 행성계). 처음 한 번 그려 서 있다
+  surface(el, { ctx, seed }) {
+    const stage = orbitStage(el, { ctx, seed, shots: [{ from: -1, to: 1e9, keys: [{ t: 0, pos: [0, 7, 20], look: [0, 0.4, 0] }] }] });
+    for (const [k, r] of [6.5, 10, 14, 19].entries()) {
+      const ring = new THREE.Mesh(
+        new THREE.RingGeometry(r - 0.025, r + 0.025, 192),
+        new THREE.MeshBasicMaterial({ color: col(ctx, "orbit", "#E9DFC8"), transparent: true, opacity: 0.2 - k * 0.03, side: THREE.DoubleSide, depthWrite: false, toneMapped: false }),
+      );
+      ring.rotation.x = -Math.PI / 2;
+      ring.position.set(-3, -3.2, 2);
+      stage.scene.add(ring);
+    }
+    return stillStage(stage, stage);
+  },
+
+  // 관측 창 — 짙은 판에 가는 테, 네 귀퉁이 조준 눈금이 바깥에서 모여 들어 판을 잡고(고른 천체를 감싸는 표시) 판이 켜진다
+  panel(el, { ctx, at, tone }) {
+    const r = ctx.style.radius?.md ?? 12;
+    const accent = tone === "accent";
+    const edge = accent ? col(ctx, "accent", "#FFB547") : col(ctx, "line", "#3A3546");
+    const p = layer(el, `inset:0;border-radius:${r}px;background:${rgba(col(ctx, "surface", "#16141D"), 0.88)};border:2px solid ${edge};`, true);
+    const ticks = [0, 1, 2, 3].map((i) => {
+      const [top, left] = [i < 2, i % 2 === 0];
+      return layer(
+        el,
+        `width:26px;height:26px;${top ? "top" : "bottom"}:-8px;${left ? "left" : "right"}:-8px;border:0 solid ${col(ctx, "accent", "#FFB547")};border-${top ? "top" : "bottom"}-width:3px;border-${left ? "left" : "right"}-width:3px;`,
+      );
+    });
+    return (t) => {
+      const on = t >= at;
+      p.style.display = on ? "" : "none";
+      for (const d of ticks) d.style.display = on ? "" : "none";
+      if (!on) return;
+      const u = ease.outCubic(clamp((t - at) / 0.38));
+      p.style.opacity = String(clamp((t - at - 0.12) / 0.2));
+      ticks.forEach((d, i) => {
+        const [sx, sy] = [i % 2 === 0 ? -1 : 1, i < 2 ? -1 : 1];
+        d.style.transform = `translate(${sx * 40 * (1 - u)}px,${sy * 40 * (1 - u)}px)`;
+      });
+    };
+  },
+
+  // 궤도 진입 — 짧은 호를 그리며 미끄러져 들어와 앉고, 그 둘레로 궤도 고리 하나가 번졌다 잦아든다
+  land(el, { ctx, at }) {
+    const ring = layer(el, `left:-14%;right:-14%;top:28%;bottom:28%;border-radius:50%;border:2px solid ${col(ctx, "accent", "#FFB547")};opacity:0;`);
+    return (t): Style => {
+      const k = t - at;
+      if (k < 0 || k > 0.6) {
+        ring.style.opacity = "0";
+        return {};
+      }
+      const u = ease.outCubic(clamp(k / 0.42));
+      const a = (1 - u) * (Math.PI / 3);
+      ring.style.opacity = String(0.9 * (1 - clamp((k - 0.1) / 0.5)));
+      ring.style.transform = `scale(${0.7 + 0.5 * clamp(k / 0.6)})`;
+      return { x: -Math.sin(a) * 60, y: (1 - Math.cos(a)) * 80, scale: 0.92 + 0.08 * u };
+    };
+  },
+
+  // 별처럼 켜지는 글 — 글자마다 호박빛으로 반짝 켜졌다가 크림 글로 앉는다
+  write(el, { ctx, text, at, dur }) {
+    const ink = col(ctx, "ink", "#F4EEE2");
+    const hot = col(ctx, "accentSoft", "#FFD99A");
+    const spans = letters(el, text);
+    const n = Math.max(1, spans.length);
+    return (t) => {
+      const done = t >= at + dur;
+      spans.forEach((s, i) => {
+        const k = t - (at + (dur * i) / n);
+        s.style.opacity = done || k >= 0 ? "1" : "0";
+        const glow = done || k < 0 ? 0 : Math.exp(-k / 0.14);
+        s.style.color = glow > 0.35 ? hot : ink;
+        s.style.textShadow = glow > 0.02 ? `0 0 ${0.5 * glow}em ${rgba(col(ctx, "accent", "#FFB547"), 0.9 * glow)}` : "";
+      });
+    };
+  },
+
+  // 전이 궤도 — 점선 길이 위성 머리를 따라 그어지고, 다 그은 뒤엔 요청 위성이 꼬리를 끌며 쉬지 않고 오간다
+  trace(el, { ctx, points, at, dur, seed, tone }) {
+    const { g, clear } = traceCanvas(el, points, 40);
+    const line = tone === "accent" ? col(ctx, "accent", "#FFB547") : col(ctx, "orbit", "#E9DFC8");
+    const dot = col(ctx, "accent", "#FFB547");
+    const len = points.slice(1).reduce((s, [x, y], i) => s + Math.hypot(x - points[i][0], y - points[i][1]), 0) || 1;
+    const phase = rand(seed, 0);
+    const sat = (d: number, a: number) => {
+      const [x, y] = along(points, d);
+      g.fillStyle = rgba(dot, 0.25 * a);
+      g.beginPath();
+      g.arc(x, y, 14, 0, Math.PI * 2);
+      g.fill();
+      g.fillStyle = rgba(dot, a);
+      g.beginPath();
+      g.arc(x, y, 6, 0, Math.PI * 2);
+      g.fill();
+    };
+    return (t) => {
+      clear();
+      if (t < at) return;
+      const u = ease.inOutCubic(clamp((t - at) / Math.max(0.01, dur)));
+      g.lineCap = "round";
+      g.setLineDash([14, 10]);
+      g.lineDashOffset = -t * 40;
+      g.strokeStyle = rgba(line, 0.75);
+      g.lineWidth = 3;
+      strokePath(g, partial(points, u));
+      g.setLineDash([]);
+      if (u < 1) {
+        sat(u * len, 1);
+        return;
+      }
+      for (let j = 0; j < 2; j++) {
+        const d = ((((t - at - dur) * 0.35 + phase + j * 0.5) % 1) + 1) % 1;
+        for (let k = 6; k >= 0; k--) sat(Math.max(0, d * len - k * 9), k ? 0.12 * (7 - k) : 1);
+      }
+    };
+  },
+
+  // 드롭 — 호박빛 섬광과 함께 궤도면 충격파 고리 둘이 비스듬한 타원으로 번져 나간다
+  drop(el, { ctx, drop }) {
+    const flash = layer(el, `inset:0;background:${col(ctx, "accentSoft", "#FFD99A")};opacity:0;`);
+    const cv = document.createElement("canvas");
+    cv.width = Math.round(ctx.meta.width / 2);
+    cv.height = Math.round(ctx.meta.height / 2);
+    cv.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;";
+    el.append(cv);
+    const g = cv.getContext("2d")!;
+    const tone = col(ctx, "accentSoft", "#FFD99A");
+    return (t) => {
+      const s = dropBurst(t, { beats: ctx.beats, drop, rules: ctx.style.motion, scene: ctx.id, source: "orbit-system:drop" });
+      flash.style.opacity = String(Math.round(s.flash * 70) / 100);
+      g.clearRect(0, 0, cv.width, cv.height);
+      const k0 = t - ctx.beats.drop(drop);
+      const big = Math.max(cv.width, cv.height);
+      for (let i = 0; i < 2; i++) {
+        const k = (k0 - i * 0.14) / 1.1;
+        if (k < 0 || k >= 1) continue;
+        const r = big * (0.06 + 0.9 * ease.outCubic(k));
+        g.strokeStyle = rgba(tone, (1 - k) * (i ? 0.55 : 0.9));
+        g.lineWidth = 3 + 4 * (1 - k);
+        g.beginPath();
+        g.ellipse(cv.width / 2, cv.height * 0.55, r, r * 0.36, 0, 0, Math.PI * 2);
+        g.stroke();
+      }
+      return s;
+    };
+  },
+};

package/themes/orbit-system/style.json

@@ -0,0 +1,108 @@
+{
+  "name": "orbit-system",
+  "label": "우주 궤도 — 모델은 행성, 요청은 위성, 지연은 궤도 주기",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#0B0A10",
+    "surface": "#16141D",
+    "raised": "#211E2A",
+    "line": "#3A3546",
+    "ink": "#F4EEE2",
+    "inkSoft": "#D8CFC0",
+    "dim": "#9E95A8",
+    "accent": "#FFB547",
+    "accentSoft": "#FFD99A",
+    "accentText": "#FFC56E",
+    "onAccent": "#0B0A10",
+    "success": "#7FD8B4",
+    "danger": "#FF7A5C",
+    "warning": "#F2D16B",
+    "orbit": "#E9DFC8",
+    "night": "#2E3F73",
+    "teal": "#5FB7AE",
+    "rust": "#D9734E",
+    "sand": "#CDB98E",
+    "lilac": "#9A8FDB",
+    "ice": "#86A8DE"
+  },
+  "fonts": {
+    "sans": "\"Space Grotesk\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Space Grotesk\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"Space Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Space Grotesk",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/spacegrotesk/SpaceGrotesk%5Bwght%5D.ttf",
+        "weight": "300 700"
+      },
+      {
+        "family": "Space Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/spacemono/SpaceMono-Regular.ttf",
+        "weight": "400"
+      },
+      {
+        "family": "Space Mono",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/spacemono/SpaceMono-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": 160,
+    "title": 80,
+    "body": 40,
+    "caption": 30,
+    "weightDisplay": 700,
+    "weightBody": 500,
+    "tracking": "-0.01em"
+  },
+  "radius": {
+    "sm": 6,
+    "md": 12,
+    "lg": 20,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 8
+    },
+    "cameraMove": "free",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "enter": "fade",
+    "ease": "outCubic",
+    "durations": {
+      "fast": 0.12,
+      "base": 0.35,
+      "slow": 0.8
+    }
+  },
+  "theme": {
+    "inks": [
+      "#0B0A10 짙은 우주(보라 기운 검정)",
+      "#F4EEE2 크림 글·궤도선",
+      "#FFB547 별빛 호박(강조 — 게이트웨이 별과 위성)",
+      "행성 다섯 흙빛(teal·rust·sand·lilac·ice) — 채도 낮게, 별 쪽 반만 밝다"
+    ],
+    "texture": "매트한 행성 공(띠 무늬만, 사진 텍스처 없음), 머리카락처럼 가는 크림 궤도선, 서 있는 별 점, 별 둘레 호박 빛무리",
+    "movement": "행성은 제 궤도를 쉬지 않고 돈다 — 안쪽이 빠르다(주기 = 지연). 위성은 쏘아 올려 궤도에 들고 짧은 꼬리를 끈다. 박마다 행성이 떠오르거나 위성이 궤도에 들거나 전이 궤도로 옮겨 간다. 카메라는 박에 맞춘 키로만 다가가고 물러나며 그 사이엔 선다. 마디마다 다른 행성계로 컷"
+  },
+  "notes": [
+    "출처: orrery.live(JPL 오러리), orbitview.world(위성 궤도 콘솔), tinytovast.com/earth-satellites(위성 껍질).",
+    "빛은 중심 별 하나 — 행성의 밤 반구가 그래서 생기고, 밤 반구는 싼 시간대를 뜻한다. 별 점은 서 있다."
+  ]
+}

package/themes/orbit-system/theme.json

@@ -0,0 +1,142 @@
+{
+  "id": "orbit-system",
+  "name": "우주 궤도",
+  "metaphor": "모델은 게이트웨이 별을 도는 행성, 요청은 그 둘레를 도는 위성이 되어 화면이 돈다 — 빠른 모델일수록 안쪽에서 짧은 주기로 돈다",
+  "status": "approved",
+  "approvedAt": "2026-10-11",
+  "purposes": [
+    "explainer",
+    "promo",
+    "launch",
+    "shorts",
+    "square"
+  ],
+  "aspect": [
+    "16:9",
+    "9:16"
+  ],
+  "vary": {
+    "scheme": [
+      "dark"
+    ],
+    "hue": [
+      [
+        20,
+        75
+      ],
+      [
+        175,
+        225
+      ],
+      [
+        280,
+        335
+      ]
+    ],
+    "chroma": [
+      0.8,
+      1.15
+    ],
+    "tint": [
+      0,
+      0.03
+    ],
+    "fonts": [
+      "base",
+      "space-mono",
+      "orbit",
+      "plex",
+      "suit",
+      "pretendard-geist"
+    ],
+    "texture": [
+      "none",
+      "grain"
+    ],
+    "tempo": [
+      0.9,
+      1.15
+    ]
+  },
+  "tags": {
+    "mood": [
+      "우주",
+      "차분한",
+      "미래적",
+      "신비로운"
+    ],
+    "light": "dark",
+    "use": [
+      "게이트웨이",
+      "라우팅",
+      "지연 비교",
+      "시간대 가격",
+      "캐시",
+      "인프라",
+      "설명"
+    ],
+    "dims": "3D"
+  },
+  "effects": [
+    {
+      "name": "orbitStage",
+      "kind": "layer",
+      "does": "궤도 무대 — 짙은 우주, 서 있는 별 점, 밤 반구를 남색으로 살리는 옅은 환경광. 카메라는 궤도면을 비스듬히 내려다보고 박에 맞춘 키로만 다가가고 물러난다(key 면 별 없는 세트용 먼 별빛)",
+      "use": "const stage = orbitStage(root, { ctx, shots: [{ from: 0, to: 1.4, keys: [{ t: 0, pos: [0, 12, 24], look: [0, -0.4, 0] }, { t: b[2], pos: [0, 8.6, 17], look: [0, 0.3, 0], ease: \"outCubic\" }] }] })"
+    },
+    {
+      "name": "gatewayStar",
+      "kind": "rig",
+      "does": "게이트웨이 별 = 한 주소 — 모든 궤도의 중심. 요청이 닿는 박(pulse)마다 빛무리가 부풀었다 잦아들고, 행성의 낮·밤을 가르는 빛을 낸다. shapes 면 로고가 별 자리에서 빛난다",
+      "use": "stage.add(gatewayStar(stage, { ctx, pos: [0, 0, 0], radius: 1.1, at: 0, pulse: arrivals }))"
+    },
+    {
+      "name": "modelPlanet",
+      "kind": "rig",
+      "does": "행성 = 모델 — 별 둘레 제 궤도를 쉬지 않고 돈다(period = 지연, 짧을수록 빠르다). at 에 궤도선이 한 바퀴 그어지고 공이 톡 떠오른다, 별 쪽 반만 밝다. where(t) 로 위성·글자판이 따라간다",
+      "use": "const p = modelPlanet(stage, { ctx, center: [0, 0, 0], orbit: 4, size: 0.5, period: 3, tone: \"teal\", at, label: \"OpenAI 41\" }); stage.add(p)"
+    },
+    {
+      "name": "requestSats",
+      "kind": "rig",
+      "does": "위성 = 요청 — 천체 곁에서 쏘아 올려 궤도에 들고 짧은 꼬리를 끌며 돈다(한 바퀴 = 한 번 왕복). 바깥 궤도는 케플러대로 느리다, 많으면 기운 궤도들이 껍질이 된다",
+      "use": "stage.add(requestSats(stage, { ctx, around: p.where, count: 12, radius: [0.9, 1.4], period: 0.9, at, spread: 0.4 }))"
+    },
+    {
+      "name": "transferArc",
+      "kind": "rig",
+      "does": "궤도 전이 = 라우팅·폴백 — 위성 하나가 휜 전이 궤도로 from 에서 to 로 옮겨 가고 지나온 길이 점선으로 남았다 잦아든다. label 이면 그 요청 이름이 위성을 따라간다",
+      "use": "stage.add(transferArc(stage, { ctx, from: p.where, to: [0, 0, 0], at: b[1] - 0.3, dur: 0.3, label: \"/v1/messages\" }))"
+    },
+    {
+      "name": "nightPrice",
+      "kind": "rig",
+      "does": "하루 고리 = 시간대 비용 — 자전하는 행성을 24 시 막대가 시계처럼 두르고(길이 = 값), 별 반대쪽 밤 반구에 든 창의 막대가 fall 에 off 만큼 쑥 줄어든다. hour(h) 로 시각 글자판 자리",
+      "use": "const day = nightPrice(stage, { ctx, pos: [0, 0, 0], at: 0, fall: b[2], window: [0, 10], off: 0.9 }); stage.add(day)"
+    },
+    {
+      "name": "cacheRing",
+      "kind": "rig",
+      "does": "고리 = 캐시 — 행성이 두른 알갱이 고리에 지난 문맥이 쌓인다(안쪽이 빨리 돈다). squeeze 면 고리 폭이 by 배로 좁아진다 — 캐시 압축",
+      "use": "stage.add(cacheRing(stage, { ctx, around: p.where, inner: 1.2, outer: 2.6, at: 0, squeeze: { at: b[3], by: 57 } }))"
+    },
+    {
+      "name": "modelBelt",
+      "kind": "rig",
+      "does": "행성대 = 모델 목록 — 작은 행성 count 개가 한 궤도면에 하나씩 떠올라 돈다. shown(t) 가 떠오른 수라 화면 숫자와 점이 같은 값을 센다",
+      "use": "const belt = modelBelt(stage, { ctx, center: [0, 0, 0], count: 102, radius: [2.8, 10], period: 2.2, at: 0, dur: 1.3 }); stage.add(belt)"
+    },
+    {
+      "name": "starFlare",
+      "kind": "rig",
+      "does": "드롭 — 별이 터지듯 빛나고 궤도면을 따라 충격파 고리 둘이 번져 나간다, 섬광·흔들림(dropBurst)",
+      "use": "stage.add(starFlare(stage, { ctx, pos: [0, 0, 0], drop: 0 }))"
+    },
+    {
+      "name": "bodyTag",
+      "kind": "rig",
+      "does": "글자판 — 천체 곁에 떠서 늘 카메라를 보고 화면 px 크기를 지킨다(오러리 이름표). text 가 함수면 매 프레임 다시 칠한다, tick 은 범례 눈금 색",
+      "use": "stage.add(bodyTag(stage, { ctx, text: \"apis.opengateway.ai/v1\", on: [0, 2.6, 0], px: 76, at: 0.05, font: \"mono\" }))"
+    }
+  ]
+}

package/themes/orbit-system/variants/cocoa-amber.json

@@ -0,0 +1,122 @@
+{
+  "id": "cocoa-amber",
+  "world": "orbit-system",
+  "name": "Cocoa Amber",
+  "desc": "코코아빛 바탕에 호박색 강조 · 또렷한 기하 고딕",
+  "params": {
+    "scheme": "dark",
+    "bgL": 0.2195,
+    "tint": {
+      "h": 58.4604,
+      "c": 0.0502
+    },
+    "inkL": 0.9505,
+    "hue": 60.1159,
+    "chroma": 0.9929,
+    "fonts": "suit",
+    "texture": {
+      "kind": "none",
+      "amount": 0
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 0.91,
+    "density": 1
+  },
+  "style": {
+    "scheme": "dark",
+    "colors": {
+      "bg": "#2B1401",
+      "surface": "#371E0E",
+      "raised": "#41281C",
+      "line": "#5A3F38",
+      "ink": "#FFECCE",
+      "inkSoft": "#E9CEA7",
+      "dim": "#B59994",
+      "accent": "#FFB87C",
+      "accentSoft": "#FFD9B3",
+      "accentText": "#FFC694",
+      "onAccent": "#2B1401",
+      "success": "#7FD8B4",
+      "danger": "#FF7A5C",
+      "warning": "#F2D16B",
+      "orbit": "#F8DDAE",
+      "night": "#2B5181",
+      "teal": "#6EBDA7",
+      "rust": "#E3776C",
+      "sand": "#D8BA94",
+      "lilac": "#909CE6",
+      "ice": "#7FB3E1"
+    },
+    "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": {
+      "tempo": 0.91
+    }
+  },
+  "tags": {
+    "mood": [
+      "우주",
+      "차분한",
+      "미래적",
+      "신비로운",
+      "어두운",
+      "따뜻한"
+    ],
+    "light": "dark",
+    "use": [
+      "게이트웨이",
+      "라우팅",
+      "지연 비교",
+      "시간대 가격",
+      "캐시",
+      "인프라",
+      "설명"
+    ],
+    "dims": "3D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 15.1,
+      "inkSoft": 11.59,
+      "dim": 6.63,
+      "accentText": 11.47,
+      "accent": 10.3,
+      "onAccent": 10.3,
+      "success~danger": 0.115,
+      "success~warning": 0.094,
+      "danger~warning": 0.136,
+      "accent~danger": 0.102,
+      "accent~ink": 0.124
+    },
+    "frame": "kf check 통과 — 끝 구간 3.183–4초(입체라 가볍게)·끝 프레임 한 장",
+    "pattern": "hook-number.counter"
+  }
+}

package/themes/orbit-system/variants/cocoa-coral.json

@@ -0,0 +1,127 @@
+{
+  "id": "cocoa-coral",
+  "world": "orbit-system",
+  "name": "Cocoa Coral",
+  "desc": "코코아빛 바탕에 산호색 강조 · 깔끔한 제품 소개체 · 고운 필름 입자",
+  "params": {
+    "scheme": "dark",
+    "bgL": 0.2134,
+    "tint": {
+      "h": 56.8993,
+      "c": 0.0325
+    },
+    "inkL": 0.9598,
+    "hue": 31.3129,
+    "chroma": 0.9811,
+    "fonts": "pretendard-geist",
+    "texture": {
+      "kind": "grain",
+      "amount": 0.55
+    },
+    "stroke": 1,
+    "radius": null,
+    "tempo": 1.04,
+    "density": 1
+  },
+  "style": {
+    "scheme": "dark",
+    "colors": {
+      "bg": "#241509",
+      "surface": "#301F17",
+      "raised": "#3B2924",
+      "line": "#53403F",
+      "ink": "#FFF0D5",
+      "inkSoft": "#E7D2B1",
+      "dim": "#B19C9D",
+      "accent": "#FFB7A9",
+      "accentSoft": "#FFDACE",
+      "accentText": "#FFC6B8",
+      "onAccent": "#241509",
+      "success": "#7FD8B4",
+      "danger": "#FF7A5C",
+      "warning": "#F2D16B",
+      "orbit": "#F7E1B8",
+      "night": "#005872",
+      "teal": "#8CBC8C",
+      "rust": "#DE769C",
+      "sand": "#E4B6A2",
+      "lilac": "#6AA9E4",
+      "ice": "#6ABCD2"
+    },
+    "fonts": {
+      "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+      "display": "Geist, \"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": "Pretendard Variable",
+          "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+          "weight": "45 920"
+        },
+        {
+          "family": "Geist",
+          "src": "https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2",
+          "weight": "100 900"
+        },
+        {
+          "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": 700,
+      "weightBody": 500,
+      "tracking": "-0.02em"
+    },
+    "look": {
+      "texture": {
+        "kind": "grain",
+        "amount": 0.55
+      },
+      "tempo": 1.04
+    }
+  },
+  "tags": {
+    "mood": [
+      "우주",
+      "차분한",
+      "미래적",
+      "신비로운",
+      "어두운",
+      "따뜻한",
+      "아날로그"
+    ],
+    "light": "dark",
+    "use": [
+      "게이트웨이",
+      "라우팅",
+      "지연 비교",
+      "시간대 가격",
+      "캐시",
+      "인프라",
+      "설명"
+    ],
+    "dims": "3D"
+  },
+  "check": {
+    "ok": true,
+    "at": "2026-10-12",
+    "colors": {
+      "ink": 15.71,
+      "inkSoft": 12.02,
+      "dim": 6.82,
+      "accentText": 11.81,
+      "accent": 10.58,
+      "onAccent": 10.58,
+      "success~danger": 0.115,
+      "success~warning": 0.094,
+      "danger~warning": 0.136,
+      "accent~danger": 0.119,
+      "accent~ink": 0.115
+    },
+    "frame": "kf check 통과 — 끝 구간 3.183–4초(입체라 가볍게)·끝 프레임 한 장",
+    "pattern": "hook-number.counter"
+  }
+}