apex-ui-kit 2.0.5 → 2.0.6

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/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/cli/index.js

@@ -12,7 +12,9 @@ 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",
@@ -26,6 +28,7 @@ const componentMap = {
     "kinetic-threads-background": "KineticThreadsBackground",
     "lens-flare-background": "LensFlareBackground",
     "luminous-particle-ocean": "LuminousParticleOcean",
+    "meteor-card": "MeteorCard",
     "nav-menu": "NavMenu",
     "nav-dropdown": "NavDropDown",
     "orbs-background": "OrbsBackground",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "license": "MIT",
   "description": "Apex UI Kit - A React component library for building modern user interfaces",
   "keywords": [