apex-ui-kit 2.0.5

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

@@ -0,0 +1,107 @@
+import React, { useRef, useEffect } from "react";
+import { gsap } from "gsap";
+import { BsTwitterX } from "react-icons/bs";
+// --- SVG Icons (No changes here) --- //
+const GitHubIcon = () => (<svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.09.66-.22.66-.48 0-.24-.01-.87-.01-1.7-2.78.6-3.37-1.34-3.37-1.34-.45-1.15-1.1-1.46-1.1-1.46-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.89 1.52 2.34 1.08 2.91.83.09-.65.35-1.08.63-1.33-2.22-.25-4.56-1.11-4.56-4.95 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02A9.56 9.56 0 0112 6.8c.85.004 1.71.12 2.51.35 1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.85-2.34 4.7-4.57 4.95.36.31.68.92.68 1.85 0 1.33-.01 2.4-.01 2.73 0 .27.16.58.67.48A10.01 10.01 0 0022 12c0-5.52-4.48-10-10-10z" /></svg>);
+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 {
+        avatarUrl, name, username, dob, title, status, socialLinks, onHireClick, onCvClick
+    } = profile || defaultProfile;
+
+    const cardRef = useRef(null);
+
+    useEffect(() => {
+        const card = cardRef.current;
+        if (!card) return;
+        const handleMouseMove = (e) => {
+            const { left, top, width, height } = card.getBoundingClientRect();
+            const x = e.clientX - left; const y = e.clientY - top;
+            const rotateX = gsap.utils.mapRange(0, height, -9, 9, y);
+            const rotateY = gsap.utils.mapRange(0, width, 9, -9, x);
+            gsap.to(card, { duration: 0.7, rotationX: rotateX, rotationY: rotateY, scale: 1.05, ease: "power3.out" });
+        };
+        const handleMouseLeave = () => {
+            gsap.to(card, { duration: 1, rotationX: 0, rotationY: 0, scale: 1, ease: "elastic.out(1, 0.3)" });
+        };
+        gsap.set(card, { transformPerspective: 1000 });
+        card.addEventListener("mousemove", handleMouseMove);
+        card.addEventListener("mouseleave", handleMouseLeave);
+        return () => {
+            card.removeEventListener("mousemove", handleMouseMove);
+            card.removeEventListener("mouseleave", handleMouseLeave);
+        };
+    }, []);
+
+    return (
+        <div
+            ref={cardRef}
+            className="relative w-[300px] h-[440px] bg-[#1D2B3A] rounded-3xl p-6 border border-cyan-400/30 shadow-2xl shadow-cyan-900/40 flex flex-col"
+            style={{ transformStyle: "preserve-3d" }}
+        >
+            <div className="absolute inset-0 bg-gradient-to-br from-[#1D2B3A] to-[#111827] rounded-3xl"></div>
+            <div className="absolute top-0 left-0 w-full h-full" style={{ background: "radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.08), transparent 70%)", transform: "translateZ(20px)" }}></div>
+
+            <div className="relative z-10 flex flex-col items-center justify-between h-full" style={{ transform: "translateZ(50px)" }}>
+                {/* Top Part */}
+                <div className="text-center">
+                    <img src={avatarUrl} alt="Profile" className="w-28 h-28 rounded-full mx-auto mb-3 border-4 border-cyan-400 shadow-lg object-cover" onError={(e) => { e.target.onerror = null; e.target.src = "https://placehold.co/128x128/1D2B3A/A5F3FC?text=ERR"; }} />
+                    <h2 className="text-2xl font-bold text-cyan-300 tracking-wide">{name}</h2>
+                    <div className="flex flex-col items-center mt-1">
+                        <span className="text-xs font-semibold text-slate-300 bg-slate-700 px-2 py-0.5 rounded-full mb-1">@{username}</span>
+                        <span className="text-xs font-medium text-cyan-400 bg-slate-700 px-2 py-0.5 rounded-full">DOB: {dob}</span>
+                    </div>
+                </div>
+
+                {/* Bottom Part */}
+                <div className="w-full text-center">
+                    <p className="text-slate-400 text-lg">{title}</p>
+                    {status && (
+                        <div className="flex items-center justify-center gap-2 mt-2">
+                            <span className="relative flex h-3 w-3"><span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span><span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span></span>
+                            <span className="text-green-300 text-sm">{status}</span>
+                        </div>
+                    )}
+                    <div className="flex justify-center gap-4 my-4">
+                        {socialLinks?.github && (<a href={socialLinks.github} target="_blank" rel="noopener noreferrer" title="GitHub" className="text-cyan-400 hover:text-white transition-colors duration-200"><GitHubIcon /></a>)}
+                        {socialLinks?.linkedin && (<a href={socialLinks.linkedin} target="_blank" rel="noopener noreferrer" title="LinkedIn" className="text-cyan-400 hover:text-white transition-colors duration-200"><LinkedInIcon /></a>)}
+                        {socialLinks?.twitter && (<a href={socialLinks.twitter} target="_blank" rel="noopener noreferrer" title="Twitter" className="text-cyan-400 hover:text-white transition-colors duration-200"><TwitterIcon /></a>)}
+                        {socialLinks?.instagram && (<a href={socialLinks.instagram} target="_blank" rel="noopener noreferrer" title="Instagram" className="text-cyan-400 hover:text-white transition-colors duration-200"><InstagramIcon /></a>)}
+                    </div>
+
+                    {/* Buttons Section */}
+                    <div className="flex justify-center gap-3">
+                        <button onClick={onHireClick} className="w-1/2 bg-cyan-500 text-slate-900 font-bold py-2 px-4 rounded-lg hover:bg-cyan-400 transition-colors duration-300">
+                            Hire Me
+                        </button>
+                        <button onClick={onCvClick} className="w-1/2 bg-slate-700 text-cyan-300 font-bold py-2 px-4 rounded-lg hover:bg-slate-600 transition-colors duration-300">
+                            CV
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ParallaxProfileCard;

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

@@ -0,0 +1,126 @@
+import React, { useRef, useEffect, useState } from "react";
+
+const people = [
+    { 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" },
+    { id: 4, name: "HULK", job: "Scientist", img: "/assets/hulk.png" },
+    { id: 5, name: "Spider-Man", job: "Friendly Neighborhood Spider-Man", img: "/assets/spiderman.png" },
+    { id: 6, name: "Thanos", job: "The Mad Titan", img: "/assets/thanos.png" },
+];
+
+const PointerFollower = ({ cursorColor = "#fff", interval = 3000, badgeColor = "#fff", badgeTextColor = "#212121" }) => {
+    const containerRef = useRef(null);
+    const [pos, setPos] = useState({ x: 0, y: 0 });
+    const [hovered, setHovered] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    // 🛠️ Auto cycle with sync fix
+    useEffect(() => {
+        if (hovered) return;
+
+        const autoInterval = setInterval(() => {
+            setActiveIndex((prev) => (prev + 1) % people.length);
+        }, interval);
+
+        return () => clearInterval(autoInterval);
+    }, [hovered, interval]);
+
+    // 🖱️ Mouse tracking
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+
+        const handleMove = (e) => {
+            const rect = container.getBoundingClientRect();
+            setPos({
+                x: e.clientX - rect.left,
+                y: e.clientY - rect.top,
+            });
+            setHovered(true);
+        };
+
+        const handleLeave = () => {
+            setHovered(false);
+        };
+
+        container.addEventListener("pointermove", handleMove);
+        container.addEventListener("pointerleave", handleLeave);
+
+        return () => {
+            container.removeEventListener("pointermove", handleMove);
+            container.removeEventListener("pointerleave", handleLeave);
+        };
+    }, []);
+
+    const person = people[activeIndex]; // ✅ SYNCED HERE
+
+    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) => (
+                    <img
+                        key={i}
+                        src={p.img}
+                        alt={p.name}
+                        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,
+                            opacity: activeIndex === i ? 1 : 0,
+                        }}
+                    />
+                ))}
+                {/* 🖱️ Custom SVG Cursor */}
+                {hovered && (
+                    <>
+                        <div
+                            className="absolute z-50"
+                            style={{
+                                left: pos.x,
+                                top: pos.y,
+                                transform: "translate(-50%, -50%)",
+                                pointerEvents: "none",
+                            }}
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="28"
+                                height="28"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    fill={cursorColor}
+                                    stroke="#000"
+                                    strokeWidth="1.8"
+                                    d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"
+                                />
+                            </svg>
+                        </div>
+
+                        {/* 🎯 Job Passion Label */}
+                        <div
+                            className="absolute z-40"
+                            style={{
+                                left: pos.x + 24,
+                                top: pos.y + 36,
+                                transform: "translate(-50%, -50%)",
+                                pointerEvents: "none",
+                                color: badgeTextColor,
+                            }}
+                        >
+                            <div className="px-4 py-3 rounded-full text-[11px] overflow-hidden font-semibold shadow-[0_2px_8px_rgba(0,0,0,0.25)] border border-black/10" style={{ backgroundColor: badgeColor }}>
+                                <span className="text-[12px] font-medium tracking-wide whitespace-nowrap drop-shadow" style={{ color: badgeTextColor }}>
+                                    {person.name} — {person.job}
+                                </span>
+                            </div>
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default PointerFollower;

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

@@ -0,0 +1,109 @@
+import React, { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+function createRainEffectWithCollision(container, dropCount = 0, dropColor, collisionColor, dropGradient, collisionGradient) {
+    if (!container) return;
+    for (let i = 0; i < dropCount; i++) {
+        const drop = document.createElement('div');
+        drop.className = 'rain-drop pointer-events-none';
+        drop.style.position = 'absolute';
+        drop.style.left = Math.random() * 98 + '%';
+        drop.style.top = Math.random() * -100 - 20 + 'px';
+        drop.style.width = '2px';
+        drop.style.height = Math.random() * 32 + 16 + 'px';
+        drop.style.background = dropGradient ? dropGradient : `linear-gradient(to bottom, ${dropColor} 60%, ${collisionColor} 100%)`;
+        drop.style.opacity = Math.random() * 0.3 + 0.3;
+        drop.style.borderRadius = '1px';
+        drop.style.zIndex = 1;
+        container.appendChild(drop);
+        animateRainDropWithCollision(drop, container, collisionColor, dropGradient, collisionGradient, dropColor);
+    }
+}
+
+function animateRainDropWithCollision(drop, container, collisionColor, dropGradient, collisionGradient, dropColor) {
+    const duration = Math.random() * 1.2 + 0.8;
+    gsap.fromTo(drop, {
+        y: 0,
+    }, {
+        y: container.offsetHeight + 40,
+
+        duration,
+        ease: 'power1.in',
+        onUpdate: function () {
+            const rect = drop.getBoundingClientRect();
+            const parentRect = container.getBoundingClientRect();
+            if (!drop._collided && rect.bottom >= parentRect.bottom - 8) {
+                drop._collided = true;
+                drop.style.background = collisionGradient ? collisionGradient : collisionColor;
+                const relX = rect.left - parentRect.left + rect.width / 2;
+                createRainCollisionExplosion(relX, container.offsetHeight - 8, container, collisionColor, collisionGradient);
+            }
+        },
+        onStart: function () {
+            drop._collided = false;
+            drop.style.background = dropGradient ? dropGradient : `linear-gradient(to bottom, ${dropColor} 60%, ${collisionColor} 100%)`;
+        },
+        onComplete: () => {
+            drop.style.left = Math.random() * 98 + '%';
+            drop.style.height = Math.random() * 32 + 16 + 'px';
+            drop.style.opacity = Math.random() * 0.3 + 0.3;
+            drop.style.background = dropGradient ? dropGradient : `linear-gradient(to bottom, ${dropColor} 60%, ${collisionColor} 100%)`;
+            gsap.set(drop, { y: 0, opacity: drop.style.opacity });
+            animateRainDropWithCollision(drop, container, collisionColor, dropGradient, collisionGradient, dropColor);
+        }
+    });
+}
+
+function createRainCollisionExplosion(x, y, container, collisionColor = '#e0e7ff', collisionGradient) {
+    const explosion = document.createElement("div");
+    explosion.className = "absolute z-50 h-2 w-2 pointer-events-none";
+    explosion.style.left = `${x}px`;
+    explosion.style.top = `${y}px`;
+    explosion.style.transform = "translate(-50%, 0)";
+    const blurBar = document.createElement("div");
+    blurBar.style.position = "absolute";
+    blurBar.style.left = "-0.7rem";
+    blurBar.style.top = "0";
+    blurBar.style.width = "1.4rem";
+    blurBar.style.height = "0.18rem";
+    blurBar.style.borderRadius = "1rem";
+    blurBar.style.background = collisionGradient ? collisionGradient : `${collisionColor}`;
+    blurBar.style.filter = "blur(2px)";
+    explosion.appendChild(blurBar);
+    for (let i = 0; i < 6; i++) {
+        const span = document.createElement("span");
+        span.style.position = "absolute";
+        span.style.height = "0.18rem";
+        span.style.width = "0.18rem";
+        span.style.borderRadius = "50%";
+        span.style.background = collisionGradient ? collisionGradient : `${collisionColor}`;
+        explosion.appendChild(span);
+        const dx = Math.floor(Math.random() * 16 - 8);
+        const dy = Math.floor(Math.random() * -10 - 2);
+        gsap.fromTo(span, { x: 0, y: 0 }, {
+            x: dx,
+            y: dy,
+            opacity: 0,
+            duration: Math.random() * 0.5 + 0.2,
+            ease: "power2.out",
+            onComplete: () => { span.remove(); }
+        });
+    }
+    gsap.fromTo(blurBar, { opacity: 0 }, { opacity: 1, duration: 0.12, yoyo: true, repeat: 1, onComplete: () => blurBar.remove() });
+    setTimeout(() => explosion.remove(), 500);
+    container.appendChild(explosion);
+}
+
+const RainBackground = ({ dropCount = 32, dropColor = '#fff', collisionColor = '#e0e7ff', dropGradient, collisionGradient }) => {
+    const rainRef = useRef(null);
+    useEffect(() => {
+        const container = rainRef.current;
+        if (!container) return;
+        createRainEffectWithCollision(container, dropCount, dropColor, collisionColor, dropGradient, collisionGradient);
+        return () => { container.innerHTML = ''; };
+    }, [dropCount, dropColor, collisionColor, dropGradient, collisionGradient]);
+    return (
+        <div ref={rainRef} id="beams-collision-container" className="absolute inset-0 w-full h-full pointer-events-none z-0" style={{ overflow: 'hidden' }} />
+    );
+};
+
+export default RainBackground;

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

@@ -0,0 +1,160 @@
+import React, { useLayoutEffect, useRef, useState, useEffect } from 'react';
+import { gsap } from 'gsap';
+
+// --- RippleBackground Component (Optimized for Mobile) ---
+const RippleBackground = ({
+    children,
+    className,
+    containerClassName,
+    colors,
+    desktopGridSize = 20, // Grid size for desktop
+    mobileGridSize = 10,  // Grid size for mobile
+}) => {
+    const containerRef = useRef(null);
+    const shapesRef = useRef([]);
+    const [gridSize, setGridSize] = useState(desktopGridSize);
+    const [isMobile, setIsMobile] = useState(false);
+
+    // Check screen size to determine if it's mobile
+    useEffect(() => {
+        const checkScreenSize = () => {
+            const isMobileDevice = window.innerWidth < 768;
+            setIsMobile(isMobileDevice);
+            setGridSize(isMobileDevice ? mobileGridSize : desktopGridSize);
+        };
+
+        checkScreenSize();
+        window.addEventListener('resize', checkScreenSize);
+        return () => window.removeEventListener('resize', checkScreenSize);
+    }, [mobileGridSize, desktopGridSize]);
+
+
+    const shapeColors = colors ?? [
+        "#10b981", // emerald-500
+        "#06b6d4", // cyan-500
+        "#6366f1", // indigo-500
+        "#a855f7", // purple-500
+    ];
+
+    // Handles the ripple effect on click
+    const handleClick = (e) => {
+        const { clientX, clientY } = e;
+        const shapes = shapesRef.current;
+
+        shapes.forEach(shape => {
+            if (!shape) return;
+            const rect = shape.getBoundingClientRect();
+            const dx = rect.left + rect.width / 2 - clientX;
+            const dy = rect.top + rect.height / 2 - clientY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            const delay = distance * 0.005; // Ripple delay based on distance
+
+            gsap.timeline({ defaults: { overwrite: 'auto' } })
+                .to(shape, {
+                    scale: 2.5,
+                    opacity: 1,
+                    duration: 0.3,
+                    ease: "power2.out",
+                    delay: delay
+                })
+                .to(shape, {
+                    scale: 1,
+                    opacity: 0.5,
+                    duration: 0.5,
+                    ease: "power2.in"
+                });
+        });
+    };
+
+    // Handles micro-interaction on hover
+    const handleMouseEnter = (shape) => {
+        gsap.to(shape, {
+            scale: 2,
+            opacity: 1,
+            duration: 0.3,
+            ease: 'power2.out',
+            overwrite: 'auto'
+        });
+    };
+
+    const handleMouseLeave = (shape) => {
+        // Returns the shape to its normal blinking state
+        gsap.to(shape, {
+            scale: 1,
+            opacity: 0.3,
+            duration: 2,
+            ease: 'power2.out',
+            overwrite: 'auto'
+        });
+    };
+
+    // Continuous blinking animation
+    useLayoutEffect(() => {
+        const shapes = shapesRef.current.filter(s => s);
+        if (shapes.length === 0) return;
+
+        // On mobile, we disable the heavy continuous animation for better performance
+        if (isMobile) {
+            // Set a default static state for mobile
+            gsap.set(shapes, { scale: 1, opacity: 0.3 });
+            return;
+        }
+
+        const masterTl = gsap.timeline({ repeat: -1, yoyo: true });
+
+        shapes.forEach(shape => {
+            masterTl.to(shape, {
+                scale: () => Math.random() * 1.5 + 0.5,
+                opacity: () => Math.random() * 0.7 + 0.3,
+                duration: 2,
+                ease: "sine.inOut",
+            }, Math.random() * 2); // Random start time for each shape
+        });
+
+        return () => {
+            masterTl.kill(); // Cleanup the timeline
+        };
+    }, [gridSize, isMobile]); // Rerun effect if grid size or mobile status changes
+
+    return (
+        <div
+            className={`relative h-[60vh] lg:h-[80vh] w-screen flex flex-col items-center justify-center overflow-hidden ${containerClassName}`}
+            onClick={handleClick} // Click event listener on the main container
+        >
+            {/* Shapes Grid Container */}
+            <div
+                ref={containerRef}
+                className="absolute inset-0 z-0 w-full h-full grid"
+                style={{
+                    gridTemplateColumns: `repeat(${gridSize}, 1fr)`,
+                    gridTemplateRows: `repeat(${gridSize}, 1fr)`,
+                }}
+            >
+                {Array.from({ length: gridSize * gridSize }).map((_, index) => (
+                    <div
+                        key={index}
+                        className="w-full h-full flex items-center justify-center"
+                        onMouseEnter={() => handleMouseEnter(shapesRef.current[index])}
+                        onMouseLeave={() => handleMouseLeave(shapesRef.current[index])}
+                    >
+                        <div
+                            ref={el => shapesRef.current[index] = el}
+                            className="w-2 h-2 rounded-full pointer-events-none"
+                            style={{
+                                backgroundColor: shapeColors[index % shapeColors.length],
+                                // Performance optimization for animations
+                                willChange: 'transform, opacity',
+                            }}
+                        />
+                    </div>
+                ))}
+            </div>
+
+            <div className={`relative z-10 ${className}`}>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export default RippleBackground;

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

@@ -0,0 +1,174 @@
+/* eslint-disable no-unused-vars */
+import { useRef, useLayoutEffect, useState } from "react";
+import { motion, useTransform, useMotionValue, useAnimationFrame, useScroll, useVelocity, useSpring } from "framer-motion";
+
+function useElementWidth(ref) {
+    const [width, setWidth] = useState(0);
+
+    useLayoutEffect(() => {
+        function updateWidth() {
+            if (ref.current) {
+                setWidth(ref.current.offsetWidth);
+            }
+        }
+        updateWidth();
+        window.addEventListener("resize", updateWidth);
+        return () => window.removeEventListener("resize", updateWidth);
+    }, [ref]);
+
+    return width;
+}
+
+// Utility for seamless wrap
+function wrapValue(min, max, v) {
+    const range = max - min;
+    const mod = (((v - min) % range) + range) % range;
+    return mod + min;
+}
+
+// Main Marquee Component
+export function ScrollMarquee({
+    items = ['ApexUI', 'apexui'],
+    speed = 50,
+    direction,
+    className = "apexui-marquee-text",
+    repeat = 10,
+    containerClass = "apexui-marquee-container",
+    scrollerClass = "apexui-marquee-track",
+    containerStyle,
+    scrollerStyle,
+    textStroke = false,
+    textStrokeColor = '#C27AFF',
+    textFillColor = '#1E2637',
+    textColor = '#fff',
+    scrollRef,
+}) {
+    // Single scrolling row
+    function MarqueeRow({ children, baseSpeed = speed, direction = "left" }) {
+        const baseX = useMotionValue(0);
+        const copyRef = useRef(null);
+        const copyWidth = useElementWidth(copyRef);
+
+        // Scroll tracking (window or custom container)
+        const scrollOptions = scrollRef ? { container: scrollRef } : {};
+        const { scrollY } = useScroll(scrollOptions);
+        const scrollVelocity = useVelocity(scrollY);
+        const smoothVelocity = useSpring(scrollVelocity, { damping: 50, stiffness: 400 });
+        const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 2], { clamp: false });
+
+        const x = useTransform(baseX, (v) => {
+            if (copyWidth === 0) return "0px";
+            return `${wrapValue(-copyWidth, 0, v)}px`;
+        });
+
+        // Unique scroll-based animation: gradient appears on scroll, white by default
+        // Animate gradient opacity and hue-rotate based on velocity
+        const hue = useTransform(velocityFactor, v => Math.max(-40, Math.min(40, v * 30)));
+        const gradientOpacity = useTransform(velocityFactor, v => Math.min(1, Math.abs(v) * 0.7));
+        const filter = useTransform(hue, h => `hue-rotate(${h}deg)`);
+
+        // Alternate direction, flip on scroll
+        const directionFactor = useRef(direction === "left" ? -1 : 1);
+        const lastVelocity = useRef(0);
+        useAnimationFrame((t, delta) => {
+            const v = velocityFactor.get();
+            if (v !== 0 && Math.sign(v) !== Math.sign(lastVelocity.current)) {
+                directionFactor.current *= -1;
+            }
+            lastVelocity.current = v;
+            let moveBy = directionFactor.current * (baseSpeed + Math.abs(v * 100)) * (delta / 1000);
+            baseX.set(baseX.get() + moveBy);
+        });
+
+        // Modern font and gradient color, with color/stroke props
+        // Use Google font 'Barlow Condensed', fallback to 'Montserrat', then sans-serif
+        const spans = [];
+        for (let i = 0; i < repeat; i++) {
+            spans.push(
+                <span
+                    className={`flex-shrink-0 ${className} tracking-tighter font-semibold custom-marquee-span`}
+                    key={i}
+                    ref={i === 0 ? copyRef : null}
+                    style={{
+                        fontFamily: "helvetica, Arial, sans-serif",
+                        cursor: "default",
+                        fontOpticalSizing: 'auto',
+                        color: !textStroke ? textColor : '#fff',
+                        WebkitTextStroke: undefined,
+                        WebkitTextFillColor: undefined,
+                        fontSize: '6.8rem',
+                        transition: 'all 0.5s cubic-bezier(.4,2,.6,1)',
+                        position: 'relative',
+                        display: 'inline-block',
+                    }}
+                >
+                    <span style={{ position: 'relative', zIndex: 1 }}>{children}</span>
+                    <motion.span
+                        className={"marquee-gradient-overlay absolute left-0 top-0 w-full h-full bg-gradient-to-r from-fuchsia-400 via-cyan-400 to-lime-400 bg-clip-text text-transparent drop-shadow-lg"}
+                        style={{
+                            filter,
+                            opacity: gradientOpacity,
+                            WebkitTextFillColor: 'transparent',
+                            mixBlendMode: 'normal',
+                            zIndex: 2,
+                        }}
+                        aria-hidden="true"
+                    >
+                        {children}
+                    </motion.span>
+                </span>
+            );
+        }
+
+        // Add hover effect via inline style and a custom class
+        // The hover will show a stroke and fill color
+        // Add a <style> tag for the custom class
+        // This is safe in component scope in React
+        return (
+            <div className={`${containerClass} relative overflow-hidden`} style={containerStyle}>
+                <style>{`
+                    .custom-marquee-span {
+                        transition: all 0.5s cubic-bezier(.4,2,.6,1);
+                    }
+                    .custom-marquee-span:hover {
+                        -webkit-text-stroke: 2px ${textStrokeColor};
+                        -webkit-text-fill-color: ${textFillColor};
+                        color: ${textFillColor};
+                        filter: drop-shadow(0 2px 12px ${textStrokeColor}55);
+                        transition: all 0.5s cubic-bezier(.4,2,.6,1);
+                    }
+                    .custom-marquee-span:hover .marquee-gradient-overlay {
+                        opacity: 0 !important;
+                    }
+                `}</style>
+                <motion.div
+                    className={`${scrollerClass} flex h-28 whitespace-nowrap text-center font-barlow text-5xl md:text-[5.5rem] tracking-[0.08em] md:leading-[6rem]`}
+                    style={{ x, ...scrollerStyle }}
+                >
+                    {spans}
+                </motion.div>
+            </div>
+        );
+    }
+
+    // Render all marquee rows
+    return (
+        <section>
+            {items.map((item, idx) => {
+                // Alternate direction: even left, odd right
+                const rowDirection = direction ? direction : (idx % 2 === 0 ? "left" : "right");
+                return (
+                    <MarqueeRow
+                        key={idx}
+                        baseSpeed={speed}
+                        direction={rowDirection}
+                    >
+                        {item}&nbsp;
+                    </MarqueeRow>
+                );
+            })}
+        </section>
+    );
+}
+
+export default ScrollMarquee;