apex-ui-kit 2.1.2 → 2.2.0

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

@@ -0,0 +1,251 @@
+import React, { useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowRight, Check, Loader2 } from "lucide-react";
+
+/*
+ * Animated Button: one button, seven feels. Pick a variant:
+ *  shine   – a gleam sweeps across on hover
+ *  fill    – color floods in from where the pointer entered and drains out where it left
+ *  border  – a light beam runs around the border
+ *  press   – a chunky 3D key that sinks when pressed
+ *  loading – spins while onClick's promise runs, then shows a check
+ *  ripple  – a ripple spreads from every click
+ *  arrow   – the arrow slides through and the label nudges over
+ * Every motion is a GPU transform with one shared easing, so it stays smooth.
+ */
+
+const EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+
+const SIZES = {
+    sm: { box: "h-9 px-4 text-[0.8rem] gap-1.5", pad: "px-4 gap-1.5" },
+    md: { box: "h-11 px-5 text-[0.9rem] gap-2", pad: "px-5 gap-2" },
+    lg: { box: "h-[3.25rem] px-7 text-base gap-2.5", pad: "px-7 gap-2.5" },
+};
+
+// Black or white text, whichever reads better on the accent.
+const inkOn = (hex) => {
+    let h = String(hex).replace("#", "");
+    if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+    const n = parseInt(h, 16) || 0;
+    const l = (0.299 * ((n >> 16) & 255) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255)) / 255;
+    return l > 0.6 ? "#0a0a0a" : "#ffffff";
+};
+
+const AnimatedButton = ({ variant = "shine", children = "Get started", color = "#a3e635", size = "md", onClick, disabled, className = "", ...rest }) => {
+    const ref = useRef(null);
+    const [fill, setFill] = useState({ x: 0, y: 0, d: 0, on: false });
+    const [ripples, setRipples] = useState([]);
+    const [status, setStatus] = useState("idle");
+    const ink = inkOn(color);
+    const s = SIZES[size] ?? SIZES.md;
+    const base = `relative inline-flex select-none items-center justify-center overflow-hidden rounded-full font-semibold outline-none [-webkit-tap-highlight-color:transparent] focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${s.box}`;
+    const smooth = { transitionTimingFunction: EASE };
+
+    const localPoint = (e) => {
+        const r = ref.current.getBoundingClientRect();
+        return { x: e.clientX - r.left, y: e.clientY - r.top, w: r.width, h: r.height };
+    };
+
+    if (variant === "shine") {
+        return (
+            <button
+                ref={ref}
+                type="button"
+                onClick={onClick}
+                disabled={disabled}
+                className={`group ${base} bg-neutral-950 text-white transition-[transform,box-shadow] duration-300 hover:-translate-y-0.5 hover:shadow-[0_12px_32px_-12px_var(--c)] active:translate-y-0 active:scale-[0.97] active:duration-100 ${className}`}
+                style={{ "--c": color, ...smooth }}
+                {...rest}
+            >
+                <span aria-hidden="true" className="absolute inset-0 rounded-full transition-opacity duration-300 group-hover:opacity-100" style={{ boxShadow: `inset 0 0 0 1px ${color}66, inset 0 1px 0 rgba(255,255,255,0.12)` }} />
+                <span
+                    aria-hidden="true"
+                    className="absolute inset-y-0 left-0 w-1/2 -translate-x-[120%] skew-x-[-20deg] bg-gradient-to-r from-transparent via-white/35 to-transparent transition-transform duration-[900ms] will-change-transform group-hover:translate-x-[260%]"
+                    style={smooth}
+                />
+                <span className="relative">{children}</span>
+            </button>
+        );
+    }
+
+    if (variant === "fill") {
+        // One circle big enough to cover the button, scaled 0 → 1 from the entry point.
+        const track = (e, on) => {
+            const p = localPoint(e);
+            setFill({ x: p.x, y: p.y, d: Math.hypot(Math.max(p.x, p.w - p.x), Math.max(p.y, p.h - p.y)) * 2, on });
+        };
+        return (
+            <button
+                ref={ref}
+                type="button"
+                onClick={onClick}
+                disabled={disabled}
+                onPointerEnter={(e) => track(e, true)}
+                onPointerLeave={(e) => track(e, false)}
+                className={`${base} border-[1.5px] transition-[color,transform] duration-500 active:scale-[0.97] active:duration-100 ${className}`}
+                style={{ borderColor: color, color: fill.on ? ink : color, ...smooth }}
+                {...rest}
+            >
+                <span
+                    aria-hidden="true"
+                    className="pointer-events-none absolute rounded-full will-change-transform"
+                    style={{
+                        left: fill.x - fill.d / 2,
+                        top: fill.y - fill.d / 2,
+                        width: fill.d,
+                        height: fill.d,
+                        background: color,
+                        transform: `scale(${fill.on ? 1 : 0})`,
+                        transition: `transform 550ms ${EASE}`,
+                    }}
+                />
+                <span className="relative">{children}</span>
+            </button>
+        );
+    }
+
+    if (variant === "border") {
+        return (
+            <button
+                ref={ref}
+                type="button"
+                onClick={onClick}
+                disabled={disabled}
+                className={`group ${base} text-white transition-[transform,box-shadow] duration-300 hover:shadow-[0_0_30px_-8px_var(--c)] active:scale-[0.97] active:duration-100 ${className}`}
+                style={{ "--c": color, padding: "1.5px", ...smooth }}
+                {...rest}
+            >
+                <motion.span
+                    aria-hidden="true"
+                    className="absolute left-1/2 top-1/2 aspect-square w-[260%] -translate-x-1/2 -translate-y-1/2 will-change-transform"
+                    style={{ background: `conic-gradient(from 0deg, transparent 0 68%, ${color}66 78%, ${color} 88%, transparent 100%)` }}
+                    animate={{ rotate: 360 }}
+                    transition={{ duration: 2.8, repeat: Infinity, ease: "linear" }}
+                />
+                <span className={`relative flex h-full w-full items-center justify-center rounded-full bg-neutral-950 transition-colors duration-300 group-hover:bg-neutral-900 ${s.pad}`}>{children}</span>
+            </button>
+        );
+    }
+
+    if (variant === "press") {
+        const edge = `color-mix(in srgb, ${color} 55%, #000)`;
+        return (
+            <button
+                ref={ref}
+                type="button"
+                onClick={onClick}
+                disabled={disabled}
+                className={`${base} -translate-y-1 shadow-[0_5px_0_var(--edge),0_14px_22px_-10px_rgba(0,0,0,0.55)] transition-[transform,box-shadow] duration-200 hover:-translate-y-[6px] hover:shadow-[0_7px_0_var(--edge),0_18px_26px_-12px_rgba(0,0,0,0.55)] active:translate-y-0 active:shadow-[0_1px_0_var(--edge),0_4px_8px_-4px_rgba(0,0,0,0.4)] active:duration-75 ${className}`}
+                style={{ background: color, color: ink, "--edge": edge, ...smooth }}
+                {...rest}
+            >
+                <span aria-hidden="true" className="absolute inset-x-3 top-[3px] h-1/3 rounded-full bg-white/25 blur-[2px]" />
+                <span className="relative">{children}</span>
+            </button>
+        );
+    }
+
+    if (variant === "loading") {
+        const run = async (e) => {
+            if (status !== "idle") return;
+            setStatus("loading");
+            try {
+                const result = onClick?.(e);
+                await (result && typeof result.then === "function" ? result : new Promise((r) => setTimeout(r, 1400)));
+                setStatus("done");
+            } catch {
+                setStatus("idle");
+                return;
+            }
+            setTimeout(() => setStatus("idle"), 1600);
+        };
+        return (
+            <motion.button
+                ref={ref}
+                type="button"
+                layout
+                onClick={run}
+                disabled={disabled}
+                aria-busy={status === "loading"}
+                className={`${base} transition-[background-color,color] duration-300 active:scale-[0.97] ${className}`}
+                style={{ background: status === "done" ? "#22c55e" : color, color: status === "done" ? "#fff" : ink, borderRadius: 999, ...smooth }}
+                transition={{ layout: { type: "spring", stiffness: 420, damping: 34 } }}
+                {...rest}
+            >
+                <AnimatePresence mode="popLayout" initial={false}>
+                    <motion.span
+                        key={status}
+                        className="flex items-center gap-2"
+                        initial={{ opacity: 0, y: 12, scale: 0.9 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: -12, scale: 0.9 }}
+                        transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}
+                    >
+                        {status === "idle" && children}
+                        {status === "loading" && <Loader2 className="h-[1.15em] w-[1.15em] animate-spin" aria-label="Loading" />}
+                        {status === "done" && (
+                            <>
+                                <Check className="h-[1.15em] w-[1.15em]" /> Done
+                            </>
+                        )}
+                    </motion.span>
+                </AnimatePresence>
+            </motion.button>
+        );
+    }
+
+    if (variant === "ripple") {
+        return (
+            <button
+                ref={ref}
+                type="button"
+                disabled={disabled}
+                onPointerDown={(e) => {
+                    const p = localPoint(e);
+                    setRipples((list) => [...list, { id: performance.now(), x: p.x, y: p.y, d: Math.hypot(p.w, p.h) * 2.2 }]);
+                }}
+                onClick={onClick}
+                className={`${base} transition-[transform,filter] duration-300 hover:brightness-110 active:scale-[0.98] active:duration-100 ${className}`}
+                style={{ background: color, color: ink, ...smooth }}
+                {...rest}
+            >
+                {ripples.map((r) => (
+                    <motion.span
+                        key={r.id}
+                        aria-hidden="true"
+                        className="pointer-events-none absolute rounded-full will-change-transform"
+                        style={{ left: r.x - r.d / 2, top: r.y - r.d / 2, width: r.d, height: r.d, background: ink }}
+                        initial={{ scale: 0, opacity: 0.28 }}
+                        animate={{ scale: 1, opacity: 0 }}
+                        transition={{ duration: 0.75, ease: [0.22, 1, 0.36, 1] }}
+                        onAnimationComplete={() => setRipples((list) => list.filter((x) => x.id !== r.id))}
+                    />
+                ))}
+                <span className="relative">{children}</span>
+            </button>
+        );
+    }
+
+    // arrow
+    return (
+        <button
+            ref={ref}
+            type="button"
+            onClick={onClick}
+            disabled={disabled}
+            className={`group ${base} pr-1.5 transition-transform duration-300 active:scale-[0.97] active:duration-100 ${className}`}
+            style={{ background: color, color: ink, ...smooth }}
+            {...rest}
+        >
+            <span className="relative transition-transform duration-500 group-hover:-translate-x-1" style={smooth}>
+                {children}
+            </span>
+            <span className="relative grid aspect-square h-[calc(100%-0.5rem)] place-items-center overflow-hidden rounded-full transition-transform duration-500 group-hover:scale-105" style={{ background: ink, color, ...smooth }}>
+                <ArrowRight className="absolute h-[1.1em] w-[1.1em] transition-transform duration-500 group-hover:translate-x-[180%]" style={smooth} />
+                <ArrowRight className="absolute h-[1.1em] w-[1.1em] -translate-x-[180%] transition-transform duration-500 group-hover:translate-x-0" style={smooth} />
+            </span>
+        </button>
+    );
+};
+
+export default AnimatedButton;

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

@@ -0,0 +1,99 @@
+import React, { useId, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+/*
+ * Animated Tabs: a pill slides to the chosen tab and the panel below
+ * cross-fades in the direction you moved. Arrow keys, Home and End work.
+ * Styles: "pill" (filled), "underline" or "segmented".
+ */
+
+const DEFAULT_TABS = [
+    { id: "overview", label: "Overview", content: "A quick look at everything in one place — usage, limits and the latest activity." },
+    { id: "analytics", label: "Analytics", content: "Visitors, conversions and retention, updated every few seconds with zero setup." },
+    { id: "reports", label: "Reports", content: "Export weekly PDF reports or schedule them to land in your team's inbox." },
+    { id: "settings", label: "Settings", content: "Workspace name, members, billing and the danger zone — all in one tidy screen." },
+];
+
+const AnimatedTabs = ({ tabs = DEFAULT_TABS, defaultTab, variant = "pill", accentColor = "#a3e635", theme = "dark", onChange, className = "" }) => {
+    const id = useId();
+    const [active, setActive] = useState(defaultTab ?? tabs[0]?.id);
+    const [dir, setDir] = useState(1);
+    const refs = useRef([]);
+    const dark = theme !== "light";
+    const index = tabs.findIndex((t) => t.id === active);
+    const current = tabs[index];
+
+    const select = (i) => {
+        const t = tabs[(i + tabs.length) % tabs.length];
+        setDir(tabs.indexOf(t) > index ? 1 : -1);
+        setActive(t.id);
+        refs.current[tabs.indexOf(t)]?.focus();
+        onChange?.(t.id);
+    };
+    const onKeyDown = (e) => {
+        const map = { ArrowRight: index + 1, ArrowLeft: index - 1, Home: 0, End: tabs.length - 1 };
+        if (map[e.key] === undefined) return;
+        e.preventDefault();
+        select(map[e.key]);
+    };
+
+    const list = {
+        pill: `rounded-full p-1 ${dark ? "bg-white/[0.06]" : "bg-black/[0.05]"}`,
+        segmented: `rounded-xl p-1 ${dark ? "bg-white/[0.06] ring-1 ring-white/10" : "bg-black/[0.04] ring-1 ring-black/10"}`,
+        underline: `border-b ${dark ? "border-white/10" : "border-black/10"}`,
+    }[variant];
+
+    return (
+        <div className={`w-full max-w-xl ${dark ? "text-white" : "text-neutral-900"} ${className}`}>
+            <div role="tablist" aria-orientation="horizontal" onKeyDown={onKeyDown} className={`relative flex overflow-x-auto [scrollbar-width:none] ${list}`}>
+                {tabs.map((t, i) => {
+                    const on = t.id === active;
+                    return (
+                        <button
+                            key={t.id}
+                            ref={(el) => (refs.current[i] = el)}
+                            role="tab"
+                            id={`${id}-tab-${t.id}`}
+                            aria-selected={on}
+                            aria-controls={`${id}-panel`}
+                            tabIndex={on ? 0 : -1}
+                            onClick={() => select(i)}
+                            className={`relative flex-1 whitespace-nowrap px-4 py-2 text-[0.88rem] font-medium outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-current/40 ${variant === "underline" ? "pb-3" : variant === "pill" ? "rounded-full" : "rounded-lg"} ${on ? (variant === "pill" ? "text-neutral-950" : "") : dark ? "text-white/55 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
+                        >
+                            {on && (
+                                <motion.span
+                                    layoutId={`${id}-indicator`}
+                                    className={`absolute ${variant === "underline" ? "inset-x-2 -bottom-px h-[2px] rounded-full" : `inset-0 ${variant === "pill" ? "rounded-full" : "rounded-lg"}`}`}
+                                    style={{
+                                        background: variant === "segmented" ? (dark ? "rgba(255,255,255,0.1)" : "#fff") : accentColor,
+                                        boxShadow: variant === "segmented" ? (dark ? "inset 0 1px 0 rgba(255,255,255,0.08)" : "0 1px 3px rgba(0,0,0,0.12)") : undefined,
+                                    }}
+                                    transition={{ type: "spring", stiffness: 480, damping: 36 }}
+                                />
+                            )}
+                            <span className="relative">{t.label}</span>
+                        </button>
+                    );
+                })}
+            </div>
+            <div id={`${id}-panel`} role="tabpanel" aria-labelledby={`${id}-tab-${active}`} className="relative mt-4 min-h-[6rem] overflow-hidden">
+                <AnimatePresence mode="popLayout" initial={false} custom={dir}>
+                    <motion.div
+                        key={active}
+                        custom={dir}
+                        initial={{ opacity: 0, x: dir * 24, filter: "blur(4px)" }}
+                        animate={{ opacity: 1, x: 0, filter: "blur(0px)" }}
+                        exit={{ opacity: 0, x: dir * -24, filter: "blur(4px)" }}
+                        transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
+                        className={`rounded-2xl p-5 text-[0.92rem] leading-relaxed ${dark ? "bg-white/[0.04] text-white/75" : "bg-black/[0.03] text-neutral-600"}`}
+                    >
+                        <p className={`mb-1.5 text-[1rem] font-semibold ${dark ? "text-white" : "text-neutral-900"}`}>{current?.label}</p>
+                        {current?.content}
+                    </motion.div>
+                </AnimatePresence>
+            </div>
+        </div>
+    );
+};
+
+export default AnimatedTabs;

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { motion, useReducedMotion } from "framer-motion";
+
+/*
+ * Blur Reveal Text: words (or letters) rise out of a blur one after another
+ * when the text scrolls into view. An optional highlight word gets the accent.
+ */
+
+const BlurRevealText = ({
+    text = "Design that moves people, built in minutes.",
+    as: Tag = "p",
+    by = "word",
+    stagger = 0.06,
+    duration = 0.7,
+    blur = 12,
+    highlight = [],
+    accentColor = "#a3e635",
+    once = true,
+    className = "",
+}) => {
+    const reduced = useReducedMotion();
+    const words = text.split(" ");
+    let index = 0;
+    const MotionTag = motion[Tag] ?? motion.p;
+
+    const piece = (content, key, accent) => {
+        const delay = index++ * stagger;
+        return (
+            <motion.span
+                key={key}
+                className="inline-block will-change-[filter,transform]"
+                style={accent ? { color: accentColor } : undefined}
+                variants={{
+                    hidden: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${blur}px)` },
+                    shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration, delay, ease: [0.22, 1, 0.36, 1] } },
+                }}
+            >
+                {content}
+            </motion.span>
+        );
+    };
+
+    return (
+        <MotionTag aria-label={text} className={className} initial="hidden" whileInView="shown" viewport={{ once, amount: 0.4 }}>
+            {words.map((word, w) => {
+                const accent = highlight.some((h) => h.toLowerCase() === word.replace(/[^\p{L}\p{N}'-]/gu, "").toLowerCase());
+                return (
+                    <React.Fragment key={w}>
+                        <span aria-hidden="true" className="inline-block whitespace-nowrap">
+                            {by === "letter" ? [...word].map((ch, c) => piece(ch, c, accent)) : piece(word, 0, accent)}
+                        </span>
+                        {w < words.length - 1 && " "}
+                    </React.Fragment>
+                );
+            })}
+        </MotionTag>
+    );
+};
+
+export default BlurRevealText;

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;