apex-ui-kit 2.0.5

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

@@ -0,0 +1,371 @@
+import React, { useRef } from "react";
+import gsap from "gsap";
+
+const HoverText = ({
+    text = "ApexUI",
+    fontSize = "2.5rem",
+    className = "",
+    effect, // if not passed, use 'defaultReveal'
+    effectColor = "#C27AFF"
+}) => {
+    const charsRef = useRef([]);
+    const containerRef = useRef(null);
+
+    // Default animated reveal
+    function handleDefaultEnter(i) {
+        if (effect && effect !== "defaultReveal") return;
+        const el = charsRef.current[i];
+        if (!el) return;
+        gsap.to(el, {
+            scale: 1.4,
+            rotate: gsap.utils.random(-10, 10),
+            color: effectColor,
+            filter: `drop-shadow(0 4px 32px ${effectColor})`,
+            duration: 0.32,
+            ease: "elastic.out(1,0.5)",
+        });
+    }
+    function handleDefaultLeave(i) {
+        if (effect && effect !== "defaultReveal") return;
+        const el = charsRef.current[i];
+        if (!el) return;
+        gsap.to(el, {
+            scale: 1,
+            rotate: 0,
+            color: "#fff",
+            filter: `drop-shadow(0 0px 0px ${effectColor})`,
+            duration: 0.32,
+            ease: "expo.inOut",
+        });
+    }
+
+    // Party effect
+    function handlePartyEnter() {
+        if (effect !== "party") return;
+        charsRef.current.forEach((el, i) => {
+            if (!el) return;
+            gsap.to(el, {
+                scale: 1.25,
+                rotate: (i % 2 === 0 ? 1 : -1) * (18 + i * 4),
+                color: effectColor,
+                filter: `drop-shadow(0 4px 32px ${effectColor})`,
+                duration: 0.38,
+                ease: "elastic.out(1,0.5)",
+            });
+        });
+    }
+    function handlePartyLeave() {
+        if (effect !== "party") return;
+        charsRef.current.forEach((el) => {
+            if (!el) return;
+            gsap.to(el, {
+                scale: 1,
+                rotate: 0,
+                color: "#fff",
+                filter: `drop-shadow(0 0px 0px ${effectColor})`,
+                duration: 0.38,
+                ease: "expo.inOut",
+            });
+        });
+    }
+
+    // Reset all letters on mount or color change
+    React.useEffect(() => {
+        charsRef.current.forEach((el) => {
+            if (el) {
+                gsap.set(el, {
+                    scale: 1,
+                    rotate: 0,
+                    x: 0,
+                    y: 0,
+                    filter: `drop-shadow(0 0px 0px ${effectColor})`,
+                    color: "#fff",
+                });
+            }
+        });
+    }, [text, effectColor]);
+
+    // Magnetic effect
+    const handleMouseMove = (e) => {
+        if (effect !== "magnetic") return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        let minDist = Infinity;
+        let minIdx = -1;
+        charsRef.current.forEach((el, i) => {
+            if (!el) return;
+            const elRect = el.getBoundingClientRect();
+            const elCenterX = elRect.left - rect.left + elRect.width / 2;
+            const elCenterY = elRect.top - rect.top + elRect.height / 2;
+            const dx = (mouseX - elCenterX) / rect.width;
+            const dy = (mouseY - elCenterY) / rect.height;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist < minDist) {
+                minDist = dist;
+                minIdx = i;
+            }
+        });
+        // Animate all letters
+        charsRef.current.forEach((el, i) => {
+            if (!el) return;
+            const elRect = el.getBoundingClientRect();
+            const elCenterX = elRect.left - rect.left + elRect.width / 2;
+            const elCenterY = elRect.top - rect.top + elRect.height / 2;
+            const dx = (mouseX - elCenterX) / rect.width;
+            const dy = (mouseY - elCenterY) / rect.height;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            const maxDist = 0.35;
+            const mag = Math.max(0, 1 - dist / maxDist);
+            const isFocus = i === minIdx;
+            gsap.to(el, {
+                x: dx * 18 * mag,
+                y: dy * 18 * mag,
+                scale: isFocus ? 1.22 : 1 + 0.12 * mag,
+                rotate: dx * 10 * mag,
+                filter: isFocus
+                    ? `drop-shadow(0 4px 32px ${effectColor})`
+                    : `drop-shadow(0 2px 16px ${effectColor}44)`,
+                color: isFocus ? effectColor : "#fff",
+                zIndex: isFocus ? 10 : 2,
+                duration: 0.35,
+                ease: "expo.out",
+            });
+        });
+    };
+
+    // Rubber effect
+    function handleRubberEnter(i) {
+        if (effect !== "rubber") return;
+        const el = charsRef.current[i];
+        if (!el) return;
+        gsap.to(el, {
+            scaleX: 1.5,
+            scaleY: 0.7,
+            color: effectColor,
+            filter: `drop-shadow(0 4px 32px ${effectColor})`,
+            duration: 0.22,
+            ease: "expo.out",
+            onComplete: () => {
+                gsap.to(el, {
+                    scaleX: 0.85,
+                    scaleY: 1.18,
+                    duration: 0.18,
+                    ease: "expo.inOut",
+                    onComplete: () => {
+                        gsap.to(el, {
+                            scaleX: 1,
+                            scaleY: 1,
+                            color: "#fff",
+                            filter: `drop-shadow(0 0px 0px ${effectColor})`,
+                            duration: 0.18,
+                            ease: "expo.inOut",
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    // Jump effect
+    function handleJumpEnter(i) {
+        if (effect !== "jump") return;
+        for (let j = -1; j <= 1; j++) {
+            const idx = i + j;
+            const el = charsRef.current[idx];
+            if (!el) continue;
+            if (j === 0) {
+                gsap.to(el, {
+                    y: -28,
+                    color: effectColor,
+                    filter: `drop-shadow(0 4px 32px ${effectColor})`,
+                    duration: 0.32,
+                    ease: "expo.out",
+                });
+            } else {
+                gsap.to(el, {
+                    x: j * 8,
+                    rotate: j * 8,
+                    duration: 0.22,
+                    ease: "expo.out",
+                });
+            }
+        }
+    }
+    function handleJumpLeave(i) {
+        if (effect !== "jump") return;
+        for (let j = -1; j <= 1; j++) {
+            const idx = i + j;
+            const el = charsRef.current[idx];
+            if (!el) continue;
+            gsap.to(el, {
+                x: 0,
+                y: 0,
+                scale: 1,
+                rotate: 0,
+                color: "#fff",
+                filter: `drop-shadow(0 0px 0px ${effectColor})`,
+                duration: 0.32,
+                ease: "expo.inOut",
+            });
+        }
+    }
+
+    // Rotate effect
+    function handleRotateEnter(i) {
+        if (effect !== "rotate") return;
+        for (let j = -1; j <= 1; j++) {
+            const idx = i + j;
+            const el = charsRef.current[idx];
+            if (!el) continue;
+            if (j === 0) {
+                gsap.to(el, {
+                    rotate: 24,
+                    scale: 1.18,
+                    color: effectColor,
+                    filter: `drop-shadow(0 4px 32px ${effectColor})`,
+                    duration: 0.32,
+                    ease: "expo.out",
+                });
+            } else {
+                gsap.to(el, {
+                    rotate: j * 12,
+                    duration: 0.22,
+                    ease: "expo.out",
+                });
+            }
+        }
+    }
+    function handleRotateLeave(i) {
+        if (effect !== "rotate") return;
+        for (let j = -1; j <= 1; j++) {
+            const idx = i + j;
+            const el = charsRef.current[idx];
+            if (!el) continue;
+            gsap.to(el, {
+                scale: 1,
+                rotate: 0,
+                color: "#fff",
+                filter: `drop-shadow(0 0px 0px ${effectColor})`,
+                duration: 0.32,
+                ease: "expo.inOut",
+            });
+        }
+    }
+
+    // Wave effect
+    function handleCharEnter(i) {
+        if (effect !== "wave") return;
+        for (let j = -2; j <= 2; j++) {
+            const idx = i + j;
+            const el = charsRef.current[idx];
+            if (!el) continue;
+            gsap.to(el, {
+                y: -18 + Math.abs(j) * 8,
+                scale: 1.12 - Math.abs(j) * 0.08,
+                color: effectColor,
+                filter: `drop-shadow(0 4px 32px ${effectColor})`,
+                duration: 0.38 + Math.abs(j) * 0.08,
+                ease: "elastic.out(1,0.5)",
+            });
+        }
+    }
+    function handleCharLeave(i) {
+        if (effect !== "wave") return;
+        for (let j = -2; j <= 2; j++) {
+            const idx = i + j;
+            const el = charsRef.current[idx];
+            if (!el) continue;
+            gsap.to(el, {
+                y: 0,
+                scale: 1,
+                color: "#fff",
+                filter: `drop-shadow(0 0px 0px ${effectColor})`,
+                duration: 0.38 + Math.abs(j) * 0.08,
+                ease: "expo.inOut",
+            });
+        }
+    }
+
+    // Reset on mouse leave
+    const handleMouseLeave = () => {
+        if (effect === "magnetic") {
+            charsRef.current.forEach((el) => {
+                if (el) {
+                    gsap.to(el, {
+                        x: 0,
+                        y: 0,
+                        scale: 1,
+                        rotate: 0,
+                        color: "#fff",
+                        filter: `drop-shadow(0 0px 0px ${effectColor})`,
+                        duration: 0.6,
+                        ease: "expo.inOut",
+                    });
+                }
+            });
+        } else if (effect === "flip") {
+            charsRef.current.forEach((el) => {
+                if (el) {
+                    gsap.to(el, {
+                        rotateY: 0,
+                        color: "#fff",
+                        filter: `drop-shadow(0 0px 0px ${effectColor})`,
+                        duration: 0.6,
+                        ease: "expo.inOut",
+                    });
+                }
+            });
+        }
+    };
+
+    return (
+        <div
+            ref={containerRef}
+            className={`relative inline-flex items-center select-none cursor-pointer ${className}`}
+            style={{ fontSize, fontWeight: 900, letterSpacing: "0.08em", textTransform: "uppercase", background: "none", userSelect: "none" }}
+            onMouseMove={effect === "magnetic" ? handleMouseMove : undefined}
+            onMouseLeave={effect === "party" ? handlePartyLeave : handleMouseLeave}
+            onMouseEnter={effect === "party" ? handlePartyEnter : undefined}
+        >
+            {text.split("").map((char, i) => (
+                <span
+                    key={i}
+                    ref={el => charsRef.current[i] = el}
+                    onMouseEnter={
+                        !effect || effect === "defaultReveal" ? () => handleDefaultEnter(i)
+                            : effect === "wave" ? () => handleCharEnter(i)
+                                : effect === "rubber" ? () => handleRubberEnter(i)
+                                    : effect === "jump" ? () => handleJumpEnter(i)
+                                        : effect === "rotate" ? () => handleRotateEnter(i)
+                                            : undefined
+                    }
+                    onMouseLeave={
+                        !effect || effect === "defaultReveal" ? () => handleDefaultLeave(i)
+                            : effect === "wave" ? () => handleCharLeave(i)
+                                : effect === "rubber" ? () => handleRubberEnter(i)
+                                    : effect === "jump" ? () => handleJumpLeave(i)
+                                        : effect === "rotate" ? () => handleRotateLeave(i)
+                                            : undefined
+                    }
+                    style={{
+                        display: "inline-block",
+                        marginRight: char === " " ? "0.18em" : 0,
+                        padding: "0 0.04em",
+                        willChange: "transform, color, filter, opacity",
+                        borderRadius: "0.18em",
+                        position: "relative",
+                        zIndex: 2,
+                        color: "#fff",
+                        background: "none",
+                        transition: "filter 0.3s, color 0.3s, background 0.3s, opacity 0.3s",
+                    }}
+                >
+                    {char === " " ? "\u00A0" : char}
+                </span>
+            ))}
+        </div>
+    );
+};
+
+export default HoverText;

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

@@ -0,0 +1,183 @@
+import React, { useRef, useEffect, useState } from "react";
+import { gsap } from "gsap";
+import {
+    faCube,
+    faChevronRight, // Changed icon for a better look with the new button
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const HyperCard = ({
+    // Content props remain unchanged
+    text = "Introducing Hyper Card",
+    LastText = "Effect",
+    LastTextColor = "#9AE600", // Green color from your original code
+    SubText = "Fully animated lightning effect card with customizable props, built with Apex UI.",
+    title = "Apex UI Hyper Card",
+    description = "Experience futuristic animations with customizable props like glow, beam, star count, and hover interactions.",
+    buttonText = "Get Started",
+
+    // Animation props remain unchanged
+    starColor = "#9AE600", // Green stars
+    starCount = 250,
+    glow = true,
+    baseSpeed = 0.5,
+    warpSpeed = 8.5,
+    circlePosition = "bottom",
+}) => {
+    const canvasRef = useRef(null);
+    const contentRef = useRef(null);
+    const [hovered, setHovered] = useState(false);
+    const stars = useRef([]);
+    const speedRef = useRef({ value: baseSpeed });
+
+    // 🎇 Particle logic remains exactly the same
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext("2d");
+        let animationFrame;
+        let w, h;
+
+        const init = () => {
+            w = canvas.width = canvas.offsetWidth;
+            h = canvas.height = canvas.offsetHeight;
+            stars.current = Array.from({ length: starCount }, () => {
+                const z = Math.random() * w;
+                return {
+                    x: Math.random() * w, y: Math.random() * h,
+                    z, baseZ: z, brightness: Math.random() * 0.5 + 0.5,
+                };
+            });
+        };
+
+        const draw = () => {
+            // Updated to draw on a transparent background
+            if (!ctx) return;
+            ctx.clearRect(0, 0, w, h);
+            ctx.fillStyle = starColor;
+
+            stars.current.forEach((star) => {
+                star.z -= speedRef.current.value;
+                if (star.z <= 1) star.z = star.baseZ;
+                const sx = (star.x - w / 2) * (w / star.z) + w / 2;
+                const sy = (star.y - h / 2) * (h / star.z) + h / 2;
+                const size = (1 - star.z / w) * 2;
+                ctx.beginPath();
+                ctx.globalAlpha = star.brightness;
+                if (speedRef.current.value > baseSpeed + 0.3) {
+                    const tailLength = speedRef.current.value * 3;
+                    const dx = sx - w / 2, dy = sy - h / 2;
+                    const mag = Math.sqrt(dx * dx + dy * dy) || 1;
+                    ctx.moveTo(sx, sy);
+                    ctx.lineTo(sx + (dx / mag) * tailLength, sy + (dy / mag) * tailLength);
+                    ctx.strokeStyle = starColor;
+                    ctx.lineWidth = 1;
+                    ctx.stroke();
+                } else {
+                    ctx.arc(sx, sy, size > 0 ? size : 0.1, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+                ctx.globalAlpha = 1;
+            });
+
+            animationFrame = requestAnimationFrame(draw);
+        };
+
+        init();
+        draw();
+        window.addEventListener("resize", init);
+        return () => { cancelAnimationFrame(animationFrame); window.removeEventListener("resize", init); };
+    }, [starColor, starCount, baseSpeed]);
+
+    // GSAP animations for speed and jiggle remain the same
+    useEffect(() => {
+        gsap.to(speedRef.current, { value: hovered ? warpSpeed : baseSpeed, duration: 1.5, ease: "power4.inOut" });
+    }, [hovered, warpSpeed, baseSpeed]);
+
+    useEffect(() => {
+        const el = contentRef.current;
+        if (hovered) {
+            gsap.to(el, { scale: 0.95, duration: 0.5, ease: "power1.out" });
+            gsap.to(el, { x: "+=1", y: "-=1", duration: 0.05, repeat: -1, yoyo: true, ease: "sine.inOut" });
+        } else {
+            gsap.killTweensOf(el);
+            gsap.to(el, { x: 0, y: 0, scale: 1, duration: 0.4, ease: "power2.out" });
+        }
+    }, [hovered]);
+
+    return (
+        <div
+            className="w-full max-w-xs mx-auto rounded-2xl overflow-hidden text-white 
+                    border border-slate-700 bg-slate-900 shadow-2xl shadow-black/50"
+            style={{
+                backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px)',
+                backgroundSize: '2rem 2rem'
+            }}
+        >
+            {/* Top animated HyperCard */}
+            <div
+                className="relative w-full h-50 overflow-hidden group cursor-pointer"
+                onMouseEnter={() => setHovered(true)}
+                onMouseLeave={() => setHovered(false)}
+            >
+                <canvas ref={canvasRef} className="absolute inset-0 w-full h-full z-0" />
+
+                {/* Glow effect from your original code */}
+                {glow && (
+                    <div
+                        className="absolute inset-0 w-full h-full z-10 pointer-events-none"
+                        style={{
+                            mixBlendMode: "soft-light",
+                            opacity: 0.8,
+                            background: `radial-gradient(circle at ${circlePosition}, ${starColor} 0%, transparent 70%)`,
+                        }}
+                    />
+                )}
+
+                {/* Glowing separator line */}
+                <div className="absolute bottom-0 w-full h-[2px] bg-purple-500/50 blur-sm"></div>
+
+                <div ref={contentRef} className="relative z-20 flex flex-col items-center justify-center w-full h-full px-4 py-2">
+                    <h2 className="text-lg sm:text-xl font-normal text-center text-white">
+                        {text}{" "}
+                        {/* Fixed color issue by using inline style */}
+                        <span className="font-bold ml-1" style={{ color: LastTextColor }}>
+                            {LastText}
+                        </span>
+                    </h2>
+                    <p className="text-sm text-gray-300 text-center max-w-sm mt-1">{SubText}</p>
+                </div>
+            </div>
+
+            {/* Bottom content section */}
+            <div className="px-6 pt-5 pb-6 w-full text-left flex flex-col items-start">
+                <div className="flex items-center gap-3 mb-2">
+                    <FontAwesomeIcon icon={faCube} style={{ color: starColor }} className="text-2xl" />
+                    <h3 className="text-2xl font-extrabold text-white tracking-tight">{title}</h3>
+                </div>
+                <p className="text-gray-400 text-base mb-5 max-w-xs leading-relaxed">{description}</p>
+
+                {/* --- NEW BUTTON WITH ANIMATION --- */}
+                <button
+                    className="group relative flex items-center gap-2 px-6 py-2.5 
+                               border-2 border-[#9AE600] rounded-lg 
+                               font-semibold text-white overflow-hidden transition-all duration-300"
+                >
+                    {/* Fill-up background effect */}
+                    <span
+                        className="absolute inset-0 h-full w-0  bg-[#4c6d0a] 
+                                   transition-all duration-300 ease-in-out group-hover:w-full"
+                        style={{ transformOrigin: 'bottom' }}
+                    ></span>
+
+                    {/* Button text and icon */}
+                    <span className="relative z-10 flex items-center gap-2">
+                        {buttonText}
+                        <FontAwesomeIcon icon={faChevronRight} className="transition-transform duration-300 group-hover:translate-x-1" />
+                    </span>
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default HyperCard;