apex-ui-kit 2.12.1 → 2.12.2

package/ReadMe.md

@@ -4,7 +4,7 @@
 [![npm downloads](https://img.shields.io/npm/dm/apex-ui-kit?color=a3e635)](https://www.npmjs.com/package/apex-ui-kit)
 [![license](https://img.shields.io/npm/l/apex-ui-kit?color=a3e635)](./Licence.md)
 
-**117 free, animated UI components for React.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
+**116 free, animated UI components for React.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
 
 Built with React, Tailwind CSS and Framer Motion, plus GSAP, Canvas and WebGL where a component needs them.
 
@@ -15,7 +15,7 @@ Built with React, Tailwind CSS and Framer Motion, plus GSAP, Canvas and WebGL wh
 
 ## Why ApexUI
 
-- **117 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
+- **116 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
 - **You own the code.** The CLI copies plain `.jsx` files into your project, no runtime package to keep in sync.
 - **Every docs page has** a live preview, a playground to tweak props, a Desktop / Tablet / Mobile preview, the full props table and a ready prompt you can paste into ChatGPT or Claude.
 - **Smooth on real devices.** Animations stick to transform and opacity, respect reduced motion, and work with mouse, touch and keyboard.
@@ -127,7 +127,6 @@ Every component's props, variants and copy-ready code are on its docs page.
 | --- | --- |
 | [Bounce Cards](https://apex-ui.in/components/bounce-cards) | `bounce-cards` |
 | [Card Stack](https://apex-ui.in/components/card-stack) | `card-stack` |
-| [Card Swap 3D](https://apex-ui.in/components/card-swap-3d) | `card-swap-3d` |
 | [Cards](https://apex-ui.in/components/cards) | `basic-card`, `meteor-card` |
 | [Distortion Image](https://apex-ui.in/components/distortion-image) | `distortion-image` |
 | [Folder](https://apex-ui.in/components/folder) | `folder` |
@@ -261,13 +260,14 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Dot Globe](https://apex-ui.in/components/dot-globe) | `dot-globe` |
 | [World Map](https://apex-ui.in/components/world-map) | `world-map` |
 
-## What's new in 2.10
+## What's new in 2.12
 
+- New in 2.12: components size from their own container instead of the screen (Testimonials, Animated Tabs, Gooey Nav, Nav Menu, Flip Clock, Image Accordion, Beam Bar), a smoother Floating Navbar menu, no flicker in Theme Switcher and Parallax Carousel. Smart Grid Card and Card Swap 3D were removed.
 - New in 2.10: Fluid Cursor (a real-time WebGL fluid sim that trails the cursor) and Sketch Reveal (a photo turns into a glowing sketch and burns away into the next one as you scroll).
 - New in 2.9: Liquid Glass (iOS style WebGL glass), 10 live page templates on the site, Arc Gallery auto scroll, Scroll Stack on the page scroll, Sunrise trees and birds.
 - New in 2.8: Glass Lens (WebGL liquid glass), Dither Waves (WebGL 1-bit background), Infinite Canvas, Image Accordion, Orbit Icons, Command Palette, Crossed Marquee (tech-stack bands with simple-icons) and Theme Switcher (8 themes with a circle reveal).
 - Toast Stack and Radial Menu no longer blink in production builds; Radial Menu, 3D Text Ring, Animated Tabs and Gooey Nav now fit 320px phones.
-- 38 new components since 2.6, including WebGL and three.js (Sunrise Background, Horizon Glow, Circular Carousel, Arc Gallery, Galaxy 3D, Warp Tunnel, Wireframe Knot 3D, Marquee 3D, Distortion Image, Liquid Blob 3D, Particle Morph, Retro Grid 3D), Scroll Stack, Particle Text, Edge Blur, Magnetic Button, Radial Menu, the AI voice family (Wave, Bars, Ring, Blob), Gooey Nav (WebGL metaball pill), Coverflow 3D, Card Swap 3D, 3D Text Ring, Elastic Slider, Stepper and Pixel Transition.
+- 38 new components since 2.6, including WebGL and three.js (Sunrise Background, Horizon Glow, Circular Carousel, Arc Gallery, Galaxy 3D, Warp Tunnel, Wireframe Knot 3D, Marquee 3D, Distortion Image, Liquid Blob 3D, Particle Morph, Retro Grid 3D), Scroll Stack, Particle Text, Edge Blur, Magnetic Button, Radial Menu, the AI voice family (Wave, Bars, Ring, Blob), Gooey Nav (WebGL metaball pill), Coverflow 3D, 3D Text Ring, Elastic Slider, Stepper and Pixel Transition.
 - Accordion Marquee is rebuilt: one liquid band glides between rows on springs, leans toward the pointer, and its marquee speeds up with sideways mouse moves. No GSAP needed any more.
 - AI Model Prompt now exports `DEFAULT_LLM_MODELS` and an index file, so you can import both from the folder.
 - Loading Screens follow the real page load by default: drop `<LoadingScreen fullScreen />` into your app and it covers the page while it loads, with a live bar and percentage, then hides itself. Pass `progress` to drive it yourself.

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useId, useState } from "react";
+import React, { useEffect, useId, useRef, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { ArrowUpRight } from "lucide-react";
 
@@ -18,12 +18,14 @@ const DEFAULT_LINKS = [
     { label: "Blog", href: "#blog" },
 ];
 
+// Three lines that fold into an X. Transforms only, so it stays smooth on phones.
 function Burger({ open }) {
+    const spring = { type: "spring", stiffness: 500, damping: 32 };
     return (
         <span className="relative block h-3.5 w-5" aria-hidden="true">
-            <motion.span className="absolute left-0 top-0 h-[2px] w-full rounded-full bg-current" animate={open ? { top: "50%", rotate: 45, y: "-50%" } : { top: "0%", rotate: 0, y: 0 }} />
-            <motion.span className="absolute left-0 top-1/2 h-[2px] w-full -translate-y-1/2 rounded-full bg-current" animate={{ opacity: open ? 0 : 1, scaleX: open ? 0.3 : 1 }} />
-            <motion.span className="absolute bottom-0 left-0 h-[2px] w-full rounded-full bg-current" animate={open ? { bottom: "50%", rotate: -45, y: "50%" } : { bottom: "0%", rotate: 0, y: 0 }} />
+            <motion.span className="absolute left-0 top-[6px] h-[2px] w-full rounded-full bg-current" initial={false} animate={{ y: open ? 0 : -6, rotate: open ? 45 : 0 }} transition={spring} />
+            <motion.span className="absolute left-0 top-[6px] h-[2px] w-full rounded-full bg-current" initial={false} animate={{ opacity: open ? 0 : 1, scaleX: open ? 0.3 : 1 }} transition={{ duration: 0.15 }} />
+            <motion.span className="absolute left-0 top-[6px] h-[2px] w-full rounded-full bg-current" initial={false} animate={{ y: open ? 0 : 6, rotate: open ? -45 : 0 }} transition={spring} />
         </span>
     );
 }
@@ -63,6 +65,20 @@ const FloatingNavbar = ({
         return () => root.removeEventListener("scroll", onScroll);
     }, [hideOnScroll, scrollRoot]);
 
+    // Close the menu with Escape or a tap outside it.
+    const wrap = useRef(null);
+    useEffect(() => {
+        if (!open) return undefined;
+        const onKey = (e) => e.key === "Escape" && setOpen(false);
+        const onDown = (e) => !wrap.current?.contains(e.target) && setOpen(false);
+        document.addEventListener("keydown", onKey);
+        document.addEventListener("pointerdown", onDown);
+        return () => {
+            document.removeEventListener("keydown", onKey);
+            document.removeEventListener("pointerdown", onDown);
+        };
+    }, [open]);
+
     const go = (link, e) => {
         setActive(link.label);
         setOpen(false);
@@ -70,16 +86,18 @@ const FloatingNavbar = ({
     };
 
     const surface = dark ? "border-white/10 bg-neutral-900/70 text-white shadow-[0_10px_40px_-12px_rgba(0,0,0,0.7)]" : "border-black/10 bg-white/75 text-neutral-900 shadow-[0_10px_40px_-14px_rgba(0,0,0,0.25)]";
+    // Solid: a blur nested inside the blurred bar cannot see the page behind it.
+    const menuSurface = dark ? "border-white/10 bg-neutral-900 text-white shadow-[0_18px_50px_-16px_rgba(0,0,0,0.8)]" : "border-black/10 bg-white text-neutral-900 shadow-[0_18px_50px_-18px_rgba(0,0,0,0.3)]";
     const muted = dark ? "text-white/65 hover:text-white" : "text-neutral-500 hover:text-neutral-900";
 
     return (
-        <div className={`@container sticky top-3 z-50 w-full px-3 ${className}`}>
+        <div ref={wrap} className={`@container sticky top-3 z-50 w-full px-3 ${className}`}>
             <motion.nav
                 aria-label="Main"
                 initial={false}
                 animate={{ y: hidden && !open ? "-140%" : "0%", opacity: hidden && !open ? 0 : 1 }}
                 transition={{ type: "spring", stiffness: 380, damping: 34 }}
-                className={`mx-auto max-w-4xl rounded-[1.6rem] border backdrop-blur-xl transition-[padding] duration-300 ${surface} ${compact ? "px-2.5 py-1.5" : "px-3 py-2.5"}`}
+                className={`relative mx-auto max-w-4xl rounded-[1.6rem] border backdrop-blur-xl transition-[padding] duration-300 ${surface} ${compact ? "px-2.5 py-1.5" : "px-3 py-2.5"}`}
             >
                 <div className="flex items-center justify-between gap-3">
                     <a href="#home" onClick={(e) => go(links[0], e)} className="flex items-center gap-2 pl-1.5 text-[0.95rem] font-bold">
@@ -130,13 +148,20 @@ const FloatingNavbar = ({
                     </div>
                 </div>
 
-                {/* Mobile menu */}
+                {/* Mobile menu: its own panel under the bar that only fades and slides
+                    (no height animation, so nothing re-lays out or re-blurs each frame). */}
                 <AnimatePresence initial={false}>
                     {open && (
-                        <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }} className="overflow-hidden @xl:hidden">
-                            <ul className="space-y-1 px-1 pb-2 pt-3">
+                        <motion.div
+                            initial={{ opacity: 0, y: -8, scale: 0.98 }}
+                            animate={{ opacity: 1, y: 0, scale: 1 }}
+                            exit={{ opacity: 0, y: -8, scale: 0.98 }}
+                            transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
+                            className={`absolute inset-x-0 top-full mt-2 origin-top rounded-[1.4rem] border will-change-transform @xl:hidden ${menuSurface}`}
+                        >
+                            <ul className="space-y-1 p-2">
                                 {links.map((link, i) => (
-                                    <motion.li key={link.label} initial={{ x: -14, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: 0.04 * i + 0.05 }}>
+                                    <motion.li key={link.label} initial={{ x: -10, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: 0.03 * i + 0.04, duration: 0.25 }}>
                                         <a href={link.href} onClick={(e) => go(link, e)} className={`flex items-center justify-between rounded-2xl px-4 py-3 text-[0.95rem] font-medium ${active === link.label ? (dark ? "bg-white/[0.08]" : "bg-black/[0.05]") : ""}`}>
                                             {link.label}
                                             {active === link.label && <span className="h-1.5 w-1.5 rounded-full" style={{ background: accentColor }} />}
@@ -144,7 +169,7 @@ const FloatingNavbar = ({
                                     </motion.li>
                                 ))}
                                 {cta && (
-                                    <motion.li initial={{ y: 8, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.04 * links.length + 0.08 }} className="pt-2">
+                                    <motion.li initial={{ y: 8, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.03 * links.length + 0.06, duration: 0.25 }} className="pt-1">
                                         <a href={cta.href} className="flex items-center justify-center gap-1 rounded-2xl py-3 text-[0.95rem] font-semibold text-black" style={{ background: accentColor }}>
                                             {cta.label} <ArrowUpRight className="h-4 w-4" />
                                         </a>

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

@@ -149,9 +149,8 @@ const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentCo
         const el = links.current[i];
         const b = bar.current;
         if (!el || !b) return null;
-        const a = el.getBoundingClientRect();
-        const p = b.getBoundingClientRect();
-        return { l: a.left - p.left + PAD, r: a.right - p.left + PAD, t: a.top - p.top + PAD, h: a.height };
+        // Layout offsets (not screen rects), so it stays right inside zoomed or scaled parents.
+        return { l: el.offsetLeft + PAD, r: el.offsetLeft + el.offsetWidth + PAD, t: el.offsetTop + PAD, h: el.offsetHeight };
     };
 
     // Set up GL + simulation once.
@@ -177,10 +176,9 @@ const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentCo
         // Hold the element itself: the ref is cleared on unmount before cleanup runs.
         const barEl = bar.current;
         const resize = () => {
-            const r = barEl.getBoundingClientRect();
             s.dpr = Math.min(window.devicePixelRatio || 1, 2);
-            const w = r.width + PAD * 2;
-            const h = r.height + PAD * 2;
+            const w = barEl.offsetWidth + PAD * 2;
+            const h = barEl.offsetHeight + PAD * 2;
             cv.width = Math.round(w * s.dpr);
             cv.height = Math.round(h * s.dpr);
             cv.style.width = `${w}px`;

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

@@ -36,10 +36,9 @@ const NavMenu = ({
         };
 
         const moveWithGSAP = () => {
-            const rect = el.getBoundingClientRect();
-            const parentRect = el.parentElement.getBoundingClientRect();
-            const left = rect.left - parentRect.left;
-            const width = rect.width;
+            // Layout offsets (not screen rects), so it stays right inside zoomed or scaled parents.
+            const left = el.offsetLeft;
+            const width = el.offsetWidth;
 
             gsap.to(indicator, {
                 x: left,
@@ -59,10 +58,8 @@ const NavMenu = ({
         const handleResize = () => {
             const el = navItemsRef.current[activeIdx];
             if (el) {
-                const rect = el.getBoundingClientRect();
-                const parentRect = el.parentElement.getBoundingClientRect();
-                const left = rect.left - parentRect.left;
-                const width = rect.width;
+                const left = el.offsetLeft;
+                const width = el.offsetWidth;
 
                 gsap.set(indicatorRef.current, {
                     x: left,

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

@@ -1,154 +1,159 @@
-/* eslint-disable no-unused-vars */
-import React, { useState, useEffect, useRef } from 'react';
-import { motion, useMotionValue, useTransform } from 'framer-motion';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
-const CarouselCard = ({ slide, isCenter, isScrolling }) => {
-    const cardRef = useRef(null);
-    const x = useMotionValue(0);
-    const y = useMotionValue(0);
-
-    const rotateX = useTransform(y, [-200, 200], [15, -15]);
-    const rotateY = useTransform(x, [-200, 200], [-15, 15]);
-
-    const handleMouseMove = (event) => {
-        if (!cardRef.current || !isCenter || isScrolling) return;
-        const rect = cardRef.current.getBoundingClientRect();
-        x.set(event.clientX - rect.left - rect.width / 2);
-        y.set(event.clientY - rect.top - rect.height / 2);
-    };
-
-    const handleMouseLeave = () => {
-        x.set(0);
-        y.set(0);
-    };
-
-    useEffect(() => {
-        if (isScrolling) {
-            x.set(0);
-            y.set(0);
-        }
-    }, [isScrolling, x, y]);
-
-    return (
-        <motion.div
-            ref={cardRef}
-            className="w-full h-full bg-slate-900 rounded-2xl group"
-            style={{
-                transformStyle: 'preserve-3d',
-                perspective: '1500px',
-                rotateX: isCenter ? rotateX : 0,
-                rotateY: isCenter ? rotateY : 0,
-            }}
-            onMouseMove={handleMouseMove}
-            onMouseLeave={handleMouseLeave}
-        >
-            {/* Slide Content */}
-            <div className="absolute inset-0 w-full h-full" style={{ transformStyle: 'preserve-3d', perspective: '1500px' }}>
-                <img src={slide.imageUrl} alt={slide.title} className="w-full h-full object-cover group-hover:opacity-30 transition-all duration-300 ease-in-out rounded-2xl" />
-                <img src={slide.pngUrl} alt={slide.title} className="absolute inset-0 w-full h-full object-cover group-hover:translate-z-15 transition-all duration-300 ease-in-out rounded-2xl" />
-            </div>
-            <div className="relative flex flex-col justify-end h-full text-white p-5 sm:p-8" style={{ transformStyle: 'preserve-3d', perspective: '1500px' }}>
-                <h2 className="text-2xl sm:text-3xl font-bold group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.title}</h2>
-                <p className="text-lime-400 mt-1 group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.subtitle}</p>
-                <p className="text-slate-300 mt-3 sm:mt-4 text-xs sm:text-sm leading-relaxed line-clamp-3 sm:line-clamp-none group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.text}</p>
-            </div>
-        </motion.div>
-    );
-};
-
-
-// --- Custom Parallax Carousel Component ---
-const ParallaxCarousel = ({ slides }) => {
-    const [activeIndex, setActiveIndex] = useState(0);
-    const animatingRef = useRef(false);
-    const animTimeoutRef = useRef(null);
-
-    const [isScrolling, setIsScrolling] = useState(false);
-    const scrollTimeoutRef = useRef(null);
-
-    // ✅ REMOVED: isHovered state hata diya gaya hai.
-
-    const NAV_ANIM_MS = 600;
-    const handleNext = () => {
-        if (animatingRef.current) return;
-        animatingRef.current = true;
-        clearTimeout(animTimeoutRef.current);
-        setActiveIndex((prevIndex) => (prevIndex + 1) % slides.length);
-        animTimeoutRef.current = setTimeout(() => {
-            animatingRef.current = false;
-        }, NAV_ANIM_MS);
-    };
-
-    const handlePrev = () => {
-        if (animatingRef.current) return;
-        animatingRef.current = true;
-        clearTimeout(animTimeoutRef.current);
-        setActiveIndex((prevIndex) => (prevIndex - 1 + slides.length) % slides.length);
-        animTimeoutRef.current = setTimeout(() => {
-            animatingRef.current = false;
-        }, NAV_ANIM_MS);
-    };
-    useEffect(() => {
-        const handleScroll = () => {
-            setIsScrolling(true);
-            clearTimeout(scrollTimeoutRef.current);
-            scrollTimeoutRef.current = setTimeout(() => {
-                setIsScrolling(false);
-            }, 150);
-        };
-
-        window.addEventListener('scroll', handleScroll, { passive: true });
-
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-            clearTimeout(scrollTimeoutRef.current);
-        };
-    }, []);
-
-
-    return (
-        <div className="relative w-full flex flex-col items-center px-2">
-            <div
-                className="relative w-full h-[380px] sm:h-[480px]"
-                style={{ perspective: '1200px', transformStyle: 'preserve-3d' }}
-            >
-                {slides.map((slide, index) => {
-                    let positionOffset = index - activeIndex;
-                    if (positionOffset > slides.length / 2) {
-                        positionOffset -= slides.length;
-                    } else if (positionOffset < -slides.length / 2) {
-                        positionOffset += slides.length;
-                    }
-
-                    const isVisible = Math.abs(positionOffset) <= 2;
-
-                    return (
-                        <motion.div
-                            key={index}
-                            className={`absolute left-1/2 top-1/2 aspect-[25/26] w-[min(80%,25rem)] sm:w-[min(88%,25rem)] -translate-x-1/2 -translate-y-1/2 ${positionOffset === 0 ? '' : 'pointer-events-none'}`}
-                            initial={false}
-                            style={{ transformStyle: 'preserve-3d', willChange: 'transform, opacity' }}
-                            animate={{
-                                transform: `translateX(${positionOffset * 50}%) translateZ(${-Math.abs(positionOffset) * 250}px) scale(${1 - Math.abs(positionOffset) * 0.15})`,
-                                opacity: isVisible ? (1 - Math.abs(positionOffset) * 0.45) : 0,
-                                zIndex: slides.length - Math.abs(positionOffset),
-                            }}
-                            transition={{ type: 'spring', stiffness: 160, damping: 22 }}
-                        >
-                            <CarouselCard slide={slide} isCenter={positionOffset === 0} isScrolling={isScrolling} />
-                        </motion.div>
-                    );
-                })}
-            </div>
-
-            <motion.button onClick={handlePrev} className="absolute left-0 top-1/2 -translate-y-1/2 z-30 p-1.5 sm:p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors" whileTap={{ scale: 0.9 }}>
-                <ArrowLeft size={32} className="h-5 w-5 sm:h-8 sm:w-8" />
-            </motion.button>
-            <motion.button onClick={handleNext} className="absolute right-0 top-1/2 -translate-y-1/2 z-30 p-1.5 sm:p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors" whileTap={{ scale: 0.9 }}>
-                <ArrowRight size={32} className="h-5 w-5 sm:h-8 sm:w-8" />
-            </motion.button>
-        </div>
-    );
-};
-
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, useMotionValue, useTransform } from 'framer-motion';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+const CarouselCard = ({ slide, isCenter, isScrolling }) => {
+    const cardRef = useRef(null);
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
+
+    const rotateX = useTransform(y, [-200, 200], [15, -15]);
+    const rotateY = useTransform(x, [-200, 200], [-15, 15]);
+
+    const handleMouseMove = (event) => {
+        if (!cardRef.current || !isCenter || isScrolling) return;
+        const rect = cardRef.current.getBoundingClientRect();
+        x.set(event.clientX - rect.left - rect.width / 2);
+        y.set(event.clientY - rect.top - rect.height / 2);
+    };
+
+    const handleMouseLeave = () => {
+        x.set(0);
+        y.set(0);
+    };
+
+    // Level the card when it leaves the centre or the page scrolls.
+    useEffect(() => {
+        if (isScrolling || !isCenter) {
+            x.set(0);
+            y.set(0);
+        }
+    }, [isScrolling, isCenter, x, y]);
+
+    return (
+        <motion.div
+            ref={cardRef}
+            className="w-full h-full bg-slate-900 rounded-2xl group"
+            style={{
+                transformStyle: 'preserve-3d',
+                perspective: '1500px',
+                // Always the motion values (swapping them for 0 made the card jump).
+                rotateX,
+                rotateY,
+            }}
+            onMouseMove={handleMouseMove}
+            onMouseLeave={handleMouseLeave}
+        >
+            {/* Slide Content */}
+            <div className="absolute inset-0 w-full h-full" style={{ transformStyle: 'preserve-3d', perspective: '1500px' }}>
+                <img src={slide.imageUrl} alt={slide.title} className="w-full h-full object-cover group-hover:opacity-30 transition-all duration-300 ease-in-out rounded-2xl" />
+                <img src={slide.pngUrl} alt={slide.title} className="absolute inset-0 w-full h-full object-cover group-hover:translate-z-15 transition-all duration-300 ease-in-out rounded-2xl" />
+            </div>
+            <div className="relative flex flex-col justify-end h-full text-white p-5 sm:p-8" style={{ transformStyle: 'preserve-3d', perspective: '1500px' }}>
+                <h2 className="text-2xl sm:text-3xl font-bold group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.title}</h2>
+                <p className="text-lime-400 mt-1 group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.subtitle}</p>
+                <p className="text-slate-300 mt-3 sm:mt-4 text-xs sm:text-sm leading-relaxed line-clamp-3 sm:line-clamp-none group-hover:translate-z-18 transition-all duration-300 ease-in-out">{slide.text}</p>
+            </div>
+        </motion.div>
+    );
+};
+
+
+// --- Custom Parallax Carousel Component ---
+const ParallaxCarousel = ({ slides }) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const animatingRef = useRef(false);
+    const animTimeoutRef = useRef(null);
+
+    const [isScrolling, setIsScrolling] = useState(false);
+    const scrollTimeoutRef = useRef(null);
+
+    // ✅ REMOVED: isHovered state hata diya gaya hai.
+
+    const NAV_ANIM_MS = 600;
+    const handleNext = () => {
+        if (animatingRef.current) return;
+        animatingRef.current = true;
+        clearTimeout(animTimeoutRef.current);
+        setActiveIndex((prevIndex) => (prevIndex + 1) % slides.length);
+        animTimeoutRef.current = setTimeout(() => {
+            animatingRef.current = false;
+        }, NAV_ANIM_MS);
+    };
+
+    const handlePrev = () => {
+        if (animatingRef.current) return;
+        animatingRef.current = true;
+        clearTimeout(animTimeoutRef.current);
+        setActiveIndex((prevIndex) => (prevIndex - 1 + slides.length) % slides.length);
+        animTimeoutRef.current = setTimeout(() => {
+            animatingRef.current = false;
+        }, NAV_ANIM_MS);
+    };
+    useEffect(() => {
+        const handleScroll = () => {
+            setIsScrolling(true);
+            clearTimeout(scrollTimeoutRef.current);
+            scrollTimeoutRef.current = setTimeout(() => {
+                setIsScrolling(false);
+            }, 150);
+        };
+
+        window.addEventListener('scroll', handleScroll, { passive: true });
+
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            clearTimeout(scrollTimeoutRef.current);
+        };
+    }, []);
+
+
+    return (
+        <div className="relative w-full flex flex-col items-center px-2">
+            <div
+                className="relative w-full h-[380px] sm:h-[480px]"
+                style={{ perspective: '1200px' }}
+            >
+                {slides.map((slide, index) => {
+                    let positionOffset = index - activeIndex;
+                    if (positionOffset > slides.length / 2) {
+                        positionOffset -= slides.length;
+                    } else if (positionOffset < -slides.length / 2) {
+                        positionOffset += slides.length;
+                    }
+
+                    const isVisible = Math.abs(positionOffset) <= 2;
+
+                    return (
+                        // Separate x / z / scale (not one transform string) and no preserve-3d
+                        // here: opacity below 1 flattens a 3D layer, which made cards pop
+                        // while they moved. The stacking order is set at once, not animated.
+                        <motion.div
+                            key={index}
+                            className={`absolute left-1/2 top-1/2 aspect-[25/26] w-[min(80%,25rem)] sm:w-[min(88%,25rem)] ${positionOffset === 0 ? '' : 'pointer-events-none'}`}
+                            initial={false}
+                            style={{ y: '-50%', zIndex: slides.length - Math.abs(positionOffset), willChange: 'transform, opacity' }}
+                            animate={{
+                                x: `${-50 + positionOffset * 50}%`,
+                                z: -Math.abs(positionOffset) * 250,
+                                scale: 1 - Math.abs(positionOffset) * 0.15,
+                                opacity: isVisible ? 1 - Math.abs(positionOffset) * 0.45 : 0,
+                            }}
+                            transition={{ type: 'spring', stiffness: 160, damping: 22 }}
+                        >
+                            <CarouselCard slide={slide} isCenter={positionOffset === 0} isScrolling={isScrolling} />
+                        </motion.div>
+                    );
+                })}
+            </div>
+
+            <motion.button onClick={handlePrev} className="absolute left-0 top-1/2 -translate-y-1/2 z-30 p-1.5 sm:p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors" whileTap={{ scale: 0.9 }}>
+                <ArrowLeft size={32} className="h-5 w-5 sm:h-8 sm:w-8" />
+            </motion.button>
+            <motion.button onClick={handleNext} className="absolute right-0 top-1/2 -translate-y-1/2 z-30 p-1.5 sm:p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors" whileTap={{ scale: 0.9 }}>
+                <ArrowRight size={32} className="h-5 w-5 sm:h-8 sm:w-8" />
+            </motion.button>
+        </div>
+    );
+};
+
 export default ParallaxCarousel;

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

@@ -87,13 +87,18 @@ export function useTheme(themes = defaultThemes, { storageKey = "theme", default
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [themes, store, id]);
 
-    const setTheme = (next, origin) => {
+    // onCommit runs in the same update as the theme change, so anything it
+    // changes (like closing a menu) lands in the same view-transition frame.
+    const setTheme = (next, origin, onCommit) => {
         const theme = themes.find((x) => x.id === next);
-        if (!theme || next === store.get()) return;
+        if (!theme || next === store.get()) return onCommit?.();
         write(storageKey, next);
         const commit = () => {
             applyTheme(theme, rootEl());
-            flushSync(() => store.set(next));
+            flushSync(() => {
+                store.set(next);
+                onCommit?.();
+            });
         };
         const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
         if (!document.startViewTransition || reduced) {
@@ -130,6 +135,9 @@ const Palette = () => (
 const ThemeSwitcher = ({ themes = defaultThemes, placement = "down", align = "right", label, storageKey = "theme", target, className = "", buttonClassName = "" }) => {
     const [id, setTheme] = useTheme(themes, { storageKey, target });
     const [open, setOpen] = useState(false);
+    // Closed by picking a theme: hide at once (an exit animation would be caught
+    // half-way by the theme transition snapshot and flicker).
+    const [picked, setPicked] = useState(false);
     const root = useRef(null);
     const current = themes.find((x) => x.id === id) ?? themes[0];
     const up = placement === "up";
@@ -153,21 +161,27 @@ const ThemeSwitcher = ({ themes = defaultThemes, placement = "down", align = "ri
                 aria-label="Choose colour theme"
                 aria-haspopup="true"
                 aria-expanded={open}
-                onClick={() => setOpen((o) => !o)}
+                onClick={() => {
+                    setPicked(false);
+                    setOpen((o) => !o);
+                }}
                 className={`relative inline-flex items-center justify-center gap-2 border border-[var(--line)] bg-[var(--surface)] text-[var(--ink)] transition-colors hover:border-[var(--accent)] ${label ? "h-9 rounded-full px-3.5 text-sm font-medium" : "h-9 w-9 rounded-full"} ${buttonClassName}`}
             >
                 <Palette />
                 {label && <span>{label}</span>}
                 <span aria-hidden="true" className="absolute right-0.5 top-0.5 h-2 w-2 rounded-full ring-2 ring-[var(--surface)]" style={{ background: current?.vars["--accent"] }} />
             </button>
-            <AnimatePresence>
+            {/* custom passes the latest "picked" to the panel that is leaving. */}
+            <AnimatePresence custom={picked}>
                 {open && (
                     <motion.div
                         role="dialog"
                         aria-label="Colour themes"
                         initial={{ opacity: 0, y: up ? 8 : -8, scale: 0.96 }}
                         animate={{ opacity: 1, y: 0, scale: 1 }}
-                        exit={{ opacity: 0, y: up ? 8 : -8, scale: 0.96 }}
+                        custom={picked}
+                        variants={{ leave: (p) => (p ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: up ? 8 : -8, scale: 0.96 }) }}
+                        exit="leave"
                         transition={{ type: "spring", stiffness: 380, damping: 28 }}
                         className={`absolute z-50 w-[17.5rem] max-w-[calc(100vw-2rem)] rounded-2xl border border-[var(--line)] bg-[var(--surface)] p-3 text-[var(--ink)] shadow-[0_24px_60px_-16px_rgba(0,0,0,0.35)] ${up ? "bottom-full mb-2" : "top-full mt-2"} ${align === "left" ? "left-0" : "right-0"}`}
                         style={{ transformOrigin: `${up ? "bottom" : "top"} ${align === "left" ? "left" : "right"}` }}
@@ -185,8 +199,10 @@ const ThemeSwitcher = ({ themes = defaultThemes, placement = "down", align = "ri
                                         animate={{ y: 0 }}
                                         transition={{ delay: 0.03 * i, type: "spring", stiffness: 380, damping: 28 }}
                                         onClick={(e) => {
-                                            setTheme(theme.id, e.currentTarget.querySelector("[data-swatch]"));
-                                            setOpen(false);
+                                            setTheme(theme.id, e.currentTarget.querySelector("[data-swatch]"), () => {
+                                                setPicked(true);
+                                                setOpen(false);
+                                            });
                                         }}
                                         className={`relative flex items-center gap-2.5 rounded-xl py-2 pl-2 pr-5 text-left text-[0.82rem] font-medium transition-colors hover:bg-[var(--bg)] ${active ? "bg-[var(--bg)]" : ""}`}
                                         style={{ animation: `apex-theme-in 240ms ease-out ${30 * i}ms backwards` }}

package/dist/cli/index.js

@@ -111,7 +111,6 @@ const componentMap = {
     "pixel-transition": "PixelTransition",
     "folder": "Folder",
     "bounce-cards": "BounceCards",
-    "card-swap-3d": "CardSwap3D",
     "gooey-nav": "GooeyNav",
     "liquid-blob-3d": "LiquidBlob3D",
     "particle-morph": "ParticleMorph",

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.12.1",
+  "version": "2.12.2",
   "license": "MIT",
-  "description": "117 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
+  "description": "116 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
   "homepage": "https://apex-ui.in",
   "repository": {
     "type": "git",

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

@@ -1,104 +0,0 @@
-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 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 = [
-    { 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, 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;
-        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);
-    });
-
-    // 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 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>
-    );
-};
-
-export default CardSwap3D;