apex-ui-kit 2.1.3 → 2.3.0

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

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+
+/*
+ * Bounce Cards: a hand of photo cards that bounce into a fan on mount.
+ * Hover one and it straightens and lifts while its neighbours lean away to
+ * make room; move off and everything settles back into the fan.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+const img = (n) => `${IK}/${n}.png?tr=f-auto,q-80,w-400`;
+const DEFAULT_IMAGES = [img("hulk"), img("captainamerica"), img("spiderman"), img("doctorStrange"), img("black-panther")];
+
+const BounceCards = ({ images = DEFAULT_IMAGES, cardSize = 9, spread = 5.5, fan = 8, delay = 0.2, className = "" }) => {
+    const [hovered, setHovered] = useState(null);
+    const mid = (images.length - 1) / 2;
+
+    return (
+        <div className={`relative flex items-center justify-center ${className}`} style={{ width: `min(${cardSize + spread * (images.length - 1) + 4}rem, 92vw)`, height: `${cardSize * 1.5}rem` }} onPointerLeave={() => setHovered(null)}>
+            {images.map((src, i) => {
+                const off = i - mid;
+                let x = off * spread;
+                let rotate = off * fan;
+                let y = Math.abs(off) * 0.6;
+                if (hovered !== null) {
+                    if (i === hovered) {
+                        rotate = 0;
+                        y = -1;
+                    } else {
+                        // Neighbours lean away, closer ones more.
+                        const d = i - hovered;
+                        x += Math.sign(d) * Math.max(0, 3 - Math.abs(d) * 0.8);
+                    }
+                }
+                return (
+                    <motion.div
+                        key={i}
+                        className="absolute overflow-hidden rounded-[1.4rem] border-[0.35rem] border-white bg-white shadow-[0_18px_40px_-18px_rgba(0,0,0,0.55)]"
+                        style={{ width: `${cardSize}rem`, height: `${cardSize}rem`, zIndex: i === hovered ? 50 : 10 - Math.abs(Math.round(off)) }}
+                        initial={{ scale: 0, x: 0, y: "0rem", rotate: 0 }}
+                        animate={{ scale: i === hovered ? 1.06 : 1, x: `${x}rem`, y: `${y}rem`, rotate }}
+                        transition={{ type: "spring", stiffness: 260, damping: 14, delay: hovered === null ? delay + i * 0.06 : 0 }}
+                        onPointerEnter={() => setHovered(i)}
+                    >
+                        <img src={src} alt="" draggable="false" className="h-full w-full bg-neutral-200 object-cover" />
+                    </motion.div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default BounceCards;

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

@@ -0,0 +1,80 @@
+import React, { useEffect, 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.
+ */
+
+const DEFAULT_CARDS = [
+    { icon: Sparkles, title: "Smooth", body: "Springs tuned to feel natural, never floaty." },
+    { icon: Layers, title: "Composable", body: "Drop components in and style them with Tailwind." },
+    { icon: Code2, title: "Yours", body: "Copy the source or add it with one CLI command." },
+    { 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 = "" }) => {
+    // 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 dark = theme !== "light";
+
+    const swap = () => {
+        if (dropping !== null) return;
+        setDropping(order[0]);
+        setTimeout(() => {
+            setOrder((o) => [...o.slice(1), o[0]]);
+            setDropping(null);
+        }, 520);
+    };
+
+    useEffect(() => {
+        if (paused) return undefined;
+        const id = setInterval(swap, delay);
+        return () => clearInterval(id);
+    });
+
+    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>
+    );
+};
+
+export default CardSwap3D;

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

@@ -0,0 +1,222 @@
+import React, { useEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useAnimationFrame, useMotionValue, useMotionValueEvent, useReducedMotion, useTransform } from "framer-motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+/*
+ * 3D Carousel: cards stand on a ring that turns in 3D. Drag (or swipe) to
+ * spin it, let go and it settles on the nearest card. It turns slowly on its
+ * own, and a click on a card or the arrows brings that card to the front.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+const img = (name) => `${IK}/${name}?tr=f-auto,q-80,w-480`;
+
+const DEFAULT_ITEMS = [
+    { image: img("ironman.png"), title: "Iron Man", subtitle: "Genius, billionaire" },
+    { image: img("spiderman.png"), title: "Spider-Man", subtitle: "Friendly neighbour" },
+    { image: img("captainamerica.png"), title: "Captain America", subtitle: "The first avenger" },
+    { image: img("hulk.png"), title: "Hulk", subtitle: "Always angry" },
+    { image: img("black-panther.png"), title: "Black Panther", subtitle: "King of Wakanda" },
+    { image: img("doctorStrange.png"), title: "Doctor Strange", subtitle: "Sorcerer supreme" },
+    { image: img("thanos.png"), title: "Thanos", subtitle: "Inevitable" },
+];
+
+const settle = { type: "spring", stiffness: 140, damping: 22, mass: 1 };
+const mod = (n, m) => ((n % m) + m) % m;
+
+function Card({ item, index, step, radius, rotation, onSelect }) {
+    // Cards turned away from the viewer get darker.
+    const brightness = useTransform(rotation, (r) => {
+        const facing = Math.cos(((index * step + r) * Math.PI) / 180);
+        return `brightness(${0.35 + 0.65 * Math.max(0, facing)})`;
+    });
+
+    return (
+        <motion.button
+            type="button"
+            aria-label={item.title}
+            onClick={() => onSelect(index)}
+            className="absolute inset-0 overflow-hidden rounded-[1.1rem] bg-neutral-900 text-left text-white shadow-[0_24px_50px_-20px_rgba(0,0,0,0.6)] outline-none [backface-visibility:hidden] focus-visible:ring-2 focus-visible:ring-white/70"
+            style={{ transform: `rotateY(${index * step}deg) translateZ(${radius}px)`, filter: brightness }}
+        >
+            <img src={item.image} alt="" draggable="false" className="pointer-events-none h-full w-full select-none object-cover" />
+            <span className="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/85 via-black/40 to-transparent px-3.5 pb-3 pt-10">
+                <span className="block truncate text-[0.95rem] font-semibold">{item.title}</span>
+                {item.subtitle && <span className="block truncate text-[0.75rem] text-white/65">{item.subtitle}</span>}
+            </span>
+            <span className="pointer-events-none absolute inset-0 rounded-[1.1rem] ring-1 ring-inset ring-white/10" />
+        </motion.button>
+    );
+}
+
+const Carousel3D = ({
+    items = DEFAULT_ITEMS,
+    cardWidth = 11,
+    aspectRatio = "3 / 4",
+    gap = 1,
+    tilt = -6,
+    perspective = 1400,
+    autoRotate = true,
+    autoRotateSpeed = 10,
+    pauseOnHover = true,
+    showControls = true,
+    onActiveChange,
+    className = "",
+}) => {
+    const count = Math.max(items.length, 1);
+    const step = 360 / count;
+    const rotation = useMotionValue(0);
+    const reduced = useReducedMotion();
+    const cardRef = useRef(null);
+    const drag = useRef(null);
+    const dragged = useRef(false);
+    const busy = useRef(false);
+    const [radius, setRadius] = useState(300);
+    const [hovered, setHovered] = useState(false);
+    const [active, setActive] = useState(0);
+    const onActiveRef = useRef(onActiveChange);
+    onActiveRef.current = onActiveChange;
+
+    // Ring radius that fits the cards side by side, from their real width.
+    useEffect(() => {
+        const el = cardRef.current;
+        if (!el) return undefined;
+        const measure = () => {
+            const w = el.offsetWidth;
+            const gapPx = gap * parseFloat(getComputedStyle(document.documentElement).fontSize || "16");
+            setRadius(Math.round(w / 2 / Math.tan(Math.PI / count) + gapPx));
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [count, gap]);
+
+    useMotionValueEvent(rotation, "change", (r) => {
+        const next = mod(Math.round(-r / step), count);
+        setActive((prev) => {
+            if (prev !== next) onActiveRef.current?.(next, items[next]);
+            return next;
+        });
+    });
+
+    // Slow idle spin.
+    useAnimationFrame((_, delta) => {
+        if (!autoRotate || reduced || drag.current || busy.current || (pauseOnHover && hovered)) return;
+        rotation.set(rotation.get() - (autoRotateSpeed * Math.min(delta, 64)) / 1000);
+    });
+
+    const spinTo = (target, velocity = 0) => {
+        busy.current = true;
+        animate(rotation, target, { ...settle, velocity, onComplete: () => (busy.current = false) });
+    };
+
+    const goTo = (index) => {
+        const current = rotation.get();
+        const diff = mod(-index * step - current + 180, 360) - 180;
+        spinTo(current + diff);
+    };
+
+    const onPointerDown = (e) => {
+        if (e.button !== undefined && e.button !== 0) return;
+        rotation.stop();
+        busy.current = false;
+        drag.current = { x: e.clientX, start: rotation.get(), moved: false, id: e.pointerId };
+    };
+    const onPointerMove = (e) => {
+        const d = drag.current;
+        if (!d) return;
+        const dx = e.clientX - d.x;
+        if (!d.moved && Math.abs(dx) > 5) {
+            d.moved = true;
+            e.currentTarget.setPointerCapture?.(d.id);
+        }
+        if (d.moved) rotation.set(d.start + dx * (180 / (Math.PI * radius)));
+    };
+    const onPointerUp = () => {
+        const d = drag.current;
+        drag.current = null;
+        dragged.current = Boolean(d?.moved);
+        if (!d?.moved) return;
+        setTimeout(() => (dragged.current = false), 0);
+        const velocity = rotation.getVelocity();
+        const projected = rotation.get() + velocity * 0.25;
+        spinTo(Math.round(projected / step) * step, velocity);
+    };
+
+    const onKeyDown = (e) => {
+        if (e.key === "ArrowRight") goTo(active + 1);
+        if (e.key === "ArrowLeft") goTo(active - 1);
+    };
+
+    const current = items[active];
+    const roundBtn = "grid h-10 w-10 place-items-center rounded-full border backdrop-blur transition hover:scale-105 active:scale-95";
+    const btnStyle = { borderColor: "color-mix(in srgb, currentColor 18%, transparent)", background: "color-mix(in srgb, currentColor 6%, transparent)" };
+
+    return (
+        <section
+            aria-roledescription="carousel"
+            aria-label="3D carousel"
+            className={`flex w-full flex-col items-center ${className}`}
+            onPointerEnter={(e) => e.pointerType === "mouse" && setHovered(true)}
+            onPointerLeave={() => setHovered(false)}
+        >
+            <div
+                tabIndex={0}
+                onKeyDown={onKeyDown}
+                onPointerDown={onPointerDown}
+                onPointerMove={onPointerMove}
+                onPointerUp={onPointerUp}
+                onPointerCancel={onPointerUp}
+                onClickCapture={(e) => {
+                    // A drag should not count as a click on the card under the pointer.
+                    if (dragged.current) e.stopPropagation();
+                }}
+                className="relative flex w-full cursor-grab touch-pan-y select-none items-center justify-center rounded-2xl py-8 outline-none active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-current/30"
+                style={{ perspective: `${perspective}px` }}
+            >
+                {/* Push the ring back by its radius so the front card sits at its real size. */}
+                <div style={{ transformStyle: "preserve-3d", transform: `translateZ(-${radius}px) rotateX(${tilt}deg)` }}>
+                    <motion.div
+                        ref={cardRef}
+                        className="relative"
+                        style={{ width: `min(${cardWidth}rem, 40vw)`, aspectRatio, transformStyle: "preserve-3d", rotateY: rotation }}
+                    >
+                        {items.map((item, i) => (
+                            <Card key={i} item={item} index={i} step={step} radius={radius} rotation={rotation} onSelect={goTo} />
+                        ))}
+                    </motion.div>
+                </div>
+            </div>
+
+            {showControls && (
+                <div className="mt-2 flex items-center gap-5">
+                    <button type="button" aria-label="Previous" onClick={() => goTo(active - 1)} className={roundBtn} style={btnStyle}>
+                        <ChevronLeft className="h-5 w-5" />
+                    </button>
+                    <div className="min-w-[9rem] text-center" aria-live="polite">
+                        <AnimatePresence mode="wait" initial={false}>
+                            <motion.div
+                                key={active}
+                                initial={{ opacity: 0, y: 6 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                exit={{ opacity: 0, y: -6 }}
+                                transition={{ duration: 0.18 }}
+                            >
+                                <p className="text-[0.95rem] font-semibold">{current?.title}</p>
+                                <p className="text-[0.75rem] opacity-60">
+                                    {active + 1} / {count}
+                                </p>
+                            </motion.div>
+                        </AnimatePresence>
+                    </div>
+                    <button type="button" aria-label="Next" onClick={() => goTo(active + 1)} className={roundBtn} style={btnStyle}>
+                        <ChevronRight className="h-5 w-5" />
+                    </button>
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default Carousel3D;

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

@@ -0,0 +1,49 @@
+import React, { useRef } from "react";
+import { useAnimationFrame, useReducedMotion } from "framer-motion";
+
+/*
+ * Circular Text: a line of text wrapped around a circle that keeps turning.
+ * On hover it can speed up, slow down, pause or spin wildly. Put anything in
+ * the middle with children.
+ */
+
+const HOVER_SPEED = { speedUp: 4, slowDown: 0.25, pause: 0, goBonkers: 14, none: 1 };
+
+const CircularText = ({ text = "APEX UI • MOTION • COMPONENTS • ", size = 11, duration = 18, onHover = "speedUp", color = "currentColor", children, className = "" }) => {
+    const reduced = useReducedMotion();
+    const ring = useRef(null);
+    const angle = useRef(0);
+    const speed = useRef(1);
+    const target = useRef(1);
+    const chars = Array.from(text);
+
+    useAnimationFrame((_, delta) => {
+        if (reduced || !ring.current) return;
+        speed.current += (target.current - speed.current) * 0.06;
+        angle.current = (angle.current + (360 / duration) * (delta / 1000) * speed.current) % 360;
+        const s = onHover === "goBonkers" && target.current > 1 ? 1 + Math.min(0.12, (speed.current - 1) * 0.01) : 1;
+        ring.current.style.transform = `rotate(${angle.current}deg) scale(${s})`;
+    });
+
+    return (
+        <div
+            className={`relative grid place-items-center rounded-full ${className}`}
+            style={{ width: `${size}rem`, height: `${size}rem`, color }}
+            onPointerEnter={() => (target.current = HOVER_SPEED[onHover] ?? 1)}
+            onPointerLeave={() => (target.current = 1)}
+            aria-label={text}
+            role="img"
+        >
+            <div ref={ring} className="absolute inset-0" aria-hidden="true">
+                {chars.map((c, i) => (
+                    <span key={i} className="absolute left-1/2 top-0 h-1/2 origin-bottom text-[0.95rem] font-bold uppercase" style={{ transform: `translateX(-50%) rotate(${(i / chars.length) * 360}deg)` }}>
+                        {c}
+                    </span>
+                ))}
+            </div>
+            {children && <div className="relative">{children}</div>}
+        </div>
+    );
+};
+
+export default CircularText;

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

@@ -0,0 +1,72 @@
+import React, { useEffect, useRef } from "react";
+
+/*
+ * Click Spark: wrap anything and every click throws out a ring of short
+ * spark lines from the pointer that shoot out and fade. Drawn on a canvas
+ * overlay so it never blocks clicks underneath.
+ */
+
+const ease = (t) => t * (2 - t);
+
+const ClickSpark = ({ sparkColor = "#a3e635", sparkCount = 10, sparkRadius = 26, sparkSize = 12, duration = 450, children, className = "" }) => {
+    const wrap = useRef(null);
+    const canvas = useRef(null);
+    const sparks = useRef([]);
+    const raf = useRef(0);
+
+    useEffect(() => {
+        const c = canvas.current;
+        const resize = () => {
+            const r = wrap.current.getBoundingClientRect();
+            const dpr = Math.min(window.devicePixelRatio || 1, 2);
+            c.width = r.width * dpr;
+            c.height = r.height * dpr;
+            c.getContext("2d").setTransform(dpr, 0, 0, dpr, 0, 0);
+        };
+        const ro = new ResizeObserver(resize);
+        ro.observe(wrap.current);
+        resize();
+        return () => {
+            ro.disconnect();
+            cancelAnimationFrame(raf.current);
+        };
+    }, []);
+
+    const draw = () => {
+        const ctx = canvas.current.getContext("2d");
+        const now = performance.now();
+        ctx.clearRect(0, 0, canvas.current.width, canvas.current.height);
+        sparks.current = sparks.current.filter((s) => now - s.start < duration);
+        for (const s of sparks.current) {
+            const p = ease((now - s.start) / duration);
+            const dist = p * sparkRadius;
+            const len = sparkSize * (1 - p);
+            ctx.strokeStyle = sparkColor;
+            ctx.lineWidth = 2;
+            ctx.lineCap = "round";
+            ctx.beginPath();
+            ctx.moveTo(s.x + dist * Math.cos(s.a), s.y + dist * Math.sin(s.a));
+            ctx.lineTo(s.x + (dist + len) * Math.cos(s.a), s.y + (dist + len) * Math.sin(s.a));
+            ctx.stroke();
+        }
+        raf.current = sparks.current.length ? requestAnimationFrame(draw) : 0;
+    };
+
+    const onClick = (e) => {
+        const r = wrap.current.getBoundingClientRect();
+        const x = e.clientX - r.left;
+        const y = e.clientY - r.top;
+        const start = performance.now();
+        for (let i = 0; i < sparkCount; i++) sparks.current.push({ x, y, a: (Math.PI * 2 * i) / sparkCount, start });
+        if (!raf.current) raf.current = requestAnimationFrame(draw);
+    };
+
+    return (
+        <div ref={wrap} className={`relative ${className}`} onClick={onClick}>
+            {children}
+            <canvas ref={canvas} aria-hidden="true" className="pointer-events-none absolute inset-0 h-full w-full" />
+        </div>
+    );
+};
+
+export default ClickSpark;

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

@@ -0,0 +1,108 @@
+import React, { useRef, useState } from "react";
+import { motion } from "framer-motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+/*
+ * Coverflow 3D: the classic album-flip view. The centre cover faces you,
+ * the rest stand angled on either side and slide back in depth, each with a
+ * soft reflection. Drag / swipe, click a cover, or use the arrow keys.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+const img = (n) => `${IK}/${n}.png?tr=f-auto,q-80,w-500`;
+const DEFAULT_ITEMS = [
+    { image: img("spiderman"), title: "Spider-Man" },
+    { image: img("black-panther"), title: "Black Panther" },
+    { image: img("hulk"), title: "Hulk" },
+    { image: img("captainamerica"), title: "Captain America" },
+    { image: img("doctorStrange"), title: "Doctor Strange" },
+    { image: img("thanos"), title: "Thanos" },
+    { image: img("ironman"), title: "Iron Man" },
+];
+
+const Coverflow3D = ({ items = DEFAULT_ITEMS, initialIndex = 2, size = 12, angle = 55, gap = 0.42, reflection = true, accentColor = "#a3e635", className = "" }) => {
+    const [index, setIndex] = useState(initialIndex);
+    const drag = useRef(null);
+    const clamp = (i) => Math.max(0, Math.min(items.length - 1, i));
+    const go = (i) => setIndex(clamp(i));
+
+    return (
+        <div
+            className={`flex w-full flex-col items-center gap-6 outline-none ${className}`}
+            tabIndex={0}
+            onKeyDown={(e) => {
+                if (e.key === "ArrowRight") go(index + 1);
+                if (e.key === "ArrowLeft") go(index - 1);
+            }}
+            aria-roledescription="carousel"
+            aria-label="Coverflow"
+        >
+            <div
+                className="relative w-full touch-pan-y select-none overflow-hidden [perspective:1100px]"
+                style={{ height: `${size * (reflection ? 1.55 : 1.15)}rem` }}
+                onPointerDown={(e) => (drag.current = { x: e.clientX, start: index, moved: false })}
+                onPointerMove={(e) => {
+                    const d = drag.current;
+                    if (!d) return;
+                    const steps = Math.round((d.x - e.clientX) / 70);
+                    if (steps !== 0) d.moved = true;
+                    go(d.start + steps);
+                }}
+                onPointerUp={() => setTimeout(() => (drag.current = null))}
+                onPointerLeave={() => (drag.current = null)}
+            >
+                {items.map((item, i) => {
+                    const off = i - index;
+                    const abs = Math.abs(off);
+                    const side = Math.sign(off);
+                    return (
+                        <motion.button
+                            key={i}
+                            type="button"
+                            aria-label={item.title}
+                            aria-current={off === 0}
+                            onClick={() => !drag.current?.moved && go(i)}
+                            className="absolute left-1/2 top-[6%] [transform-style:preserve-3d]"
+                            style={{ width: `${size}rem`, height: `${size}rem`, marginLeft: `-${size / 2}rem`, zIndex: 100 - abs }}
+                            initial={false}
+                            animate={{
+                                x: off === 0 ? "0%" : `${side * (55 + (abs - 1) * gap * 100)}%`,
+                                z: off === 0 ? 60 : -120 - abs * 20,
+                                rotateY: off === 0 ? 0 : -side * angle,
+                                opacity: abs > 4 ? 0 : 1,
+                            }}
+                            transition={{ type: "spring", stiffness: 220, damping: 30 }}
+                        >
+                            <span className="relative block h-full w-full overflow-hidden rounded-xl shadow-[0_25px_50px_-20px_rgba(0,0,0,0.7)] ring-1 ring-white/10">
+                                <img src={item.image} alt="" draggable="false" className="h-full w-full bg-neutral-900 object-cover" />
+                                <motion.span className="absolute inset-0 bg-black" initial={false} animate={{ opacity: off === 0 ? 0 : Math.min(0.55, 0.25 + abs * 0.1) }} />
+                            </span>
+                            {reflection && (
+                                <span aria-hidden="true" className="pointer-events-none absolute left-0 top-full mt-1 block h-1/2 w-full overflow-hidden rounded-xl opacity-30 [mask-image:linear-gradient(to_bottom,black,transparent_70%)]">
+                                    <img src={item.image} alt="" draggable="false" className="h-[200%] w-full -scale-y-100 object-cover" />
+                                </span>
+                            )}
+                        </motion.button>
+                    );
+                })}
+            </div>
+
+            <div className="flex items-center gap-4">
+                <button type="button" aria-label="Previous" onClick={() => go(index - 1)} disabled={index === 0} className="grid h-10 w-10 place-items-center rounded-full border border-current/20 transition hover:scale-105 active:scale-95 disabled:opacity-30">
+                    <ChevronLeft className="h-5 w-5" />
+                </button>
+                <p className="min-w-[9rem] text-center text-sm font-semibold">
+                    {items[index].title}
+                    <span className="mt-0.5 block font-mono text-[0.7rem] font-normal opacity-50">
+                        {index + 1} / {items.length}
+                    </span>
+                </p>
+                <button type="button" aria-label="Next" onClick={() => go(index + 1)} disabled={index === items.length - 1} className="grid h-10 w-10 place-items-center rounded-full border border-current/20 transition hover:scale-105 active:scale-95 disabled:opacity-30" style={{ color: index === items.length - 1 ? undefined : accentColor }}>
+                    <ChevronRight className="h-5 w-5" />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default Coverflow3D;