apex-ui-kit 2.0.5 → 2.0.7

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

@@ -0,0 +1,95 @@
+.meteor-bg {
+  position: absolute;
+  width: 2px;
+  height: 80px;
+  background: linear-gradient(to top, #fff, transparent); /* This line to change the meteor's tail color */
+  animation: meteor-fall-bg linear infinite;
+  opacity: 0;
+  transform: rotate(-45deg);
+}
+/* Meteor ka head (glowing circle) */
+.meteor-bg::before {
+  content: "";
+  position: absolute;
+  bottom: -3px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 6px;
+  height: 6px;
+  background-color: #fff; /* This line to change the meteor's head color */
+  border-radius: 50%;
+}
+
+@keyframes meteor-fall-bg {
+  0% {
+    transform: translateX(-200px) translateY(-200px) rotate(-45deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(500px) translateY(500px) rotate(-45deg);
+    opacity: 0;
+  }
+}
+
+/* Particle Styles */
+.particle-bg {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  background-color: var(--particle-color);
+  border-radius: 50%;
+  box-shadow: 0 0 8px var(--particle-color), 0 0 12px var(--particle-color);
+  animation: particle-float linear infinite;
+  opacity: 0;
+}
+
+@keyframes particle-float {
+  0%,
+  100% {
+    opacity: 0;
+    transform: translateY(0px);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(-20px);
+  }
+}
+
+/* Moving Border */
+.moving-border-card {
+  position: relative;
+  overflow: hidden;
+}
+
+.moving-border-card::before {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: conic-gradient(
+    from var(--angle),
+    transparent 0deg 90deg,
+    rgb(0, 132, 209, 0.5) 180deg,
+    /* Sky Blue */ transparent 180deg 270deg,
+    rgb(0, 132, 209, 0.5) 360deg
+  );
+  animation: rotate 6s linear infinite;
+  z-index: 0;
+}
+
+@property --angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes rotate {
+  from {
+    --angle: 0deg;
+  }
+  to {
+    --angle: 360deg;
+  }
+}

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import './MeteorCard.css';
+const ArrowRightIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+        viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+        className="ml-2 h-5 w-5 transition-transform duration-300 ease-in-out group-hover:translate-x-1">
+        <line x1="5" y1="12" x2="19" y2="12" />
+        <polyline points="12 5 19 12 12 19" />
+    </svg>
+);
+
+// Meteor Effect Component
+const Meteors = ({ number = 20 }) => {
+    const meteors = [...Array(number)].map((_, i) => (
+        <span
+            key={i}
+            className="meteor-bg"
+            style={{
+                top: `${Math.random() * 100}%`,
+                left: `${Math.random() * 100}%`,
+                animationDelay: `${Math.random() * 8}s`,
+                animationDuration: `${Math.floor(Math.random() * 6) + 4}s`,
+            }}
+        ></span>
+    ));
+    return <>{meteors}</>;
+};
+
+// Particle Effect Component
+const Particles = ({ number = 50, color = '#ffffff', speed = 1 }) => {
+    const particles = [...Array(number)].map((_, i) => {
+        const animationDuration = (Math.random() * 5 + 3) / speed;
+        return (
+            <span
+                key={i}
+                className="particle-bg"
+                style={{
+                    '--particle-color': color,
+                    top: `${Math.random() * 100}%`,
+                    left: `${Math.random() * 100}%`,
+                    animationDelay: `${Math.random() * animationDuration}s`,
+                    animationDuration: `${animationDuration}s`,
+                }}
+            ></span>
+        );
+    });
+    return <>{particles}</>;
+};
+
+// Main MeteorCard Component
+const MeteorCard = ({ data, particleNumber, particleColor, particleSpeed }) => {
+    return (
+        <>
+            {data.map((item, index) => (
+                <div key={index} className="relative w-full lg:w-[30vw] max-w-4xl mx-auto bg-slate-800/80 p-0.5 rounded-lg moving-border-card">
+                    {/* Card ka content container */}
+                    <div className="relative bg-slate-900 rounded-lg p-4 md:p-8 flex flex-col md:flex-row items-center gap-6 md:gap-8 overflow-hidden">
+                        {/* Background Effects */}
+                        <div className="absolute inset-0 w-full h-full z-0">
+                            <Meteors number={5} />
+                            <Particles
+                                number={particleNumber}
+                                color={particleColor}
+                                speed={particleSpeed}
+                            />
+                        </div>
+
+                        {/* Spotlight Effect (hide on small screens to reduce visual noise) */}
+                        <div className="hidden md:block absolute -top-1/3 -left-1/3 w-2/3 h-2/3 bg-blue-400/90 rounded-full blur-[120px] pointer-events-none z-0"></div>
+
+                        {/* Left Side: Image */}
+                        <div className="relative w-full md:w-1/2 h-64 md:h-full rounded-md overflow-hidden z-10">
+                            <img src={item.imageUrl} alt={item.title} className="w-full h-full object-cover lg:aspect-square" />
+                        </div>
+
+                        {/* Right Side: Content */}
+                        <div className="relative w-full md:w-2/3 text-center md:text-left z-10">
+                            <h3 className="text-3xl font-bold mb-2 text-white">{item.title}</h3>
+                            <p className="text-gray-400 mb-6">{item.description}</p>
+                            <button className="group relative inline-flex md:inline-flex w-full md:w-auto items-center justify-center px-6 py-2 bg-lime-600 text-white font-semibold rounded-md overflow-hidden transition-all duration-300 hover:bg-lime-700">
+                                <span className="mx-auto">{item.buttonText}</span>
+                                <ArrowRightIcon />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </>
+    );
+};
+
+export default MeteorCard;

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

@@ -2,18 +2,16 @@
 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 CarouselCard = ({ slide, isCenter, isScrolling }) => {
     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;
+        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);
@@ -24,6 +22,13 @@ const CarouselCard = ({ slide, isCenter }) => {
         y.set(0);
     };
 
+    useEffect(() => {
+        if (isScrolling) {
+            x.set(0);
+            y.set(0);
+        }
+    }, [isScrolling, x, y]);
+
     return (
         <motion.div
             ref={cardRef}
@@ -36,33 +41,13 @@ const CarouselCard = ({ slide, isCenter }) => {
             }}
             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 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',
-                }}
-            >
+            <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>
@@ -75,37 +60,54 @@ const CarouselCard = ({ slide, isCenter }) => {
 // --- Custom Parallax Carousel Component ---
 const ParallaxCarousel = ({ slides }) => {
     const [activeIndex, setActiveIndex] = useState(0);
-    const [isHovered, setIsHovered] = useState(false);
+    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);
     };
-
-    // Automatic sliding ke liye
     useEffect(() => {
-        // Agar hovered hai to interval start hi mat karo
-        if (isHovered) {
-            return;
-        }
+        const handleScroll = () => {
+            setIsScrolling(true);
+            clearTimeout(scrollTimeoutRef.current);
+            scrollTimeoutRef.current = setTimeout(() => {
+                setIsScrolling(false);
+            }, 150);
+        };
 
-        const interval = setInterval(() => {
-            handleNext();
-        }, 4000); // Har 4 second mein slide change hoga
+        window.addEventListener('scroll', handleScroll, { passive: true });
+
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            clearTimeout(scrollTimeoutRef.current);
+        };
+    }, []);
 
-        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 flex flex-col items-center px-2">
             <div
                 className="relative w-full h-[480px] portrait:h-[480px] portrait:px-0"
                 style={{ perspective: '1200px', transformStyle: 'preserve-3d' }}
@@ -125,33 +127,24 @@ const ParallaxCarousel = ({ slides }) => {
                             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' }}
+                            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: 290, damping: 30 }}
+                            transition={{ type: 'spring', stiffness: 160, damping: 22 }}
                         >
-                            <CarouselCard slide={slide} isCenter={positionOffset === 0} />
+                            <CarouselCard slide={slide} isCenter={positionOffset === 0} isScrolling={isScrolling} />
                         </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 }}
-            >
+            <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 }}
-            >
+            <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>

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

@@ -6,25 +6,24 @@ const GitHubIcon = () => (<svg width="24" height="24" fill="none" stroke="curren
 const LinkedInIcon = () => (<svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /><rect x="2" y="9" width="4" height="12" /><circle cx="4" cy="4" r="2" /></svg>);
 const TwitterIcon = () => (<BsTwitterX size={24} />);
 const InstagramIcon = () => (<svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" /><line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg>);
-const ParallaxProfileCard = ({ profile }) => {
-    const defaultProfile = {
-        avatarUrl: "/assets/spiderman.png",
-        name: "Spider Man",
-        username: "spider_man",
-        dob: "10-08-2001",
-        title: "PhotoGrapher",
-        status: "Available for Hire",
-        socialLinks: {
-            github: "https://github.com/",
-            linkedin: "https://www.linkedin.com/",
-            twitter: "https://twitter.com/",
-            instagram: "https://www.instagram.com/",
-        },
-        // Button actions
-        onHireClick: () => alert("Hire Me button clicked!"),
-        onCvClick: () => alert("CV button clicked!"),
-    };
+const defaultProfile = {
+    avatarUrl: "/assets/spiderman.png",
+    name: "Spider Man",
+    username: "spider_man",
+    dob: "10-08-2001",
+    title: "PhotoGrapher",
+    status: "Available for Hire",
+    socialLinks: {
+        github: "https://github.com/",
+        linkedin: "https://www.linkedin.com/",
+        twitter: "https://twitter.com/",
+        instagram: "https://www.instagram.com/",
+    },
+    onHireClick: () => alert("Hire Me button clicked!"),
+    onCvClick: () => alert("CV button clicked!"),
+};
 
+const ParallaxProfileCard = ({ profile }) => {
     const {
         avatarUrl, name, username, dob, title, status, socialLinks, onHireClick, onCvClick
     } = profile || defaultProfile;
@@ -104,4 +103,16 @@ const ParallaxProfileCard = ({ profile }) => {
     );
 };
 
-export default ParallaxProfileCard;
+const ParallaxProfile = ({ profiles = [defaultProfile], className = '' }) => {
+    const safe = Array.isArray(profiles) && profiles.length > 0 ? profiles : [defaultProfile];
+    return (
+        <div className={`flex flex-wrap gap-6 justify-center ${className}`}>
+            {safe.map((p, i) => (
+                <ParallaxProfileCard key={p.id || p.username || i} profile={p} />
+            ))}
+        </div>
+    );
+};
+
+export { ParallaxProfileCard };
+export default ParallaxProfile;

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

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState } from "react";
 
-const people = [
+const defaultPeople = [
     { id: 1, name: "Captain America", job: "Leader of the Avengers", img: "/assets/captainamerica.png" },
     { id: 2, name: "Doctor Strange", job: "Sorcerer Supreme", img: "/assets/doctorStrange.png" },
     { id: 3, name: "Iron Man", job: "Leader Of Stark Industries", img: "/assets/ironman.png" },
@@ -9,7 +9,13 @@ const people = [
     { id: 6, name: "Thanos", job: "The Mad Titan", img: "/assets/thanos.png" },
 ];
 
-const PointerFollower = ({ cursorColor = "#fff", interval = 3000, badgeColor = "#fff", badgeTextColor = "#212121" }) => {
+const PointerFollower = ({
+    cursorColor = "#fff",
+    interval = 3000,
+    badgeColor = "#fff",
+    badgeTextColor = "#212121",
+    people = defaultPeople,
+}) => {
     const containerRef = useRef(null);
     const [pos, setPos] = useState({ x: 0, y: 0 });
     const [hovered, setHovered] = useState(false);
@@ -20,11 +26,14 @@ const PointerFollower = ({ cursorColor = "#fff", interval = 3000, badgeColor = "
         if (hovered) return;
 
         const autoInterval = setInterval(() => {
-            setActiveIndex((prev) => (prev + 1) % people.length);
+            setActiveIndex((prev) => {
+                if (!people || people.length === 0) return 0;
+                return (prev + 1) % people.length;
+            });
         }, interval);
 
         return () => clearInterval(autoInterval);
-    }, [hovered, interval]);
+    }, [hovered, interval, people]);
 
     // 🖱️ Mouse tracking
     useEffect(() => {
@@ -53,13 +62,24 @@ const PointerFollower = ({ cursorColor = "#fff", interval = 3000, badgeColor = "
         };
     }, []);
 
-    const person = people[activeIndex]; // ✅ SYNCED HERE
+    // Guard against empty people array
+    const safePeople = Array.isArray(people) && people.length > 0 ? people : defaultPeople;
+    const person = safePeople[activeIndex % safePeople.length]; // ✅ SYNCED HERE
+
+    // If the provided people list changes, ensure activeIndex is valid
+    useEffect(() => {
+        if (!Array.isArray(people) || people.length === 0) {
+            setActiveIndex(0);
+            return;
+        }
+        setActiveIndex((idx) => idx % people.length);
+    }, [people]);
 
     return (
         <div className="relative w-full h-fit flex items-center justify-center">
             <div ref={containerRef} className="absolute flex items-center justify-center w-64  h-66 cursor-none">
                 {/* 🔁 Image stack with auto fade */}
-                {people.map((p, i) => (
+                {safePeople.map((p, i) => (
                     <img
                         key={i}
                         src={p.img}
@@ -67,7 +87,7 @@ const PointerFollower = ({ cursorColor = "#fff", interval = 3000, badgeColor = "
                         className={`absolute w-full h-full object-cover rounded-xl transition-opacity duration-1000 ease-in-out border border-white/10`}
                         style={{
                             transform: `translate(${i * -2}px, ${i * -2}px)`,
-                            zIndex: people.length - i,
+                            zIndex: safePeople.length - i,
                             opacity: activeIndex === i ? 1 : 0,
                         }}
                     />

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

@@ -87,30 +87,37 @@ void main() {
 
 
 export const SmokeBackground = ({
-    color = "#ffffff",
+    color = "#00c950",
     speed = 1,
     direction = "forward",
     scale = 1,
     opacity = 1,
     mouseInteractive = true,
     className = "",
+    maxWidth = 'max-w-4xl',
 }) => {
     const containerRef = useRef(null);
     const mousePos = useRef({ x: 0, y: 0 });
 
     useEffect(() => {
-        if (!containerRef.current) return;
+        const mountNode = containerRef.current;
+        if (!mountNode) return;
 
         const useCustomColor = color ? 1.0 : 0.0;
         const customColorRgb = color ? hexToRgb(color) : [1, 1, 1];
 
         let directionMultiplier = direction === "backward" ? -1.0 : 1.0;
 
+        // cap DPR depending on mount width to avoid heavy pixel loads on small devices
+        const mountWidth = mountNode.clientWidth || window.innerWidth;
+        const dprCap = mountWidth > 1200 ? 1.8 : (mountWidth > 768 ? 1.4 : 1.0);
+        const dpr = Math.min(window.devicePixelRatio || 1, dprCap);
+
         const renderer = new Renderer({
             webgl: 2,
             alpha: true,
             antialias: false,
-            dpr: Math.min(window.devicePixelRatio || 1, 1.8),
+            dpr,
         });
 
         const gl = renderer.gl;
@@ -118,7 +125,7 @@ export const SmokeBackground = ({
         canvas.style.display = "block";
         canvas.style.width = "100%";
         canvas.style.height = "100%";
-        containerRef.current.appendChild(canvas);
+        mountNode.appendChild(canvas);
 
         const geometry = new Triangle(gl);
 
@@ -145,17 +152,17 @@ export const SmokeBackground = ({
         let mouseNeedsUpdate = false;
         const handleMouseMove = (e) => {
             if (!mouseInteractive) return;
-            const rect = containerRef.current.getBoundingClientRect();
+            const rect = mountNode.getBoundingClientRect();
             mousePos.current.x = e.clientX - rect.left;
             mousePos.current.y = rect.height - (e.clientY - rect.top);
             mouseNeedsUpdate = true;
         };
         if (mouseInteractive) {
-            containerRef.current.addEventListener("mousemove", handleMouseMove);
+            mountNode.addEventListener("mousemove", handleMouseMove);
         }
 
         const setSize = () => {
-            const rect = containerRef.current.getBoundingClientRect();
+            const rect = mountNode.getBoundingClientRect();
             const width = Math.max(1, Math.floor(rect.width));
             const height = Math.max(1, Math.floor(rect.height));
             renderer.setSize(width, height);
@@ -167,7 +174,7 @@ export const SmokeBackground = ({
         const ro = new ResizeObserver(() => {
             requestAnimationFrame(setSize);
         });
-        ro.observe(containerRef.current);
+        ro.observe(mountNode);
         setSize();
 
         let raf = 0;
@@ -196,20 +203,21 @@ export const SmokeBackground = ({
         return () => {
             cancelAnimationFrame(raf);
             ro.disconnect();
-            if (mouseInteractive && containerRef.current) {
-                containerRef.current.removeEventListener("mousemove", handleMouseMove);
+            if (mouseInteractive && mountNode) {
+                mountNode.removeEventListener("mousemove", handleMouseMove);
             }
             try {
-                containerRef.current?.removeChild(canvas);
+                mountNode.removeChild(canvas);
             } catch (error) { console.error("Error removing canvas:", error); }
         };
     }, [color, speed, direction, scale, opacity, mouseInteractive, className]);
 
     return (
-        <div
-            ref={containerRef}
-            className={`w-screen lg:h-full h-[80vh] overflow-hidden relative ${className}`}
-        />
+        <div className={`w-full ${className}`}>
+            <div className={`mx-auto w-full ${maxWidth} h-[100vh] lg:h-[90vh] overflow-hidden relative`}>
+                <div ref={containerRef} className="absolute inset-0 w-full h-full" />
+            </div>
+        </div>
     );
 };
 

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

@@ -95,6 +95,8 @@
   --color-template-border: #fdc700;
   --color-template-text: #fdc700;
   --color-scan: #460809;
+  --selection-bg: #460809;
+  --selection-text: #fdc700;
 
   /* Hero Component */
   --right-color-bg: #e5c287;
@@ -246,6 +248,8 @@
   --color-btn-hover-text: #d9f99d;
   --color-stroke-color: #9ae600;
   --color-scan: #9ae600;
+  --selection-bg: #9ae600;
+  --selection-text: #1e2939;
   /* Hero Component */
   --color-stroke-color: #9ae600;
   --color-template: #101828;

package/dist/cli/index.js

@@ -12,20 +12,23 @@ const componentRoot = path.join(__dirname, "..", "ApexUI-Kit", "templates");
 // Component name map
 const componentMap = {
     "avatar": "Avatar",
+    "accordion-marquee": "AccordionMarquee",
     "beam-bar": "BeamBar",
+    "blueprint-background": "BluePrintBackground",
     "carousel": "Carousel",
     "parallax-carousel": "ParallaxCarousel",
     "drag-carousel": "DragCarousel",
     "basic-card": "Cards",
     "edge-glow-from": "EdgeGlowFrom",
     "glare-card": "GlareCard",
-    "glass-card-stack": "GlassCardStack",
+    "card-stack": "CardStack",
     "glass-profile": "GlassProfile",
     "hover-text": "HoverText",
     "hyper-card": "HyperCard",
     "kinetic-threads-background": "KineticThreadsBackground",
     "lens-flare-background": "LensFlareBackground",
     "luminous-particle-ocean": "LuminousParticleOcean",
+    "meteor-card": "MeteorCard",
     "nav-menu": "NavMenu",
     "nav-dropdown": "NavDropDown",
     "orbs-background": "OrbsBackground",