kasaframe 0.1.1 → 0.1.4

package/themes/neon-sign/effects.ts

@@ -0,0 +1,424 @@
+// 테마 neon-sign 전용 효과 — 튜브 글자가 차례로 켜지고(점화 깜빡임 뒤 붙는다), 장애는 깜빡임, 처리량은 전구 띠가 쫓아가는 빠르기.
+// 같은 t 면 같은 화면, 난수는 rand(seed, i) 로만. 빛은 캔버스를 screen 으로 겹쳐 벽에 더한다.
+import { clamp, rand, type SceneCtx, type Style } from "@kasaframe/core";
+import { dropBurst, type DropBurstState } from "@kasaframe/motion";
+
+export type { SceneCtx };
+
+type Pt = [number, number];
+type Area = [x: number, y: number, w: number, h: number];
+
+const color = (ctx: SceneCtx, key: string): string => ctx.style.colors[key] ?? key;
+
+function rgba(hex: string, a: number): string {
+  const h = hex.replace("#", "");
+  const n = parseInt(h.length === 3 ? h.replace(/./g, (c) => c + c) : h.slice(0, 6), 16);
+  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${clamp(a).toFixed(3)})`;
+}
+
+// 켜진 튜브의 심 — 색을 흰색 쪽으로 당긴다(가운데는 하얗게 타고 색은 둘레 번짐에서 보인다)
+function core(hex: string, k = 0.7): string {
+  const h = hex.replace("#", "");
+  const n = parseInt(h.slice(0, 6), 16);
+  const mix = (c: number) => Math.round(c + (255 - c) * k);
+  return `rgb(${mix((n >> 16) & 255)},${mix((n >> 8) & 255)},${mix(n & 255)})`;
+}
+
+const areas = new WeakMap<CanvasRenderingContext2D, Area>();
+
+// 간판마다 그 자리만큼만 캔버스 — 빛 번짐 몫으로 여백을 둔다. screen 으로 겹쳐 빛이 벽에 더해진다
+function canvas(el: HTMLElement, area: Area, blend = "screen"): CanvasRenderingContext2D {
+  const [x, y, w, h] = area.map((v, i) => (i < 2 ? Math.floor(v) : Math.ceil(v))) as Area;
+  const c = document.createElement("canvas");
+  c.width = Math.max(1, w);
+  c.height = Math.max(1, h);
+  c.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:${w}px;height:${h}px;pointer-events:none;mix-blend-mode:${blend};`;
+  el.append(c);
+  const g = c.getContext("2d")!;
+  g.translate(-x, -y);
+  areas.set(g, [x, y, w, h]);
+  return g;
+}
+
+const clear = (g: CanvasRenderingContext2D): void => {
+  const [x, y, w, h] = areas.get(g)!;
+  g.clearRect(x, y, w, h);
+};
+
+export interface FlickerOpts {
+  at: number;
+  dur?: number;
+  seed?: string | number;
+  /** ignite: 켜질 때 몇 번 깜빡이다 붙는다 · fault: 고장 — 창 안에서 불규칙하게 깜빡인다 */
+  mode?: "ignite" | "fault";
+  /** 이 시각부터 꺼진다(점화 꼴) */
+  until?: number;
+}
+
+/** 깜빡임 — 튜브 밝기 0..1. 점화는 켜지는 순간 몇 장 깜빡이다 붙고, 고장은 창 안에서 초당 20장 불규칙하게 꺼졌다 켜진다 */
+export function flicker(t: number, o: FlickerOpts): number {
+  const seed = o.seed ?? "flicker";
+  const dur = o.dur ?? 0.26;
+  if ((o.mode ?? "ignite") === "fault") {
+    if (t < o.at || t >= o.at + dur) return 1;
+    const f = Math.floor((t - o.at) * 20 + 1e-6);
+    return rand(seed, f) > 0.5 ? 1 : 0.12;
+  }
+  if (t < o.at || (o.until !== undefined && t >= o.until)) return 0;
+  const local = t - o.at;
+  if (local >= dur) return 1;
+  // 첫 장은 반드시 불꽃, 그 뒤로 붙을수록 켜진 장이 많아진다
+  const f = Math.floor(local * 30 + 1e-6);
+  if (f === 0) return 1;
+  const on = rand(seed, f) < 0.35 + 0.65 * (local / dur);
+  return on ? 0.65 + 0.35 * rand(seed, f + 100) : 0;
+}
+
+/** 밤 벽 — 거의 검은 벽에 벽돌이 아주 희미하게. 서 있는 바탕(간판 빛이 screen 으로 더해져 빛 닿은 곳만 드러난다) */
+export function brickWall(el: HTMLElement, o: { ctx: SceneCtx; seed?: string | number; brick?: [number, number] }): (t: number) => void {
+  const { ctx } = o;
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const g = canvas(el, [-20, -20, W + 40, H + 40], "normal");
+  const seed = o.seed ?? "wall";
+  const [bw, bh] = o.brick ?? [96, 40];
+  g.fillStyle = color(ctx, "bg");
+  g.fillRect(-20, -20, W + 40, H + 40);
+  const brick = color(ctx, "brick");
+  for (let row = 0, y = -20; y < H + 20; row++, y += bh) {
+    for (let x = -20 - (row % 2) * (bw / 2); x < W + 20; x += bw) {
+      const v = rand(seed, row * 97 + Math.round(x));
+      g.fillStyle = rgba(brick, 0.32 + 0.22 * v);
+      g.fillRect(x + 3, y + 3, bw - 6, bh - 6);
+    }
+  }
+  return () => {};
+}
+
+export interface NeonTextOpts {
+  ctx: SceneCtx;
+  text: string;
+  x: number;
+  y: number;
+  size: number;
+  font?: "display" | "sans" | "mono";
+  weight?: number;
+  /** 튜브 색 — style 색 이름(pink·blue·amber·mint·accent)이나 색 */
+  tube?: string;
+  at: number;
+  /** 글자마다 점화 간격(초) — 0 이면 한꺼번에 */
+  per?: number;
+  anchor?: "left" | "center" | "right";
+  /** 이 시각부터 꺼진다 */
+  off?: number;
+  /** 고장 창 [시작, 끝] — 그동안 불규칙하게 깜빡인다 */
+  fault?: [number, number];
+  /** 빛 번짐 세기(1 기본) */
+  glow?: number;
+  /** 꺼진 유리관을 보일지 — 같은 자리에서 글이 바뀌는 간판은 끈다(관이 겹쳐 보인다) */
+  glass?: boolean;
+  seed?: string | number;
+}
+
+/**
+ * 네온 글자 — 꺼진 유리관이 희미하게 보이다가 글자가 한 자씩 점화된다(몇 장 깜빡이다 붙는다). 켜지면 흰 심 + 색 번짐 + 벽에 같은 색 반사.
+ * off 에 꺼지고, fault 창에선 고장처럼 깜빡인다
+ */
+export function neonText(el: HTMLElement, o: NeonTextOpts): (t: number) => void {
+  const { ctx } = o;
+  const font = `${o.weight ?? (o.font === "display" ? 400 : 300)} ${o.size}px ${ctx.style.fonts[o.font ?? "sans"]}`;
+  const probe = document.createElement("canvas").getContext("2d")!;
+  probe.font = font;
+  const chars = Array.from(o.text);
+  const offs = chars.map((_, i) => probe.measureText(chars.slice(0, i).join("")).width);
+  const w = probe.measureText(o.text).width;
+  const x0 = o.anchor === "left" ? o.x : o.anchor === "right" ? o.x - w : o.x - w / 2;
+  const glow = o.glow ?? 1;
+  const pad = o.size * 0.9 * glow + 20;
+  const g = canvas(el, [x0 - pad, o.y - o.size * 0.75 - pad, w + pad * 2, o.size * 1.5 + pad * 2]);
+  const tube = color(ctx, o.tube ?? "accent");
+  const hot = core(tube);
+  const glass = color(ctx, "glass");
+  const per = o.per ?? 0.035;
+  const seed = o.seed ?? `${ctx.id}:neon:${o.text}`;
+  const lit = (t: number, i: number) => {
+    let b = flicker(t, { at: o.at + i * per, seed: `${seed}:${i}`, until: o.off });
+    if (o.fault && b > 0) b *= flicker(t, { at: o.fault[0], dur: o.fault[1] - o.fault[0], mode: "fault", seed: `${seed}:f${i % 3}` });
+    return b;
+  };
+  return (t) => {
+    clear(g);
+    const bs = chars.map((_, i) => lit(t, i));
+    const avg = bs.reduce((a, b) => a + b, 0) / Math.max(1, bs.length);
+    g.font = font;
+    g.textBaseline = "middle";
+    g.textAlign = "left";
+    // 벽 반사 — 간판 뒤 벽에 같은 색이 번진다(켜진 만큼)
+    if (avg > 0.01) {
+      const gr = g.createRadialGradient(x0 + w / 2, o.y, 0, x0 + w / 2, o.y, Math.max(w * 0.62, o.size * 1.4));
+      gr.addColorStop(0, rgba(tube, 0.2 * avg * glow));
+      gr.addColorStop(1, rgba(tube, 0));
+      g.fillStyle = gr;
+      const [ax, ay, aw, ah] = areas.get(g)!;
+      g.fillRect(ax, ay, aw, ah);
+    }
+    const same = bs.every((b) => b === bs[0]);
+    const runs: [string, number, number][] = same ? [[o.text, x0, bs[0]]] : chars.map((c, i) => [c, x0 + offs[i], bs[i]]);
+    // 꺼진 관 — 희미한 유리(글로 읽히지 않게 옅게)
+    g.globalAlpha = 0.42;
+    g.shadowBlur = 0;
+    g.fillStyle = glass;
+    if (o.glass !== false) for (const [s, x, b] of runs) if (b < 0.05) g.fillText(s, x, o.y);
+    g.globalAlpha = 1;
+    for (const [s, x, b] of runs) {
+      if (b < 0.05) continue;
+      g.shadowColor = rgba(tube, 0.95 * b);
+      g.shadowBlur = o.size * 0.42 * glow;
+      g.fillStyle = rgba(tube, b);
+      g.fillText(s, x, o.y);
+      g.shadowBlur = o.size * 0.12;
+      g.fillStyle = b > 0.6 ? hot : rgba(tube, b);
+      g.fillText(s, x, o.y);
+    }
+    g.shadowBlur = 0;
+  };
+}
+
+export interface NeonPathOpts {
+  ctx: SceneCtx;
+  /** 관 조각 — SVG path(d) 나 꺾은선, 조각마다 켜지는 시각 */
+  parts: { d?: string; pts?: Pt[]; closed?: boolean; at: number }[];
+  /** 그리는 자리 [x, y, w, h] 와 SVG 좌표를 화면으로 옮기는 변환 */
+  area: Area;
+  transform?: { x: number; y: number; scale: number };
+  /** 관 굵기 px */
+  width?: number;
+  tube?: string;
+  off?: number;
+  fault?: [number, number];
+  /** 꺾은선은 켜질 때 전류가 한쪽 끝에서 다른 끝으로 지나가며 불이 들어온다(초) */
+  sweep?: number;
+  seed?: string | number;
+}
+
+/** 네온 관 — 테두리·화살표·시계·막대 같은 관 모양. 꺼진 유리관이 보이다 점화되고, 꺾은선은 전류가 지나가며 불이 들어온다 */
+export function neonPath(el: HTMLElement, o: NeonPathOpts): (t: number) => void {
+  const { ctx } = o;
+  const g = canvas(el, o.area);
+  const tube = color(ctx, o.tube ?? "accent");
+  const hot = core(tube);
+  const glass = color(ctx, "glass");
+  const W = o.width ?? 8;
+  const tf = o.transform ?? { x: 0, y: 0, scale: 1 };
+  const seed = o.seed ?? `${ctx.id}:path`;
+  const parts = o.parts.map((p, i) => {
+    const path = new Path2D();
+    let len = 0;
+    if (p.d) {
+      const m = new DOMMatrix([tf.scale, 0, 0, tf.scale, tf.x, tf.y]);
+      path.addPath(new Path2D(p.d), m);
+    } else if (p.pts) {
+      p.pts.forEach(([x, y], k) => (k ? path.lineTo(x, y) : path.moveTo(x, y)));
+      if (p.closed) path.closePath();
+      for (let k = 1; k < p.pts.length; k++) len += Math.hypot(p.pts[k][0] - p.pts[k - 1][0], p.pts[k][1] - p.pts[k - 1][1]);
+      if (p.closed) len += Math.hypot(p.pts[0][0] - p.pts.at(-1)![0], p.pts[0][1] - p.pts.at(-1)![1]);
+    }
+    return { path, len, at: p.at, seed: `${seed}:${i}` };
+  });
+  return (t) => {
+    clear(g);
+    g.lineCap = "round";
+    g.lineJoin = "round";
+    for (const p of parts) {
+      let b = flicker(t, { at: p.at + (o.sweep && p.len ? o.sweep : 0), seed: p.seed, until: o.off });
+      if (o.fault && b > 0) b *= flicker(t, { at: o.fault[0], dur: o.fault[1] - o.fault[0], mode: "fault", seed: p.seed });
+      const sweeping = o.sweep && p.len && t >= p.at && t < p.at + o.sweep && (o.off === undefined || t < o.off);
+      g.shadowBlur = 0;
+      g.globalAlpha = 0.45;
+      g.strokeStyle = glass;
+      g.lineWidth = W;
+      g.setLineDash([]);
+      g.stroke(p.path);
+      g.globalAlpha = 1;
+      if (sweeping) {
+        // 전류가 지나간 데까지만 불이 들어온다
+        const k = (t - p.at) / o.sweep!;
+        g.setLineDash([p.len * k, p.len]);
+        b = 1;
+      }
+      if (b < 0.05) continue;
+      g.shadowColor = rgba(tube, 0.95 * b);
+      g.shadowBlur = W * 3.2;
+      g.strokeStyle = rgba(tube, b);
+      g.lineWidth = W;
+      g.stroke(p.path);
+      g.shadowBlur = W;
+      g.strokeStyle = b > 0.6 ? hot : rgba(tube, b);
+      g.lineWidth = W * 0.42;
+      g.stroke(p.path);
+      g.setLineDash([]);
+    }
+    g.shadowBlur = 0;
+  };
+}
+
+export interface MarqueeOpts {
+  ctx: SceneCtx;
+  /** 전구가 놓이는 꺾은선(닫히면 테두리) */
+  pts: Pt[];
+  closed?: boolean;
+  spacing?: number;
+  r?: number;
+  tube?: string;
+  at: number;
+  until?: number;
+  /** 처리량 — 초당 몇 칸 쫓아가나(수거나 t 의 함수). 12 넘게 둔다(0.1초 안에 한 칸) */
+  rate?: number | ((t: number) => number);
+  /** 몇 칸마다 하나 켜지나 */
+  every?: number;
+}
+
+/** 전구 띠 — 극장식 전구가 한 방향으로 쫓아간다. 쫓는 빠르기가 처리량(rate) — 빨라지면 띠가 빨리 흐른다 */
+export function marquee(el: HTMLElement, o: MarqueeOpts): (t: number) => void {
+  const { ctx } = o;
+  const xs = o.pts.map((p) => p[0]);
+  const ys = o.pts.map((p) => p[1]);
+  const pad = 30;
+  const g = canvas(el, [Math.min(...xs) - pad, Math.min(...ys) - pad, Math.max(...xs) - Math.min(...xs) + pad * 2, Math.max(...ys) - Math.min(...ys) + pad * 2]);
+  const sp = o.spacing ?? 34;
+  const pts = o.closed ? [...o.pts, o.pts[0]] : o.pts;
+  const bulbs: Pt[] = [];
+  for (let k = 1; k < pts.length; k++) {
+    const [a, b] = [pts[k - 1], pts[k]];
+    const L = Math.hypot(b[0] - a[0], b[1] - a[1]);
+    const n = Math.max(1, Math.round(L / sp));
+    for (let i = 0; i < n; i++) bulbs.push([a[0] + ((b[0] - a[0]) * i) / n, a[1] + ((b[1] - a[1]) * i) / n]);
+  }
+  const R = o.r ?? 6;
+  const tube = color(ctx, o.tube ?? "amber");
+  const glass = color(ctx, "glass");
+  const every = o.every ?? 3;
+  // 띠가 간 칸 수 — rate 가 t 의 함수면 그 적분을 닫힌 꼴 없이 잘게 더한다(같은 t 면 같은 값)
+  const stepsAt = (t: number): number => {
+    if (typeof o.rate !== "function") return (t - o.at) * (o.rate ?? 16);
+    let s = 0;
+    const dt = 1 / 120;
+    for (let u = o.at; u < t; u += dt) s += o.rate(u) * Math.min(dt, t - u);
+    return s;
+  };
+  return (t) => {
+    clear(g);
+    if (t < o.at || (o.until !== undefined && t >= o.until)) return;
+    const head = Math.floor(stepsAt(t) + 1e-6);
+    const born = clamp((t - o.at) / 0.25);
+    for (let i = 0; i < bulbs.length; i++) {
+      const [x, y] = bulbs[i];
+      const on = (((i - head) % every) + every) % every === 0 && i / bulbs.length <= born;
+      g.shadowBlur = on ? R * 3 : 0;
+      g.shadowColor = rgba(tube, 0.9);
+      g.fillStyle = on ? core(tube, 0.55) : rgba(glass, 0.6);
+      g.beginPath();
+      g.arc(x, y, on ? R : R * 0.75, 0, Math.PI * 2);
+      g.fill();
+    }
+    g.shadowBlur = 0;
+  };
+}
+
+export interface CableFlowOpts {
+  ctx: SceneCtx;
+  pts: Pt[];
+  at: number;
+  until?: number;
+  /** 초당 몇 번 전류가 나가나(요청 수) */
+  rate?: number;
+  /** 전류가 가는 빠르기 px/초 */
+  speed?: number;
+  tube?: string;
+  seed?: string | number;
+}
+
+/** 전선과 전류 — 변압기에서 간판까지 검은 전선. 첫 전류가 지나간 데까지 전선이 빛나고, 그 위로 빛 알갱이(요청)가 일정하게 흘러간다 */
+export function cableFlow(el: HTMLElement, o: CableFlowOpts): (t: number) => void {
+  const { ctx } = o;
+  const xs = o.pts.map((p) => p[0]);
+  const ys = o.pts.map((p) => p[1]);
+  const pad = 30;
+  const g = canvas(el, [Math.min(...xs) - pad, Math.min(...ys) - pad, Math.max(...xs) - Math.min(...xs) + pad * 2, Math.max(...ys) - Math.min(...ys) + pad * 2], "normal");
+  const seg = o.pts.slice(1).map((q, i) => Math.hypot(q[0] - o.pts[i][0], q[1] - o.pts[i][1]));
+  const L = seg.reduce((a, b) => a + b, 0) || 1;
+  const at = (d: number): Pt => {
+    let left = d;
+    for (let i = 0; i < seg.length; i++) {
+      if (left <= seg[i]) {
+        const k = left / (seg[i] || 1);
+        return [o.pts[i][0] + (o.pts[i + 1][0] - o.pts[i][0]) * k, o.pts[i][1] + (o.pts[i + 1][1] - o.pts[i][1]) * k];
+      }
+      left -= seg[i];
+    }
+    return o.pts[o.pts.length - 1];
+  };
+  const tube = color(ctx, o.tube ?? "blue");
+  const rate = o.rate ?? 4;
+  const speed = o.speed ?? 900;
+  return (t) => {
+    clear(g);
+    if (t < o.at || (o.until !== undefined && t >= o.until)) return;
+    g.lineCap = "round";
+    g.lineJoin = "round";
+    g.strokeStyle = color(ctx, "line");
+    g.lineWidth = 7;
+    g.beginPath();
+    o.pts.forEach(([x, y], i) => (i ? g.lineTo(x, y) : g.moveTo(x, y)));
+    g.stroke();
+    // 첫 전류가 간 데까지 전선이 달아오른다 — 늦게 닿는 줄은 그만큼 늦게 다 밝는다(지연)
+    const reach = Math.min(L, (t - o.at) * speed);
+    g.shadowBlur = 12;
+    g.shadowColor = rgba(tube, 0.9);
+    g.strokeStyle = rgba(tube, 0.75);
+    g.lineWidth = 4;
+    g.beginPath();
+    let left = reach;
+    g.moveTo(o.pts[0][0], o.pts[0][1]);
+    for (let i = 0; i < seg.length && left > 0; i++) {
+      const k = Math.min(1, left / (seg[i] || 1));
+      g.lineTo(o.pts[i][0] + (o.pts[i + 1][0] - o.pts[i][0]) * k, o.pts[i][1] + (o.pts[i + 1][1] - o.pts[i][1]) * k);
+      left -= seg[i];
+    }
+    g.stroke();
+    g.shadowBlur = 16;
+    g.shadowColor = rgba(tube, 0.95);
+    g.fillStyle = core(tube, 0.5);
+    const first = Math.floor((t - o.at - L / speed) * rate);
+    const last = Math.floor((t - o.at) * rate);
+    for (let k = Math.max(0, first); k <= last; k++) {
+      const d = (t - o.at - k / rate) * speed;
+      if (d < 0 || d > L) continue;
+      const [x, y] = at(d);
+      g.beginPath();
+      g.arc(x, y, 10, 0, Math.PI * 2);
+      g.fill();
+    }
+    g.shadowBlur = 0;
+  };
+}
+
+/** 전원 서지 — 결정타에 모든 간판이 한꺼번에 번쩍(화면에 색 섬광 한 번)이고 벽이 환해졌다 가라앉는다. 흔들림을 돌려준다 */
+export function powerSurge(el: HTMLElement, o: { ctx: SceneCtx; drop?: number; tube?: string }): (t: number) => DropBurstState {
+  const { ctx } = o;
+  const wash = document.createElement("div");
+  wash.style.cssText = `position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse at 50% 45%, ${rgba(color(ctx, o.tube ?? "accent"), 0.85)}, ${rgba(color(ctx, o.tube ?? "accent"), 0.15)} 70%);opacity:0`;
+  el.append(wash);
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "powerSurge" });
+    wash.style.opacity = (s.flash * 0.9).toFixed(3);
+    return s;
+  };
+}
+
+/** 스위치 켜짐 — 아무 요소나 네온처럼: 점화 깜빡임으로 나타났다 붙는다. applyStyle 로 붙인다 */
+export function switchOn(t: number, o: { at: number; dur?: number; seed?: string | number }): Style {
+  const b = flicker(t, { at: o.at, dur: o.dur, seed: o.seed });
+  return { opacity: b };
+}
+

package/themes/neon-sign/sample/assets/og/logo.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140 650" width="1140" height="650" fill="none" role="img" aria-label="OpenGateway">
+  <title>OpenGateway</title>
+  <g id="logo" stroke="currentColor" fill="currentColor">
+    <rect id="node-in" x="36" y="36" width="420" height="578" rx="89" fill="none" stroke-width="72"/>
+    <rect id="bar-in" x="72" y="272" width="277" height="106" stroke="none"/>
+    <path id="node-out" d="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" fill="none" stroke-width="72" stroke-linecap="butt"/>
+    <g id="arrow">
+      <rect id="arrow-shaft" x="420" y="272" width="394" height="106" stroke="none"/>
+      <path id="arrow-head" d="M833 220 L970 325 L833 430 Z" stroke-width="38" stroke-linejoin="round"/>
+    </g>
+  </g>
+</svg>