apex-ui-kit 2.9.0 → 2.11.0

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

@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { motion } from "framer-motion";
 import { Code2, Layers, Sparkles, Zap } from "lucide-react";
 
 /*
- * Card Swap 3D: cards stacked diagonally into the distance in 3D. On a
- * timer the front card drops away and slides to the back of the stack
- * while the rest step forward. Pauses while hovered; click to swap now.
+ * Card Swap 3D: cards stacked in real 3D, turned toward the viewer and
+ * receding into the distance. On a timer the front card drops away and
+ * returns to the back while the rest step forward. Pauses while hovered;
+ * click to swap now. The whole stack scales down to fit narrow containers.
  */
 
 const DEFAULT_CARDS = [
@@ -15,12 +16,19 @@ const DEFAULT_CARDS = [
     { icon: Zap, title: "Fast", body: "Transforms and opacity only, 60fps on phones." },
 ];
 
-const CardSwap3D = ({ cards = DEFAULT_CARDS, delay = 3200, distanceX = 3.6, distanceY = 3.2, skew = 5, pauseOnHover = true, accentColor = "#a3e635", theme = "dark", width = 18, className = "" }) => {
+const CardSwap3D = ({ cards = DEFAULT_CARDS, delay = 3200, distanceX = 3.6, distanceY = 3.2, depth = 70, tilt = 18, skew = 0, pauseOnHover = true, accentColor = "#a3e635", theme = "dark", width = 18, className = "" }) => {
     // order[0] is the card in front.
     const [order, setOrder] = useState(() => cards.map((_, i) => i));
     const [dropping, setDropping] = useState(null);
     const [paused, setPaused] = useState(false);
+    const [fit, setFit] = useState(1);
+    const outer = useRef(null);
     const dark = theme !== "light";
+    const n = cards.length;
+    // Footprint of the whole stack in rem (card plus the steps behind it).
+    // (+5: the 3D turn makes the cards project a little wider than they are.)
+    const footW = width + distanceX * (n - 1) + 5;
+    const footH = width * 0.68 + distanceY * (n - 1) + 2;
 
     const swap = () => {
         if (dropping !== null) return;
@@ -37,42 +45,58 @@ const CardSwap3D = ({ cards = DEFAULT_CARDS, delay = 3200, distanceX = 3.6, dist
         return () => clearInterval(id);
     });
 
+    // Scale the stack down when its container is narrower than its footprint.
+    useLayoutEffect(() => {
+        const el = outer.current?.parentElement;
+        if (!el) return undefined;
+        const ro = new ResizeObserver(() => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            setFit(Math.min(1, el.clientWidth / (footW * rem)));
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [footW]);
+
     return (
-        <div
-            className={`relative [perspective:1000px] ${className}`}
-            style={{ width: `min(${width}rem, 70vw)`, height: `${width * 0.68}rem`, marginTop: `${distanceY * (cards.length - 1)}rem`, marginRight: `${distanceX * (cards.length - 1)}rem` }}
-            onPointerEnter={() => pauseOnHover && setPaused(true)}
-            onPointerLeave={() => setPaused(false)}
-            onClick={swap}
-        >
-            {cards.map((card, i) => {
-                const slot = order.indexOf(i);
-                const isDropping = dropping === i;
-                const Icon = card.icon ?? Sparkles;
-                return (
-                    <motion.div
-                        key={i}
-                        className={`absolute inset-0 cursor-pointer overflow-hidden rounded-2xl border p-6 [backface-visibility:hidden] ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"}`}
-                        style={{ zIndex: isDropping ? 60 : cards.length - slot, transformStyle: "preserve-3d", boxShadow: "0 25px 50px -25px rgba(0,0,0,0.6)" }}
-                        initial={false}
-                        animate={
-                            isDropping
-                                ? { x: "0rem", y: "14rem", z: 0, skewY: skew, opacity: 0.0 }
-                                : { x: `${slot * distanceX}rem`, y: `${-slot * distanceY}rem`, z: -slot * 60, skewY: skew, opacity: slot > 4 ? 0 : 1 }
-                        }
-                        transition={isDropping ? { duration: 0.5, ease: [0.55, 0, 0.8, 0.2] } : { type: "spring", stiffness: 140, damping: 20 }}
-                    >
-                        <div className="flex items-center gap-2.5">
-                            <span className="grid h-9 w-9 place-items-center rounded-xl text-black" style={{ background: accentColor }}>
-                                <Icon className="h-4.5 w-4.5" />
-                            </span>
-                            <p className="text-lg font-semibold">{card.title}</p>
-                        </div>
-                        <p className={`mt-3 text-[0.92rem] leading-relaxed ${dark ? "text-white/60" : "text-neutral-500"}`}>{card.body}</p>
-                        <div className="pointer-events-none absolute -bottom-10 -right-10 h-32 w-32 rounded-full opacity-20 blur-2xl" style={{ background: accentColor }} />
-                    </motion.div>
-                );
-            })}
+        <div ref={outer} className={`relative mx-auto ${className}`} style={{ width: `${footW * fit}rem`, height: `${footH * fit}rem` }}>
+            <div
+                className="absolute left-0 top-0 origin-top-left [perspective:1200px]"
+                style={{ width: `${footW}rem`, height: `${footH}rem`, transform: `scale(${fit})` }}
+                onPointerEnter={() => pauseOnHover && setPaused(true)}
+                onPointerLeave={() => setPaused(false)}
+                onClick={swap}
+            >
+                <div className="absolute [transform-style:preserve-3d]" style={{ left: "2.5rem", bottom: "1rem", width: `${width}rem`, height: `${width * 0.68}rem`, transform: `rotateY(${-tilt}deg) rotateX(${tilt * 0.35}deg)` }}>
+                    {cards.map((card, i) => {
+                        const slot = order.indexOf(i);
+                        const isDropping = dropping === i;
+                        const Icon = card.icon ?? Sparkles;
+                        return (
+                            <motion.div
+                                key={i}
+                                className={`absolute inset-0 cursor-pointer overflow-hidden rounded-2xl border p-6 ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"}`}
+                                style={{ zIndex: isDropping ? 60 : n - slot, boxShadow: "0 30px 60px -28px rgba(0,0,0,0.65)" }}
+                                initial={false}
+                                animate={
+                                    isDropping
+                                        ? { x: "-2rem", y: "16rem", z: 120, rotateZ: -8, skewY: skew, opacity: 0 }
+                                        : { x: `${slot * distanceX}rem`, y: `${-slot * distanceY}rem`, z: -slot * depth, rotateZ: 0, skewY: skew, opacity: slot > 4 ? 0 : 1 - slot * 0.12 }
+                                }
+                                transition={isDropping ? { duration: 0.5, ease: [0.55, 0, 0.8, 0.2] } : { type: "spring", stiffness: 150, damping: 21 }}
+                            >
+                                <div className="flex items-center gap-2.5">
+                                    <span className="grid h-9 w-9 place-items-center rounded-xl text-black" style={{ background: accentColor }}>
+                                        <Icon className="h-[18px] w-[18px]" />
+                                    </span>
+                                    <p className="text-lg font-semibold">{card.title}</p>
+                                </div>
+                                <p className={`mt-3 text-[0.92rem] leading-relaxed ${dark ? "text-white/60" : "text-neutral-500"}`}>{card.body}</p>
+                                <div className="pointer-events-none absolute -bottom-10 -right-10 h-32 w-32 rounded-full opacity-20 blur-2xl" style={{ background: accentColor }} />
+                            </motion.div>
+                        );
+                    })}
+                </div>
+            </div>
         </div>
     );
 };

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

@@ -49,6 +49,8 @@ const DEFAULT_ARCS = [
 
 const rad = (d) => (d * Math.PI) / 180;
 const toVec = (lat, lon) => [Math.cos(rad(lat)) * Math.sin(rad(lon)), Math.sin(rad(lat)), Math.cos(rad(lat)) * Math.cos(rad(lon))];
+// Land dot directions never change, so work them out once instead of every frame.
+const landVecs = landDots.map(([lat, lon]) => toVec(lat, lon));
 
 // Spherical interpolation between two unit vectors.
 const slerp = (a, b, t) => {
@@ -141,9 +143,10 @@ const DotGlobe = ({
             // Land dots: front bright, back faint.
             const dr = Math.max(0.8, R / 190);
             ctx.fillStyle = o.dotColor;
-            for (let i = 0; i < landDots.length; i++) {
-                const [lat, lon] = landDots[i];
-                const [x, y, z] = project(toVec(lat, lon), R, c);
+            for (let i = 0; i < landVecs.length; i++) {
+                const [x, y, z] = project(landVecs[i], R, c);
+                // Dots well behind the globe are nearly invisible; skip them.
+                if (z < -0.25) continue;
                 ctx.globalAlpha = z > 0 ? 0.35 + 0.65 * z : 0.06;
                 ctx.fillRect(x - dr, y - dr, dr * 2, dr * 2);
             }

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

@@ -0,0 +1,418 @@
+import React, { useEffect, useRef } from "react";
+import { Color, HalfFloatType, LinearFilter, Mesh, OrthographicCamera, PlaneGeometry, RGBAFormat, Scene, ShaderMaterial, Vector2, WebGLRenderer, WebGLRenderTarget } from "three";
+
+/*
+ * Fluid Cursor: a real-time fluid simulation that trails the pointer, drawn
+ * in WebGL. Moving the cursor pushes coloured ink through the fluid; it
+ * swirls (vorticity), spreads (pressure) and slowly fades. A click blows a
+ * burst. It sits over its parent as a transparent layer and never blocks
+ * clicks, so content underneath stays usable.
+ *
+ * Props: colors (cycled; a rainbow when empty), simResolution, dyeResolution,
+ * dissipation (how fast the ink fades), velocityDissipation, curl (swirl),
+ * splatRadius, splatForce, idle (soft splashes when nobody moves),
+ * className, children.
+ */
+
+const BASE_VERT = `
+uniform vec2 texelSize;
+varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB;
+void main(){
+  vUv = uv;
+  vL = vUv - vec2(texelSize.x, 0.0);
+  vR = vUv + vec2(texelSize.x, 0.0);
+  vT = vUv + vec2(0.0, texelSize.y);
+  vB = vUv - vec2(0.0, texelSize.y);
+  gl_Position = vec4(position.xy, 0.0, 1.0);
+}`;
+
+const HEAD = `precision highp float;
+varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB;
+`;
+
+const SPLAT = `${HEAD}
+uniform sampler2D uTarget; uniform float aspect; uniform vec3 color; uniform vec2 point; uniform float radius;
+void main(){
+  vec2 p = vUv - point;
+  p.x *= aspect;
+  vec3 splat = exp(-dot(p, p) / radius) * color;
+  gl_FragColor = vec4(texture2D(uTarget, vUv).xyz + splat, 1.0);
+}`;
+
+const ADVECT = `${HEAD}
+uniform sampler2D uVelocity; uniform sampler2D uSource; uniform vec2 velTexel; uniform float dt; uniform float dissipation;
+void main(){
+  vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * velTexel;
+  gl_FragColor = texture2D(uSource, coord) / (1.0 + dissipation * dt);
+}`;
+
+const DIVERGENCE = `${HEAD}
+uniform sampler2D uVelocity;
+void main(){
+  float L = texture2D(uVelocity, vL).x;
+  float R = texture2D(uVelocity, vR).x;
+  float T = texture2D(uVelocity, vT).y;
+  float B = texture2D(uVelocity, vB).y;
+  vec2 C = texture2D(uVelocity, vUv).xy;
+  // Walls: reflect velocity at the edges.
+  if (vL.x < 0.0) L = -C.x;
+  if (vR.x > 1.0) R = -C.x;
+  if (vT.y > 1.0) T = -C.y;
+  if (vB.y < 0.0) B = -C.y;
+  gl_FragColor = vec4(0.5 * (R - L + T - B), 0.0, 0.0, 1.0);
+}`;
+
+const CURL = `${HEAD}
+uniform sampler2D uVelocity;
+void main(){
+  float L = texture2D(uVelocity, vL).y;
+  float R = texture2D(uVelocity, vR).y;
+  float T = texture2D(uVelocity, vT).x;
+  float B = texture2D(uVelocity, vB).x;
+  gl_FragColor = vec4(0.5 * (R - L - T + B), 0.0, 0.0, 1.0);
+}`;
+
+const VORTICITY = `${HEAD}
+uniform sampler2D uVelocity; uniform sampler2D uCurl; uniform float curl; uniform float dt;
+void main(){
+  float L = texture2D(uCurl, vL).x;
+  float R = texture2D(uCurl, vR).x;
+  float T = texture2D(uCurl, vT).x;
+  float B = texture2D(uCurl, vB).x;
+  float C = texture2D(uCurl, vUv).x;
+  vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L));
+  force /= length(force) + 0.0001;
+  force *= curl * C;
+  force.y *= -1.0;
+  vec2 vel = texture2D(uVelocity, vUv).xy + force * dt;
+  gl_FragColor = vec4(clamp(vel, -1000.0, 1000.0), 0.0, 1.0);
+}`;
+
+const SCALE = `${HEAD}
+uniform sampler2D uTexture; uniform float value;
+void main(){ gl_FragColor = value * texture2D(uTexture, vUv); }`;
+
+const PRESSURE = `${HEAD}
+uniform sampler2D uPressure; uniform sampler2D uDivergence;
+void main(){
+  float L = texture2D(uPressure, vL).x;
+  float R = texture2D(uPressure, vR).x;
+  float T = texture2D(uPressure, vT).x;
+  float B = texture2D(uPressure, vB).x;
+  float div = texture2D(uDivergence, vUv).x;
+  gl_FragColor = vec4((L + R + B + T - div) * 0.25, 0.0, 0.0, 1.0);
+}`;
+
+const GRADIENT = `${HEAD}
+uniform sampler2D uPressure; uniform sampler2D uVelocity;
+void main(){
+  float L = texture2D(uPressure, vL).x;
+  float R = texture2D(uPressure, vR).x;
+  float T = texture2D(uPressure, vT).x;
+  float B = texture2D(uPressure, vB).x;
+  vec2 vel = texture2D(uVelocity, vUv).xy - vec2(R - L, T - B);
+  gl_FragColor = vec4(vel, 0.0, 1.0);
+}`;
+
+// Shaded ink: a little light on the slopes of the dye gives it body.
+const DISPLAY = `${HEAD}
+uniform sampler2D uTexture; uniform vec2 dyeTexel;
+void main(){
+  vec3 c = texture2D(uTexture, vUv).rgb;
+  vec3 lc = texture2D(uTexture, vUv - vec2(dyeTexel.x, 0.0)).rgb;
+  vec3 rc = texture2D(uTexture, vUv + vec2(dyeTexel.x, 0.0)).rgb;
+  vec3 tc = texture2D(uTexture, vUv + vec2(0.0, dyeTexel.y)).rgb;
+  vec3 bc = texture2D(uTexture, vUv - vec2(0.0, dyeTexel.y)).rgb;
+  float dx = length(rc) - length(lc);
+  float dy = length(tc) - length(bc);
+  vec3 n = normalize(vec3(dx, dy, length(dyeTexel)));
+  float diffuse = clamp(dot(n, vec3(0.0, 0.0, 1.0)) + 0.7, 0.7, 1.0);
+  c *= diffuse;
+  float a = clamp(max(c.r, max(c.g, c.b)), 0.0, 1.0);
+  gl_FragColor = vec4(c, a);
+}`;
+
+const hsvToRgb = (h, s, v) => {
+    const i = Math.floor(h * 6);
+    const f = h * 6 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    return [
+        [v, t, p],
+        [q, v, p],
+        [p, v, t],
+        [p, q, v],
+        [t, p, v],
+        [v, p, q],
+    ][i % 6];
+};
+
+const FluidCursor = ({ colors = [], simResolution = 128, dyeResolution = 1024, dissipation = 1.6, velocityDissipation = 1.2, curl = 18, splatRadius = 0.22, splatForce = 6000, idle = true, className = "", children }) => {
+    const wrap = useRef(null);
+    const live = useRef({});
+    live.current = { colors, dissipation, velocityDissipation, curl, splatRadius, splatForce, idle };
+
+    useEffect(() => {
+        const el = wrap.current;
+        const renderer = new WebGLRenderer({ alpha: true, premultipliedAlpha: true, antialias: false, powerPreference: "high-performance" });
+        if (!renderer.capabilities.isWebGL2 && !renderer.extensions.get("OES_texture_half_float")) {
+            renderer.dispose();
+            return undefined;
+        }
+        renderer.setPixelRatio(1);
+        renderer.autoClear = false;
+        Object.assign(renderer.domElement.style, { position: "absolute", inset: "0", width: "100%", height: "100%", display: "block", pointerEvents: "none" });
+        el.prepend(renderer.domElement);
+
+        const scene = new Scene();
+        const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const quad = new Mesh(new PlaneGeometry(2, 2));
+        scene.add(quad);
+        const texel = { value: new Vector2() };
+        const mat = (frag, uniforms) => new ShaderMaterial({ vertexShader: BASE_VERT, fragmentShader: frag, uniforms: { texelSize: texel, ...uniforms }, depthTest: false, depthWrite: false });
+        const m = {
+            splat: mat(SPLAT, { uTarget: { value: null }, aspect: { value: 1 }, color: { value: new Color() }, point: { value: new Vector2() }, radius: { value: 0.01 } }),
+            advect: mat(ADVECT, { uVelocity: { value: null }, uSource: { value: null }, velTexel: { value: new Vector2() }, dt: { value: 0.016 }, dissipation: { value: 1 } }),
+            divergence: mat(DIVERGENCE, { uVelocity: { value: null } }),
+            curl: mat(CURL, { uVelocity: { value: null } }),
+            vorticity: mat(VORTICITY, { uVelocity: { value: null }, uCurl: { value: null }, curl: { value: 18 }, dt: { value: 0.016 } }),
+            scale: mat(SCALE, { uTexture: { value: null }, value: { value: 0.8 } }),
+            pressure: mat(PRESSURE, { uPressure: { value: null }, uDivergence: { value: null } }),
+            gradient: mat(GRADIENT, { uPressure: { value: null }, uVelocity: { value: null } }),
+            display: mat(DISPLAY, { uTexture: { value: null }, dyeTexel: { value: new Vector2() } }),
+        };
+        m.display.transparent = true;
+
+        const target = (w, h) => new WebGLRenderTarget(w, h, { type: HalfFloatType, format: RGBAFormat, minFilter: LinearFilter, magFilter: LinearFilter, depthBuffer: false, stencilBuffer: false });
+        const double = (w, h) => {
+            const d = { read: target(w, h), write: target(w, h), w, h };
+            d.swap = () => ([d.read, d.write] = [d.write, d.read]);
+            d.dispose = () => {
+                d.read.dispose();
+                d.write.dispose();
+            };
+            return d;
+        };
+        let fbo = null;
+        const sizeFor = (res, w, h) => {
+            const a = w / h;
+            const min = Math.round(res);
+            const max = Math.round(res * Math.max(a, 1 / a));
+            return a > 1 ? [max, min] : [min, max];
+        };
+        const build = () => {
+            const { width, height } = el.getBoundingClientRect();
+            if (!width || !height) return false;
+            renderer.setSize(width, height, false);
+            fbo?.all.forEach((t) => t.dispose());
+            const [sw, sh] = sizeFor(simResolution, width, height);
+            const [dw, dh] = sizeFor(Math.min(dyeResolution, Math.max(width, height)), width, height);
+            const velocity = double(sw, sh);
+            const dye = double(dw, dh);
+            const pressure = double(sw, sh);
+            const divergence = target(sw, sh);
+            const curlT = target(sw, sh);
+            fbo = { velocity, dye, pressure, divergence, curl: curlT, all: [velocity, dye, pressure, divergence, curlT], aspect: width / height };
+            return true;
+        };
+
+        const pass = (material, out, w, h) => {
+            texel.value.set(1 / w, 1 / h);
+            quad.material = material;
+            renderer.setRenderTarget(out);
+            renderer.render(scene, camera);
+        };
+
+        const splat = (x, y, dx, dy, color) => {
+            const o = live.current;
+            const f = fbo;
+            m.splat.uniforms.aspect.value = f.aspect;
+            m.splat.uniforms.point.value.set(x, y);
+            m.splat.uniforms.radius.value = (o.splatRadius / 100) * (f.aspect > 1 ? f.aspect : 1);
+            m.splat.uniforms.uTarget.value = f.velocity.read.texture;
+            m.splat.uniforms.color.value.setRGB(dx, dy, 0);
+            pass(m.splat, f.velocity.write, f.velocity.w, f.velocity.h);
+            f.velocity.swap();
+            m.splat.uniforms.uTarget.value = f.dye.read.texture;
+            m.splat.uniforms.color.value.setRGB(color[0], color[1], color[2]);
+            pass(m.splat, f.dye.write, f.dye.w, f.dye.h);
+            f.dye.swap();
+        };
+
+        let hue = Math.random();
+        let pick = 0;
+        const nextColor = (strength = 0.3) => {
+            const list = live.current.colors;
+            if (list?.length) {
+                const c = new Color(list[pick++ % list.length]);
+                return [c.r * strength, c.g * strength, c.b * strength];
+            }
+            hue = (hue + 0.07) % 1;
+            return hsvToRgb(hue, 1, 1).map((v) => v * strength);
+        };
+
+        const step = (dt) => {
+            const o = live.current;
+            const f = fbo;
+            const { velocity, dye, pressure } = f;
+            // Swirl.
+            m.curl.uniforms.uVelocity.value = velocity.read.texture;
+            pass(m.curl, f.curl, velocity.w, velocity.h);
+            m.vorticity.uniforms.uVelocity.value = velocity.read.texture;
+            m.vorticity.uniforms.uCurl.value = f.curl.texture;
+            m.vorticity.uniforms.curl.value = o.curl;
+            m.vorticity.uniforms.dt.value = dt;
+            pass(m.vorticity, velocity.write, velocity.w, velocity.h);
+            velocity.swap();
+            // Make it incompressible.
+            m.divergence.uniforms.uVelocity.value = velocity.read.texture;
+            pass(m.divergence, f.divergence, velocity.w, velocity.h);
+            m.scale.uniforms.uTexture.value = pressure.read.texture;
+            m.scale.uniforms.value.value = 0.8;
+            pass(m.scale, pressure.write, pressure.w, pressure.h);
+            pressure.swap();
+            m.pressure.uniforms.uDivergence.value = f.divergence.texture;
+            for (let i = 0; i < 20; i++) {
+                m.pressure.uniforms.uPressure.value = pressure.read.texture;
+                pass(m.pressure, pressure.write, pressure.w, pressure.h);
+                pressure.swap();
+            }
+            m.gradient.uniforms.uPressure.value = pressure.read.texture;
+            m.gradient.uniforms.uVelocity.value = velocity.read.texture;
+            pass(m.gradient, velocity.write, velocity.w, velocity.h);
+            velocity.swap();
+            // Carry velocity and ink along.
+            m.advect.uniforms.velTexel.value.set(1 / velocity.w, 1 / velocity.h);
+            m.advect.uniforms.dt.value = dt;
+            m.advect.uniforms.uVelocity.value = velocity.read.texture;
+            m.advect.uniforms.uSource.value = velocity.read.texture;
+            m.advect.uniforms.dissipation.value = o.velocityDissipation;
+            pass(m.advect, velocity.write, velocity.w, velocity.h);
+            velocity.swap();
+            m.advect.uniforms.uVelocity.value = velocity.read.texture;
+            m.advect.uniforms.uSource.value = dye.read.texture;
+            m.advect.uniforms.dissipation.value = o.dissipation;
+            pass(m.advect, dye.write, dye.w, dye.h);
+            dye.swap();
+        };
+
+        const draw = () => {
+            m.display.uniforms.uTexture.value = fbo.dye.read.texture;
+            m.display.uniforms.dyeTexel.value.set(1 / fbo.dye.w, 1 / fbo.dye.h);
+            texel.value.set(1 / fbo.dye.w, 1 / fbo.dye.h);
+            quad.material = m.display;
+            renderer.setRenderTarget(null);
+            renderer.clear();
+            renderer.render(scene, camera);
+        };
+
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const pointer = { x: 0, y: 0, dx: 0, dy: 0, moved: false, inside: false, color: nextColor(), lastMove: 0 };
+        let raf = 0;
+        let last = 0;
+        let visible = true;
+        let nextIdle = 0;
+
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const dt = last ? Math.min((now - last) / 1000, 0.016) : 0.016;
+            last = now;
+            if (pointer.moved) {
+                pointer.moved = false;
+                splat(pointer.x, pointer.y, pointer.dx * o.splatForce, pointer.dy * o.splatForce, pointer.color);
+            }
+            // Idle: soft splashes from the edges so the space never looks empty.
+            if (o.idle && now - pointer.lastMove > 2500 && now > nextIdle) {
+                nextIdle = now + 1400 + Math.random() * 1200;
+                const x = Math.random();
+                const y = Math.random() * 0.6 + 0.2;
+                const ang = Math.random() * Math.PI * 2;
+                splat(x, y, Math.cos(ang) * 600, Math.sin(ang) * 600, nextColor(0.35));
+            }
+            step(dt);
+            draw();
+            if (visible) raf = requestAnimationFrame(frame);
+        };
+        const start = () => {
+            if (!raf && visible && !reduced) {
+                last = 0;
+                raf = requestAnimationFrame(frame);
+            }
+        };
+
+        // Listen on the window so the layer can sit over clickable content.
+        const onMove = (e) => {
+            const r = el.getBoundingClientRect();
+            const inside = e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
+            if (!inside) {
+                pointer.inside = false;
+                return;
+            }
+            const x = (e.clientX - r.left) / r.width;
+            const y = 1 - (e.clientY - r.top) / r.height;
+            if (!pointer.inside) {
+                pointer.inside = true;
+                pointer.x = x;
+                pointer.y = y;
+                return;
+            }
+            pointer.dx = (x - pointer.x) * (fbo.aspect < 1 ? fbo.aspect : 1);
+            pointer.dy = (y - pointer.y) / (fbo.aspect > 1 ? fbo.aspect : 1);
+            pointer.x = x;
+            pointer.y = y;
+            pointer.moved = Math.abs(pointer.dx) + Math.abs(pointer.dy) > 0;
+            pointer.lastMove = performance.now();
+            if (Math.random() < 0.08) pointer.color = nextColor();
+        };
+        const onDown = (e) => {
+            const r = el.getBoundingClientRect();
+            if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) return;
+            const x = (e.clientX - r.left) / r.width;
+            const y = 1 - (e.clientY - r.top) / r.height;
+            const c = nextColor(0.6);
+            for (let i = 0; i < 6; i++) {
+                const ang = (i / 6) * Math.PI * 2;
+                splat(x, y, Math.cos(ang) * 1400, Math.sin(ang) * 1400, c);
+            }
+            pointer.lastMove = performance.now();
+        };
+        window.addEventListener("pointermove", onMove, { passive: true });
+        window.addEventListener("pointerdown", onDown, { passive: true });
+
+        const ro = new ResizeObserver(() => {
+            if (build()) start();
+        });
+        ro.observe(el);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        if (build()) start();
+
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerdown", onDown);
+            fbo?.all.forEach((t) => t.dispose());
+            Object.values(m).forEach((x) => x.dispose());
+            quad.geometry.dispose();
+            renderer.dispose();
+            renderer.forceContextLoss();
+            renderer.domElement.remove();
+        };
+        // Resolutions rebuild the simulation; the rest is read live.
+    }, [simResolution, dyeResolution]);
+
+    return (
+        <div ref={wrap} className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`}>
+            {children}
+        </div>
+    );
+};
+
+export default FluidCursor;