kasaframe 0.1.3 → 0.1.5

package/themes/neon-sign/sample/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <title>neon-sign 견본</title>
+  </head>
+  <body>
+    <div id="stage"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/themes/neon-sign/sample/kf.json

@@ -0,0 +1,59 @@
+{
+  "template": "promo",
+  "title": "neon-sign · OpenGateway 소개 15초",
+  "theme": "neon-sign",
+  "fps": 60,
+  "width": 1920,
+  "height": 1080,
+  "duration": 15,
+  "mode": "seek",
+  "style": "style.json",
+  "music": "assets/music/kawaii-friends-0400.mp3",
+  "beats": "beats.json",
+  "captions": "none",
+  "safeArea": {
+    "top": 60,
+    "bottom": 60,
+    "left": 80,
+    "right": 80
+  },
+  "text": {
+    "policy": "terms-only",
+    "maxOnScreen": 0,
+    "minPx": 0
+  },
+  "scenes": [
+    {
+      "id": "gather",
+      "from": 0,
+      "dur": 3.1169,
+      "file": "scenes/gather.ts",
+      "role": "hook",
+      "idea": "여러 회사 모델이 흩어져 있다 → 회사별 모델 수"
+    },
+    {
+      "id": "models",
+      "from": 3.1169,
+      "dur": 4.2191,
+      "file": "scenes/models.ts",
+      "role": "explain",
+      "idea": "한 주소(https://apis.opengateway.ai/v1) → 박마다 바뀌는 모델 ID 가 같은 주소로 → 드롭 앞 모아 올리기"
+    },
+    {
+      "id": "price",
+      "from": 7.336,
+      "dur": 4.2388,
+      "file": "scenes/price.ts",
+      "role": "drop",
+      "idea": "드롭에 가장 크게 102 · 한 주소 → 하루 시계에서 00–10시 창이 -90% → deepseek 가격"
+    },
+    {
+      "id": "end",
+      "from": 11.5748,
+      "dur": 3.4252,
+      "file": "scenes/end.ts",
+      "role": "end",
+      "idea": "첫 토큰 실측 셋 → 끝 카드(OG 로고 · opengateway.ai)"
+    }
+  ]
+}

package/themes/neon-sign/sample/lib/facts.ts

@@ -0,0 +1,29 @@
+// OpenGateway 사실 — docs/briefs/og-intro-15s.md 에 적힌 것만. 숫자를 여기서 새로 만들지 않는다
+export const OG = {
+  url: "https://apis.opengateway.ai/v1",
+  host: "apis.opengateway.ai/v1",
+  site: "opengateway.ai",
+  models: 102,
+  endpoints: ["/chat/completions", "/responses", "/messages", "/images/generations"],
+  providers: [
+    ["OpenAI", 41],
+    ["Anthropic", 15],
+    ["Google", 15],
+    ["Z.ai", 7],
+    ["xAI", 6],
+    ["Qwen", 5],
+    ["Moonshot", 4],
+    ["DeepSeek", 4],
+    ["MiniMax", 3],
+  ] as [string, number][],
+  ids: ["openai/gpt-6.1-sol", "anthropic/claude-opus-5-5", "google/gemini-3.5-flash-lite", "deepseek/deepseek-v4.1-flash-ultrafast", "z-ai/glm-5.3-flash-ultrafast"],
+  night: { from: 0, to: 10, tz: "KST" },
+  deepseek: { id: "deepseek-v4.1-flash-ultrafast", input: ["$0.30", "$0.03"], output: ["$1.20", "$0.12"], off: "-90%" },
+  glm: { id: "glm-5.3-flash-ultrafast", off: "-70%" },
+  ttft: [
+    ["gpt-5.4-nano", "612.5ms", 612.5],
+    ["gemini-3.5-flash-lite", "693.0ms", 693.0],
+    ["claude-haiku-5-5", "760.5ms", 760.5],
+  ] as [string, string, number][],
+  calls: "18번 합 $0.0004",
+};

package/themes/neon-sign/sample/lib/neon.ts

@@ -0,0 +1,50 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { brickWall } from "../../effects.ts";
+
+// 견본 장면들이 같이 쓰는 작은 도구 — 밤 벽 바탕, 마디 단위 컷, 장면 안 박
+
+export type Paint = (t: number) => void;
+export type Pt = [number, number];
+
+export function layer(parent: HTMLElement, css = ""): HTMLDivElement {
+  const d = document.createElement("div");
+  d.style.cssText = `position:absolute;inset:0;pointer-events:none;${css}`;
+  parent.append(d);
+  return d;
+}
+
+export const beatsIn = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-3 && b < ctx.dur - 0.05);
+
+/** 밤 벽(서 있다)과 그 위 간판 층 */
+export function wall(root: HTMLElement, ctx: SceneCtx): { art: HTMLElement; paint: Paint } {
+  const bg = brickWall(layer(root), { ctx, seed: ctx.id });
+  return { art: layer(root), paint: bg };
+}
+
+/** 벽 한 면 — from 에서 until 앞까지만. 컷은 display:none, 숨은 면은 칠하지 않는다 */
+export function sheet(root: HTMLElement, from: number, until: number, build: (el: HTMLElement) => Paint[]): Paint {
+  const el = layer(root);
+  el.style.display = "none";
+  const paints = build(el);
+  return (t) => {
+    const on = t >= from && t < until;
+    el.style.display = on ? "block" : "none";
+    if (on) for (const p of paints) p(t);
+  };
+}
+
+/** 둥근 모서리 사각 테 꺾은선 */
+export function roundRect(x: number, y: number, w: number, h: number, r: number, n = 6): Pt[] {
+  const pts: Pt[] = [];
+  const corner = (cx: number, cy: number, a0: number) => {
+    for (let i = 0; i <= n; i++) {
+      const a = a0 + (i / n) * (Math.PI / 2);
+      pts.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]);
+    }
+  };
+  corner(x + w - r, y + r, -Math.PI / 2);
+  corner(x + w - r, y + h - r, 0);
+  corner(x + r, y + h - r, Math.PI / 2);
+  corner(x + r, y + r, Math.PI);
+  return pts;
+}

package/themes/neon-sign/sample/main.ts

@@ -0,0 +1,9 @@
+import { mountProject } from "@kasaframe/adapters";
+import kf from "./kf.json";
+import style from "./style.json";
+
+// 장면 파일을 늘리거나 빼도 이 파일은 그대로 — 시간표는 kf.json 한 곳. 글꼴·색 변수는 mountProject 가 건다
+const scenes = import.meta.glob("./scenes/*.ts", { eager: true });
+const beats = Object.values(import.meta.glob("./beats.json", { eager: true, import: "default" }))[0] ?? null;
+
+mountProject({ kf, scenes, beats, style, stage: document.getElementById("stage")! });

package/themes/neon-sign/sample/scenes/end.ts

@@ -0,0 +1,62 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { cableFlow, marquee, neonPath, neonText } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, roundRect, sheet, wall, type Paint } from "../lib/neon.ts";
+
+// 첫 토큰 실측 — 스위치를 켜면 전류가 전선을 실측 ms 그대로 걸려 지나가 간판에 닿는 순간 불이 들어온다 → 로고 관이 차례로 켜진다 → 로고와 주소, 전구 테
+const rr = (x: number, y: number, w: number, h: number, r: number) => `M${x + r} ${y}H${x + w - r}A${r} ${r} 0 0 1 ${x + w} ${y + r}V${y + h - r}A${r} ${r} 0 0 1 ${x + w - r} ${y + h}H${x + r}A${r} ${r} 0 0 1 ${x} ${y + h - r}V${y + r}A${r} ${r} 0 0 1 ${x + r} ${y}Z`;
+// logo.svg 를 관 중심선으로 — 굵기 72 의 테는 그 사각 자체가 중심선이고, 막대·화살은 가운데 한 줄 + 화살촉
+const LOGO = [
+  rr(36, 36, 420, 578, 89),
+  "M684 213 L684 125 A89 89 0 0 1 773 36 L1015 36 A89 89 0 0 1 1104 125 L1104 525 A89 89 0 0 1 1015 614 L773 614 A89 89 0 0 1 684 525 L684 436",
+  "M72 325 L814 325",
+  "M833 220 L970 325 L833 430 Z",
+];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const { art, paint } = wall(root, ctx);
+
+    const go = B(0) + 0.12;
+    const ttft = sheet(art, 0, B(4), (el) => {
+      const out: Paint[] = [marquee(el, { ctx, pts: [[110, 1060], [1810, 1060]], at: 0, rate: 16, tube: "amber" }), neonPath(el, { ctx, parts: [{ pts: roundRect(110, 420, 180, 240, 30), closed: true, at: B(0) }], area: [60, 370, 280, 340], width: 8, tube: "amber", sweep: 0.1, seed: "switch" }), neonText(el, { ctx, text: "ON", x: 200, y: 540, size: 64, font: "display", tube: "amber", at: go, per: 0, seed: "on" })];
+      OG.ttft.forEach(([id, label, ms], k) => {
+        const y = 250 + k * 290;
+        const path: [number, number][] = [[290, 540], [560, 540], [560, y], [880, y]];
+        const len = 270 + Math.abs(y - 540) + 320;
+        // 전류가 실측 첫 토큰 시간만큼 걸려 간판에 닿는다
+        out.push(cableFlow(el, { ctx, pts: path, at: go, rate: 3, speed: len / (ms / 1000), tube: "blue", seed: `w${k}` }));
+        out.push(neonPath(el, { ctx, parts: [{ pts: roundRect(880, y - 90, 900, 180, 30), closed: true, at: go + ms / 1000 }], area: [830, y - 140, 1000, 280], width: 8, tube: "pink", seed: `fr${k}` }));
+        out.push(neonText(el, { ctx, text: id, x: 920, y: y - 46, size: 40, font: "mono", weight: 400, tube: "ink", anchor: "left", at: go + ms / 1000, per: 0.006, glow: 0.6, seed: `id${k}` }));
+        out.push(neonText(el, { ctx, text: label, x: 1740, y: y + 34, size: 70, font: "display", tube: "pink", anchor: "right", at: go + ms / 1000, per: 0.02, seed: `ms${k}` }));
+      });
+      out.push(neonText(el, { ctx, text: OG.calls, x: 960, y: 990, size: 50, tube: "amber", weight: 400, at: B(3), per: 0.02, seed: "cost" }));
+      return out;
+    });
+
+    const s = 0.62;
+    const card = sheet(art, B(4), B(8), (el) => [
+      neonPath(el, { ctx, parts: LOGO.map((d, i) => ({ d, at: B(4) + i * 0.08 })), area: [560, 120, 800, 480], transform: { x: 960 - 570 * s, y: 160, scale: s }, width: 12, tube: "pink", seed: "logo" }),
+      neonText(el, { ctx, text: OG.site, x: 960, y: 760, size: 110, weight: 300, tube: "blue", at: B(5), per: 0.03, seed: "site" }),
+      neonText(el, { ctx, text: OG.url, x: 960, y: 900, size: 44, font: "mono", weight: 400, tube: "ink", at: B(6), per: 0.008, glow: 0.6, seed: "url" }),
+      marquee(el, { ctx, pts: roundRect(240, 70, 1440, 900, 70, 8), closed: true, at: B(7), rate: 18, tube: "amber", spacing: 40 }),
+    ]);
+
+    const s2 = 0.46;
+    const signed = sheet(art, B(8), ctx.dur + 1, (el) => [
+      marquee(el, { ctx, pts: roundRect(90, 90, 1740, 900, 80, 8), closed: true, at: B(8), rate: 20, tube: "amber", spacing: 40 }),
+      neonPath(el, { ctx, parts: LOGO.map((d) => ({ d, at: B(8) })), area: [160, 300, 600, 380], transform: { x: 200, y: 340, scale: s2 }, width: 10, tube: "pink", seed: "logo2" }),
+      neonText(el, { ctx, text: OG.site, x: 1290, y: 480, size: 104, weight: 300, tube: "blue", at: B(8) + 0.05, per: 0, seed: "site2" }),
+      neonText(el, { ctx, text: OG.url, x: 1290, y: 640, size: 40, font: "mono", weight: 400, tube: "ink", at: B(9), per: 0.006, glow: 0.6, seed: "url2" }),
+    ]);
+
+    return (t: number) => {
+      paint(t);
+      ttft(t);
+      card(t);
+      signed(t);
+    };
+  },
+};

package/themes/neon-sign/sample/scenes/gather.ts

@@ -0,0 +1,59 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { marquee, neonPath, neonText } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, roundRect, sheet, wall, type Paint } from "../lib/neon.ts";
+
+// 벽 여기저기 따로 켜지는 가게 간판 아홉(공급자) → 모델 수 높이의 네온 막대 아홉
+const TUBES = ["pink", "blue", "amber", "mint"];
+const SPOT: [number, number][] = [
+  [1450, 210], [880, 170], [300, 230],
+  [1560, 560], [960, 520], [380, 600],
+  [1350, 880], [790, 860], [250, 920],
+];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? 0.29 + i * 0.353;
+    const { art, paint } = wall(root, ctx);
+
+    const rowAt = [0, B(0), B(1)];
+    const shops = sheet(art, 0, B(4), (el) => {
+      const out: Paint[] = [];
+      OG.providers.forEach(([name], i) => {
+        const [x, y] = SPOT[i];
+        const tube = TUBES[i % TUBES.length];
+        const size = 64;
+        const w = name.length * size * 0.56 + 70;
+        const at = rowAt[Math.floor(i / 3)] + (i % 3) * 0.06;
+        out.push(neonPath(el, { ctx, parts: [{ pts: roundRect(x - w / 2, y - 62, w, 124, 30), closed: true, at: B(2) + (i % 3) * 0.04 }], area: [x - w / 2 - 50, y - 110, w + 100, 220], width: 7, tube: TUBES[(i + 1) % TUBES.length], sweep: 0.22, seed: `f${i}` }));
+        out.push(neonText(el, { ctx, text: name, x, y, size, tube, at, seed: `n${i}` }));
+      });
+      out.push(marquee(el, { ctx, pts: [[90, 1010], [1830, 1010]], at: B(3), rate: 18, tube: "amber" }));
+      return out;
+    });
+
+    // 막대 높이 = 모델 수. 박마다 묶음으로 전류가 아래에서 위로 지나가며 켜진다
+    const base = 900;
+    const unit = 15.5;
+    const barAt = [B(4), B(5), B(5) + 0.06, B(6), B(6) + 0.05, B(6) + 0.1, B(7), B(7) + 0.05, B(7) + 0.1];
+    const bars = sheet(art, B(4), ctx.dur, (el) => {
+      const out: Paint[] = [marquee(el, { ctx, pts: [[110, base + 40], [1810, base + 40]], at: B(4), rate: 16, tube: "amber" })];
+      OG.providers.forEach(([name, n], i) => {
+        const x = 1640 - i * 185;
+        const top = base - n * unit;
+        const tube = i === 0 ? "pink" : TUBES[1 + (i % 3)];
+        out.push(neonPath(el, { ctx, parts: [{ pts: [[x, base], [x, top]], at: barAt[i] }], area: [x - 60, top - 60, 120, base - top + 120], width: 22, tube, sweep: 0.2, seed: `b${i}` }));
+        out.push(neonText(el, { ctx, text: String(n), x, y: top - 70, size: i ? 70 : 110, font: "display", tube, at: barAt[i] + 0.18, per: 0.05, seed: `c${i}` }));
+        out.push(neonText(el, { ctx, text: name, x, y: base + 92, size: 34, font: "sans", weight: 400, tube: "ink", at: barAt[i] + 0.05, per: 0.01, glow: 0.5, seed: `l${i}` }));
+      });
+      return out;
+    });
+
+    return (t: number) => {
+      paint(t);
+      shops(t);
+      bars(t);
+    };
+  },
+};

package/themes/neon-sign/sample/scenes/models.ts

@@ -0,0 +1,63 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { cableFlow, marquee, neonPath, neonText } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, roundRect, sheet, wall, type Paint } from "../lib/neon.ts";
+
+// 주소 간판이 한 자씩 켜지고 /v1 → 변압기(주소) 하나에서 전선으로 전류가 가고 간판의 모델 ID 가 박마다 바뀌어 켜진다 → 엔드포인트 넷, 전구 띠가 빨라지며 드롭으로
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const drop = ctx.beats.drop(0);
+    const { art, paint } = wall(root, ctx);
+
+    const address = sheet(art, 0, B(4), (el) => [
+      marquee(el, { ctx, pts: [[110, 1010], [1810, 1010]], at: 0, rate: 16, tube: "amber" }),
+      neonPath(el, { ctx, parts: [{ pts: roundRect(170, 200, 1580, 200, 46), closed: true, at: 0.05 }], area: [120, 150, 1680, 300], width: 9, tube: "pink", sweep: 0.3, seed: "url-frame" }),
+      neonText(el, { ctx, text: OG.url, x: 960, y: 300, size: 76, font: "mono", weight: 400, tube: "blue", at: 0, per: 0.011, seed: "url" }),
+      neonText(el, { ctx, text: "/v1", x: 960, y: 560, size: 210, font: "display", tube: "pink", at: B(1), per: 0.06, seed: "v1" }),
+      neonText(el, { ctx, text: "OpenAI 형식", x: 420, y: 880, size: 60, tube: "amber", at: B(2), per: 0.03, seed: "f0" }),
+      neonText(el, { ctx, text: "Anthropic 형식", x: 1500, y: 880, size: 60, tube: "mint", at: B(2) + 0.08, per: 0.03, seed: "f1" }),
+      cableFlow(el, { ctx, pts: [[420, 830], [420, 700], [760, 700], [760, 410]], at: B(3), rate: 6, speed: 1400, tube: "amber", seed: "c0" }),
+      cableFlow(el, { ctx, pts: [[1500, 830], [1500, 700], [1160, 700], [1160, 410]], at: B(3), rate: 6, speed: 1400, tube: "mint", seed: "c1" }),
+    ]);
+
+    // 변압기(주소) 하나 → 전선 → 모델 ID 간판. 박마다 앞 ID 가 꺼지고 다음 ID 가 점화된다
+    const calls = sheet(art, B(4), B(8), (el) => {
+      const out: Paint[] = [
+        neonPath(el, { ctx, parts: [{ pts: roundRect(110, 360, 560, 360, 36), closed: true, at: B(4) }], area: [60, 310, 660, 460], width: 9, tube: "blue", sweep: 0.2, seed: "tr" }),
+        neonText(el, { ctx, text: "apis.opengateway.ai", x: 390, y: 500, size: 44, font: "mono", weight: 400, tube: "blue", at: B(4) + 0.05, per: 0.01, seed: "host" }),
+        neonText(el, { ctx, text: "/v1", x: 390, y: 600, size: 90, font: "display", tube: "pink", at: B(4) + 0.12, per: 0.04, seed: "v1b" }),
+        neonPath(el, { ctx, parts: [{ pts: roundRect(800, 380, 1020, 320, 40), closed: true, at: B(4) + 0.08 }], area: [750, 330, 1120, 420], width: 9, tube: "pink", sweep: 0.2, seed: "idf" }),
+        cableFlow(el, { ctx, pts: [[670, 540], [800, 540]], at: B(4), rate: 8, speed: 700, tube: "blue", seed: "cab" }),
+        marquee(el, { ctx, pts: [[110, 820], [1820, 820]], at: B(4), rate: 16, tube: "amber" }),
+      ];
+      for (let k = 0; k < 4; k++) {
+        const id = OG.ids[k];
+        const size = Math.min(60, Math.floor(900 / (id.length * 0.6)));
+        out.push(neonText(el, { ctx, text: id, x: 1310, y: 540, size, font: "mono", weight: 400, tube: "ink", at: B(4 + k) + 0.04, off: k < 3 ? B(5 + k) : undefined, per: 0.008, glass: false, seed: `id${k}` }));
+      }
+      return out;
+    });
+
+    // 엔드포인트 넷 — 박마다 하나씩, 둘레 전구 띠가 드롭까지 빨라진다(처리량)
+    const endpoints = sheet(art, B(8), ctx.dur, (el) => {
+      const out: Paint[] = [
+        marquee(el, { ctx, pts: [[260, 120], [1660, 120], [1660, 960], [260, 960]], closed: true, at: B(8), rate: (t) => 14 + 46 * Math.max(0, (t - B(8)) / (drop - B(8))), tube: "amber", spacing: 40 }),
+      ];
+      OG.endpoints.forEach((ep, k) => {
+        const y = 250 + k * 190;
+        const tube = ["pink", "blue", "mint", "amber"][k];
+        out.push(neonText(el, { ctx, text: `/v1${ep}`, x: 960, y, size: 76, font: "mono", weight: 400, tube, at: B(8 + k), per: 0.012, seed: `ep${k}` }));
+      });
+      return out;
+    });
+
+    return (t: number) => {
+      paint(t);
+      address(t);
+      calls(t);
+      endpoints(t);
+    };
+  },
+};

package/themes/neon-sign/sample/scenes/price.ts

@@ -0,0 +1,74 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { marquee, neonPath, neonText, powerSurge } from "../../effects.ts";
+import { OG } from "../lib/facts.ts";
+import { beatsIn, layer, roundRect, sheet, wall, type Paint, type Pt } from "../lib/neon.ts";
+
+// 드롭 — 전원 서지에 102 가 한꺼번에 켜진다 → 네온 시계 24칸에 00–10시 분홍 호와 −90% → 정가 간판이 깜빡이다 꺼지고 밤 값 간판이 켜진다
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const b = beatsIn(ctx);
+    const B = (i: number) => b[i] ?? i * 0.353;
+    const drop = ctx.beats.drop(0);
+    const { art, paint } = wall(root, ctx);
+    const frame = layer(art);
+
+    const surge = sheet(frame, 0, B(4), (el) => [
+      marquee(el, { ctx, pts: roundRect(330, 120, 1260, 640, 60, 8), closed: true, at: drop, rate: 22, tube: "amber", spacing: 38 }),
+      neonPath(el, { ctx, parts: [{ pts: roundRect(390, 180, 1140, 520, 48), closed: true, at: drop }, { pts: roundRect(360, 150, 1200, 580, 56), closed: true, at: B(3) }], area: [310, 100, 1300, 680], width: 10, tube: "pink", sweep: 0.18, seed: "drop-frame" }),
+      neonText(el, { ctx, text: String(OG.models), x: 960, y: 440, size: 330, font: "display", tube: "pink", at: drop, per: 0, seed: "102" }),
+      neonText(el, { ctx, text: `모델 ${OG.models}개 · 한 주소`, x: 960, y: 860, size: 64, weight: 400, tube: "amber", at: B(1), per: 0.025, seed: "cap" }),
+      neonText(el, { ctx, text: OG.url, x: 960, y: 970, size: 46, font: "mono", weight: 400, tube: "blue", at: B(2), per: 0.008, seed: "url" }),
+    ]);
+
+    // 네온 시계 — 원 관이 한 바퀴 켜지고 00–10시 호가 분홍으로, 둘레 전구가 돈다
+    const cx = 620;
+    const cy = 540;
+    const R = 330;
+    const arc = (h0: number, h1: number, r: number): Pt[] => {
+      const pts: Pt[] = [];
+      for (let h = h0; h <= h1 + 1e-6; h += 0.25) {
+        const a = (h / 24) * Math.PI * 2 - Math.PI / 2;
+        pts.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]);
+      }
+      return pts;
+    };
+    const clock = sheet(frame, B(4), B(8), (el) => {
+      const out: Paint[] = [
+        marquee(el, { ctx, pts: arc(0, 24, R + 60), at: B(4), rate: 18, tube: "amber", spacing: 42 }),
+        neonPath(el, { ctx, parts: [{ pts: arc(0, 24, R), at: B(4) }], area: [cx - R - 40, cy - R - 40, R * 2 + 80, R * 2 + 80], width: 9, tube: "blue", sweep: 0.3, seed: "dial" }),
+        neonPath(el, { ctx, parts: [{ pts: arc(OG.night.from, OG.night.to, R - 46), at: B(5) }], area: [cx - R, cy - R, R * 2, R * 2], width: 26, tube: "pink", sweep: 0.25, seed: "night" }),
+        neonText(el, { ctx, text: `KST ${String(OG.night.from).padStart(2, "0")}:00–${OG.night.to}:00`, x: 1100, y: 330, size: 64, font: "mono", weight: 400, tube: "amber", anchor: "left", at: B(6), per: 0.015, seed: "kst" }),
+        neonText(el, { ctx, text: OG.deepseek.off.replace("-", "−"), x: 1420, y: 600, size: 220, font: "display", tube: "pink", at: B(7), per: 0.05, seed: "off" }),
+        neonText(el, { ctx, text: OG.deepseek.id, x: 1420, y: 830, size: 40, font: "mono", weight: 400, tube: "ink", at: B(7) + 0.1, per: 0.006, glow: 0.6, seed: "dsid" }),
+      ];
+      for (const h of [0, 6, 12, 18]) {
+        const a = (h / 24) * Math.PI * 2 - Math.PI / 2;
+        out.push(neonText(el, { ctx, text: String(h).padStart(2, "0"), x: cx + Math.cos(a) * (R - 130), y: cy + Math.sin(a) * (R - 130), size: 50, font: "mono", weight: 400, tube: "blue", at: B(4) + 0.15 + h / 80, per: 0.02, glow: 0.7, seed: `h${h}` }));
+      }
+      return out;
+    });
+
+    // 정가 간판이 고장처럼 깜빡이다 꺼지고, 밤 값 간판이 켜진다
+    const [i0, i1] = OG.deepseek.input;
+    const [o0, o1] = OG.deepseek.output;
+    const swap = sheet(frame, B(8), ctx.dur, (el) => [
+      neonText(el, { ctx, text: OG.deepseek.id, x: 960, y: 130, size: 54, font: "mono", weight: 400, tube: "blue", at: B(8), per: 0.006, seed: "pid" }),
+      neonText(el, { ctx, text: "정가", x: 500, y: 290, size: 60, tube: "amber", at: B(8) + 0.05, per: 0.04, seed: "l0" }),
+      neonText(el, { ctx, text: `${i0} · ${o0} /M`, x: 500, y: 470, size: 78, font: "mono", weight: 400, tube: "pink", at: B(8) + 0.1, per: 0.012, fault: [B(9), B(9) + 0.22], off: B(9) + 0.22, seed: "p0" }),
+      neonText(el, { ctx, text: "밤", x: 1420, y: 290, size: 60, tube: "amber", at: B(10), per: 0.04, seed: "l1" }),
+      neonText(el, { ctx, text: `${i1} · ${o1} /M`, x: 1420, y: 470, size: 78, font: "mono", weight: 400, tube: "mint", at: B(10) + 0.04, per: 0.012, seed: "p1" }),
+      neonText(el, { ctx, text: `${OG.glm.id} · 밤 ${OG.glm.off.replace("-", "−")}`, x: 960, y: 760, size: 54, font: "mono", weight: 400, tube: "blue", at: B(11), per: 0.006, seed: "glm" }),
+      marquee(el, { ctx, pts: [[110, 920], [1810, 920]], at: B(8), rate: 16, tube: "amber" }),
+    ]);
+
+    const hit = powerSurge(layer(root), { ctx, drop: 0 });
+    return (t: number) => {
+      paint(t);
+      surge(t);
+      clock(t);
+      swap(t);
+      applyStyle(frame, hit(t).shake);
+    };
+  },
+};
+

package/themes/neon-sign/sample/style.json

@@ -0,0 +1,104 @@
+{
+  "name": "neon-sign",
+  "label": "네온 간판 — 튜브 글자가 차례로 켜지고, 장애는 깜빡임",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#0E0B12",
+    "surface": "#1A1520",
+    "raised": "#251E2C",
+    "line": "#3A3142",
+    "ink": "#F7F0F8",
+    "inkSoft": "#DCCFE3",
+    "dim": "#A193AD",
+    "accent": "#FF3B7F",
+    "accentSoft": "#4A1730",
+    "accentText": "#FF6FA0",
+    "onAccent": "#0E0B12",
+    "success": "#3BE8B0",
+    "danger": "#FF4B4B",
+    "warning": "#FFB13B",
+    "pink": "#FF3B7F",
+    "blue": "#39C6FF",
+    "amber": "#FFB13B",
+    "mint": "#3BE8B0",
+    "brick": "#2A1E22",
+    "glass": "#4C4352"
+  },
+  "fonts": {
+    "sans": "\"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "display": "\"Monoton\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", sans-serif",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "Monoton",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/monoton/Monoton-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": {
+    "hero": 240,
+    "title": 110,
+    "body": 48,
+    "caption": 34,
+    "weightDisplay": 400,
+    "weightBody": 300,
+    "tracking": "0.02em"
+  },
+  "radius": {
+    "sm": 10,
+    "md": 18,
+    "lg": 28,
+    "pill": 999
+  },
+  "shadow": {
+    "soft": "0 0 24px rgba(255, 59, 127, 0.35)",
+    "lift": "0 0 10px rgba(255, 59, 127, 0.5)"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 8
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.1,
+    "maxFlashPerSec": 3,
+    "enter": "fade",
+    "ease": "linear",
+    "durations": {
+      "fast": 0.05,
+      "base": 0.2,
+      "slow": 0.45
+    }
+  },
+  "theme": {
+    "inks": [
+      "#0E0B12 밤 벽 · #2A1E22 벽돌은 빛 닿은 곳만",
+      "#F7F0F8 켜진 튜브의 흰 심",
+      "#FF3B7F 분홍 · #39C6FF 하늘 · #FFB13B 호박 · #3BE8B0 민트 — 튜브 번짐 색, 한 간판 한두 색"
+    ],
+    "texture": "같은 굵기 한 획 유리관, 꺼진 관은 희미한 회색 유리로 보인다. 켜지면 흰 심 + 색 번짐 + 뒤 벽돌에 같은 색 반사. 극장식 전구 띠",
+    "movement": "글자가 한 획씩 차례로 켜지고 켜질 때 몇 번 깜빡이다 붙는다(점화). 전구 띠가 한 방향으로 쫓아가고(처리량), 전선 위로 전류가 흐른다(요청). 장애는 불규칙한 깜빡임, 결정타는 모든 간판이 한꺼번에 번쩍"
+  },
+  "notes": [
+    "바탕은 밤 벽 하나(서 있다) — 빛나는 것만 보인다. 벽돌은 간판 빛이 닿는 자리에만 드러난다.",
+    "한 간판은 한두 색. 분홍(accent)이 주인공, 하늘·호박·민트는 간판을 가를 때만.",
+    "큰 숫자는 Monoton(여러 줄 튜브 숫자), 글·모델 ID 는 가는 Pretendard(300)·JetBrains Mono 를 튜브처럼 그린다.",
+    "깜빡임은 뜻이 있다 — 점화(켜지는 순간 한 번)와 장애(고장)뿐. 박마다 깜빡이지 않는다. 섬광은 1초 3번 아래."
+  ]
+}

package/themes/neon-sign/slots.ts

@@ -0,0 +1,110 @@
+import { clamp, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, traceCanvas } from "@kasaframe/themes/slotkit";
+import { brickWall, flicker, powerSurge } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 밤 벽의 네온 간판 결로. 켜질 때는 점화 깜빡임, 켜진 것은 흰 심 + 색 번짐
+const GLOW = (k: string) => `0 0 6px var(--kf-${k}), 0 0 18px var(--kf-${k}), 0 0 42px var(--kf-${k})`;
+
+export const slots: ThemeSlots = {
+  surface(el, { ctx, seed }) {
+    return brickWall(el, { ctx, seed });
+  },
+
+  // 간판 판 — 어두운 판에 네온 관 테두리가 점화되어 붙는다. 강조 판은 분홍 관에 분홍이 비친 판
+  panel(el, { at, seed, tone }) {
+    const accent = tone === "accent";
+    const k = accent ? "accent" : "blue";
+    const box = layer(el, `inset:0;border-radius:var(--kf-radius-md, 18px);background:${accent ? "color-mix(in srgb, var(--kf-accent) 22%, var(--kf-surface))" : "color-mix(in srgb, var(--kf-surface) 82%, transparent)"}`, true);
+    const tube = layer(box, `inset:0;border-radius:inherit;border:5px solid var(--kf-glass);box-sizing:border-box`);
+    return (t) => {
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      const b = flicker(t, { at, seed: `${seed}:panel` });
+      tube.style.borderColor = b > 0.05 ? `color-mix(in srgb, var(--kf-${k}) ${Math.round(40 + 60 * b)}%, white)` : "var(--kf-glass)";
+      tube.style.boxShadow = b > 0.05 ? `${GLOW(k)}, inset 0 0 14px var(--kf-${k})` : "none";
+      tube.style.opacity = String(0.55 + 0.45 * b);
+    };
+  },
+
+  // 점화 — 몇 장 깜빡이다 붙고, 붙은 뒤엔 분홍 번짐을 두른다(0.3초 안에 선다)
+  land(el, { at, seed }) {
+    return (t): Style => {
+      if (t < at) {
+        el.style.textShadow = "";
+        return {};
+      }
+      const b = flicker(t, { at, dur: 0.3, seed });
+      el.style.textShadow = b > 0.05 ? GLOW("accent") : "none";
+      return t - at < 0.3 ? { opacity: 0.25 + 0.75 * b } : {};
+    };
+  },
+
+  // 글자가 한 자씩 점화된다 — 꺼진 자는 희미한 유리, 켜진 자는 번짐을 두른다
+  write(el, { text, at, dur, seed }) {
+    const spans = letters(el, text);
+    const n = spans.length;
+    return (t) => {
+      spans.forEach((s, i) => {
+        const born = at + (dur * i) / Math.max(1, n);
+        const b = flicker(t, { at: born, dur: 0.2, seed: `${seed}:${i}` });
+        s.style.opacity = t >= at + dur + 0.2 ? "" : (0.28 + 0.72 * b).toFixed(2);
+        s.style.textShadow = b > 0.05 ? "0 0 8px var(--kf-blue), 0 0 22px var(--kf-blue)" : "";
+      });
+    };
+  },
+
+  // 네온 관 — 전류가 한쪽 끝에서 지나가며 불이 들어오고, 다 켜진 뒤엔 관 위로 빛 알갱이가 흐른다
+  trace(el, { points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points, 50);
+    const css = (k: string, fb: string) => getComputedStyle(el).getPropertyValue(k).trim() || fb;
+    const tube = css(tone === "accent" ? "--kf-accent" : "--kf-blue", "#39C6FF");
+    const glass = css("--kf-glass", "#4C4352");
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      const line = (pts: readonly (readonly [number, number])[]) => {
+        g.beginPath();
+        pts.forEach((q, i) => (i ? g.lineTo(q[0], q[1]) : g.moveTo(q[0], q[1])));
+      };
+      g.lineCap = "round";
+      g.lineJoin = "round";
+      g.shadowBlur = 0;
+      g.globalAlpha = 0.45;
+      g.strokeStyle = glass;
+      g.lineWidth = 8;
+      line(points);
+      g.stroke();
+      g.globalAlpha = 1;
+      if (p <= 0) return;
+      const lit = partial(points, p);
+      g.shadowColor = tube;
+      g.shadowBlur = 24;
+      g.strokeStyle = tube;
+      g.lineWidth = 8;
+      line(lit);
+      g.stroke();
+      g.shadowBlur = 8;
+      g.strokeStyle = "#ffffff";
+      g.lineWidth = 3;
+      line(lit);
+      g.stroke();
+      if (p >= 1) {
+        // 다 켜진 뒤 — 빛 알갱이가 관을 따라 흐른다
+        g.fillStyle = "#ffffff";
+        g.shadowBlur = 18;
+        for (let k = 0; k < 3; k++) {
+          const u = (((t - at - dur) * 0.6 + k / 3) % 1 + 1) % 1;
+          const q = partial(points, u).at(-1)!;
+          g.beginPath();
+          g.arc(q[0], q[1], 6, 0, Math.PI * 2);
+          g.fill();
+        }
+      }
+      g.shadowBlur = 0;
+    };
+  },
+
+  drop(el, { ctx, drop }) {
+    return powerSurge(el, { ctx, drop });
+  },
+};