fancy-ui-react 0.2.0

package/dist/components/mosaic-glow/MosaicGlow.d.ts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type MosaicGlowIdle = "drift" | "none";
+/**
+ * MosaicGlow — a cursor-lit canvas mosaic.
+ *
+ * A dark surface tiled with small squares. A soft halo follows the pointer
+ * with a slight lag and lights the tiles under it to random intensities;
+ * lit tiles fade slowly so the pointer leaves a comet trail. An additive
+ * bloom bleeds over the gaps, a glassy highlight sits on every tile, and a
+ * scattering of faint tiles stays visible outside the halo. With nobody
+ * pointing, the halo drifts on its own.
+ */
+export interface MosaicGlowProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "children"> {
+    /** Additional classes on the host */
+    className?: string;
+    /** Content rendered above the canvas — give the host a height */
+    children?: ReactNode;
+    /** Tile edge in CSS px */
+    tileSize?: number;
+    /** Gap between tiles in CSS px */
+    gap?: number;
+    /** Halo / tile colour — hex or rgb() */
+    color?: string;
+    /** Surface colour behind the tiles — hex or rgb() */
+    background?: string;
+    /** Halo radius in CSS px */
+    radius?: number;
+    /** Overall brightness of lit tiles, 0–1 */
+    intensity?: number;
+    /** How long lit tiles linger after the halo moves on, 0–1 */
+    trail?: number;
+    /** Pointer lag, 0 (instant) to 1 (very laggy) */
+    smoothing?: number;
+    /** Spread of per-tile random brightness inside the halo, 0–1 */
+    noise?: number;
+    /** Visibility of the random faint tiles outside the halo, 0–1 */
+    ambient?: number;
+    /** Slowly re-roll the faint tiles over time */
+    flicker?: boolean;
+    /** What the halo does with no pointer: wander on its own or switch off */
+    idle?: MosaicGlowIdle;
+    /** Follow the pointer. Off leaves only the idle behaviour. */
+    interactive?: boolean;
+    /** Seed for the per-tile randomness — same seed, same mosaic */
+    seed?: number;
+}
+export declare const MosaicGlow: import("react").ForwardRefExoticComponent<MosaicGlowProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/mosaic-glow/MosaicGlow.js

@@ -0,0 +1,438 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useConstant } from "../../internals/dom/ssr.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { clamp01, driftPoint, updateTiles, createGrid, smoothingTau, releaseTau, rate, ATTACK_TAU, flickerTiles, lutIndex, parseRgb, DEFAULT_COLOR, buildLut } from "./mosaic-glow-core.js";
+const IDLE_DELAY_MS = 1500;
+const AMBIENT_FRAME_MS = 50;
+const FLICKER_CHANCE = 0.15;
+const LUT_SIZE = 64;
+function createMachine() {
+  return {
+    ctx: null,
+    glassLayer: null,
+    grid: null,
+    lut: null,
+    dpr: 1,
+    cssW: 0,
+    cssH: 0,
+    w: 0,
+    h: 0,
+    pitchDev: 20,
+    tileDev: 18,
+    px: 0,
+    py: 0,
+    pointerOver: false,
+    sx: 0,
+    sy: 0,
+    sInit: false,
+    haloFade: 0,
+    driftT: 0,
+    lastLeaveAt: -1,
+    rafId: null,
+    lastTime: 0,
+    lastDraw: 0,
+    dirty: true,
+    visible: true,
+    reducedMotion: false
+  };
+}
+const MosaicGlow = forwardRef(function MosaicGlow2({
+  className,
+  children,
+  tileSize = 18,
+  gap = 2,
+  color = "#f2c318",
+  background = "#0a0a0a",
+  radius = 170,
+  intensity = 1,
+  trail = 0.6,
+  smoothing = 0.15,
+  noise = 0.7,
+  ambient = 0.35,
+  flicker = true,
+  idle = "drift",
+  interactive = true,
+  seed = 1,
+  style,
+  ...restProps
+}, forwardedRef) {
+  const intensityC = clamp01(intensity);
+  const trailC = clamp01(trail);
+  const smoothingC = clamp01(smoothing);
+  const noiseC = clamp01(noise);
+  const ambientC = clamp01(ambient);
+  const radiusC = Math.max(1, Number.isFinite(radius) ? radius : 170);
+  const tileC = Math.max(1, Number.isFinite(tileSize) ? tileSize : 18);
+  const gapC = Math.max(0, Number.isFinite(gap) ? gap : 2);
+  const [host, hostRef] = useElementRef();
+  const [canvas, canvasRef] = useElementRef();
+  const composedHostRef = useComposedRefs(forwardedRef, hostRef);
+  const machine = useConstant(createMachine);
+  const runtimeRef = useRef(null);
+  const live = useLiveRef({
+    color,
+    background,
+    idle,
+    flicker,
+    intensityC,
+    trailC,
+    smoothingC,
+    noiseC,
+    ambientC,
+    radiusC,
+    tileC,
+    gapC,
+    seed
+  });
+  const [reducedMotion, setReducedMotion] = useState(false);
+  useEffect(() => {
+    if (!host || !canvas) return;
+    const hostEl = host;
+    const canvasEl = canvas;
+    const context = canvasEl.getContext("2d");
+    if (!context) return;
+    const ctx = context;
+    const m = machine;
+    m.ctx = ctx;
+    function currentDpr() {
+      return Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 2);
+    }
+    function resize() {
+      if (!m.ctx) return;
+      const p = live.current;
+      m.cssW = hostEl.clientWidth;
+      m.cssH = hostEl.clientHeight;
+      m.dpr = currentDpr();
+      m.w = Math.max(1, Math.round(m.cssW * m.dpr));
+      m.h = Math.max(1, Math.round(m.cssH * m.dpr));
+      canvasEl.width = m.w;
+      canvasEl.height = m.h;
+      m.tileDev = Math.max(1, Math.round(p.tileC * m.dpr));
+      m.pitchDev = Math.max(m.tileDev, Math.round((p.tileC + p.gapC) * m.dpr));
+      const cols = Math.ceil(m.w / m.pitchDev);
+      const rows = Math.ceil(m.h / m.pitchDev);
+      m.grid = createGrid(cols, rows, p.seed, p.noiseC, p.ambientC);
+      rebuildGlass(cols, rows);
+      m.dirty = true;
+      if (m.reducedMotion) drawStatic(initialHalo());
+      else requestFrame();
+    }
+    function rebuildGlass(cols, rows) {
+      m.glassLayer = null;
+      if (typeof document === "undefined") return;
+      const sprite = document.createElement("canvas");
+      sprite.width = m.tileDev;
+      sprite.height = m.tileDev;
+      const sctx = sprite.getContext("2d");
+      if (!sctx) return;
+      const grad = sctx.createRadialGradient(
+        m.tileDev * 0.35,
+        m.tileDev * 0.3,
+        0,
+        m.tileDev * 0.5,
+        m.tileDev * 0.5,
+        m.tileDev * 0.7
+      );
+      grad.addColorStop(0, "rgba(255, 255, 255, 0.22)");
+      grad.addColorStop(1, "rgba(255, 255, 255, 0)");
+      sctx.fillStyle = grad;
+      sctx.fillRect(0, 0, m.tileDev, m.tileDev);
+      const layer = document.createElement("canvas");
+      layer.width = m.w;
+      layer.height = m.h;
+      const lctx = layer.getContext("2d");
+      if (!lctx) return;
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          lctx.drawImage(sprite, c * m.pitchDev, r * m.pitchDev);
+        }
+      }
+      m.glassLayer = layer;
+    }
+    function ensureLut() {
+      if (!m.lut) m.lut = buildLut(live.current.background, live.current.color, LUT_SIZE);
+      return m.lut;
+    }
+    function initialHalo() {
+      if (live.current.idle !== "drift") return null;
+      const p = driftPoint(0, m.w, m.h);
+      return { x: p.x, y: p.y, r: live.current.radiusC * m.dpr };
+    }
+    function requestFrame() {
+      if (m.rafId !== null || !m.visible || m.reducedMotion || !m.ctx) return;
+      if (typeof requestAnimationFrame !== "function") return;
+      m.lastTime = 0;
+      m.rafId = requestAnimationFrame(tick);
+    }
+    function stopLoop() {
+      if (m.rafId !== null && typeof cancelAnimationFrame === "function")
+        cancelAnimationFrame(m.rafId);
+      m.rafId = null;
+    }
+    function tick(now) {
+      m.rafId = null;
+      const g = m.grid;
+      if (!m.ctx || !g) return;
+      const p = live.current;
+      const dt = m.lastTime === 0 ? 1 / 60 : Math.min(0.1, Math.max(0, (now - m.lastTime) / 1e3));
+      m.lastTime = now;
+      const drifting = p.idle === "drift" && !m.pointerOver && (m.lastLeaveAt < 0 || now - m.lastLeaveAt > IDLE_DELAY_MS);
+      let tx = 0;
+      let ty = 0;
+      let hasTarget = false;
+      if (m.pointerOver) {
+        tx = m.px;
+        ty = m.py;
+        hasTarget = true;
+      } else if (drifting) {
+        m.driftT += dt;
+        const point = driftPoint(m.driftT, m.w, m.h);
+        tx = point.x;
+        ty = point.y;
+        hasTarget = true;
+      }
+      if (hasTarget) {
+        if (!m.sInit) {
+          m.sx = tx;
+          m.sy = ty;
+          m.sInit = true;
+        } else {
+          const tau = drifting ? Math.max(smoothingTau(p.smoothingC), 0.35) : smoothingTau(p.smoothingC);
+          const k = rate(dt, tau);
+          m.sx += (tx - m.sx) * k;
+          m.sy += (ty - m.sy) * k;
+        }
+      }
+      const rel = releaseTau(p.trailC);
+      const fadeTarget = hasTarget ? 1 : 0;
+      m.haloFade += (fadeTarget - m.haloFade) * rate(dt, fadeTarget > m.haloFade ? ATTACK_TAU : rel);
+      if (m.haloFade < 5e-3) m.haloFade = 0;
+      const halo = hasTarget ? { x: m.sx, y: m.sy, r: p.radiusC * m.dpr } : null;
+      const maxDelta = updateTiles(g, halo, dt, {
+        pitch: m.pitchDev,
+        tile: m.tileDev,
+        attackTau: ATTACK_TAU,
+        releaseTau: rel
+      });
+      if (p.flicker) flickerTiles(g, dt, FLICKER_CHANCE, p.ambientC);
+      const active = hasTarget || maxDelta > 2e-3 || m.haloFade > 0;
+      if (active || m.dirty || now - m.lastDraw >= AMBIENT_FRAME_MS) {
+        draw(halo);
+        m.lastDraw = now;
+        m.dirty = false;
+      }
+      const keepGoing = active || p.flicker || p.idle === "drift" && !m.pointerOver;
+      if (keepGoing && m.visible && typeof requestAnimationFrame === "function") {
+        m.rafId = requestAnimationFrame(tick);
+      }
+    }
+    function drawStatic(halo) {
+      const g = m.grid;
+      if (!m.ctx || !g) return;
+      updateTiles(g, halo, 1, {
+        pitch: m.pitchDev,
+        tile: m.tileDev,
+        attackTau: 0,
+        releaseTau: 0
+      });
+      m.haloFade = halo ? 1 : 0;
+      if (halo) {
+        m.sx = halo.x;
+        m.sy = halo.y;
+      }
+      draw(halo);
+    }
+    function draw(halo) {
+      const c = m.ctx;
+      const g = m.grid;
+      if (!c || !g) return;
+      const p = live.current;
+      const table = ensureLut();
+      const { cols, rows, ambient: amb, heat } = g;
+      c.globalCompositeOperation = "source-over";
+      c.fillStyle = p.background;
+      c.fillRect(0, 0, m.w, m.h);
+      let current = -1;
+      for (let r = 0; r < rows; r++) {
+        const y = r * m.pitchDev;
+        for (let col = 0; col < cols; col++) {
+          const i = r * cols + col;
+          const idx = lutIndex(amb[i], heat[i], p.intensityC, LUT_SIZE);
+          if (idx !== current) {
+            c.fillStyle = table[idx];
+            current = idx;
+          }
+          c.fillRect(col * m.pitchDev, y, m.tileDev, m.tileDev);
+        }
+      }
+      if (m.glassLayer) {
+        c.globalCompositeOperation = "soft-light";
+        c.drawImage(m.glassLayer, 0, 0);
+      }
+      if (m.haloFade > 0) {
+        const rgb = parseRgb(p.color) ?? DEFAULT_COLOR;
+        const r = (halo ? halo.r : p.radiusC * m.dpr) * 1.15;
+        const a = p.intensityC * m.haloFade;
+        const grad = c.createRadialGradient(m.sx, m.sy, 0, m.sx, m.sy, r);
+        grad.addColorStop(0, `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${(0.2 * a).toFixed(3)})`);
+        grad.addColorStop(0.45, `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${(0.07 * a).toFixed(3)})`);
+        grad.addColorStop(1, `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0)`);
+        c.globalCompositeOperation = "lighter";
+        c.fillStyle = grad;
+        c.fillRect(m.sx - r, m.sy - r, r * 2, r * 2);
+      }
+      c.globalCompositeOperation = "source-over";
+    }
+    runtimeRef.current = { resize, requestFrame, stopLoop, drawStatic, initialHalo };
+    let mq;
+    let onMq;
+    if (typeof window.matchMedia === "function") {
+      mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+      m.reducedMotion = mq.matches;
+      setReducedMotion(mq.matches);
+      onMq = (e) => {
+        m.reducedMotion = e.matches;
+        setReducedMotion(e.matches);
+      };
+      mq.addEventListener("change", onMq);
+    }
+    resize();
+    let ro;
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(() => {
+        if (hostEl.clientWidth === m.cssW && hostEl.clientHeight === m.cssH && currentDpr() === m.dpr)
+          return;
+        resize();
+      });
+      ro.observe(hostEl);
+    }
+    let io;
+    if (typeof IntersectionObserver !== "undefined") {
+      io = new IntersectionObserver(
+        ([entry]) => {
+          if (!entry) return;
+          m.visible = entry.isIntersecting;
+          if (m.visible) requestFrame();
+          else stopLoop();
+        },
+        { rootMargin: "128px" }
+      );
+      io.observe(hostEl);
+    }
+    return () => {
+      stopLoop();
+      ro?.disconnect();
+      io?.disconnect();
+      if (mq && onMq) mq.removeEventListener("change", onMq);
+      runtimeRef.current = null;
+      m.ctx = null;
+      m.grid = null;
+      m.glassLayer = null;
+    };
+  }, [host, canvas, machine, live]);
+  const structuralInit = useRef(false);
+  useEffect(() => {
+    if (!structuralInit.current) {
+      structuralInit.current = true;
+      return;
+    }
+    runtimeRef.current?.resize();
+  }, [tileC, gapC, seed, noiseC, ambientC]);
+  useEffect(() => {
+    machine.lut = null;
+    machine.dirty = true;
+    const runtime = runtimeRef.current;
+    if (!runtime) return;
+    if (machine.reducedMotion)
+      runtime.drawStatic(
+        machine.haloFade > 0 ? { x: machine.sx, y: machine.sy, r: live.current.radiusC * machine.dpr } : null
+      );
+    else runtime.requestFrame();
+  }, [color, background, machine, live]);
+  const visualInit = useRef(false);
+  useEffect(() => {
+    if (!visualInit.current) {
+      visualInit.current = true;
+      return;
+    }
+    const runtime = runtimeRef.current;
+    if (!runtime) return;
+    machine.dirty = true;
+    if (machine.reducedMotion)
+      runtime.drawStatic(
+        machine.pointerOver ? { x: machine.sx, y: machine.sy, r: radiusC * machine.dpr } : runtime.initialHalo()
+      );
+    else runtime.requestFrame();
+  }, [idle, flicker, radiusC, intensityC, machine]);
+  useEffect(() => {
+    const runtime = runtimeRef.current;
+    if (!runtime) return;
+    if (reducedMotion) {
+      runtime.stopLoop();
+      runtime.drawStatic(runtime.initialHalo());
+    } else {
+      runtime.requestFrame();
+    }
+  }, [reducedMotion]);
+  useEffect(() => {
+    if (!host || !interactive) return;
+    const hostEl = host;
+    const m = machine;
+    const move = (e) => {
+      const rect = hostEl.getBoundingClientRect();
+      m.px = (e.clientX - rect.left) * m.dpr;
+      m.py = (e.clientY - rect.top) * m.dpr;
+      m.pointerOver = true;
+      const runtime = runtimeRef.current;
+      if (!runtime) return;
+      if (m.reducedMotion)
+        runtime.drawStatic({ x: m.px, y: m.py, r: live.current.radiusC * m.dpr });
+      else runtime.requestFrame();
+    };
+    const leave = () => {
+      m.pointerOver = false;
+      m.lastLeaveAt = typeof performance !== "undefined" ? performance.now() : Date.now();
+      const runtime = runtimeRef.current;
+      if (!runtime) return;
+      if (m.reducedMotion) runtime.drawStatic(runtime.initialHalo());
+      else runtime.requestFrame();
+    };
+    hostEl.addEventListener("pointermove", move, { passive: true });
+    hostEl.addEventListener("pointerleave", leave);
+    hostEl.addEventListener("pointercancel", leave);
+    return () => {
+      hostEl.removeEventListener("pointermove", move);
+      hostEl.removeEventListener("pointerleave", leave);
+      hostEl.removeEventListener("pointercancel", leave);
+      m.pointerOver = false;
+    };
+  }, [host, interactive, machine, live]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: composedHostRef,
+      className: cn("mosaic-glow relative overflow-hidden", className),
+      style: { ...style, backgroundColor: background },
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "pointer-events-none absolute inset-0 block h-full w-full",
+            "aria-hidden": "true"
+          }
+        ),
+        children != null ? /* @__PURE__ */ jsx("div", { className: "mosaic-glow__content relative z-[1] h-full w-full", children }) : null
+      ]
+    }
+  );
+});
+export {
+  MosaicGlow
+};

package/dist/components/mosaic-glow/index.d.ts

@@ -0,0 +1,2 @@
+export { MosaicGlow } from "./MosaicGlow.js";
+export type { MosaicGlowProps, MosaicGlowIdle } from "./MosaicGlow.js";

package/dist/components/mosaic-glow/mosaic-glow-core.d.ts

@@ -0,0 +1,94 @@
+/**
+ * MosaicGlow core — pure math, no DOM.
+ *
+ * Everything the canvas loop needs that can be unit-tested without a browser:
+ * a seeded PRNG, per-tile grid state, the halo falloff curve, the fps-independent
+ * heat step, ambient flicker, the colour LUT and the idle drift path.
+ *
+ * Ported unchanged from the Svelte package's `mosaic-glow-core.ts`. The only
+ * edits are the `!` assertions on typed-array, string and regex-group reads:
+ * this package compiles with `noUncheckedIndexedAccess`, which widens every
+ * indexed read to `| undefined`. Each one is in bounds by construction (the
+ * loops are driven by the array's own length, the regex groups are guaranteed
+ * by a successful match), so the assertions change no behaviour.
+ */
+export type Rgb = [number, number, number];
+/** Small, fast, seedable PRNG (32-bit state). Same seed → same sequence. */
+export declare function mulberry32(seed: number): () => number;
+/**
+ * Deterministic random in [0, 1) for a tile, keyed by its (col, row) coordinates
+ * rather than its linear index so a resize never reshuffles the field.
+ */
+export declare function tileRandom(seed: number, col: number, row: number, salt: number): number;
+export interface MosaicGrid {
+    cols: number;
+    rows: number;
+    /** Per-tile peak response to the halo, in [1 - noise, 1]. */
+    weight: Float32Array;
+    /** Current ambient level (LUT space, 0..ambient). */
+    ambient: Float32Array;
+    /** Flicker eases `ambient` toward this. */
+    ambientTarget: Float32Array;
+    /** Lit level driven by the halo, 0..1. */
+    heat: Float32Array;
+}
+/** Brightest resting tile at `ambient = 1`, in LUT space (keeps them well under the halo colour). */
+export declare const AMBIENT_CEILING = 0.4;
+/** Cubic skew so most tiles sit near black and only a few read as "on". */
+export declare function ambientLevel(u: number, ambient: number): number;
+export declare function createGrid(cols: number, rows: number, seed: number, noise: number, ambient: number): MosaicGrid;
+/**
+ * 1 - smoothstep(d): exactly 1 at the centre, exactly 0 at the rim, zero slope
+ * at both ends so there is never a visible hard ring.
+ */
+export declare function falloff(d: number): number;
+/** Fraction of the remaining distance to cover after `dt` seconds (exponential approach). */
+export declare function rate(dt: number, tau: number): number;
+export interface Halo {
+    /** Centre, in the same units as tile positions (device px). */
+    x: number;
+    y: number;
+    /** Radius, same units. */
+    r: number;
+}
+export interface StepParams {
+    /** Distance between tile origins (device px). */
+    pitch: number;
+    /** Tile edge length (device px). */
+    tile: number;
+    attackTau: number;
+    releaseTau: number;
+}
+/** Seconds to reach ~63% of the target when lighting up (≈0.34/frame at 60fps). */
+export declare const ATTACK_TAU = 0.04;
+/**
+ * Advance every tile's heat toward its target for this frame.
+ * Returns the largest remaining |target - heat| so the caller can stop the loop
+ * once the field has settled.
+ */
+export declare function updateTiles(g: MosaicGrid, halo: Halo | null, dt: number, p: StepParams): number;
+/** Slow ambient life: occasionally retarget a tile, then ease toward the target. */
+export declare function flickerTiles(g: MosaicGrid, dt: number, chancePerSec: number, ambient: number, rng?: () => number): void;
+/** Parse `#rgb`, `#rrggbb` or `rgb(r, g, b)`. Returns null on anything else. */
+export declare function parseRgb(input: string): Rgb | null;
+export declare function mix(a: Rgb, b: Rgb, t: number): Rgb;
+export declare const DEFAULT_COLOR: Rgb;
+export declare const DEFAULT_BACKGROUND: Rgb;
+/** Level at which the ramp reaches the pure halo colour; above it heads to the peak. */
+export declare const LUT_KNEE = 0.55;
+/**
+ * Build the tile colour ramp: a hair above the background at 0, the halo colour
+ * at the knee, a near-white tint of the halo colour at 1.
+ */
+export declare function buildLut(background: string, color: string, size?: number): string[];
+export declare function lutIndex(ambient: number, heat: number, intensity: number, size: number): number;
+/** Slow Lissajous wander that stays inside the box (periods 9s / 13s). */
+export declare function driftPoint(t: number, w: number, h: number): {
+    x: number;
+    y: number;
+};
+/** `trail` 0..1 → release time constant in seconds. */
+export declare function releaseTau(trail: number): number;
+/** `smoothing` 0..1 → pointer lag time constant in seconds (0 = instant). */
+export declare function smoothingTau(smoothing: number): number;
+export declare function clamp01(v: number): number;