apex-ui-kit 2.9.0 → 2.11.0

package/ReadMe.md

@@ -4,7 +4,7 @@
 [![npm downloads](https://img.shields.io/npm/dm/apex-ui-kit?color=a3e635)](https://www.npmjs.com/package/apex-ui-kit)
 [![license](https://img.shields.io/npm/l/apex-ui-kit?color=a3e635)](./Licence.md)
 
-**116 free, animated UI components for React.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
+**118 free, animated UI components for React.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
 
 Built with React, Tailwind CSS and Framer Motion, plus GSAP, Canvas and WebGL where a component needs them.
 
@@ -15,7 +15,7 @@ Built with React, Tailwind CSS and Framer Motion, plus GSAP, Canvas and WebGL wh
 
 ## Why ApexUI
 
-- **116 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
+- **118 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
 - **You own the code.** The CLI copies plain `.jsx` files into your project, no runtime package to keep in sync.
 - **Every docs page has** a live preview, a playground to tweak props, a Desktop / Tablet / Mobile preview, the full props table and a ready prompt you can paste into ChatGPT or Claude.
 - **Smooth on real devices.** Animations stick to transform and opacity, respect reduced motion, and work with mouse, touch and keyboard.
@@ -196,7 +196,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Magnetic Button](https://apex-ui.in/components/magnetic-button) | `magnetic-button` |
 | [Star Border](https://apex-ui.in/components/star-border) | `star-border` |
 
-### Interactive (31)
+### Interactive (33)
 
 | Component | CLI name |
 | --- | --- |
@@ -215,6 +215,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Elastic Slider](https://apex-ui.in/components/elastic-slider) | `elastic-slider` |
 | [FAQ Accordion](https://apex-ui.in/components/faq-accordion) | `faq-accordion` |
 | [Flip Book](https://apex-ui.in/components/flip-book) | `flip-book` |
+| [Fluid Cursor](https://apex-ui.in/components/fluid-cursor) | `fluid-cursor` |
 | [Glass Lens](https://apex-ui.in/components/glass-lens) | `glass-lens` |
 | [Image Compare](https://apex-ui.in/components/image-compare) | `image-compare` |
 | [Infinite Canvas](https://apex-ui.in/components/infinite-canvas) | `infinite-canvas` |
@@ -227,6 +228,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Particle Morph](https://apex-ui.in/components/particle-morph) | `particle-morph` |
 | [Pointer Follower](https://apex-ui.in/components/pointer-follower) | `pointer-follower` |
 | [Receipt Printer](https://apex-ui.in/components/receipt-printer) | `receipt-printer` |
+| [Sketch Reveal](https://apex-ui.in/components/sketch-reveal) | `sketch-reveal` |
 | [Stepper](https://apex-ui.in/components/stepper) | `stepper` |
 | [Toast Stack](https://apex-ui.in/components/toast-stack) | `toast-stack` |
 | [ToolTip](https://apex-ui.in/components/tool-tip) | `tooltip` |
@@ -260,8 +262,9 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Dot Globe](https://apex-ui.in/components/dot-globe) | `dot-globe` |
 | [World Map](https://apex-ui.in/components/world-map) | `world-map` |
 
-## What's new in 2.9
+## What's new in 2.10
 
+- New in 2.10: Fluid Cursor (a real-time WebGL fluid sim that trails the cursor) and Sketch Reveal (a photo turns into a glowing sketch and burns away into the next one as you scroll).
 - New in 2.9: Liquid Glass (iOS style WebGL glass), 10 live page templates on the site, Arc Gallery auto scroll, Scroll Stack on the page scroll, Sunrise trees and birds.
 - New in 2.8: Glass Lens (WebGL liquid glass), Dither Waves (WebGL 1-bit background), Infinite Canvas, Image Accordion, Orbit Icons, Command Palette, Crossed Marquee (tech-stack bands with simple-icons) and Theme Switcher (8 themes with a circle reveal).
 - Toast Stack and Radial Menu no longer blink in production builds; Radial Menu, 3D Text Ring, Animated Tabs and Gooey Nav now fit 320px phones.

package/dist/ApexUI-Kit/templates/AuroraBackground/AuroraBackground.jsx

@@ -1,45 +1,167 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 
 /*
- * Aurora Background: soft northern-light bands that drift and shimmer, built
- * from blurred CSS gradients only (no canvas, no WebGL). Works on light and
- * dark pages; reduced-motion visitors get the same picture without movement.
+ * Aurora Background: northern lights over a night sky, drawn in one small
+ * WebGL shader. Curtains of light hang from the top, ripple sideways and
+ * flicker in fine vertical rays; the colours run from the first (lower edge)
+ * to the last (upper fringe). Faint stars sit behind them. Reduced-motion
+ * visitors get a still frame. No library needed.
  */
 
-const AuroraBackground = ({
-    children,
-    colors = ["#22d3ee", "#a3e635", "#a78bfa", "#38bdf8"],
-    theme = "dark",
-    speed = 1,
-    intensity = 1,
-    className = "",
-    containerClassName = "",
-}) => {
+const VERT = `attribute vec2 p; void main(){ gl_Position = vec4(p, 0.0, 1.0); }`;
+
+const FRAG = `
+precision highp float;
+uniform vec2 uRes; uniform float uTime; uniform float uIntensity; uniform float uLight;
+uniform vec3 uC0; uniform vec3 uC1; uniform vec3 uC2; uniform vec3 uC3; uniform vec3 uSky;
+
+float h(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+float n(vec2 p){
+  vec2 i = floor(p); vec2 f = fract(p); f = f * f * (3.0 - 2.0 * f);
+  return mix(mix(h(i), h(i + vec2(1, 0)), f.x), mix(h(i + vec2(0, 1)), h(i + vec2(1, 1)), f.x), f.y);
+}
+float fbm(vec2 p){ float v = 0.0; float a = 0.5; for (int i = 0; i < 4; i++) { v += a * n(p); p *= 2.1; a *= 0.5; } return v; }
+
+vec3 ramp(float t){
+  t = clamp(t, 0.0, 1.0) * 3.0;
+  return t < 1.0 ? mix(uC0, uC1, t) : t < 2.0 ? mix(uC1, uC2, t - 1.0) : mix(uC2, uC3, t - 2.0);
+}
+
+// One curtain: a wavy band whose lower edge is bright and which fades upward.
+vec3 curtain(vec2 uv, float t, float seed, float base, float amp){
+  float x = uv.x * 1.6 + seed;
+  float wave = (fbm(vec2(x * 0.9, t * 0.12 + seed)) - 0.5) * amp + sin(x * 1.7 + t * 0.35 + seed) * amp * 0.35;
+  float edge = base + wave;                      // lower edge of the curtain
+  float d = uv.y - edge;                         // height above the edge
+  if (d < -0.05) return vec3(0.0);
+  float rays = 0.55 + 0.45 * n(vec2(x * 38.0, t * 0.6 + seed));   // fine vertical rays
+  float body = exp(-max(d, 0.0) * 3.2) * smoothstep(-0.05, 0.015, d);
+  float glow = exp(-abs(d) * 26.0) * 0.9;        // bright lower rim
+  float shimmer = 0.75 + 0.25 * sin(t * 1.3 + x * 6.0 + seed * 3.0);
+  return ramp(clamp(d * 1.9, 0.0, 1.0)) * (body * rays + glow) * shimmer;
+}
+
+void main(){
+  vec2 uv = gl_FragCoord.xy / uRes;
+  uv.x *= uRes.x / uRes.y;
+  float t = uTime;
+  vec3 col = uSky * (0.55 + 0.45 * (1.0 - gl_FragCoord.y / uRes.y));
+  // Stars (dark sky only).
+  vec2 cell = floor(gl_FragCoord.xy / 2.0);
+  col += step(0.9975, h(cell)) * (0.5 + 0.5 * sin(t * 2.0 + h(cell) * 40.0)) * (1.0 - uLight) * 0.8;
+  vec3 a = curtain(uv, t, 0.0, 0.42, 0.22) + curtain(uv, t * 0.8, 4.7, 0.52, 0.18) * 0.75 + curtain(uv, t * 1.15, 9.3, 0.33, 0.26) * 0.55;
+  a *= uIntensity;
+  col = uLight > 0.5 ? mix(col, col * (1.0 - min(a, 0.85)) + a * 0.55, 1.0) : col + a;
+  col += (h(gl_FragCoord.xy + t) - 0.5) / 255.0;
+  gl_FragColor = vec4(col, 1.0);
+}`;
+
+const toRgb = (hex) => {
+    const m = /^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.exec(String(hex).trim());
+    return m ? [parseInt(m[1], 16) / 255, parseInt(m[2], 16) / 255, parseInt(m[3], 16) / 255] : [0.4, 0.9, 0.6];
+};
+
+const AuroraBackground = ({ children, colors = ["#22c55e", "#2dd4bf", "#38bdf8", "#c084fc"], theme = "dark", speed = 1, intensity = 1, className = "", containerClassName = "" }) => {
+    const box = useRef(null);
+    const live = useRef({});
+    live.current = { colors, theme, speed, intensity };
     const dark = theme !== "light";
-    const stops = colors.map((c, i) => `${c} ${Math.round((i / colors.length) * 100)}%`).join(", ");
-    const duration = `${60 / Math.max(0.1, speed)}s`;
+
+    useEffect(() => {
+        const el = box.current;
+        const cv = document.createElement("canvas");
+        Object.assign(cv.style, { position: "absolute", inset: "0", width: "100%", height: "100%", display: "block" });
+        el.prepend(cv);
+        const gl = cv.getContext("webgl", { antialias: false, alpha: false, premultipliedAlpha: false });
+        if (!gl) {
+            cv.remove();
+            return undefined;
+        }
+        const shader = (type, src) => {
+            const s = gl.createShader(type);
+            gl.shaderSource(s, src);
+            gl.compileShader(s);
+            return s;
+        };
+        const prog = gl.createProgram();
+        gl.attachShader(prog, shader(gl.VERTEX_SHADER, VERT));
+        gl.attachShader(prog, shader(gl.FRAGMENT_SHADER, FRAG));
+        gl.linkProgram(prog);
+        gl.useProgram(prog);
+        const buf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+        const loc = gl.getAttribLocation(prog, "p");
+        gl.enableVertexAttribArray(loc);
+        gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+        const U = (name) => gl.getUniformLocation(prog, name);
+        const u = { res: U("uRes"), time: U("uTime"), int: U("uIntensity"), light: U("uLight"), sky: U("uSky"), c: [U("uC0"), U("uC1"), U("uC2"), U("uC3")] };
+
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        let raf = 0;
+        let last = 0;
+        let time = 8;
+        let visible = true;
+        const scale = 0.75; // render a little under full size: the light is soft anyway
+
+        const fit = () => {
+            const r = el.getBoundingClientRect();
+            const dpr = Math.min(window.devicePixelRatio || 1, 1.5) * scale;
+            cv.width = Math.max(1, Math.round(r.width * dpr));
+            cv.height = Math.max(1, Math.round(r.height * dpr));
+            gl.viewport(0, 0, cv.width, cv.height);
+        };
+        const draw = (now) => {
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 0;
+            last = now;
+            time += dt * o.speed;
+            const cs = [0, 1, 2, 3].map((i) => toRgb(o.colors[Math.min(i, o.colors.length - 1)] ?? "#22c55e"));
+            const light = o.theme === "light";
+            gl.uniform2f(u.res, cv.width, cv.height);
+            gl.uniform1f(u.time, time);
+            gl.uniform1f(u.int, o.intensity);
+            gl.uniform1f(u.light, light ? 1 : 0);
+            gl.uniform3fv(u.sky, light ? [0.95, 0.97, 0.99] : [0.02, 0.03, 0.07]);
+            cs.forEach((c, i) => gl.uniform3fv(u.c[i], c));
+            gl.drawArrays(gl.TRIANGLES, 0, 3);
+        };
+        const loop = (now) => {
+            raf = 0;
+            draw(now);
+            if (visible && !reduced) raf = requestAnimationFrame(loop);
+        };
+        const start = () => {
+            if (!raf && visible) {
+                last = 0;
+                raf = requestAnimationFrame(loop);
+            }
+        };
+        const ro = new ResizeObserver(() => {
+            fit();
+            start();
+        });
+        ro.observe(el);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        fit();
+        start();
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            gl.deleteBuffer(buf);
+            gl.deleteProgram(prog);
+            gl.getExtension("WEBGL_lose_context")?.loseContext();
+            cv.remove();
+        };
+    }, []);
 
     return (
-        <div className={`relative h-screen w-full overflow-hidden ${dark ? "bg-[#05060a]" : "bg-[#f8fafc]"} ${containerClassName}`}>
-            <style>{`
-                @keyframes apex-aurora { from { background-position: 50% 50%, 50% 50%; } to { background-position: 350% 50%, 350% 50%; } }
-                @media (prefers-reduced-motion: reduce) { .apex-aurora, .apex-aurora::after { animation: none !important; } }
-            `}</style>
-            <div
-                aria-hidden="true"
-                className="apex-aurora pointer-events-none absolute -inset-[10px] will-change-transform after:absolute after:inset-0 after:content-['']"
-                style={{
-                    opacity: Math.min(1, (dark ? 0.9 : 0.75) * intensity),
-                    filter: `blur(${dark ? 12 : 10}px) ${dark ? "" : "invert(0)"}`,
-                    backgroundImage: `repeating-linear-gradient(100deg, ${dark ? "#000" : "#fff"} 0%, ${dark ? "#000" : "#fff"} 7%, transparent 10%, transparent 12%, ${dark ? "#000" : "#fff"} 16%), repeating-linear-gradient(100deg, ${stops}, ${colors[0]} 100%)`,
-                    backgroundSize: "300%, 200%",
-                    backgroundPosition: "50% 50%, 50% 50%",
-                    maskImage: "radial-gradient(ellipse 120% 95% at 70% 0%, black 25%, transparent 78%)",
-                    WebkitMaskImage: "radial-gradient(ellipse 120% 95% at 70% 0%, black 25%, transparent 78%)",
-                    animation: `apex-aurora ${duration} linear infinite`,
-                    mixBlendMode: dark ? "normal" : "multiply",
-                }}
-            />
+        <div ref={box} className={`relative h-screen w-full overflow-hidden ${dark ? "bg-[#05070f]" : "bg-[#f1f5f9]"} ${containerClassName}`}>
             {children && <div className={`relative z-10 h-full w-full ${className}`}>{children}</div>}
         </div>
     );

package/dist/ApexUI-Kit/templates/BluePrintBackground/BluePrintBackground.jsx

@@ -1,145 +1,134 @@
-import React, { useRef, useEffect, useState } from "react";
-import { gsap } from "gsap";
-
-function BluePrintBackground({ color = '#9ae600', borderColor = 'rgb(98, 116, 142, 0.1)', bgColor, circleColor = 'rgb(154, 230, 0, 0.2)'}) {
-    const gridRef = useRef(null);
-    const [grid, setGrid] = useState({ cols: 0, rows: 0 });
-    const boxSize = 40;
-    const lastHighlighted = useRef(null);
-    const colorRef = useRef(color);
-
-    // Effect 1: calculate grid size and keep it updated on resize
-    useEffect(() => {
-        const calculateGrid = () => {
-            const cols = Math.ceil(window.innerWidth / boxSize);
-            const rows = Math.ceil(window.innerHeight / boxSize) * 2; // double rows for infinite scroll
-            // kill any child tweens before we replace children to avoid visual flicker
-            const el = gridRef.current;
-            if (el) {
-                try { gsap.killTweensOf(el); } catch { /* ignore */ }
-                Array.from(el.children).forEach((c) => { try { gsap.killTweensOf(c); } catch { /* ignore */ } });
-                lastHighlighted.current = null;
-            }
-            setGrid({ cols, rows });
-        };
-
-        calculateGrid();
-        window.addEventListener("resize", calculateGrid);
-        return () => window.removeEventListener("resize", calculateGrid);
-    }, []);
-
-    // keep colorRef up-to-date without forcing effect re-run
-    useEffect(() => { colorRef.current = color; }, [color]);
-
-    // Effect 2: initialize GSAP infinite scroll and mouse handlers once (do not recreate on grid changes)
-    useEffect(() => {
-        const el = gridRef.current;
-        let scrollTween = null;
-
-        if (el) {
-            // make sure we start from current transform so GSAP doesn't jump
-            // create a looping tween on the container only once
-            scrollTween = gsap.to(el, {
-                y: "-50%",
-                duration: 15,
-                repeat: -1,
-                ease: "linear",
-                overwrite: false,
-            });
-        }
-
-        const handleMouseMove = (e) => {
-            const el2 = gridRef.current;
-            if (!el2) return;
-
-            const target = document.elementFromPoint(e.clientX, e.clientY);
-            if (!target || !el2.contains(target)) {
-                if (lastHighlighted.current !== null) {
-                    const prev = el2.children[lastHighlighted.current];
-                    if (prev) gsap.to(prev, { backgroundColor: "transparent", boxShadow: "none", duration: 0.18 });
-                    lastHighlighted.current = null;
-                }
-                return;
-            }
-
-            const child = target.closest("div");
-            const index = Array.prototype.indexOf.call(el2.children, child);
-            if (index === -1) return;
-
-            if (lastHighlighted.current !== index) {
-                if (lastHighlighted.current !== null) {
-                    const prevBox = el2.children[lastHighlighted.current];
-                    if (prevBox) gsap.to(prevBox, { backgroundColor: "transparent", boxShadow: "none", duration: 0.18 });
-                }
-
-                const newBox = el2.children[index];
-                if (newBox) {
-                    const c = colorRef.current || "#a3e635";
-                    gsap.to(newBox, { backgroundColor: c, boxShadow: `0 0 12px ${c}`, duration: 0.12 });
-                }
-
-                lastHighlighted.current = index;
-            }
-        };
-
-        // Hit-test at most once per frame instead of on every mousemove event.
-        let moveFrame = 0;
-        let lastMove = null;
-        const onMouseMove = (e) => {
-            lastMove = e;
-            if (moveFrame) return;
-            moveFrame = requestAnimationFrame(() => {
-                moveFrame = 0;
-                handleMouseMove(lastMove);
-            });
-        };
-        window.addEventListener("mousemove", onMouseMove, { passive: true });
-
-        return () => {
-            window.removeEventListener("mousemove", onMouseMove);
-            cancelAnimationFrame(moveFrame);
-            if (scrollTween && typeof scrollTween.kill === "function") {
-                try { scrollTween.kill(); } catch { /* ignore */ }
-            }
-            if (el) {
-                try { gsap.killTweensOf(el); } catch { /* ignore */ }
-                Array.from(el.children).forEach((c) => { try { gsap.killTweensOf(c); } catch { /* ignore */ } });
-            }
-            lastHighlighted.current = null;
-        };
-    }, []);
-
-    const total = grid.cols * grid.rows;
-
-    return (
-        <div className="absolute inset-0 z-0 w-full h-full overflow-hidden bg-slate-800" style={{ backgroundColor: `${bgColor}` }}>
-            <div
-                ref={gridRef}
-                className="grid"
-                style={{
-                    gridTemplateColumns: `repeat(${grid.cols}, ${boxSize}px)`,
-                    gridTemplateRows: `repeat(${grid.rows}, ${boxSize}px)`,
-                }}
-            >
-                {Array.from({ length: total }).map((_, i) => (
-                    <div
-                        key={i}
-                        className={`border bg-transparent w-10 h-10`}
-                        style={{
-                            borderColor: borderColor
-                        }}
-                    />
-                ))}
-            </div>
-            {/* Spotlight overlay - positioned after grid to not interfere with scroll */}
-            <div
-                className="absolute inset-0 z-10 pointer-events-none blur-3xl"
-                style={{
-                    background: `radial-gradient(circle, ${circleColor} 0%, rgba(0, 0, 255, 0.1) 100%)`
-                }}
-            />
-        </div >
-    );
-}
-
-export default BluePrintBackground;
+import React, { useEffect, useRef } from "react";
+
+/*
+ * Blueprint Background: a drafting grid that drifts upward, with the cell
+ * under the pointer lighting up and fading out behind it like a trail. Drawn
+ * on one canvas (no per-cell elements), so it stays smooth on phones. Fills
+ * its nearest positioned parent; put content on top as children.
+ */
+
+const BluePrintBackground = ({ color = "#9ae600", borderColor = "rgba(98, 116, 142, 0.22)", bgColor = "#1e293b", circleColor = "rgba(154, 230, 0, 0.2)", cellSize = 40, speed = 1, children, className = "" }) => {
+    const wrap = useRef(null);
+    const canvas = useRef(null);
+    const live = useRef({});
+    live.current = { color, borderColor, cellSize, speed };
+
+    useEffect(() => {
+        const el = wrap.current;
+        const cv = canvas.current;
+        const ctx = cv.getContext("2d");
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const lit = new Map(); // "col,row" -> glow 0..1
+        const pointer = { x: -1, y: -1, in: false };
+        let w = 0;
+        let h = 0;
+        let dpr = 1;
+        let total = 0; // how far the grid has scrolled, in px
+        let raf = 0;
+        let last = 0;
+        let visible = true;
+
+        const fit = () => {
+            const r = el.getBoundingClientRect();
+            dpr = Math.min(window.devicePixelRatio || 1, 2);
+            w = r.width;
+            h = r.height;
+            cv.width = Math.round(w * dpr);
+            cv.height = Math.round(h * dpr);
+        };
+
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const size = Math.max(12, o.cellSize);
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            if (!reduced) total += dt * 24 * o.speed;
+            const offset = total % size;
+
+            // Light the cell under the pointer (in grid space, so it scrolls with the grid).
+            if (pointer.in) {
+                lit.set(`${Math.floor(pointer.x / size)},${Math.floor((pointer.y + total) / size)}`, 1);
+            }
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            ctx.clearRect(0, 0, w, h);
+
+            // Glowing cells, fading out.
+            ctx.shadowColor = o.color;
+            for (const [key, a] of lit) {
+                const [c, row] = key.split(",").map(Number);
+                const y = row * size - total;
+                if (a <= 0.02 || y < -size || y > h + size) {
+                    lit.delete(key);
+                    continue;
+                }
+                ctx.globalAlpha = a;
+                ctx.shadowBlur = 14 * a;
+                ctx.fillStyle = o.color;
+                ctx.fillRect(c * size + 1, y + 1, size - 2, size - 2);
+                lit.set(key, a - dt * 1.6);
+            }
+            ctx.globalAlpha = 1;
+            ctx.shadowBlur = 0;
+
+            // Grid lines.
+            ctx.strokeStyle = o.borderColor;
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            for (let x = 0; x <= w; x += size) {
+                ctx.moveTo(Math.round(x) + 0.5, 0);
+                ctx.lineTo(Math.round(x) + 0.5, h);
+            }
+            for (let y = -offset; y <= h; y += size) {
+                ctx.moveTo(0, Math.round(y) + 0.5);
+                ctx.lineTo(w, Math.round(y) + 0.5);
+            }
+            ctx.stroke();
+
+            if (visible && (!reduced || lit.size)) raf = requestAnimationFrame(frame);
+            else last = 0;
+        };
+        const start = () => {
+            if (!raf && visible) raf = requestAnimationFrame(frame);
+        };
+
+        // Listen on the window so content placed on top doesn't block the effect.
+        const onMove = (e) => {
+            const r = el.getBoundingClientRect();
+            pointer.x = e.clientX - r.left;
+            pointer.y = e.clientY - r.top;
+            pointer.in = pointer.x >= 0 && pointer.y >= 0 && pointer.x <= r.width && pointer.y <= r.height;
+            if (pointer.in) start();
+        };
+        window.addEventListener("pointermove", onMove, { passive: true });
+        const ro = new ResizeObserver(() => {
+            fit();
+            start();
+        });
+        ro.observe(el);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        fit();
+        start();
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            window.removeEventListener("pointermove", onMove);
+        };
+    }, []);
+
+    return (
+        <div ref={wrap} className={`absolute inset-0 z-0 h-full w-full overflow-hidden ${className}`} style={{ backgroundColor: bgColor }}>
+            <canvas ref={canvas} aria-hidden="true" className="absolute inset-0 h-full w-full" />
+            {/* Soft spotlight in the middle. */}
+            <div aria-hidden="true" className="pointer-events-none absolute inset-0 blur-3xl" style={{ background: `radial-gradient(circle, ${circleColor} 0%, transparent 70%)` }} />
+            {children && <div className="relative z-10 h-full w-full">{children}</div>}
+        </div>
+    );
+};
+
+export default BluePrintBackground;