aura-ui-library 1.0.13 → 1.0.15

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  Canvas: () => Canvas,
   Carousel: () => Carousel,
   Footer: () => Footer,
   Grid: () => Grid,
@@ -3125,24 +3126,26 @@ var import_fi13 = require("react-icons/fi");
 import_gsap14.gsap.registerPlugin(import_ScrollTrigger.ScrollTrigger);
 var ImageEffectScrolling = ({
   images = [
-    { id: 1, src: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&q=80&w=800", title: "Aether Flow" },
-    { id: 2, src: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&q=80&w=800", title: "Neural Nexus" },
-    { id: 3, src: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?auto=format&fit=crop&q=80&w=800", title: "Neon Gradients" },
-    { id: 4, src: "https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&q=80&w=800", title: "Geometry Labs" },
-    { id: 5, src: "https://images.unsplash.com/photo-1614850523296-d8c1af93d400?auto=format&fit=crop&q=80&w=800", title: "Liquid Void" },
-    { id: 6, src: "https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?auto=format&fit=crop&q=80&w=800", title: "Digital Ether" }
+    { id: 1, src: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&q=80&w=800", title: "Aether Flow", width: "45vh" },
+    { id: 2, src: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&q=80&w=800", title: "Neural Nexus", width: "35vh" },
+    { id: 3, src: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?auto=format&fit=crop&q=80&w=800", title: "Neon Gradients", width: "55vh" },
+    { id: 4, src: "https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&q=80&w=800", title: "Geometry Labs", width: "40vh" },
+    { id: 5, src: "https://images.unsplash.com/photo-1614850523296-d8c1af93d400?auto=format&fit=crop&q=80&w=800", title: "Liquid Void", width: "50vh" }
   ],
+  variant = "wave",
+  // "wave", "gooey", "zoom"
+  intensity = 1,
   accentColor = "#6366f1",
   textColor = "#ffffff",
-  waveIntensity = 15,
-  scrollSpeed = 1,
-  animationDuration = 1.5,
+  itemWidth = "45vh",
+  itemHeight = "60vh",
+  animationDuration = 1.4,
   easing = "power4.out"
 }) => {
   const sectionRef = (0, import_react14.useRef)(null);
   const containerRef = (0, import_react14.useRef)(null);
   const imageRefs = (0, import_react14.useRef)([]);
-  const contentRef = (0, import_react14.useRef)(null);
+  const [activeVariant, setActiveVariant] = (0, import_react14.useState)(variant);
   const inRouter = (0, import_react_router_dom12.useInRouterContext)();
   const navigate = inRouter ? (0, import_react_router_dom12.useNavigate)() : null;
   const handleNavigate = (path) => {
@@ -3155,7 +3158,7 @@ var ImageEffectScrolling = ({
     const ctx = import_gsap14.gsap.context(() => {
       const sections = imageRefs.current;
       const totalWidth = containerRef.current.scrollWidth;
-      import_gsap14.gsap.to(containerRef.current, {
+      const masterScroll = import_gsap14.gsap.to(containerRef.current, {
         x: () => -(totalWidth - window.innerWidth),
         ease: "none",
         scrollTrigger: {
@@ -3164,158 +3167,190 @@ var ImageEffectScrolling = ({
           scrub: 1,
           start: "top top",
           end: () => `+=${totalWidth}`,
-          anticipatePin: 1,
+          invalidateOnRefresh: true,
           onUpdate: (self) => {
-            const velocity = self.getVelocity();
-            const skew = velocity / 500 * waveIntensity;
-            sections.forEach((img) => {
-              import_gsap14.gsap.to(img, {
-                skewX: skew,
-                duration: 0.5,
-                ease: "power2.out",
-                overwrite: "auto"
+            if (activeVariant === "wave") {
+              const velocity = self.getVelocity();
+              const skew = velocity / 500 * 15 * intensity;
+              sections.forEach((img) => {
+                import_gsap14.gsap.to(img, { skewX: skew, duration: 0.6, ease: "power2.out", overwrite: "auto" });
               });
-            });
+            }
           }
         }
       });
-      import_gsap14.gsap.fromTo(
-        imageRefs.current,
-        { opacity: 0, y: 100, scale: 0.8 },
-        {
-          opacity: 1,
-          y: 0,
-          scale: 1,
-          stagger: 0.1,
-          duration: animationDuration,
-          ease: easing
-        }
-      );
-      sections.forEach((img) => {
-        const innerImg = img.querySelector("img");
-        import_gsap14.gsap.to(innerImg, {
-          x: -100,
+      if (activeVariant === "zoom") {
+        sections.forEach((img) => {
+          import_gsap14.gsap.fromTo(
+            img,
+            { scale: 0.8, filter: "brightness(0.4) grayscale(1)" },
+            {
+              scale: 1.1,
+              filter: "brightness(1) grayscale(0)",
+              scrollTrigger: {
+                trigger: img,
+                containerAnimation: masterScroll,
+                start: "left center",
+                end: "center center",
+                scrub: true
+              }
+            }
+          );
+          import_gsap14.gsap.to(img, {
+            scale: 0.8,
+            filter: "brightness(0.4) grayscale(1)",
+            scrollTrigger: {
+              trigger: img,
+              containerAnimation: masterScroll,
+              start: "center center",
+              end: "right center",
+              scrub: true
+            }
+          });
+        });
+      }
+      if (activeVariant === "gooey") {
+        import_gsap14.gsap.to(sections, {
+          xPercent: (i) => i % 2 === 0 ? 10 : -10,
           ease: "none",
           scrollTrigger: {
-            trigger: img,
-            containerAnimation: import_gsap14.gsap.getProperty(containerRef.current, "gsap"),
-            // This is tricky for scrub
-            scrub: true,
-            horizontal: true
+            trigger: sectionRef.current,
+            start: "top top",
+            end: "bottom top",
+            scrub: 1
           }
         });
+      }
+      import_gsap14.gsap.fromTo(
+        sections,
+        { opacity: 0, y: 100, scale: 0.9 },
+        { opacity: 1, y: 0, scale: 1, stagger: 0.1, duration: animationDuration, ease: easing }
+      );
+      sections.forEach((item) => {
+        const innerImg = item.querySelector(".parallax-img");
+        if (innerImg) {
+          import_gsap14.gsap.to(innerImg, {
+            xPercent: 20,
+            ease: "none",
+            scrollTrigger: {
+              trigger: item,
+              containerAnimation: masterScroll,
+              scrub: true
+            }
+          });
+        }
       });
     }, sectionRef);
     return () => ctx.revert();
-  }, [images, waveIntensity, animationDuration, easing]);
-  const handleMouseEnter = (e) => {
-    import_gsap14.gsap.to(e.currentTarget, {
-      scale: 1.05,
-      zIndex: 10,
-      duration: 0.6,
-      ease: "expo.out"
-    });
-    const overlay = e.currentTarget.querySelector(".overlay");
-    import_gsap14.gsap.to(overlay, { opacity: 1, duration: 0.4 });
-  };
-  const handleMouseLeave = (e) => {
-    import_gsap14.gsap.to(e.currentTarget, {
-      scale: 1,
-      zIndex: 1,
-      duration: 0.6,
-      ease: "expo.out"
-    });
-    const overlay = e.currentTarget.querySelector(".overlay");
-    import_gsap14.gsap.to(overlay, { opacity: 0, duration: 0.4 });
-  };
+  }, [images, activeVariant, intensity, animationDuration, easing]);
   const styles = {
     section: {
       position: "relative",
       width: "100%",
       height: "100vh",
       overflow: "hidden",
-      backgroundColor: "#050505",
-      display: "flex",
-      alignItems: "center"
+      backgroundColor: "#050505"
+    },
+    gooeyOverlay: {
+      position: "absolute",
+      width: 0,
+      height: 0
     },
     container: {
       display: "flex",
-      paddingLeft: "10vw",
-      paddingRight: "10vw",
-      gap: "50px",
+      height: "100%",
       alignItems: "center",
-      willChange: "transform"
+      paddingLeft: "15vw",
+      paddingRight: "15vw",
+      gap: activeVariant === "gooey" ? "-20px" : "60px",
+      willChange: "transform",
+      filter: activeVariant === "gooey" ? "url(#gooey-effect)" : "none"
     },
-    imageItem: {
+    imageItem: (customWidth) => ({
       position: "relative",
-      flex: "0 0 45vh",
-      height: "60vh",
-      borderRadius: "24px",
+      flex: `0 0 ${customWidth || itemWidth}`,
+      height: itemHeight,
+      borderRadius: activeVariant === "gooey" ? "100px" : "32px",
       overflow: "hidden",
       cursor: "pointer",
       backgroundColor: "#111",
-      willChange: "transform, skewX",
-      transformStyle: "preserve-3d"
-    },
+      willChange: "transform, skewX, filter",
+      transition: "border-radius 0.6s ease"
+    }),
     image: {
-      width: "120%",
-      // Wider for parallax gap
+      width: "140%",
       height: "100%",
       objectFit: "cover",
-      pointerEvents: "none",
-      transform: "translateX(0)"
+      transform: "translateX(-15%)"
     },
     overlay: {
       position: "absolute",
       inset: 0,
-      background: "linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%)",
+      background: "linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 70%)",
       opacity: 0,
       display: "flex",
       flexDirection: "column",
       justifyContent: "flex-end",
-      padding: "30px",
+      padding: "40px",
       color: "#fff",
       zIndex: 2,
-      pointerEvents: "none"
-    },
-    title: {
-      fontSize: "24px",
-      fontWeight: "800",
-      marginBottom: "8px",
-      fontFamily: '"Inter", sans-serif',
-      textTransform: "uppercase",
-      letterSpacing: "2px"
-    },
-    subtitle: {
-      fontSize: "12px",
-      opacity: 0.6,
-      textTransform: "uppercase",
-      letterSpacing: "4px"
+      pointerEvents: "none",
+      transition: "opacity 0.4s ease"
     },
-    navIndicator: {
+    controls: {
       position: "absolute",
       bottom: "10vh",
       left: "50%",
       transform: "translateX(-50%)",
-      color: "rgba(255,255,255,0.2)",
-      fontSize: "12px",
+      display: "flex",
+      gap: "12px",
+      zIndex: 100,
+      backgroundColor: "rgba(255,255,255,0.05)",
+      padding: "6px",
+      borderRadius: "100px",
+      backdropFilter: "blur(10px)",
+      border: "1px solid rgba(255,255,255,0.1)"
+    },
+    controlBtn: (active) => ({
+      padding: "8px 20px",
+      borderRadius: "100px",
+      fontSize: "11px",
+      fontWeight: "700",
       textTransform: "uppercase",
-      letterSpacing: "5px",
-      zIndex: 10
-    }
+      letterSpacing: "1px",
+      cursor: "pointer",
+      border: "none",
+      backgroundColor: active ? accentColor : "transparent",
+      color: active ? "#fff" : "rgba(255,255,255,0.4)",
+      transition: "all 0.3s ease"
+    })
   };
-  return /* @__PURE__ */ import_react14.default.createElement("div", { ref: sectionRef, style: styles.section }, /* @__PURE__ */ import_react14.default.createElement("div", { style: styles.navIndicator }, "Scroll To Explore"), /* @__PURE__ */ import_react14.default.createElement("div", { ref: containerRef, style: styles.container }, images.map((img, i) => /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react14.default.createElement("div", { ref: sectionRef, style: styles.section }, /* @__PURE__ */ import_react14.default.createElement("svg", { style: styles.gooeyOverlay }, /* @__PURE__ */ import_react14.default.createElement("defs", null, /* @__PURE__ */ import_react14.default.createElement("filter", { id: "gooey-effect" }, /* @__PURE__ */ import_react14.default.createElement("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "15", result: "blur" }), /* @__PURE__ */ import_react14.default.createElement("feColorMatrix", { in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 30 -15", result: "goo" }), /* @__PURE__ */ import_react14.default.createElement("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })))), /* @__PURE__ */ import_react14.default.createElement("div", { style: styles.controls }, ["wave", "gooey", "zoom"].map((v) => /* @__PURE__ */ import_react14.default.createElement(
+    "button",
+    {
+      key: v,
+      style: styles.controlBtn(activeVariant === v),
+      onClick: () => setActiveVariant(v)
+    },
+    v
+  ))), /* @__PURE__ */ import_react14.default.createElement("div", { ref: containerRef, style: styles.container }, images.map((img, i) => /* @__PURE__ */ import_react14.default.createElement(
     "div",
     {
       key: img.id,
       ref: (el) => imageRefs.current[i] = el,
-      style: styles.imageItem,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
+      style: styles.imageItem(img.width),
+      onMouseEnter: (e) => {
+        import_gsap14.gsap.to(e.currentTarget, { scale: 1.05, duration: 0.6, ease: "expo.out" });
+        e.currentTarget.querySelector(".overlay-ui").style.opacity = 1;
+      },
+      onMouseLeave: (e) => {
+        import_gsap14.gsap.to(e.currentTarget, { scale: 1, duration: 0.6, ease: "expo.out" });
+        e.currentTarget.querySelector(".overlay-ui").style.opacity = 0;
+      },
       onClick: () => handleNavigate(img.path)
     },
-    /* @__PURE__ */ import_react14.default.createElement("div", { className: "overlay", style: styles.overlay }, /* @__PURE__ */ import_react14.default.createElement("span", { style: styles.subtitle }, "Gallery Item 0", i + 1), /* @__PURE__ */ import_react14.default.createElement("h3", { style: styles.title }, img.title), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", color: accentColor } }, "View Project ", /* @__PURE__ */ import_react14.default.createElement(import_fi13.FiArrowRight, null))),
-    /* @__PURE__ */ import_react14.default.createElement("img", { src: img.src, alt: img.title, style: styles.image })
+    /* @__PURE__ */ import_react14.default.createElement("div", { className: "overlay-ui", style: styles.overlay }, /* @__PURE__ */ import_react14.default.createElement("h3", { style: { fontSize: "24px", fontWeight: "900", margin: "0 0 8px 0" } }, img.title), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", color: accentColor, fontWeight: "700" } }, "Discover ", /* @__PURE__ */ import_react14.default.createElement(import_fi13.FiArrowRight, null))),
+    /* @__PURE__ */ import_react14.default.createElement("img", { src: img.src, alt: img.title, className: "parallax-img", style: styles.image })
   ))));
 };
 
@@ -3323,7 +3358,6 @@ var ImageEffectScrolling = ({
 var import_react15 = __toESM(require("react"));
 var import_gsap15 = require("gsap");
 var import_fi14 = require("react-icons/fi");
-var import_hi = require("react-icons/hi");
 var Testimonials = ({
   items = [
     {
@@ -3524,7 +3558,21 @@ var Testimonials = ({
       onMouseEnter: (e) => handleCardHover(e, i),
       onMouseLeave: () => handleCardLeave(i)
     },
-    /* @__PURE__ */ import_react15.default.createElement("div", { className: "quote-icon", style: styles.quoteIcon }, /* @__PURE__ */ import_react15.default.createElement(import_hi.HiQuoteLeft, null)),
+    /* @__PURE__ */ import_react15.default.createElement("div", { className: "quote-icon", style: styles.quoteIcon }, /* @__PURE__ */ import_react15.default.createElement(
+      "svg",
+      {
+        width: "32",
+        height: "32",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ import_react15.default.createElement("path", { d: "M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v3c0 1.25.75 2 2 2h3c0 4-4 6-4 6z" }),
+      /* @__PURE__ */ import_react15.default.createElement("path", { d: "M15 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v3c0 1.25.75 2 2 2h3c0 4-4 6-4 6z" })
+    )),
     /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.stars }, [...Array(item.rating)].map((_, i2) => /* @__PURE__ */ import_react15.default.createElement(import_fi14.FiStar, { key: i2 }))),
     /* @__PURE__ */ import_react15.default.createElement("p", { style: styles.content }, '"', item.content, '"'),
     /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.footer }, /* @__PURE__ */ import_react15.default.createElement("img", { src: item.avatar, alt: item.name, style: styles.avatar }), /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.info }, /* @__PURE__ */ import_react15.default.createElement("span", { style: styles.name }, item.name), /* @__PURE__ */ import_react15.default.createElement("span", { style: styles.role }, item.role, " @ ", item.company)))
@@ -3763,9 +3811,168 @@ var Footer = ({
     link.label
   ))), /* @__PURE__ */ import_react16.default.createElement("div", { ref: (el) => columnRefs.current[2] = el }, /* @__PURE__ */ import_react16.default.createElement("div", { style: styles.colTitle }, "Support"), /* @__PURE__ */ import_react16.default.createElement("a", { href: "mailto:hello@aura-ui.com", style: styles.link, onMouseEnter: (e) => e.currentTarget.style.opacity = 1, onMouseLeave: (e) => e.currentTarget.style.opacity = 0.5 }, "Help Center"), /* @__PURE__ */ import_react16.default.createElement("a", { href: "#", style: styles.link, onMouseEnter: (e) => e.currentTarget.style.opacity = 1, onMouseLeave: (e) => e.currentTarget.style.opacity = 0.5 }, "Changelog"), /* @__PURE__ */ import_react16.default.createElement("a", { href: "#", style: styles.link, onMouseEnter: (e) => e.currentTarget.style.opacity = 1, onMouseLeave: (e) => e.currentTarget.style.opacity = 0.5 }, "Terms"), /* @__PURE__ */ import_react16.default.createElement("a", { href: "#", style: styles.link, onMouseEnter: (e) => e.currentTarget.style.opacity = 1, onMouseLeave: (e) => e.currentTarget.style.opacity = 0.5 }, "Privacy")), /* @__PURE__ */ import_react16.default.createElement("div", { ref: (el) => columnRefs.current[3] = el }, /* @__PURE__ */ import_react16.default.createElement("div", { style: styles.colTitle }, "Contact"), /* @__PURE__ */ import_react16.default.createElement("div", { style: { ...styles.link, display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react16.default.createElement(import_fi15.FiMail, null), " hello@aura-ui.com"), /* @__PURE__ */ import_react16.default.createElement("div", { style: { ...styles.link, display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react16.default.createElement(import_fi15.FiMapPin, null), " San Francisco, CA"))), /* @__PURE__ */ import_react16.default.createElement("div", { style: styles.bottom }, /* @__PURE__ */ import_react16.default.createElement("div", null, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", brandName, " UI Library. All rights reserved."), /* @__PURE__ */ import_react16.default.createElement("div", { style: { display: "flex", gap: "20px" } }, /* @__PURE__ */ import_react16.default.createElement("span", null, "Version 1.2.0"), /* @__PURE__ */ import_react16.default.createElement("span", null, "Open Source"))));
 };
+
+// src/components/Canvas/Canvas.jsx
+var import_react17 = __toESM(require("react"));
+var import_gsap17 = require("gsap");
+var Canvas = ({
+  particleCount = 120,
+  lineColor = "rgba(99, 102, 241, 0.2)",
+  particleColor = "rgba(99, 102, 241, 0.8)",
+  speed = 0.5,
+  interactive = true,
+  parallaxIntensity = 0.05,
+  connectionDistance = 150,
+  animationDuration = 2,
+  easing = "power4.out"
+}) => {
+  const canvasRef = (0, import_react17.useRef)(null);
+  const containerRef = (0, import_react17.useRef)(null);
+  const mouseRef = (0, import_react17.useRef)({ x: 0, y: 0, active: false });
+  (0, import_react17.useEffect)(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    let animationFrameId;
+    let particles = [];
+    const resize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+    class Particle {
+      constructor() {
+        this.reset();
+      }
+      reset() {
+        this.x = (Math.random() - 0.5) * canvas.width * 2;
+        this.y = (Math.random() - 0.5) * canvas.height * 2;
+        this.z = Math.random() * canvas.width;
+        this.vx = (Math.random() - 0.5) * speed;
+        this.vy = (Math.random() - 0.5) * speed;
+        this.vz = (Math.random() - 0.5) * speed;
+        this.size = 1.5;
+      }
+      update() {
+        this.x += this.vx;
+        this.y += this.vy;
+        this.z += this.vz;
+        if (mouseRef.current.active) {
+          const dx = mouseRef.current.x - canvas.width / 2 - this.x;
+          const dy = mouseRef.current.y - canvas.height / 2 - this.y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          if (dist < 300) {
+            this.x += dx * 0.01;
+            this.y += dy * 0.01;
+          }
+        }
+        if (this.z <= 0) this.z = canvas.width;
+        if (this.z > canvas.width) this.z = 0;
+        this.focalLength = canvas.width * 0.8;
+        this.scale = this.focalLength / (this.focalLength + this.z);
+        this.px = this.x * this.scale + canvas.width / 2;
+        this.py = this.y * this.scale + canvas.height / 2;
+      }
+      draw() {
+        ctx.beginPath();
+        ctx.arc(this.px, this.py, this.size * this.scale, 0, Math.PI * 2);
+        ctx.fillStyle = particleColor;
+        ctx.fill();
+      }
+    }
+    const init = () => {
+      particles = Array.from({ length: particleCount }, () => new Particle());
+    };
+    const drawLines = () => {
+      ctx.lineWidth = 0.5;
+      ctx.strokeStyle = lineColor;
+      for (let i = 0; i < particles.length; i++) {
+        for (let j = i + 1; j < particles.length; j++) {
+          const dx = particles[i].px - particles[j].px;
+          const dy = particles[i].py - particles[j].py;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          if (dist < connectionDistance) {
+            ctx.beginPath();
+            ctx.moveTo(particles[i].px, particles[i].py);
+            ctx.lineTo(particles[j].px, particles[j].py);
+            ctx.stroke();
+          }
+        }
+      }
+    };
+    const render = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      if (interactive) {
+        const mx = (mouseRef.current.x - window.innerWidth / 2) * parallaxIntensity;
+        const my = (mouseRef.current.y - window.innerHeight / 2) * parallaxIntensity;
+        import_gsap17.gsap.to(canvas, { x: mx, y: my, duration: 1, ease: "power2.out" });
+      }
+      particles.forEach((p) => {
+        p.update();
+        p.draw();
+      });
+      drawLines();
+      animationFrameId = requestAnimationFrame(render);
+    };
+    resize();
+    init();
+    render();
+    window.addEventListener("resize", resize);
+    import_gsap17.gsap.fromTo(
+      containerRef.current,
+      { opacity: 0, scale: 1.1 },
+      { opacity: 1, scale: 1, duration: animationDuration, ease: easing }
+    );
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      window.removeEventListener("resize", resize);
+    };
+  }, [particleCount, speed, particleColor, lineColor, connectionDistance, interactive, parallaxIntensity, animationDuration, easing]);
+  const handleMouseMove = (e) => {
+    mouseRef.current = { x: e.clientX, y: e.clientY, active: true };
+  };
+  const handleMouseLeave = () => {
+    mouseRef.current.active = false;
+  };
+  const styles = {
+    container: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: -1,
+      backgroundColor: "#050505",
+      overflow: "hidden",
+      pointerEvents: "none",
+      willChange: "transform, opacity"
+    },
+    canvas: {
+      display: "block",
+      width: "100%",
+      height: "100%"
+    },
+    overlay: {
+      position: "absolute",
+      inset: 0,
+      background: "radial-gradient(circle at center, transparent 0%, rgba(5,5,5,0.4) 100%)",
+      pointerEvents: "none"
+    }
+  };
+  return /* @__PURE__ */ import_react17.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style: styles.container,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave
+    },
+    /* @__PURE__ */ import_react17.default.createElement("canvas", { ref: canvasRef, style: styles.canvas }),
+    /* @__PURE__ */ import_react17.default.createElement("div", { style: styles.overlay })
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  Canvas,
   Carousel,
   Footer,
   Grid,

package/dist/index.mjs

@@ -3107,24 +3107,26 @@ import { FiArrowRight as FiArrowRight5, FiMaximize2 as FiMaximize22, FiImage, Fi
 gsap14.registerPlugin(ScrollTrigger);
 var ImageEffectScrolling = ({
   images = [
-    { id: 1, src: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&q=80&w=800", title: "Aether Flow" },
-    { id: 2, src: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&q=80&w=800", title: "Neural Nexus" },
-    { id: 3, src: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?auto=format&fit=crop&q=80&w=800", title: "Neon Gradients" },
-    { id: 4, src: "https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&q=80&w=800", title: "Geometry Labs" },
-    { id: 5, src: "https://images.unsplash.com/photo-1614850523296-d8c1af93d400?auto=format&fit=crop&q=80&w=800", title: "Liquid Void" },
-    { id: 6, src: "https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?auto=format&fit=crop&q=80&w=800", title: "Digital Ether" }
+    { id: 1, src: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&q=80&w=800", title: "Aether Flow", width: "45vh" },
+    { id: 2, src: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&q=80&w=800", title: "Neural Nexus", width: "35vh" },
+    { id: 3, src: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?auto=format&fit=crop&q=80&w=800", title: "Neon Gradients", width: "55vh" },
+    { id: 4, src: "https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&q=80&w=800", title: "Geometry Labs", width: "40vh" },
+    { id: 5, src: "https://images.unsplash.com/photo-1614850523296-d8c1af93d400?auto=format&fit=crop&q=80&w=800", title: "Liquid Void", width: "50vh" }
   ],
+  variant = "wave",
+  // "wave", "gooey", "zoom"
+  intensity = 1,
   accentColor = "#6366f1",
   textColor = "#ffffff",
-  waveIntensity = 15,
-  scrollSpeed = 1,
-  animationDuration = 1.5,
+  itemWidth = "45vh",
+  itemHeight = "60vh",
+  animationDuration = 1.4,
   easing = "power4.out"
 }) => {
   const sectionRef = useRef14(null);
   const containerRef = useRef14(null);
   const imageRefs = useRef14([]);
-  const contentRef = useRef14(null);
+  const [activeVariant, setActiveVariant] = useState9(variant);
   const inRouter = useInRouterContext12();
   const navigate = inRouter ? useNavigate12() : null;
   const handleNavigate = (path) => {
@@ -3137,7 +3139,7 @@ var ImageEffectScrolling = ({
     const ctx = gsap14.context(() => {
       const sections = imageRefs.current;
       const totalWidth = containerRef.current.scrollWidth;
-      gsap14.to(containerRef.current, {
+      const masterScroll = gsap14.to(containerRef.current, {
         x: () => -(totalWidth - window.innerWidth),
         ease: "none",
         scrollTrigger: {
@@ -3146,158 +3148,190 @@ var ImageEffectScrolling = ({
           scrub: 1,
           start: "top top",
           end: () => `+=${totalWidth}`,
-          anticipatePin: 1,
+          invalidateOnRefresh: true,
           onUpdate: (self) => {
-            const velocity = self.getVelocity();
-            const skew = velocity / 500 * waveIntensity;
-            sections.forEach((img) => {
-              gsap14.to(img, {
-                skewX: skew,
-                duration: 0.5,
-                ease: "power2.out",
-                overwrite: "auto"
+            if (activeVariant === "wave") {
+              const velocity = self.getVelocity();
+              const skew = velocity / 500 * 15 * intensity;
+              sections.forEach((img) => {
+                gsap14.to(img, { skewX: skew, duration: 0.6, ease: "power2.out", overwrite: "auto" });
               });
-            });
+            }
           }
         }
       });
-      gsap14.fromTo(
-        imageRefs.current,
-        { opacity: 0, y: 100, scale: 0.8 },
-        {
-          opacity: 1,
-          y: 0,
-          scale: 1,
-          stagger: 0.1,
-          duration: animationDuration,
-          ease: easing
-        }
-      );
-      sections.forEach((img) => {
-        const innerImg = img.querySelector("img");
-        gsap14.to(innerImg, {
-          x: -100,
+      if (activeVariant === "zoom") {
+        sections.forEach((img) => {
+          gsap14.fromTo(
+            img,
+            { scale: 0.8, filter: "brightness(0.4) grayscale(1)" },
+            {
+              scale: 1.1,
+              filter: "brightness(1) grayscale(0)",
+              scrollTrigger: {
+                trigger: img,
+                containerAnimation: masterScroll,
+                start: "left center",
+                end: "center center",
+                scrub: true
+              }
+            }
+          );
+          gsap14.to(img, {
+            scale: 0.8,
+            filter: "brightness(0.4) grayscale(1)",
+            scrollTrigger: {
+              trigger: img,
+              containerAnimation: masterScroll,
+              start: "center center",
+              end: "right center",
+              scrub: true
+            }
+          });
+        });
+      }
+      if (activeVariant === "gooey") {
+        gsap14.to(sections, {
+          xPercent: (i) => i % 2 === 0 ? 10 : -10,
           ease: "none",
           scrollTrigger: {
-            trigger: img,
-            containerAnimation: gsap14.getProperty(containerRef.current, "gsap"),
-            // This is tricky for scrub
-            scrub: true,
-            horizontal: true
+            trigger: sectionRef.current,
+            start: "top top",
+            end: "bottom top",
+            scrub: 1
           }
         });
+      }
+      gsap14.fromTo(
+        sections,
+        { opacity: 0, y: 100, scale: 0.9 },
+        { opacity: 1, y: 0, scale: 1, stagger: 0.1, duration: animationDuration, ease: easing }
+      );
+      sections.forEach((item) => {
+        const innerImg = item.querySelector(".parallax-img");
+        if (innerImg) {
+          gsap14.to(innerImg, {
+            xPercent: 20,
+            ease: "none",
+            scrollTrigger: {
+              trigger: item,
+              containerAnimation: masterScroll,
+              scrub: true
+            }
+          });
+        }
       });
     }, sectionRef);
     return () => ctx.revert();
-  }, [images, waveIntensity, animationDuration, easing]);
-  const handleMouseEnter = (e) => {
-    gsap14.to(e.currentTarget, {
-      scale: 1.05,
-      zIndex: 10,
-      duration: 0.6,
-      ease: "expo.out"
-    });
-    const overlay = e.currentTarget.querySelector(".overlay");
-    gsap14.to(overlay, { opacity: 1, duration: 0.4 });
-  };
-  const handleMouseLeave = (e) => {
-    gsap14.to(e.currentTarget, {
-      scale: 1,
-      zIndex: 1,
-      duration: 0.6,
-      ease: "expo.out"
-    });
-    const overlay = e.currentTarget.querySelector(".overlay");
-    gsap14.to(overlay, { opacity: 0, duration: 0.4 });
-  };
+  }, [images, activeVariant, intensity, animationDuration, easing]);
   const styles = {
     section: {
       position: "relative",
       width: "100%",
       height: "100vh",
       overflow: "hidden",
-      backgroundColor: "#050505",
-      display: "flex",
-      alignItems: "center"
+      backgroundColor: "#050505"
+    },
+    gooeyOverlay: {
+      position: "absolute",
+      width: 0,
+      height: 0
     },
     container: {
       display: "flex",
-      paddingLeft: "10vw",
-      paddingRight: "10vw",
-      gap: "50px",
+      height: "100%",
       alignItems: "center",
-      willChange: "transform"
+      paddingLeft: "15vw",
+      paddingRight: "15vw",
+      gap: activeVariant === "gooey" ? "-20px" : "60px",
+      willChange: "transform",
+      filter: activeVariant === "gooey" ? "url(#gooey-effect)" : "none"
     },
-    imageItem: {
+    imageItem: (customWidth) => ({
       position: "relative",
-      flex: "0 0 45vh",
-      height: "60vh",
-      borderRadius: "24px",
+      flex: `0 0 ${customWidth || itemWidth}`,
+      height: itemHeight,
+      borderRadius: activeVariant === "gooey" ? "100px" : "32px",
       overflow: "hidden",
       cursor: "pointer",
       backgroundColor: "#111",
-      willChange: "transform, skewX",
-      transformStyle: "preserve-3d"
-    },
+      willChange: "transform, skewX, filter",
+      transition: "border-radius 0.6s ease"
+    }),
     image: {
-      width: "120%",
-      // Wider for parallax gap
+      width: "140%",
       height: "100%",
       objectFit: "cover",
-      pointerEvents: "none",
-      transform: "translateX(0)"
+      transform: "translateX(-15%)"
     },
     overlay: {
       position: "absolute",
       inset: 0,
-      background: "linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%)",
+      background: "linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 70%)",
       opacity: 0,
       display: "flex",
       flexDirection: "column",
       justifyContent: "flex-end",
-      padding: "30px",
+      padding: "40px",
       color: "#fff",
       zIndex: 2,
-      pointerEvents: "none"
-    },
-    title: {
-      fontSize: "24px",
-      fontWeight: "800",
-      marginBottom: "8px",
-      fontFamily: '"Inter", sans-serif',
-      textTransform: "uppercase",
-      letterSpacing: "2px"
-    },
-    subtitle: {
-      fontSize: "12px",
-      opacity: 0.6,
-      textTransform: "uppercase",
-      letterSpacing: "4px"
+      pointerEvents: "none",
+      transition: "opacity 0.4s ease"
     },
-    navIndicator: {
+    controls: {
       position: "absolute",
       bottom: "10vh",
       left: "50%",
       transform: "translateX(-50%)",
-      color: "rgba(255,255,255,0.2)",
-      fontSize: "12px",
+      display: "flex",
+      gap: "12px",
+      zIndex: 100,
+      backgroundColor: "rgba(255,255,255,0.05)",
+      padding: "6px",
+      borderRadius: "100px",
+      backdropFilter: "blur(10px)",
+      border: "1px solid rgba(255,255,255,0.1)"
+    },
+    controlBtn: (active) => ({
+      padding: "8px 20px",
+      borderRadius: "100px",
+      fontSize: "11px",
+      fontWeight: "700",
       textTransform: "uppercase",
-      letterSpacing: "5px",
-      zIndex: 10
-    }
+      letterSpacing: "1px",
+      cursor: "pointer",
+      border: "none",
+      backgroundColor: active ? accentColor : "transparent",
+      color: active ? "#fff" : "rgba(255,255,255,0.4)",
+      transition: "all 0.3s ease"
+    })
   };
-  return /* @__PURE__ */ React14.createElement("div", { ref: sectionRef, style: styles.section }, /* @__PURE__ */ React14.createElement("div", { style: styles.navIndicator }, "Scroll To Explore"), /* @__PURE__ */ React14.createElement("div", { ref: containerRef, style: styles.container }, images.map((img, i) => /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React14.createElement("div", { ref: sectionRef, style: styles.section }, /* @__PURE__ */ React14.createElement("svg", { style: styles.gooeyOverlay }, /* @__PURE__ */ React14.createElement("defs", null, /* @__PURE__ */ React14.createElement("filter", { id: "gooey-effect" }, /* @__PURE__ */ React14.createElement("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "15", result: "blur" }), /* @__PURE__ */ React14.createElement("feColorMatrix", { in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 30 -15", result: "goo" }), /* @__PURE__ */ React14.createElement("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })))), /* @__PURE__ */ React14.createElement("div", { style: styles.controls }, ["wave", "gooey", "zoom"].map((v) => /* @__PURE__ */ React14.createElement(
+    "button",
+    {
+      key: v,
+      style: styles.controlBtn(activeVariant === v),
+      onClick: () => setActiveVariant(v)
+    },
+    v
+  ))), /* @__PURE__ */ React14.createElement("div", { ref: containerRef, style: styles.container }, images.map((img, i) => /* @__PURE__ */ React14.createElement(
     "div",
     {
       key: img.id,
       ref: (el) => imageRefs.current[i] = el,
-      style: styles.imageItem,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
+      style: styles.imageItem(img.width),
+      onMouseEnter: (e) => {
+        gsap14.to(e.currentTarget, { scale: 1.05, duration: 0.6, ease: "expo.out" });
+        e.currentTarget.querySelector(".overlay-ui").style.opacity = 1;
+      },
+      onMouseLeave: (e) => {
+        gsap14.to(e.currentTarget, { scale: 1, duration: 0.6, ease: "expo.out" });
+        e.currentTarget.querySelector(".overlay-ui").style.opacity = 0;
+      },
       onClick: () => handleNavigate(img.path)
     },
-    /* @__PURE__ */ React14.createElement("div", { className: "overlay", style: styles.overlay }, /* @__PURE__ */ React14.createElement("span", { style: styles.subtitle }, "Gallery Item 0", i + 1), /* @__PURE__ */ React14.createElement("h3", { style: styles.title }, img.title), /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", color: accentColor } }, "View Project ", /* @__PURE__ */ React14.createElement(FiArrowRight5, null))),
-    /* @__PURE__ */ React14.createElement("img", { src: img.src, alt: img.title, style: styles.image })
+    /* @__PURE__ */ React14.createElement("div", { className: "overlay-ui", style: styles.overlay }, /* @__PURE__ */ React14.createElement("h3", { style: { fontSize: "24px", fontWeight: "900", margin: "0 0 8px 0" } }, img.title), /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", color: accentColor, fontWeight: "700" } }, "Discover ", /* @__PURE__ */ React14.createElement(FiArrowRight5, null))),
+    /* @__PURE__ */ React14.createElement("img", { src: img.src, alt: img.title, className: "parallax-img", style: styles.image })
   ))));
 };
 
@@ -3305,7 +3339,6 @@ var ImageEffectScrolling = ({
 import React15, { useRef as useRef15, useEffect as useEffect15 } from "react";
 import { gsap as gsap15 } from "gsap";
 import { FiStar as FiStar2, FiArrowRight as FiArrowRight6, FiCheck } from "react-icons/fi";
-import { HiQuoteLeft } from "react-icons/hi";
 var Testimonials = ({
   items = [
     {
@@ -3506,7 +3539,21 @@ var Testimonials = ({
       onMouseEnter: (e) => handleCardHover(e, i),
       onMouseLeave: () => handleCardLeave(i)
     },
-    /* @__PURE__ */ React15.createElement("div", { className: "quote-icon", style: styles.quoteIcon }, /* @__PURE__ */ React15.createElement(HiQuoteLeft, null)),
+    /* @__PURE__ */ React15.createElement("div", { className: "quote-icon", style: styles.quoteIcon }, /* @__PURE__ */ React15.createElement(
+      "svg",
+      {
+        width: "32",
+        height: "32",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React15.createElement("path", { d: "M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v3c0 1.25.75 2 2 2h3c0 4-4 6-4 6z" }),
+      /* @__PURE__ */ React15.createElement("path", { d: "M15 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v3c0 1.25.75 2 2 2h3c0 4-4 6-4 6z" })
+    )),
     /* @__PURE__ */ React15.createElement("div", { style: styles.stars }, [...Array(item.rating)].map((_, i2) => /* @__PURE__ */ React15.createElement(FiStar2, { key: i2 }))),
     /* @__PURE__ */ React15.createElement("p", { style: styles.content }, '"', item.content, '"'),
     /* @__PURE__ */ React15.createElement("div", { style: styles.footer }, /* @__PURE__ */ React15.createElement("img", { src: item.avatar, alt: item.name, style: styles.avatar }), /* @__PURE__ */ React15.createElement("div", { style: styles.info }, /* @__PURE__ */ React15.createElement("span", { style: styles.name }, item.name), /* @__PURE__ */ React15.createElement("span", { style: styles.role }, item.role, " @ ", item.company)))
@@ -3753,8 +3800,167 @@ var Footer = ({
     link.label
   ))), /* @__PURE__ */ React16.createElement("div", { ref: (el) => columnRefs.current[2] = el }, /* @__PURE__ */ React16.createElement("div", { style: styles.colTitle }, "Support"), /* @__PURE__ */ React16.createElement("a", { href: "mailto:hello@aura-ui.com", style: styles.link, onMouseEnter: (e) => e.currentTarget.style.opacity = 1, onMouseLeave: (e) => e.currentTarget.style.opacity = 0.5 }, "Help Center"), /* @__PURE__ */ React16.createElement("a", { href: "#", style: styles.link, onMouseEnter: (e) => e.currentTarget.style.opacity = 1, onMouseLeave: (e) => e.currentTarget.style.opacity = 0.5 }, "Changelog"), /* @__PURE__ */ React16.createElement("a", { href: "#", style: styles.link, onMouseEnter: (e) => e.currentTarget.style.opacity = 1, onMouseLeave: (e) => e.currentTarget.style.opacity = 0.5 }, "Terms"), /* @__PURE__ */ React16.createElement("a", { href: "#", style: styles.link, onMouseEnter: (e) => e.currentTarget.style.opacity = 1, onMouseLeave: (e) => e.currentTarget.style.opacity = 0.5 }, "Privacy")), /* @__PURE__ */ React16.createElement("div", { ref: (el) => columnRefs.current[3] = el }, /* @__PURE__ */ React16.createElement("div", { style: styles.colTitle }, "Contact"), /* @__PURE__ */ React16.createElement("div", { style: { ...styles.link, display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React16.createElement(FiMail, null), " hello@aura-ui.com"), /* @__PURE__ */ React16.createElement("div", { style: { ...styles.link, display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React16.createElement(FiMapPin, null), " San Francisco, CA"))), /* @__PURE__ */ React16.createElement("div", { style: styles.bottom }, /* @__PURE__ */ React16.createElement("div", null, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", brandName, " UI Library. All rights reserved."), /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", gap: "20px" } }, /* @__PURE__ */ React16.createElement("span", null, "Version 1.2.0"), /* @__PURE__ */ React16.createElement("span", null, "Open Source"))));
 };
+
+// src/components/Canvas/Canvas.jsx
+import React17, { useRef as useRef17, useEffect as useEffect17, useMemo as useMemo2 } from "react";
+import { gsap as gsap17 } from "gsap";
+var Canvas = ({
+  particleCount = 120,
+  lineColor = "rgba(99, 102, 241, 0.2)",
+  particleColor = "rgba(99, 102, 241, 0.8)",
+  speed = 0.5,
+  interactive = true,
+  parallaxIntensity = 0.05,
+  connectionDistance = 150,
+  animationDuration = 2,
+  easing = "power4.out"
+}) => {
+  const canvasRef = useRef17(null);
+  const containerRef = useRef17(null);
+  const mouseRef = useRef17({ x: 0, y: 0, active: false });
+  useEffect17(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    let animationFrameId;
+    let particles = [];
+    const resize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+    class Particle {
+      constructor() {
+        this.reset();
+      }
+      reset() {
+        this.x = (Math.random() - 0.5) * canvas.width * 2;
+        this.y = (Math.random() - 0.5) * canvas.height * 2;
+        this.z = Math.random() * canvas.width;
+        this.vx = (Math.random() - 0.5) * speed;
+        this.vy = (Math.random() - 0.5) * speed;
+        this.vz = (Math.random() - 0.5) * speed;
+        this.size = 1.5;
+      }
+      update() {
+        this.x += this.vx;
+        this.y += this.vy;
+        this.z += this.vz;
+        if (mouseRef.current.active) {
+          const dx = mouseRef.current.x - canvas.width / 2 - this.x;
+          const dy = mouseRef.current.y - canvas.height / 2 - this.y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          if (dist < 300) {
+            this.x += dx * 0.01;
+            this.y += dy * 0.01;
+          }
+        }
+        if (this.z <= 0) this.z = canvas.width;
+        if (this.z > canvas.width) this.z = 0;
+        this.focalLength = canvas.width * 0.8;
+        this.scale = this.focalLength / (this.focalLength + this.z);
+        this.px = this.x * this.scale + canvas.width / 2;
+        this.py = this.y * this.scale + canvas.height / 2;
+      }
+      draw() {
+        ctx.beginPath();
+        ctx.arc(this.px, this.py, this.size * this.scale, 0, Math.PI * 2);
+        ctx.fillStyle = particleColor;
+        ctx.fill();
+      }
+    }
+    const init = () => {
+      particles = Array.from({ length: particleCount }, () => new Particle());
+    };
+    const drawLines = () => {
+      ctx.lineWidth = 0.5;
+      ctx.strokeStyle = lineColor;
+      for (let i = 0; i < particles.length; i++) {
+        for (let j = i + 1; j < particles.length; j++) {
+          const dx = particles[i].px - particles[j].px;
+          const dy = particles[i].py - particles[j].py;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          if (dist < connectionDistance) {
+            ctx.beginPath();
+            ctx.moveTo(particles[i].px, particles[i].py);
+            ctx.lineTo(particles[j].px, particles[j].py);
+            ctx.stroke();
+          }
+        }
+      }
+    };
+    const render = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      if (interactive) {
+        const mx = (mouseRef.current.x - window.innerWidth / 2) * parallaxIntensity;
+        const my = (mouseRef.current.y - window.innerHeight / 2) * parallaxIntensity;
+        gsap17.to(canvas, { x: mx, y: my, duration: 1, ease: "power2.out" });
+      }
+      particles.forEach((p) => {
+        p.update();
+        p.draw();
+      });
+      drawLines();
+      animationFrameId = requestAnimationFrame(render);
+    };
+    resize();
+    init();
+    render();
+    window.addEventListener("resize", resize);
+    gsap17.fromTo(
+      containerRef.current,
+      { opacity: 0, scale: 1.1 },
+      { opacity: 1, scale: 1, duration: animationDuration, ease: easing }
+    );
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      window.removeEventListener("resize", resize);
+    };
+  }, [particleCount, speed, particleColor, lineColor, connectionDistance, interactive, parallaxIntensity, animationDuration, easing]);
+  const handleMouseMove = (e) => {
+    mouseRef.current = { x: e.clientX, y: e.clientY, active: true };
+  };
+  const handleMouseLeave = () => {
+    mouseRef.current.active = false;
+  };
+  const styles = {
+    container: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: -1,
+      backgroundColor: "#050505",
+      overflow: "hidden",
+      pointerEvents: "none",
+      willChange: "transform, opacity"
+    },
+    canvas: {
+      display: "block",
+      width: "100%",
+      height: "100%"
+    },
+    overlay: {
+      position: "absolute",
+      inset: 0,
+      background: "radial-gradient(circle at center, transparent 0%, rgba(5,5,5,0.4) 100%)",
+      pointerEvents: "none"
+    }
+  };
+  return /* @__PURE__ */ React17.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style: styles.container,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave
+    },
+    /* @__PURE__ */ React17.createElement("canvas", { ref: canvasRef, style: styles.canvas }),
+    /* @__PURE__ */ React17.createElement("div", { style: styles.overlay })
+  );
+};
 export {
   Button,
+  Canvas,
   Carousel,
   Footer,
   Grid,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aura-ui-library",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "A modern and customizable UI library for React applications.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",