apex-ui-kit 2.0.6 → 2.1.0

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

@@ -6,7 +6,8 @@ const HoverText = ({
     fontSize = "2.5rem",
     className = "",
     effect, // if not passed, use 'defaultReveal'
-    effectColor = "#C27AFF"
+    effectColor = "#C27AFF",
+    textColor = "#fff" // resting colour of the letters
 }) => {
     const charsRef = useRef([]);
     const containerRef = useRef(null);
@@ -32,7 +33,7 @@ const HoverText = ({
         gsap.to(el, {
             scale: 1,
             rotate: 0,
-            color: "#fff",
+            color: textColor,
             filter: `drop-shadow(0 0px 0px ${effectColor})`,
             duration: 0.32,
             ease: "expo.inOut",
@@ -61,7 +62,7 @@ const HoverText = ({
             gsap.to(el, {
                 scale: 1,
                 rotate: 0,
-                color: "#fff",
+                color: textColor,
                 filter: `drop-shadow(0 0px 0px ${effectColor})`,
                 duration: 0.38,
                 ease: "expo.inOut",
@@ -79,11 +80,11 @@ const HoverText = ({
                     x: 0,
                     y: 0,
                     filter: `drop-shadow(0 0px 0px ${effectColor})`,
-                    color: "#fff",
+                    color: textColor,
                 });
             }
         });
-    }, [text, effectColor]);
+    }, [text, effectColor, textColor]);
 
     // Magnetic effect
     const handleMouseMove = (e) => {
@@ -126,7 +127,7 @@ const HoverText = ({
                 filter: isFocus
                     ? `drop-shadow(0 4px 32px ${effectColor})`
                     : `drop-shadow(0 2px 16px ${effectColor}44)`,
-                color: isFocus ? effectColor : "#fff",
+                color: isFocus ? effectColor : textColor,
                 zIndex: isFocus ? 10 : 2,
                 duration: 0.35,
                 ease: "expo.out",
@@ -156,7 +157,7 @@ const HoverText = ({
                         gsap.to(el, {
                             scaleX: 1,
                             scaleY: 1,
-                            color: "#fff",
+                            color: textColor,
                             filter: `drop-shadow(0 0px 0px ${effectColor})`,
                             duration: 0.18,
                             ease: "expo.inOut",
@@ -203,7 +204,7 @@ const HoverText = ({
                 y: 0,
                 scale: 1,
                 rotate: 0,
-                color: "#fff",
+                color: textColor,
                 filter: `drop-shadow(0 0px 0px ${effectColor})`,
                 duration: 0.32,
                 ease: "expo.inOut",
@@ -245,7 +246,7 @@ const HoverText = ({
             gsap.to(el, {
                 scale: 1,
                 rotate: 0,
-                color: "#fff",
+                color: textColor,
                 filter: `drop-shadow(0 0px 0px ${effectColor})`,
                 duration: 0.32,
                 ease: "expo.inOut",
@@ -279,7 +280,7 @@ const HoverText = ({
             gsap.to(el, {
                 y: 0,
                 scale: 1,
-                color: "#fff",
+                color: textColor,
                 filter: `drop-shadow(0 0px 0px ${effectColor})`,
                 duration: 0.38 + Math.abs(j) * 0.08,
                 ease: "expo.inOut",
@@ -297,7 +298,7 @@ const HoverText = ({
                         y: 0,
                         scale: 1,
                         rotate: 0,
-                        color: "#fff",
+                        color: textColor,
                         filter: `drop-shadow(0 0px 0px ${effectColor})`,
                         duration: 0.6,
                         ease: "expo.inOut",
@@ -309,7 +310,7 @@ const HoverText = ({
                 if (el) {
                     gsap.to(el, {
                         rotateY: 0,
-                        color: "#fff",
+                        color: textColor,
                         filter: `drop-shadow(0 0px 0px ${effectColor})`,
                         duration: 0.6,
                         ease: "expo.inOut",
@@ -356,7 +357,7 @@ const HoverText = ({
                         borderRadius: "0.18em",
                         position: "relative",
                         zIndex: 2,
-                        color: "#fff",
+                        color: textColor,
                         background: "none",
                         transition: "filter 0.3s, color 0.3s, background 0.3s, opacity 0.3s",
                     }}

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

@@ -1,23 +1,22 @@
+// ...existing code...
 import React, { useRef, useEffect, useState } from "react";
 import { gsap } from "gsap";
 import {
     faCube,
-    faChevronRight, // Changed icon for a better look with the new button
+    faChevronRight,
 } 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
+    LastTextColor = "#9AE600",
     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
+    starColor = "#9AE600",
     starCount = 250,
     glow = true,
     baseSpeed = 0.5,
@@ -30,18 +29,21 @@ const HyperCard = ({
     const stars = useRef([]);
     const speedRef = useRef({ value: baseSpeed });
 
-    // 🎇 Particle logic remains exactly the same
+    // Particle canvas (kept same logic; responsive CSS classes control visual size)
     useEffect(() => {
         const canvas = canvasRef.current;
+        if (!canvas) return;
         const ctx = canvas.getContext("2d");
-        let animationFrame;
+        let animationFrame = 0;
         let w, h;
+        // Only draw while the card is on screen.
+        let visible = true;
 
         const init = () => {
             w = canvas.width = canvas.offsetWidth;
             h = canvas.height = canvas.offsetHeight;
             stars.current = Array.from({ length: starCount }, () => {
-                const z = Math.random() * w;
+                const z = Math.random() * Math.max(w, 1);
                 return {
                     x: Math.random() * w, y: Math.random() * h,
                     z, baseZ: z, brightness: Math.random() * 0.5 + 0.5,
@@ -50,17 +52,17 @@ const HyperCard = ({
         };
 
         const draw = () => {
-            // Updated to draw on a transparent background
-            if (!ctx) return;
+            animationFrame = 0;
+            if (!ctx || !visible) 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;
+                if (star.z <= 1) star.z = star.baseZ || Math.max(w, 1);
                 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;
+                const size = (1 - star.z / Math.max(w, 1)) * 2;
                 ctx.beginPath();
                 ctx.globalAlpha = star.brightness;
                 if (speedRef.current.value > baseSpeed + 0.3) {
@@ -85,29 +87,46 @@ const HyperCard = ({
         init();
         draw();
         window.addEventListener("resize", init);
-        return () => { cancelAnimationFrame(animationFrame); window.removeEventListener("resize", init); };
+        const visibilityObserver = typeof IntersectionObserver !== "undefined"
+            ? new IntersectionObserver(([entry]) => {
+                visible = entry.isIntersecting;
+                if (visible && !animationFrame) animationFrame = requestAnimationFrame(draw);
+            })
+            : null;
+        visibilityObserver?.observe(canvas);
+        return () => {
+            cancelAnimationFrame(animationFrame);
+            visibilityObserver?.disconnect();
+            window.removeEventListener("resize", init);
+        };
     }, [starColor, starCount, baseSpeed]);
 
-    // GSAP animations for speed and jiggle remain the same
+    // GSAP speed tween (cleaned up)
     useEffect(() => {
-        gsap.to(speedRef.current, { value: hovered ? warpSpeed : baseSpeed, duration: 1.5, ease: "power4.inOut" });
+        const tween = gsap.to(speedRef.current, { value: hovered ? warpSpeed : baseSpeed, duration: 1.2, ease: "power4.inOut" });
+        return () => tween.kill();
     }, [hovered, warpSpeed, baseSpeed]);
 
+    // Hover jiggle with cleanup
     useEffect(() => {
         const el = contentRef.current;
+        if (!el) return;
+        let jiggle;
         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" });
+            gsap.to(el, { scale: 0.95, duration: 0.45, ease: "power1.out" });
+            jiggle = gsap.to(el, { x: "+=1", y: "-=1", duration: 0.06, 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" });
+            gsap.to(el, { x: 0, y: 0, scale: 1, duration: 0.35, ease: "power2.out" });
         }
+        return () => jiggle?.kill();
     }, [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"
+            className="w-full mx-auto rounded-2xl overflow-hidden text-white
+                       border border-slate-700 bg-slate-900 shadow-2xl shadow-black/50
+                       max-w-[20rem]"
             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'
@@ -115,13 +134,13 @@ const HyperCard = ({
         >
             {/* Top animated HyperCard */}
             <div
-                className="relative w-full h-50 overflow-hidden group cursor-pointer"
+                className="relative w-full overflow-hidden group cursor-pointer
+                           h-52 md:h-56"
                 onMouseEnter={() => setHovered(true)}
                 onMouseLeave={() => setHovered(false)}
             >
-                <canvas ref={canvasRef} className="absolute inset-0 w-full h-full z-0" />
+                <canvas ref={canvasRef} className="absolute inset-0 w-full h-full z-0 block" />
 
-                {/* Glow effect from your original code */}
                 {glow && (
                     <div
                         className="absolute inset-0 w-full h-full z-10 pointer-events-none"
@@ -133,44 +152,42 @@ const HyperCard = ({
                     />
                 )}
 
-                {/* Glowing separator line */}
-                <div className="absolute bottom-0 w-full h-[2px] bg-purple-500/50 blur-sm"></div>
+                <div className="absolute bottom-0 w-full h-[2px] bg-purple-500/50 blur-sm pointer-events-none"></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">
+                <div ref={contentRef} className="relative z-20 flex flex-col items-center justify-center w-full h-full px-3 py-2">
+                    <h2 className="text-sm sm:text-base md:text-lg lg:text-lg font-normal text-center text-white leading-tight">
                         {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>
+                    <p className="text-xs sm:text-sm text-gray-300 text-center max-w-xs mt-1 px-2">{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 className="px-4 sm:px-5 pt-5 pb-6 w-full text-left flex flex-col items-start">
+                <div className="flex items-center gap-2 mb-2">
+                    <FontAwesomeIcon icon={faCube} style={{ color: starColor }} className="text-lg sm:text-xl" />
+                    <h3 className="text-xl md:text-2xl font-extrabold text-white tracking-tight leading-tight">{title}</h3>
                 </div>
-                <p className="text-gray-400 text-base mb-5 max-w-xs leading-relaxed">{description}</p>
+                <p className="text-xs sm:text-sm text-gray-400 mb-4 max-w-full leading-relaxed">{description}</p>
 
-                {/* --- NEW BUTTON WITH ANIMATION --- */}
                 <button
-                    className="group relative flex items-center gap-2 px-6 py-2.5 
+                    className="group relative flex items-center justify-center gap-2 px-4 py-2 
                                border-2 border-[#9AE600] rounded-lg 
-                               font-semibold text-white overflow-hidden transition-all duration-300"
+                               font-semibold text-white overflow-hidden transition-all duration-300
+                               w-full sm:w-auto"
+                    aria-label={buttonText}
                 >
-                    {/* Fill-up background effect */}
                     <span
-                        className="absolute inset-0 h-full w-0  bg-[#4c6d0a] 
+                        className="absolute inset-0 h-full w-0 bg-[#4c6d0a] 
                                    transition-all duration-300 ease-in-out group-hover:w-full"
                         style={{ transformOrigin: 'bottom' }}
+                        aria-hidden="true"
                     ></span>
 
-                    {/* Button text and icon */}
-                    <span className="relative z-10 flex items-center gap-2">
+                    <span className="relative z-10 flex items-center gap-2 text-sm sm:text-base">
                         {buttonText}
                         <FontAwesomeIcon icon={faChevronRight} className="transition-transform duration-300 group-hover:translate-x-1" />
                     </span>
@@ -180,4 +197,4 @@ const HyperCard = ({
     );
 };
 
-export default HyperCard;
+export default HyperCard;

package/dist/ApexUI-Kit/templates/KineticThreadsBackground/KineticThreadBackground.jsx

@@ -190,7 +190,7 @@ const KineticThreadsBackground = ({
             targetMouseRef.current.y = 0.5;
         };
         if (mouseInteraction) {
-            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mousemove', handleMouseMove, { passive: true });
             window.addEventListener('mouseleave', handleMouseLeave);
         }
 
@@ -211,12 +211,19 @@ const KineticThreadsBackground = ({
             uniforms.uResolution.value.set(clientWidth, clientHeight);
         };
         window.addEventListener('resize', handleResize);
+        // Also follow the container itself (it can change size without a window resize).
+        const resizeObserver = new ResizeObserver(() => handleResize());
+        resizeObserver.observe(mountNode);
         handleResize(); // Initial call
 
         // Animation loop
         const clock = new THREE.Clock();
-        let animationFrameId;
+        let animationFrameId = 0;
+        // Only render while the background is on screen.
+        let visible = true;
         const animate = () => {
+            animationFrameId = 0;
+            if (!visible) return;
             uniforms.uTime.value = clock.getElapsedTime() * speed;
 
             // Smoothly update mouse position (lerping)
@@ -228,10 +235,17 @@ const KineticThreadsBackground = ({
             animationFrameId = requestAnimationFrame(animate);
         };
         animate();
+        const visibilityObserver = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible && !animationFrameId) animationFrameId = requestAnimationFrame(animate);
+        });
+        visibilityObserver.observe(mountNode);
 
         // Cleanup function
         return () => {
             cancelAnimationFrame(animationFrameId);
+            visibilityObserver.disconnect();
+            resizeObserver.disconnect();
             window.removeEventListener('resize', handleResize);
             window.removeEventListener('mousemove', handleMouseMove);
             window.removeEventListener('mouseleave', handleMouseLeave);
@@ -241,6 +255,7 @@ const KineticThreadsBackground = ({
             geometry.dispose();
             material.dispose();
             renderer.dispose();
+            renderer.forceContextLoss();
         };
     }, [color, amplitude, distance, speed, mouseInteraction]);
 

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

@@ -207,6 +207,9 @@ const LensFlareBackground = ({
         };
         updatePlacement();
         window.addEventListener("resize", updatePlacement);
+        // Also follow the container itself (it can change size without a window resize).
+        const resizeObserver = new ResizeObserver(() => updatePlacement());
+        if (mountRef.current) resizeObserver.observe(mountRef.current);
 
         const handleMouseMove = (e) => {
             if (!mountRef.current) return;
@@ -215,9 +218,13 @@ const LensFlareBackground = ({
             const y = (e.clientY - rect.top) / rect.height;
             mouseRef.current = { x, y };
         };
-        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mousemove", handleMouseMove, { passive: true });
 
+        // Only render while the background is on screen.
+        let visible = true;
         const animate = (now) => {
+            frameId = 0;
+            if (!visible) return;
             uniforms.iTime.value = now * 0.001;
             const smoothing = 0.92;
             smoothMouseRef.current.x =
@@ -229,14 +236,22 @@ const LensFlareBackground = ({
             frameId = requestAnimationFrame(animate);
         };
         frameId = requestAnimationFrame(animate);
+        const visibilityObserver = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible && !frameId) frameId = requestAnimationFrame(animate);
+        });
+        if (mountRef.current) visibilityObserver.observe(mountRef.current);
 
         return () => {
             if (frameId) cancelAnimationFrame(frameId);
+            visibilityObserver.disconnect();
+            resizeObserver.disconnect();
             window.removeEventListener("resize", updatePlacement);
             window.removeEventListener("mousemove", handleMouseMove);
             renderer.dispose();
-            if (mountRef.current && renderer.domElement.parentNode === mountRef.current) {
-                mountRef.current.removeChild(renderer.domElement);
+            renderer.forceContextLoss();
+            if (renderer.domElement.parentNode) {
+                renderer.domElement.parentNode.removeChild(renderer.domElement);
             }
         };
     }, [flareColor, intensity, animationSpeed]);

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

@@ -1,4 +1,4 @@
-import React, { useRef, useMemo } from 'react';
+import React, { useRef, useMemo, useEffect, useState } from 'react';
 import { Canvas, useFrame } from '@react-three/fiber';
 import * as THREE from 'three';
 // Helper function to convert hex color to rgba for CSS
@@ -102,8 +102,20 @@ const LuminousParticleOcean = ({
 
     const lightColorRgba = useMemo(() => hexToRgba(sphereColor, 0.5), [sphereColor]);
 
+    // Pause the 3D scene while it is off screen.
+    const wrapperRef = useRef(null);
+    const [inView, setInView] = useState(true);
+    useEffect(() => {
+        const el = wrapperRef.current;
+        if (!el || typeof IntersectionObserver === 'undefined') return undefined;
+        const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting));
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+
     return (
         <div
+            ref={wrapperRef}
             className="relative w-screen h-[60vh] lg:h-[80vh] overflow-hidden"
             style={{
                 background: `linear-gradient(to bottom, ${bgColor1}, ${bgColor2})`
@@ -130,6 +142,8 @@ const LuminousParticleOcean = ({
 
             <Canvas
                 camera={{ position: [0, 60, 150], fov: 55 }}
+                dpr={[1, 1.75]}
+                frameloop={inView ? 'always' : 'never'}
             >
                 {/* Sunlight: Also uses the sphereColor prop */}
                 <pointLight