apex-ui-kit 2.0.5 → 2.0.7

package/dist/ApexUI-Kit/templates/AccordionMarquee/AccordionMarquee.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");

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

@@ -0,0 +1,140 @@
+import React, { useLayoutEffect, useRef } from 'react';
+// GSAP ko seedhe CDN se import kiya gaya hai taaki yeh browser mein chale
+import gsap from "gsap";
+import './AccordionMarquee.css'
+// Accordion ka data
+const accordionData = [
+    {
+        title: "Cybernetic Dreams",
+        text: "Explore the Future",
+    },
+    {
+        title: "Quantum Leap",
+        text: "Journey Through Spacetime",
+    },
+    {
+        title: "Neural Networks",
+        text: "Unravel Complexity",
+    },
+    {
+        title: "Digital Odyssey",
+        text: "Voyage into the Digital World",
+    },
+];
+
+const AccordionMarquee = ({bgColor='#bbf451', textColor='#27272a'}) => {
+    const containerRef = useRef(null);
+
+    useLayoutEffect(() => {
+        const items = gsap.utils.toArray(".accordion-item");
+        let activeItem = null;
+        let activeMarquee = null;
+
+        items.forEach((item) => {
+            const marqueeText = item.querySelector(".marquee-text");
+            const title = item.querySelector(".accordion-title");
+
+            // Marquee text ko 2 baar duplicate karte hain for seamless loop
+            const marqueeContent = marqueeText.innerText;
+            const sparkleIconSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkle-icon lucide-sparkle"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class="sparkle-icon"/></svg>`;
+            marqueeText.innerHTML = [marqueeContent, sparkleIconSVG, marqueeContent, sparkleIconSVG, marqueeContent, sparkleIconSVG, marqueeContent, sparkleIconSVG].join("");
+
+            // Seamless Marquee animation
+            const marqueeWidth = marqueeText.scrollWidth / 2;
+            const marqueeTl = gsap.to(marqueeText, {
+                x: -marqueeWidth,
+                duration: marqueeWidth / 30, // Speed ko consistent rakhta hai
+                ease: "linear",
+                repeat: -1,
+            }).pause();
+
+            item.addEventListener("mouseenter", () => {
+                if (activeItem === item) return;
+
+                if (activeItem) {
+                    const oldTitle = activeItem.querySelector(".accordion-title");
+                    const oldMarqueeWrapper = activeItem.querySelector(".marquee-wrapper");
+                    gsap.to(oldTitle, { autoAlpha: 1, duration: 0.2, ease: "power3.inOut" });
+                    gsap.to(oldMarqueeWrapper, { autoAlpha: 0, duration: 0.2, ease: "power3.inOut" });
+                    if (activeMarquee) activeMarquee.pause();
+                }
+
+                activeItem = item;
+                activeMarquee = marqueeTl;
+
+                const marqueeWrapper = item.querySelector(".marquee-wrapper");
+                gsap.to(title, { autoAlpha: 0, duration: 0.2, ease: "power3.inOut" });
+                gsap.to(marqueeWrapper, { autoAlpha: 1, duration: 0.2, delay: 0.1, ease: "power3.inOut" });
+
+                marqueeTl.play();
+            });
+        });
+
+        containerRef.current.addEventListener("mouseleave", () => {
+            if (!activeItem) return;
+
+            const activeTitle = activeItem.querySelector(".accordion-title");
+            const activeMarqueeWrapper = activeItem.querySelector(".marquee-wrapper");
+
+            gsap.to(activeTitle, { autoAlpha: 1, duration: 0.2, delay: 0.1, ease: "power3.inOut" });
+            gsap.to(activeMarqueeWrapper, { autoAlpha: 0, duration: 0.2, ease: "power3.inOut" });
+
+            if (activeMarquee) {
+                activeMarquee.pause();
+            }
+            activeItem = null;
+            activeMarquee = null;
+        });
+
+    }, []);
+
+    return (
+        <>
+            <style>
+                {`
+                @keyframes sparkle-pulse {
+                    0%, 100% {
+                        stroke: #000;
+                        stroke-width: 0.5;
+                    }
+                    50% {
+                        stroke: #444;
+                        stroke-width: 1;
+                    }
+                }
+                .sparkle-icon {
+                    animation: sparkle-pulse 2.5s ease-in-out infinite;
+                }
+                `}
+            </style>
+            <div className="flex items-center justify-center w-screen bg-gray-900 text-white font-sans">
+                <div ref={containerRef} className="flex flex-col w-full h-[80vh] md:h-[70vh]">
+                    {accordionData.map((item, index) => (
+                        <React.Fragment key={index}>
+                            <div className="accordion-item relative w-full h-40 overflow-hidden cursor-pointer flex items-center justify-center bg-gray-800">
+                                <div className="relative z-10 w-full text-center px-4">
+                                    <h2 className="accordion-title text-2xl sm:text-3xl lg:text-5xl font-extrabold uppercase tracking-wider whitespace-nowrap" style={{ textShadow: '2px 2px 8px rgba(0,0,0,0.7)' }}>
+                                        {item.title}
+                                    </h2>
+                                    <div className="marquee-wrapper absolute inset-0 w-full h-20 flex items-center overflow-hidden opacity-0" style={{backgroundColor: bgColor}}>
+                                        <p className="marquee-text text-4xl sm:text-5xl md:text-6xl font-bold whitespace-nowrap flex items-center" 
+                                        style={{ textShadow: '1px 1px 3px rgba(0,0,0,0.2)', fontFamily: "Righteous, sans-serif", color: textColor }}
+                                        >
+                                            {item.text}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            {index < accordionData.length - 1 && (
+                                <hr className="w-full border-t-2 border-gray-700 my-0" />
+                            )}
+                        </React.Fragment>
+                    ))}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default AccordionMarquee;
+

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

@@ -0,0 +1,133 @@
+import React, { useRef, useEffect, useState } from "react";
+import { gsap } from "gsap";
+
+function BluePrintBackground({ color = '#9ae600', borderColor = 'rgb(98, 116, 142, 0.1)', bgColor, circleColor = 'rgb(154, 230, 0, 0.2)'}) {
+    const gridRef = useRef(null);
+    const [grid, setGrid] = useState({ cols: 0, rows: 0 });
+    const boxSize = 40;
+    const lastHighlighted = useRef(null);
+    const colorRef = useRef(color);
+
+    // Effect 1: calculate grid size and keep it updated on resize
+    useEffect(() => {
+        const calculateGrid = () => {
+            const cols = Math.ceil(window.innerWidth / boxSize);
+            const rows = Math.ceil(window.innerHeight / boxSize) * 2; // double rows for infinite scroll
+            // kill any child tweens before we replace children to avoid visual flicker
+            const el = gridRef.current;
+            if (el) {
+                try { gsap.killTweensOf(el); } catch { /* ignore */ }
+                Array.from(el.children).forEach((c) => { try { gsap.killTweensOf(c); } catch { /* ignore */ } });
+                lastHighlighted.current = null;
+            }
+            setGrid({ cols, rows });
+        };
+
+        calculateGrid();
+        window.addEventListener("resize", calculateGrid);
+        return () => window.removeEventListener("resize", calculateGrid);
+    }, []);
+
+    // keep colorRef up-to-date without forcing effect re-run
+    useEffect(() => { colorRef.current = color; }, [color]);
+
+    // Effect 2: initialize GSAP infinite scroll and mouse handlers once (do not recreate on grid changes)
+    useEffect(() => {
+        const el = gridRef.current;
+        let scrollTween = null;
+
+        if (el) {
+            // make sure we start from current transform so GSAP doesn't jump
+            // create a looping tween on the container only once
+            scrollTween = gsap.to(el, {
+                y: "-50%",
+                duration: 15,
+                repeat: -1,
+                ease: "linear",
+                overwrite: false,
+            });
+        }
+
+        const handleMouseMove = (e) => {
+            const el2 = gridRef.current;
+            if (!el2) return;
+
+            const target = document.elementFromPoint(e.clientX, e.clientY);
+            if (!target || !el2.contains(target)) {
+                if (lastHighlighted.current !== null) {
+                    const prev = el2.children[lastHighlighted.current];
+                    if (prev) gsap.to(prev, { backgroundColor: "transparent", boxShadow: "none", duration: 0.18 });
+                    lastHighlighted.current = null;
+                }
+                return;
+            }
+
+            const child = target.closest("div");
+            const index = Array.prototype.indexOf.call(el2.children, child);
+            if (index === -1) return;
+
+            if (lastHighlighted.current !== index) {
+                if (lastHighlighted.current !== null) {
+                    const prevBox = el2.children[lastHighlighted.current];
+                    if (prevBox) gsap.to(prevBox, { backgroundColor: "transparent", boxShadow: "none", duration: 0.18 });
+                }
+
+                const newBox = el2.children[index];
+                if (newBox) {
+                    const c = colorRef.current || "#a3e635";
+                    gsap.to(newBox, { backgroundColor: c, boxShadow: `0 0 12px ${c}`, duration: 0.12 });
+                }
+
+                lastHighlighted.current = index;
+            }
+        };
+
+        window.addEventListener("mousemove", handleMouseMove);
+
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+            if (scrollTween && typeof scrollTween.kill === "function") {
+                try { scrollTween.kill(); } catch { /* ignore */ }
+            }
+            if (el) {
+                try { gsap.killTweensOf(el); } catch { /* ignore */ }
+                Array.from(el.children).forEach((c) => { try { gsap.killTweensOf(c); } catch { /* ignore */ } });
+            }
+            lastHighlighted.current = null;
+        };
+    }, []);
+
+    const total = grid.cols * grid.rows;
+
+    return (
+        <div className="absolute inset-0 z-0 w-full h-full overflow-hidden bg-slate-800" style={{ backgroundColor: `${bgColor}` }}>
+            <div
+                ref={gridRef}
+                className="grid"
+                style={{
+                    gridTemplateColumns: `repeat(${grid.cols}, ${boxSize}px)`,
+                    gridTemplateRows: `repeat(${grid.rows}, ${boxSize}px)`,
+                }}
+            >
+                {Array.from({ length: total }).map((_, i) => (
+                    <div
+                        key={i}
+                        className={`border bg-transparent w-10 h-10`}
+                        style={{
+                            borderColor: borderColor
+                        }}
+                    />
+                ))}
+            </div>
+            {/* Spotlight overlay - positioned after grid to not interfere with scroll */}
+            <div
+                className="absolute inset-0 z-10 pointer-events-none blur-3xl"
+                style={{
+                    background: `radial-gradient(circle, ${circleColor} 0%, rgba(0, 0, 255, 0.1) 100%)`
+                }}
+            />
+        </div >
+    );
+}
+
+export default BluePrintBackground;

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

@@ -0,0 +1,101 @@
+/* eslint-disable no-unused-vars */
+import React, { useState, useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { FaExternalLinkAlt, FaGithub, FaRegImage } from "react-icons/fa";
+const CARD_STACK_OFFSET = 32;
+const CARD_SCALE_STEP = 0.08;
+const AUTO_CYCLE_INTERVAL = 5000;
+export default function CardStack({
+    cards = [],
+    autoCycle = true,
+    cycleInterval = AUTO_CYCLE_INTERVAL,
+}) {
+    const [active, setActive] = useState(0);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isScrolling, setIsScrolling] = useState(false);
+    const timeoutRef = useRef(null);
+    const scrollTimeoutRef = useRef(null);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!autoCycle || isHovered || isScrolling) return;
+        timeoutRef.current = setTimeout(() => {
+            setActive((prev) => (prev + 1) % cards.length);
+        }, cycleInterval);
+        return () => clearTimeout(timeoutRef.current);
+    }, [active, isHovered, isScrolling, autoCycle, cycleInterval, cards.length]);
+
+    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);
+        };
+    }, []);
+    useEffect(() => {
+        if (!containerRef.current) return;
+        const cardElements = gsap.utils.toArray(".card-item", containerRef.current);
+        const tl = gsap.timeline({
+            defaults: { duration: 0.6, ease: "elastic.out(1, 0.3)" },
+        });
+        cardElements.forEach((card, i) => {
+            const isTop = i === 0;
+            const z = cards.length - i;
+            const offset = i * CARD_STACK_OFFSET;
+            const scale = 1 - i * CARD_SCALE_STEP;
+
+            tl.to(card, {
+                y: -offset,
+                scale: scale,
+                filter: isTop ? "none" : "blur(1px)",
+                opacity: 1,
+                zIndex: z,
+            }, 0);
+        });
+        return () => {
+            tl.kill();
+        };
+    }, [active]);
+    const getCardIndex = (i) => (active + i) % cards.length;
+    return (
+        <div
+            ref={containerRef}
+            className="relative flex justify-center items-center h-[340px] md:h-[400px] w-full max-w-lg mx-auto"
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            {cards.map((_, i) => {
+                if (i >= 4) return null;
+
+                const idx = getCardIndex(i);
+                const isTop = i === 0;
+                const card = cards[idx];
+
+                return (
+                    <div
+                        key={idx}
+                        className={`card-item absolute left-0 right-0 mx-auto w-11/12 md:w-96 h-48 md:h-60 rounded-3xl shadow-xl bg-gradient-to-br ${card.color} bg-slate-950 border border-white/20 flex flex-row items-center px-3 md:px-6 py-4 cursor-pointer select-none ${isTop ? "" : "pointer-events-none"}`}
+                        style={{ opacity: 0 }}
+                    >
+                        <div className="flex-shrink-0 flex items-center justify-center w-16 h-16 md:w-24 md:h-24 lg:w-28 lg:h-28 rounded-xl overflow-hidden bg-white/10 border border-white/20 mr-3 md:mr-6">
+                            {card.image ? (<img src={card.image} alt={card.title} className="object-cover w-full h-full" />) : (<FaRegImage className="text-3xl text-white/40" />)}
+                        </div>
+                        <div className="flex-1 flex flex-col justify-center gap-1 md:gap-2 overflow-hidden">
+                            <div className="flex items-center gap-2">
+                                <h2 className="text-base md:text-xl font-bold text-white drop-shadow truncate">{card.title}</h2>
+                                {card.github && (<a href={card.github} target="_blank" rel="noopener noreferrer" className="text-white/70 hover:text-white ml-1 flex-shrink-0"><FaGithub className="inline-block align-middle text-lg md:text-xl" /></a>)}
+                            </div>
+                            <p className="text-xs md:text-sm text-white/60 mb-1 truncate">{card.subtitle}</p>
+                            <p className="text-xs md:text-base text-white/80 mb-1 line-clamp-2">{card.desc}</p>
+                            {card.link && (<a href={card.link} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-xs md:text-sm px-2 py-1 rounded bg-blue-500/80 hover:bg-blue-600/90 text-white font-semibold shadow transition w-fit mt-1"><FaExternalLinkAlt className="inline-block mr-1 text-xs md:text-sm" />Visit</a>)}
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

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

@@ -1,161 +0,0 @@
-/* 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';
-
-// --- Card Component with Hover Parallax Effect ---
-const CarouselCard = ({ slide, isCenter }) => {
-    const cardRef = useRef(null);
-    const x = useMotionValue(0);
-    const y = useMotionValue(0);
-
-    // Mouse move ke hisab se rotation calculate karta hai (effect ko strong banaya gaya hai)
-    const rotateX = useTransform(y, [-200, 200], [15, -15]);
-    const rotateY = useTransform(x, [-200, 200], [-15, 15]);
-    const handleMouseMove = (event) => {
-        if (!cardRef.current || !isCenter) 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);
-    };
-
-    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-8"
-                style={{
-                    transformStyle: 'preserve-3d',
-                    perspective: '1500px',
-                }}
-            >
-                <h2 className="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-4 text-sm leading-relaxed 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 [isHovered, setIsHovered] = useState(false);
-
-    const handleNext = () => {
-        setActiveIndex((prevIndex) => (prevIndex + 1) % slides.length);
-    };
-
-    const handlePrev = () => {
-        setActiveIndex((prevIndex) => (prevIndex - 1 + slides.length) % slides.length);
-    };
-
-    // Automatic sliding ke liye
-    useEffect(() => {
-        // Agar hovered hai to interval start hi mat karo
-        if (isHovered) {
-            return;
-        }
-
-        const interval = setInterval(() => {
-            handleNext();
-        }, 4000); // Har 4 second mein slide change hoga
-
-        return () => clearInterval(interval); // Cleanup
-    }, [activeIndex, isHovered]); // isHovered state change hone par effect ko firse chalayega
-
-    return (
-        <div
-            className="relative w-full flex flex-col items-center px-2"
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
-        >
-            {/* 3D Carousel Container */}
-            <div
-                className="relative w-full h-[480px] portrait:h-[480px] portrait:px-0"
-                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 w-full h-[340px] portrait:w-full portrait:h-[480px] top-0 left-0 portrait:left-0 portrait:top-0 ${positionOffset === 0 ? '' : ' pointer-events-none'} md:w-[50%] md:h-[400px] md:top-[50px] md:left-1/2 lg:-translate-x-1/2`}
-                            initial={false}
-                            style={{ transformStyle: 'preserve-3d' }}
-                            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: 290, damping: 30 }}
-                        >
-                            <CarouselCard slide={slide} isCenter={positionOffset === 0} />
-                        </motion.div>
-                    );
-                })}
-            </div>
-
-            {/* Side Navigation Buttons */}
-            <motion.button
-                onClick={handlePrev}
-                className="absolute -left-10 lg:left-0 top-1/2 -translate-y-1/2 z-30 p-3 rounded-full text-slate-400 hover:text-lime-400  transition-colors"
-                whileTap={{ scale: 0.9 }}
-            >
-                <ArrowLeft size={32} />
-            </motion.button>
-            <motion.button
-                onClick={handleNext}
-                className="absolute -right-10 lg:right-0 top-1/2 -translate-y-1/2 z-30 p-3 rounded-full text-slate-400 hover:text-lime-400 transition-colors"
-                whileTap={{ scale: 0.9 }}
-            >
-                <ArrowRight size={32} />
-            </motion.button>
-        </div>
-    );
-};
-
-export default ParallaxCarousel;

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

@@ -16,10 +16,16 @@ const DragCarousel = ({ images }) => {
     const dragProxyRef = useRef(null);
     useEffect(() => {
         const cards = cardsRef.current;
+        // hint browser to use the GPU for transforms
+        cards.forEach((c) => {
+            if (c) c.style.willChange = 'transform, opacity';
+        });
+
         gsap.to(cards, {
-            duration: 0.4,
-            ease: 'power4.Out',
-            stagger: 0.05,
+            duration: 0.45,
+            ease: 'power2.out',
+            stagger: 0.03,
+            overwrite: true,
             // Har card ke liye naya transform calculate karta hai
             transform: (i) => {
                 let positionOffset = i - activeIndex;
@@ -31,7 +37,7 @@ const DragCarousel = ({ images }) => {
 
                 const translateX = positionOffset * 50;
                 const translateZ = -Math.abs(positionOffset) * 250;
-                const scale = 1 - Math.abs(positionOffset) * 0.15;
+                const scale = 1 - Math.abs(positionOffset) * 0.12;
 
                 return `translateX(${translateX}%) translateZ(${translateZ}px) scale(${scale})`;
             },
@@ -53,14 +59,39 @@ const DragCarousel = ({ images }) => {
     // GSAP Draggable ko setup karta hai
     useEffect(() => {
         // BUG FIX: Draggable ab proxy element par lagaya gaya hai
+        const cards = cardsRef.current;
+        const setters = cards.map((c) => (c ? gsap.quickSetter(c, 'css', 'transform') : null));
+
         const draggableInstance = Draggable.create(dragProxyRef.current, {
             type: "x",
             trigger: carouselRef.current,
             inertia: true,
             cursor: 'grab',
             activeCursor: 'grabbing',
+            onDrag: function () {
+                const w = carouselRef.current ? carouselRef.current.clientWidth : window.innerWidth;
+                const shiftPercent = (this.x / w) * 100; // percentage shift based on drag
+
+                cards.forEach((c, i) => {
+                    if (!c || !setters[i]) return;
+                    let positionOffset = i - activeIndex;
+                    if (positionOffset > images.length / 2) positionOffset -= images.length;
+                    if (positionOffset < -images.length / 2) positionOffset += images.length;
+
+                    const baseX = positionOffset * 50;
+                    const translateX = baseX + shiftPercent;
+                    const translateZ = -Math.abs(positionOffset) * 250;
+                    const scale = 1 - Math.abs(positionOffset) * 0.12;
+
+                    setters[i](`translateX(${translateX}%) translateZ(${translateZ}px) scale(${scale})`);
+                    c.style.opacity = Math.abs(positionOffset - (this.x / w)) > 2 ? 0 : 1;
+                    c.style.zIndex = images.length - Math.abs(positionOffset);
+                });
+            },
             onDragEnd: function () {
-                gsap.to(this.target, { x: 0, duration: 0.3 });
+                // Reset proxy position
+                gsap.to(this.target, { x: 0, duration: 0.35, ease: 'power2.out' });
+                // Direction based index change
                 if (this.getDirection("start") === "left") {
                     setActiveIndex(prev => (prev + 1) % images.length);
                 } else if (this.getDirection("start") === "right") {
@@ -74,8 +105,9 @@ const DragCarousel = ({ images }) => {
             if (draggableInstance && draggableInstance[0]) {
                 draggableInstance[0].kill();
             }
+            setters.forEach((s) => s && s.kill && s.kill());
         };
-    }, [images.length]);
+    }, [images.length, activeIndex]);
 
     return (
         <div