apex-ui-kit 2.7.0 → 2.9.0

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

@@ -0,0 +1,273 @@
+import React, { useEffect, useRef } from "react";
+import { Color, Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, SRGBColorSpace, TextureLoader, Vector2, WebGLRenderer } from "three";
+
+/*
+ * Glass Lens: a drop of liquid glass that glides over an image, drawn in
+ * WebGL. It magnifies the middle, bends the picture hard at its rim, splits
+ * the colors a little at the edge, catches a specular highlight and casts a
+ * soft shadow. It follows the pointer on a spring and stretches along the
+ * way it moves, then rounds out again when it stops. When the pointer
+ * leaves it drifts on its own. Drag it on touch screens.
+ */
+
+const DEFAULT_IMAGE = "https://ik.imagekit.io/ny6yinyut/apexui/assets/componentsimage/galaxy-3d.png?tr=f-auto,q-85,w-1600";
+
+const VERT = `void main(){ gl_Position = vec4(position.xy, 0.0, 1.0); }`;
+
+const FRAG = `
+precision highp float;
+uniform sampler2D uTex; uniform vec2 uRes; uniform vec2 uCover; uniform float uReady;
+uniform vec2 uLens; uniform float uRadius; uniform vec2 uStretch; uniform float uAngle;
+uniform float uRefract; uniform float uDisperse; uniform float uFrost; uniform vec3 uTint; uniform float uTintAmt;
+
+vec3 img(vec2 uv){ return texture2D(uTex, (uv - 0.5) * uCover + 0.5).rgb; }
+
+void main(){
+  vec2 px = gl_FragCoord.xy;
+  vec2 uv = px / uRes;
+  vec3 base = img(uv);
+
+  // Lens space: rotate into the direction of travel and squash by the stretch.
+  vec2 rel = px - uLens;
+  float c = cos(uAngle); float s = sin(uAngle);
+  vec2 q = vec2(c * rel.x + s * rel.y, -s * rel.x + c * rel.y) / (uRadius * uStretch);
+  float d = length(q);
+
+  // Soft drop shadow just outside the rim.
+  float shadow = smoothstep(1.45, 0.95, d) * (1.0 - smoothstep(0.98, 1.0, d));
+  vec3 col = base * (1.0 - 0.28 * shadow);
+
+  if (d < 1.0) {
+    float h = sqrt(1.0 - d * d);           // dome height
+    vec2 dir = rel / max(length(rel), 1e-3);
+    // Like a convex lens: the middle is magnified, the rim squeezes in the
+    // picture from further out.
+    float rimK = (1.0 - h) * (1.0 - h);
+    float scaleK = mix(1.0, 0.7, uRefract) + rimK * 1.15 * uRefract;
+    vec2 baseUv = (uLens + rel * scaleK) / uRes;
+    float disp = uDisperse * rimK * 0.006;
+    vec3 g;
+    if (uFrost > 0.0) {
+      vec3 acc = vec3(0.0);
+      float k = uFrost * 0.012;
+      for (int i = 0; i < 8; i++) {
+        float a = float(i) * 0.785398;
+        vec2 o = vec2(cos(a), sin(a)) * k * (0.5 + 0.5 * fract(float(i) * 0.618));
+        acc += vec3(img(baseUv + o + dir * disp).r, img(baseUv + o).g, img(baseUv + o - dir * disp).b);
+      }
+      g = acc / 8.0;
+    } else {
+      g = vec3(img(baseUv + dir * disp).r, img(baseUv).g, img(baseUv - dir * disp).b);
+    }
+    g = mix(g, g * uTint + uTint * 0.08, uTintAmt);
+    // Light from the top left: a tight highlight and a broad sheen.
+    vec3 n = normalize(vec3(q, h * 1.4));
+    vec3 l = normalize(vec3(-0.45, 0.6, 0.65));
+    float spec = pow(max(dot(reflect(-l, n), vec3(0.0, 0.0, 1.0)), 0.0), 48.0);
+    float sheen = pow(max(dot(n, l), 0.0), 3.0) * 0.12;
+    float rim = smoothstep(0.86, 0.995, d);
+    float inner = smoothstep(0.995, 0.9, d) * smoothstep(0.75, 0.97, d);
+    g += vec3(1.0) * (spec * 0.9 + sheen) + vec3(1.0) * rim * 0.22 * (0.6 + 0.4 * q.y) - inner * 0.06;
+    float edge = smoothstep(1.0, 0.985, d);
+    col = mix(col, g, edge);
+  }
+  col = mix(vec3(0.07), col, uReady);
+  gl_FragColor = vec4(col, 1.0);
+}`;
+
+const GlassLens = ({ image = DEFAULT_IMAGE, size = 9, refraction = 0.7, dispersion = 1, frost = 0, tint = "#ffffff", tintAmount = 0, stretch = 1, idle = true, height = "28rem", className = "", children }) => {
+    const wrap = useRef(null);
+    const live = useRef({});
+    live.current = { size, refraction, dispersion, frost, tint, tintAmount, stretch, idle };
+
+    useEffect(() => {
+        const el = wrap.current;
+        const renderer = new WebGLRenderer({ antialias: false, alpha: false, powerPreference: "high-performance" });
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        renderer.setPixelRatio(dpr);
+        renderer.outputColorSpace = SRGBColorSpace;
+        Object.assign(renderer.domElement.style, { position: "absolute", inset: "0", width: "100%", height: "100%", display: "block", touchAction: "none" });
+        el.prepend(renderer.domElement);
+        const scene = new Scene();
+        const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const u = {
+            uTex: { value: null },
+            uRes: { value: new Vector2(1, 1) },
+            uCover: { value: new Vector2(1, 1) },
+            uReady: { value: 0 },
+            uLens: { value: new Vector2() },
+            uRadius: { value: 100 },
+            uStretch: { value: new Vector2(1, 1) },
+            uAngle: { value: 0 },
+            uRefract: { value: 0.7 },
+            uDisperse: { value: 1 },
+            uFrost: { value: 0 },
+            uTint: { value: new Color(1, 1, 1) },
+            uTintAmt: { value: 0 },
+        };
+        const material = new ShaderMaterial({ vertexShader: VERT, fragmentShader: FRAG, uniforms: u, depthTest: false, depthWrite: false });
+        const geometry = new PlaneGeometry(2, 2);
+        scene.add(new Mesh(geometry, material));
+
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const view = { w: 1, h: 1, aspect: 1, imgAspect: 1 };
+        // Lens state in CSS pixels, y measured from the bottom like gl_FragCoord.
+        const lens = { x: 0, y: 0, vx: 0, vy: 0, tx: 0, ty: 0, sx: 1, sy: 1, angle: 0, placed: false };
+        const pointer = { inside: false, dragging: false, lastMove: 0 };
+        let raf = 0;
+        let last = 0;
+        let time = 0;
+        let visible = true;
+        let readyAt = 0;
+
+        const cover = () => {
+            const a = view.aspect;
+            const ia = view.imgAspect;
+            u.uCover.value.set(ia > a ? a / ia : 1, ia > a ? 1 : ia / a);
+        };
+        new TextureLoader().setCrossOrigin("anonymous").load(image, (t) => {
+            u.uTex.value = t;
+            view.imgAspect = t.image.width / t.image.height;
+            cover();
+            readyAt = performance.now();
+            start();
+        });
+
+        const fit = () => {
+            const { width, height: hh } = el.getBoundingClientRect();
+            if (!width || !hh) return;
+            view.w = width;
+            view.h = hh;
+            view.aspect = width / hh;
+            renderer.setSize(width, hh, false);
+            u.uRes.value.set(width * dpr, hh * dpr);
+            cover();
+            if (!lens.placed) {
+                lens.x = lens.tx = width * 0.5;
+                lens.y = lens.ty = hh * 0.5;
+                lens.placed = true;
+            }
+            start();
+        };
+
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            time += dt;
+            // Idle drift when nobody is steering it.
+            if (o.idle && !pointer.inside && !pointer.dragging && !reduced && now - pointer.lastMove > 900) {
+                lens.tx = view.w * (0.5 + 0.28 * Math.sin(time * 0.45));
+                lens.ty = view.h * (0.5 + 0.22 * Math.sin(time * 0.7 + 1.2));
+            }
+            // Spring toward the target (slightly underdamped for a liquid feel).
+            const k = reduced ? 400 : 140;
+            const c = 2 * Math.sqrt(k) * 0.82;
+            lens.vx += (k * (lens.tx - lens.x) - c * lens.vx) * dt;
+            lens.vy += (k * (lens.ty - lens.y) - c * lens.vy) * dt;
+            lens.x += lens.vx * dt;
+            lens.y += lens.vy * dt;
+            const speed = Math.hypot(lens.vx, lens.vy);
+            const goal = 1 + Math.min(0.32, speed / 2600) * o.stretch;
+            lens.sx += (goal - lens.sx) * (1 - Math.exp(-dt / 0.08));
+            lens.sy = 1 / Math.sqrt(lens.sx);
+            if (speed > 30) {
+                const want = Math.atan2(lens.vy, lens.vx);
+                let delta = want - lens.angle;
+                delta = Math.atan2(Math.sin(delta), Math.cos(delta));
+                lens.angle += delta * (1 - Math.exp(-dt / 0.06));
+            }
+
+            // size is in rem; never more than ~40% of the short side.
+            const r = Math.min(Math.min(view.w, view.h) * 0.4, o.size * 16);
+            u.uRadius.value = r * dpr;
+            u.uLens.value.set(lens.x * dpr, (view.h - lens.y) * dpr);
+            u.uStretch.value.set(lens.sx, lens.sy);
+            u.uAngle.value = -lens.angle;
+            u.uRefract.value = o.refraction;
+            u.uDisperse.value = o.dispersion;
+            u.uFrost.value = o.frost;
+            u.uTint.value.set(o.tint);
+            u.uTintAmt.value = o.tintAmount;
+            u.uReady.value = readyAt ? Math.min(1, (now - readyAt) / 500) : 0;
+            renderer.render(scene, camera);
+
+            const moving = speed > 0.5 || Math.abs(lens.tx - lens.x) > 0.3 || Math.abs(lens.ty - lens.y) > 0.3 || Math.abs(lens.sx - 1) > 0.002;
+            const idling = o.idle && !pointer.inside && !reduced;
+            if (visible && (moving || idling || u.uReady.value < 1)) raf = requestAnimationFrame(frame);
+            else last = 0;
+        };
+        function start() {
+            if (!raf && visible) raf = requestAnimationFrame(frame);
+        }
+
+        const local = (e) => {
+            const r = el.getBoundingClientRect();
+            return [e.clientX - r.left, e.clientY - r.top];
+        };
+        const onMove = (e) => {
+            if (e.pointerType === "touch" && !pointer.dragging) return;
+            [lens.tx, lens.ty] = local(e);
+            pointer.inside = true;
+            pointer.lastMove = performance.now();
+            start();
+        };
+        const onDown = (e) => {
+            if (e.pointerType !== "touch") return;
+            e.preventDefault();
+            pointer.dragging = true;
+            el.setPointerCapture(e.pointerId);
+            [lens.tx, lens.ty] = local(e);
+            start();
+        };
+        const onUp = () => {
+            pointer.dragging = false;
+            pointer.lastMove = performance.now();
+        };
+        const onLeave = (e) => {
+            if (e.pointerType === "touch") return;
+            pointer.inside = false;
+            pointer.lastMove = performance.now();
+            start();
+        };
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerdown", onDown);
+        el.addEventListener("pointerup", onUp);
+        el.addEventListener("pointercancel", onUp);
+        el.addEventListener("pointerleave", onLeave);
+        const ro = new ResizeObserver(fit);
+        ro.observe(el);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        fit();
+
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerdown", onDown);
+            el.removeEventListener("pointerup", onUp);
+            el.removeEventListener("pointercancel", onUp);
+            el.removeEventListener("pointerleave", onLeave);
+            u.uTex.value?.dispose();
+            geometry.dispose();
+            material.dispose();
+            renderer.dispose();
+            renderer.forceContextLoss();
+            renderer.domElement.remove();
+        };
+    }, [image]);
+
+    return (
+        <div ref={wrap} className={`relative w-full cursor-none select-none overflow-hidden bg-[#111] ${className}`} style={{ height }}>
+            {children && <div className="pointer-events-none relative z-10 h-full w-full">{children}</div>}
+        </div>
+    );
+};
+
+export default GlassLens;

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

@@ -299,7 +299,7 @@ const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentCo
                         href={item.href}
                         onClick={(e) => select(i, e)}
                         aria-current={i === active ? "page" : undefined}
-                        className={`relative z-[1] shrink-0 rounded-full px-2.5 py-2 text-[0.82rem] font-medium sm:py-2.5 sm:text-[0.95rem] outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-current/30 sm:px-5 ${i === active ? "text-neutral-950" : dark ? "text-white/65 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
+                        className={`relative z-[1] shrink-0 rounded-full px-2.5 py-2 text-[0.82rem] font-medium max-[380px]:px-2 max-[380px]:text-[0.76rem] sm:py-2.5 sm:text-[0.95rem] outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-current/30 sm:px-5 ${i === active ? "text-neutral-950" : dark ? "text-white/65 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
                     >
                         {item.label}
                     </a>

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

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef, useState } from "react";
+
+/*
+ * Image Accordion: a row of image panels where the active one opens wide and
+ * the rest fold into slim strips with their titles turned sideways. Hover,
+ * focus or tap a panel to open it; it can also cycle on its own. Below
+ * 520px of width it stacks vertically and the panels grow in height instead,
+ * so it fits phones. The panels animate flex-grow with one easing curve, so
+ * the open and close always move together.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets/componentsimage";
+const DEFAULT_ITEMS = [
+    { image: `${IK}/galaxy-3d.png?tr=f-auto,q-80,w-1100`, title: "Galaxy 3D", description: "A turning spiral galaxy for hero sections." },
+    { image: `${IK}/sunrise-background.png?tr=f-auto,q-80,w-1100`, title: "Sunrise", description: "A sun rising between two mountain ranges." },
+    { image: `${IK}/liquid-blob-3d.png?tr=f-auto,q-80,w-1100`, title: "Liquid Blob", description: "A glossy blob that ripples toward the pointer." },
+    { image: `${IK}/warp-tunnel.png?tr=f-auto,q-80,w-1100`, title: "Warp Tunnel", description: "Hold to boost into hyperspace." },
+    { image: `${IK}/horizon-glow-v2.png?tr=f-auto,q-80,w-1100`, title: "Horizon Glow", description: "Soft light rising from below the edge." },
+];
+
+const EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+
+const ImageAccordion = ({ items = DEFAULT_ITEMS, defaultActive = 0, autoPlay = 0, openRatio = 4, radius = 1.25, gap = 0.6, duration = 700, height = "26rem", onChange, className = "" }) => {
+    const list = items.length ? items : DEFAULT_ITEMS;
+    const [active, setActive] = useState(Math.min(defaultActive, list.length - 1));
+    const [vertical, setVertical] = useState(false);
+    const root = useRef(null);
+    const hovering = useRef(false);
+
+    const open = (i) => {
+        setActive((cur) => {
+            if (cur !== i) onChange?.(i);
+            return i;
+        });
+    };
+
+    // Stack vertically when the box is narrow (a container check, not the viewport).
+    useEffect(() => {
+        const el = root.current;
+        const ro = new ResizeObserver(([entry]) => setVertical(entry.contentRect.width < 520));
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+
+    useEffect(() => {
+        if (!autoPlay) return undefined;
+        const id = setInterval(() => {
+            if (!hovering.current) setActive((cur) => (cur + 1) % list.length);
+        }, autoPlay * 1000);
+        return () => clearInterval(id);
+    }, [autoPlay, list.length]);
+
+    return (
+        <div
+            ref={root}
+            role="tablist"
+            aria-orientation={vertical ? "vertical" : "horizontal"}
+            onPointerEnter={() => (hovering.current = true)}
+            onPointerLeave={() => (hovering.current = false)}
+            className={`flex w-full ${vertical ? "flex-col" : "flex-row"} ${className}`}
+            style={{ height: vertical ? `max(${height}, ${list.length * 3.4 + openRatio * 3}rem)` : height, gap: `${gap}rem` }}
+        >
+            {list.map((item, i) => {
+                const on = i === active;
+                return (
+                    <button
+                        key={i}
+                        type="button"
+                        role="tab"
+                        aria-selected={on}
+                        aria-label={item.title}
+                        onPointerEnter={(e) => e.pointerType === "mouse" && open(i)}
+                        onFocus={() => open(i)}
+                        onClick={() => open(i)}
+                        className="group relative min-h-0 min-w-0 overflow-hidden text-left text-white outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+                        style={{ flexGrow: on ? openRatio : 1, flexBasis: 0, borderRadius: `${radius}rem`, transition: `flex-grow ${duration}ms ${EASE}` }}
+                    >
+                        <img
+                            src={item.image}
+                            alt=""
+                            draggable={false}
+                            className="absolute inset-0 h-full w-full object-cover"
+                            style={{ transform: on ? "scale(1)" : "scale(1.12)", filter: on ? "none" : "saturate(0.6) brightness(0.75)", transition: `transform ${duration * 1.4}ms ${EASE}, filter ${duration}ms ${EASE}` }}
+                        />
+                        <span aria-hidden="true" className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+
+                        {/* Folded: the title runs along the strip. */}
+                        <span
+                            aria-hidden="true"
+                            className="absolute whitespace-nowrap text-sm font-semibold tracking-wide"
+                            style={{
+                                ...(vertical ? { left: "1rem", top: "50%", transform: "translateY(-50%)" } : { left: "50%", bottom: "1.25rem", transform: "translateX(-50%) rotate(-90deg)", transformOrigin: "center", translate: "0 -2.5rem" }),
+                                opacity: on ? 0 : 0.9,
+                                transition: `opacity ${duration * 0.5}ms ease`,
+                            }}
+                        >
+                            {item.title}
+                        </span>
+
+                        {/* Open: title and text rise in once the panel has room. */}
+                        <span
+                            className="absolute inset-x-0 bottom-0 block p-[clamp(1rem,3cqw,1.75rem)]"
+                            style={{ opacity: on ? 1 : 0, transform: on ? "none" : "translateY(0.75rem)", transition: `opacity ${duration * 0.6}ms ${EASE} ${on ? duration * 0.35 : 0}ms, transform ${duration * 0.8}ms ${EASE} ${on ? duration * 0.3 : 0}ms` }}
+                        >
+                            <span className="block font-mono text-[0.7rem] tracking-[0.2em] text-white/60">{String(i + 1).padStart(2, "0")}</span>
+                            <span className="mt-1 block text-[clamp(1.2rem,2.4vw,1.9rem)] font-bold leading-tight">{item.title}</span>
+                            {item.description && <span className="mt-1 block max-w-sm text-sm text-white/75">{item.description}</span>}
+                        </span>
+                    </button>
+                );
+            })}
+        </div>
+    );
+};
+
+export default ImageAccordion;

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

@@ -0,0 +1,230 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+/*
+ * Infinite Canvas: an endless wall of image cards you can drag, flick or
+ * scroll in any direction. It glides to a stop with momentum, cards lean
+ * with the speed of the move and settle flat again, and the wall drifts on
+ * its own while nobody touches it. Only enough cards to cover the view are
+ * rendered; they are recycled as they leave an edge, so it stays light.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets/componentsimage";
+const shot = (n, t) => ({ image: `${IK}/${n}.png?tr=f-auto,q-75,w-520`, title: t });
+const DEFAULT_ITEMS = [
+    shot("galaxy-3d", "Galaxy 3D"),
+    shot("warp-tunnel", "Warp Tunnel"),
+    shot("liquid-blob-3d", "Liquid Blob 3D"),
+    shot("particle-text", "Particle Text"),
+    shot("retro-grid-3d", "Retro Grid 3D"),
+    shot("marquee-3d", "Marquee 3D"),
+    shot("sunrise-background", "Sunrise Background"),
+    shot("circular-carousel", "Circular Carousel"),
+    shot("wireframe-knot-3d", "Wireframe Knot 3D"),
+    shot("arc-gallery", "Arc Gallery"),
+    shot("particle-morph", "Particle Morph"),
+    shot("scroll-stack", "Scroll Stack"),
+];
+
+const InfiniteCanvas = ({ items = DEFAULT_ITEMS, cardWidth = 14, aspectRatio = 0.8, gap = 1.25, drift = 18, tilt = 1, friction = 0.93, showTitles = true, height = "34rem", onItemClick, className = "" }) => {
+    const wrap = useRef(null);
+    const tiles = useRef([]);
+    const [pool, setPool] = useState(0);
+    const live = useRef({});
+    live.current = { drift, tilt, friction, showTitles, onItemClick };
+    const list = items.length ? items : DEFAULT_ITEMS;
+    const listRef = useRef(list);
+    listRef.current = list;
+    const geo = useRef({ cw: 1, ch: 1, cols: 0, rows: 0 });
+
+    // Size the pool to cover the view (plus a ring of spares) whenever it resizes.
+    useLayoutEffect(() => {
+        const el = wrap.current;
+        const fit = () => {
+            const { width, height: hh } = el.getBoundingClientRect();
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            // Cards shrink a little on small screens so a few always fit.
+            const w = Math.min(cardWidth * rem, Math.max(width * 0.42, 120));
+            const cw = w + gap * rem;
+            const ch = w / aspectRatio + gap * rem;
+            const cols = Math.ceil(width / cw) + 2;
+            const rows = Math.ceil(hh / ch) + 3;
+            geo.current = { cw, ch, w, h: w / aspectRatio, cols, rows };
+            setPool(cols * rows);
+        };
+        fit();
+        const ro = new ResizeObserver(fit);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [cardWidth, aspectRatio, gap]);
+
+    useEffect(() => {
+        const el = wrap.current;
+        if (!pool) return undefined;
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const s = { ox: 0, oy: 0, vx: 0, vy: 0, lean: { x: 0, y: 0 }, drag: null, hover: false };
+        const slots = tiles.current.slice(0, pool).map(() => ({ key: "" }));
+        let raf = 0;
+        let last = 0;
+        let visible = true;
+
+        const paint = () => {
+            const { cw, ch, cols } = geo.current;
+            const items = listRef.current;
+            const n = items.length;
+            const c0 = Math.floor(-s.ox / cw) - 1;
+            const r0 = Math.floor(-s.oy / ch) - 2;
+            const rx = Math.max(-10, Math.min(10, -s.lean.y * 0.012 * live.current.tilt));
+            const ry = Math.max(-10, Math.min(10, s.lean.x * 0.012 * live.current.tilt));
+            const sc = 1 - Math.min(0.06, Math.hypot(s.lean.x, s.lean.y) / 30000);
+            for (let k = 0; k < slots.length; k++) {
+                const el = tiles.current[k];
+                if (!el) continue;
+                const i = c0 + (k % cols);
+                const j = r0 + Math.floor(k / cols);
+                // Odd columns sit half a card lower, like a masonry wall.
+                const x = i * cw + s.ox;
+                const y = j * ch + s.oy + (((i % 2) + 2) % 2) * ch * 0.5;
+                el.style.transform = `translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, 0) rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg) scale(${sc.toFixed(4)})`;
+                const key = `${i},${j}`;
+                if (slots[k].key !== key) {
+                    slots[k].key = key;
+                    const idx = ((((i * 5 + j * 3) % n) + n) % n);
+                    el.dataset.index = String(idx);
+                    const img = el.querySelector("img");
+                    if (img && img.getAttribute("src") !== items[idx].image) img.setAttribute("src", items[idx].image);
+                    const label = el.querySelector("[data-title]");
+                    if (label) label.textContent = items[idx].title ?? "";
+                }
+            }
+        };
+
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            if (!s.drag) {
+                const k = Math.pow(o.friction, dt * 60);
+                s.vx *= k;
+                s.vy *= k;
+                // Ease back into the idle drift once the throw has died down.
+                if (!s.hover && !reduced && o.drift) {
+                    s.vx += (-o.drift * 0.6 - s.vx) * (1 - Math.exp(-dt / 1.6)) * (Math.abs(s.vx) < 120 ? 1 : 0);
+                    s.vy += (-o.drift - s.vy) * (1 - Math.exp(-dt / 1.6)) * (Math.abs(s.vy) < 120 ? 1 : 0);
+                }
+                s.ox += s.vx * dt;
+                s.oy += s.vy * dt;
+            }
+            const lx = s.drag ? s.drag.vx : s.vx;
+            const ly = s.drag ? s.drag.vy : s.vy;
+            s.lean.x += (lx - s.lean.x) * (1 - Math.exp(-dt / 0.12));
+            s.lean.y += (ly - s.lean.y) * (1 - Math.exp(-dt / 0.12));
+            paint();
+            const moving = s.drag || Math.abs(s.vx) + Math.abs(s.vy) > 1 || Math.abs(s.lean.x) + Math.abs(s.lean.y) > 1;
+            if (visible && (moving || (o.drift && !s.hover && !reduced))) raf = requestAnimationFrame(frame);
+            else last = 0;
+        };
+        const start = () => {
+            if (!raf && visible) raf = requestAnimationFrame(frame);
+        };
+
+        const onDown = (e) => {
+            if (e.button !== 0) return;
+            e.preventDefault();
+            s.drag = { x: e.clientX, y: e.clientY, ox: s.ox, oy: s.oy, t: performance.now(), vx: 0, vy: 0, moved: false, target: e.target.closest("[data-index]") };
+            el.setPointerCapture(e.pointerId);
+            s.vx = s.vy = 0;
+            start();
+        };
+        const onMove = (e) => {
+            const g = s.drag;
+            if (!g) return;
+            const now = performance.now();
+            const dx = e.clientX - g.x;
+            const dy = e.clientY - g.y;
+            if (Math.hypot(dx, dy) > 5) g.moved = true;
+            const nx = g.ox + dx;
+            const ny = g.oy + dy;
+            const span = Math.max(8, now - g.t) / 1000;
+            g.vx += ((nx - s.ox) / span - g.vx) * 0.4;
+            g.vy += ((ny - s.oy) / span - g.vy) * 0.4;
+            g.t = now;
+            s.ox = nx;
+            s.oy = ny;
+            start();
+        };
+        const onUp = (e) => {
+            const g = s.drag;
+            if (!g) return;
+            s.drag = null;
+            if (g.moved) {
+                // Fling: keep the release speed (capped) and let friction take it.
+                s.vx = Math.max(-3000, Math.min(3000, g.vx));
+                s.vy = Math.max(-3000, Math.min(3000, g.vy));
+            } else if (g.target && e.type === "pointerup") {
+                const idx = Number(g.target.dataset.index);
+                live.current.onItemClick?.(listRef.current[idx], idx);
+            }
+            start();
+        };
+        const onWheel = (e) => {
+            e.preventDefault();
+            s.vx = -e.deltaX * 6;
+            s.vy = -e.deltaY * 6;
+            start();
+        };
+        const onEnter = () => {
+            s.hover = true;
+        };
+        const onLeave = () => {
+            s.hover = false;
+            start();
+        };
+        el.addEventListener("pointerdown", onDown);
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerup", onUp);
+        el.addEventListener("pointercancel", onUp);
+        el.addEventListener("pointerenter", onEnter);
+        el.addEventListener("pointerleave", onLeave);
+        el.addEventListener("wheel", onWheel, { passive: false });
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        paint();
+        start();
+
+        return () => {
+            cancelAnimationFrame(raf);
+            io.disconnect();
+            el.removeEventListener("pointerdown", onDown);
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerup", onUp);
+            el.removeEventListener("pointercancel", onUp);
+            el.removeEventListener("pointerenter", onEnter);
+            el.removeEventListener("pointerleave", onLeave);
+            el.removeEventListener("wheel", onWheel);
+        };
+    }, [pool]);
+
+    const { w, h } = geo.current;
+    return (
+        <div
+            ref={wrap}
+            className={`relative w-full cursor-grab touch-none select-none overflow-hidden active:cursor-grabbing ${className}`}
+            style={{ height, perspective: "1200px", maskImage: "radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 100%)", WebkitMaskImage: "radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 100%)" }}
+        >
+            {Array.from({ length: pool }, (_, k) => (
+                <div key={k} ref={(e) => (tiles.current[k] = e)} className="group absolute left-0 top-0 will-change-transform" style={{ width: w, height: h }}>
+                    <div className="h-full w-full overflow-hidden rounded-2xl bg-white/5 shadow-[0_18px_40px_-22px_rgba(0,0,0,0.7)] ring-1 ring-white/10">
+                        <img alt="" draggable={false} loading="lazy" decoding="async" className="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-[1.06]" />
+                    </div>
+                    {showTitles && <p data-title="" className="pointer-events-none absolute inset-x-3 bottom-3 truncate rounded-full bg-black/45 px-3 py-1 text-xs font-semibold text-white opacity-0 backdrop-blur transition-opacity duration-300 group-hover:opacity-100" />}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default InfiniteCanvas;