aura-ui-library 1.0.35 → 1.0.36

package/dist/index.js

@@ -33,6 +33,7 @@ __export(index_exports, {
   AuraRegister: () => AuraRegister,
   Button: () => Button,
   Canvas: () => Canvas,
+  CanvasReveal: () => CanvasReveal,
   Carousel: () => Carousel,
   Footer: () => Footer,
   Grid: () => Grid,
@@ -49,6 +50,7 @@ __export(index_exports, {
   SideBar: () => SideBar,
   Skills: () => Skills,
   Spotlight: () => Spotlight,
+  SvgMaskEffect: () => SvgMaskEffect,
   Testimonials: () => Testimonials,
   TextImage: () => TextImage,
   TextWriting: () => TextWriting,
@@ -6697,12 +6699,316 @@ var ParallaxHero = ({
     )))
   );
 };
+
+// src/components/Marquee/SvgMask.jsx
+var import_react26 = __toESM(require("react"));
+var import_gsap26 = require("gsap");
+var SvgMaskEffect = ({
+  revealContent = /* @__PURE__ */ import_react26.default.createElement("div", { style: { fontSize: "clamp(3rem, 6vw, 6rem)", fontWeight: 900, color: "#6366f1", lineHeight: 1.1 } }, "AURA UI SHIPS ", /* @__PURE__ */ import_react26.default.createElement("br", null), " EXPERIENCES."),
+  baseContent = /* @__PURE__ */ import_react26.default.createElement("div", { style: { fontSize: "clamp(3rem, 6vw, 6rem)", fontWeight: 900, color: "#cbd5e1", lineHeight: 1.1 } }, "AURA UI BUILDS ", /* @__PURE__ */ import_react26.default.createElement("br", null), " INTERFACES."),
+  maskSize = 250,
+  theme = "dark",
+  // "dark" | "light"
+  style = {}
+}) => {
+  const containerRef = (0, import_react26.useRef)(null);
+  const circleRef = (0, import_react26.useRef)(null);
+  const [isHovered, setIsHovered] = (0, import_react26.useState)(false);
+  const isLight2 = theme === "light";
+  const bgMain = isLight2 ? "#ffffff" : "#020617";
+  const maskId = (0, import_react26.useRef)(`svg-mask-${Math.random().toString(36).substr(2, 9)}`).current;
+  (0, import_react26.useEffect)(() => {
+    const ctx = import_gsap26.gsap.context(() => {
+      import_gsap26.gsap.from(containerRef.current, {
+        opacity: 0,
+        y: 40,
+        duration: 1.2,
+        ease: "power3.out"
+      });
+    }, containerRef);
+    return () => ctx.revert();
+  }, []);
+  const handleMouseMove = (e) => {
+    if (!containerRef.current || !circleRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    import_gsap26.gsap.to(circleRef.current, {
+      attr: { cx: x, cy: y },
+      duration: 0.3,
+      ease: "power2.out"
+    });
+  };
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    import_gsap26.gsap.to(circleRef.current, {
+      attr: { r: maskSize },
+      duration: 0.4,
+      ease: "back.out(1.5)"
+    });
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    import_gsap26.gsap.to(circleRef.current, {
+      attr: { r: 0 },
+      duration: 0.4,
+      ease: "power3.inOut"
+    });
+  };
+  const styles = {
+    container: {
+      position: "relative",
+      width: "100%",
+      minHeight: "50vh",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: bgMain,
+      overflow: "hidden",
+      cursor: "none",
+      // Hide default cursor since the mask acts as a cursor
+      fontFamily: '"Inter", -apple-system, sans-serif',
+      padding: "40px",
+      boxSizing: "border-box",
+      ...style
+    },
+    layer: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+      pointerEvents: "none"
+      // Let container handle all mouse events
+    },
+    baseLayer: {
+      zIndex: 1
+    },
+    revealLayer: {
+      zIndex: 2,
+      // Apply the SVG mask
+      WebkitMask: `url(#${maskId})`,
+      mask: `url(#${maskId})`
+    }
+  };
+  return /* @__PURE__ */ import_react26.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style: styles.container,
+      onMouseMove: handleMouseMove,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    },
+    /* @__PURE__ */ import_react26.default.createElement("svg", { style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" } }, /* @__PURE__ */ import_react26.default.createElement("defs", null, /* @__PURE__ */ import_react26.default.createElement("mask", { id: maskId }, /* @__PURE__ */ import_react26.default.createElement("rect", { width: "100%", height: "100%", fill: "black" }), /* @__PURE__ */ import_react26.default.createElement(
+      "circle",
+      {
+        ref: circleRef,
+        cx: "50%",
+        cy: "50%",
+        r: "0",
+        fill: "white"
+      }
+    )))),
+    /* @__PURE__ */ import_react26.default.createElement("div", { style: { ...styles.layer, ...styles.baseLayer } }, baseContent),
+    /* @__PURE__ */ import_react26.default.createElement("div", { style: { ...styles.layer, ...styles.revealLayer } }, revealContent)
+  );
+};
+
+// src/components/Canvas/CanvasReveal.jsx
+var import_react27 = __toESM(require("react"));
+var import_gsap27 = require("gsap");
+var import_fi23 = require("react-icons/fi");
+var CanvasReveal = ({
+  children,
+  dotColor = "#6366f1",
+  dotSize = 1.5,
+  dotSpacing = 24,
+  hoverRadius = 160,
+  hoverMultiplier = 4,
+  // How much dots expand on hover
+  theme = "dark",
+  // "dark" | "light"
+  style = {}
+}) => {
+  const containerRef = (0, import_react27.useRef)(null);
+  const canvasRef = (0, import_react27.useRef)(null);
+  const isLight2 = theme === "light";
+  const bgMain = isLight2 ? "#f8fafc" : "#020617";
+  const borderCol = isLight2 ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
+  const getRgb = (hex) => {
+    let r = 0, g = 0, b = 0;
+    if (hex.length === 4) {
+      r = parseInt(hex[1] + hex[1], 16);
+      g = parseInt(hex[2] + hex[2], 16);
+      b = parseInt(hex[3] + hex[3], 16);
+    } else if (hex.length === 7) {
+      r = parseInt(hex.substring(1, 3), 16);
+      g = parseInt(hex.substring(3, 5), 16);
+      b = parseInt(hex.substring(5, 7), 16);
+    }
+    return `${r}, ${g}, ${b}`;
+  };
+  (0, import_react27.useEffect)(() => {
+    const ctx = import_gsap27.gsap.context(() => {
+      import_gsap27.gsap.from(containerRef.current, {
+        opacity: 0,
+        scale: 0.95,
+        duration: 1.2,
+        ease: "power3.out"
+      });
+    }, containerRef);
+    return () => ctx.revert();
+  }, []);
+  (0, import_react27.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    let animationFrameId;
+    let width = 0;
+    let height = 0;
+    const rgbColor = getRgb(dotColor);
+    const mouse = { x: -1e3, y: -1e3 };
+    const targetMouse = { x: -1e3, y: -1e3 };
+    const resize = () => {
+      const parent = canvas.parentElement;
+      width = parent.clientWidth;
+      height = parent.clientHeight;
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      ctx.scale(dpr, dpr);
+    };
+    const handleMouseMove = (e) => {
+      const rect = canvas.getBoundingClientRect();
+      targetMouse.x = e.clientX - rect.left;
+      targetMouse.y = e.clientY - rect.top;
+    };
+    const handleMouseLeave = () => {
+      targetMouse.x = -1e3;
+      targetMouse.y = -1e3;
+    };
+    window.addEventListener("resize", resize);
+    canvas.parentElement.addEventListener("mousemove", handleMouseMove);
+    canvas.parentElement.addEventListener("mouseleave", handleMouseLeave);
+    resize();
+    const render = () => {
+      mouse.x += (targetMouse.x - mouse.x) * 0.15;
+      mouse.y += (targetMouse.y - mouse.y) * 0.15;
+      ctx.clearRect(0, 0, width, height);
+      for (let x = 0; x < width; x += dotSpacing) {
+        for (let y = 0; y < height; y += dotSpacing) {
+          const dx = x - mouse.x;
+          const dy = y - mouse.y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          let radius = dotSize;
+          let opacity = 0.2;
+          if (dist < hoverRadius) {
+            const intensity = 1 - dist / hoverRadius;
+            radius = dotSize + intensity * dotSize * hoverMultiplier;
+            opacity = 0.2 + intensity * 0.8;
+          }
+          ctx.beginPath();
+          ctx.arc(x, y, radius, 0, Math.PI * 2);
+          ctx.fillStyle = `rgba(${rgbColor}, ${opacity})`;
+          ctx.fill();
+        }
+      }
+      animationFrameId = requestAnimationFrame(render);
+    };
+    render();
+    return () => {
+      var _a, _b;
+      window.removeEventListener("resize", resize);
+      (_a = canvas.parentElement) == null ? void 0 : _a.removeEventListener("mousemove", handleMouseMove);
+      (_b = canvas.parentElement) == null ? void 0 : _b.removeEventListener("mouseleave", handleMouseLeave);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [dotColor, dotSize, dotSpacing, hoverRadius, hoverMultiplier]);
+  const styles = {
+    container: {
+      position: "relative",
+      width: "100%",
+      minHeight: "400px",
+      backgroundColor: bgMain,
+      borderRadius: "24px",
+      border: `1px solid ${borderCol}`,
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontFamily: '"Inter", -apple-system, sans-serif',
+      boxShadow: isLight2 ? "0 20px 40px rgba(0,0,0,0.05)" : "0 20px 40px rgba(0,0,0,0.4)",
+      cursor: "crosshair",
+      ...style
+    },
+    canvas: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      // Let container capture hover events perfectly
+      zIndex: 1
+    },
+    contentOverlay: {
+      position: "relative",
+      zIndex: 2,
+      pointerEvents: "none",
+      // Hovering over text continues to trigger canvas beneath
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    defaultContent: {
+      padding: "40px",
+      textAlign: "center",
+      color: isLight2 ? "#0f172a" : "#ffffff",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "16px"
+    },
+    iconBlock: {
+      width: "60px",
+      height: "60px",
+      borderRadius: "16px",
+      backgroundColor: isLight2 ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: dotColor,
+      fontSize: "24px",
+      boxShadow: isLight2 ? "0 10px 20px rgba(0,0,0,0.02)" : "0 10px 20px rgba(0,0,0,0.2)"
+    },
+    headline: {
+      margin: 0,
+      fontSize: "32px",
+      fontWeight: "800",
+      letterSpacing: "-0.02em"
+    },
+    subheadline: {
+      margin: 0,
+      fontSize: "16px",
+      fontWeight: "500",
+      color: isLight2 ? "rgba(15,23,42,0.6)" : "rgba(255,255,255,0.6)"
+    }
+  };
+  return /* @__PURE__ */ import_react27.default.createElement("div", { ref: containerRef, style: styles.container }, /* @__PURE__ */ import_react27.default.createElement("canvas", { ref: canvasRef, style: styles.canvas }), /* @__PURE__ */ import_react27.default.createElement("div", { style: styles.contentOverlay }, children || /* @__PURE__ */ import_react27.default.createElement("div", { style: styles.defaultContent }, /* @__PURE__ */ import_react27.default.createElement("div", { style: styles.iconBlock }, /* @__PURE__ */ import_react27.default.createElement(import_fi23.FiCode, null)), /* @__PURE__ */ import_react27.default.createElement("h2", { style: styles.headline }, "Canvas Reveal"), /* @__PURE__ */ import_react27.default.createElement("p", { style: styles.subheadline }, "Hover your mouse to interact dynamically."))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AuraLogin,
   AuraRegister,
   Button,
   Canvas,
+  CanvasReveal,
   Carousel,
   Footer,
   Grid,
@@ -6719,6 +7025,7 @@ var ParallaxHero = ({
   SideBar,
   Skills,
   Spotlight,
+  SvgMaskEffect,
   Testimonials,
   TextImage,
   TextWriting,

package/dist/index.mjs

@@ -6708,11 +6708,315 @@ var ParallaxHero = ({
     )))
   );
 };
+
+// src/components/Marquee/SvgMask.jsx
+import React26, { useRef as useRef26, useEffect as useEffect26, useState as useState13 } from "react";
+import { gsap as gsap26 } from "gsap";
+var SvgMaskEffect = ({
+  revealContent = /* @__PURE__ */ React26.createElement("div", { style: { fontSize: "clamp(3rem, 6vw, 6rem)", fontWeight: 900, color: "#6366f1", lineHeight: 1.1 } }, "AURA UI SHIPS ", /* @__PURE__ */ React26.createElement("br", null), " EXPERIENCES."),
+  baseContent = /* @__PURE__ */ React26.createElement("div", { style: { fontSize: "clamp(3rem, 6vw, 6rem)", fontWeight: 900, color: "#cbd5e1", lineHeight: 1.1 } }, "AURA UI BUILDS ", /* @__PURE__ */ React26.createElement("br", null), " INTERFACES."),
+  maskSize = 250,
+  theme = "dark",
+  // "dark" | "light"
+  style = {}
+}) => {
+  const containerRef = useRef26(null);
+  const circleRef = useRef26(null);
+  const [isHovered, setIsHovered] = useState13(false);
+  const isLight2 = theme === "light";
+  const bgMain = isLight2 ? "#ffffff" : "#020617";
+  const maskId = useRef26(`svg-mask-${Math.random().toString(36).substr(2, 9)}`).current;
+  useEffect26(() => {
+    const ctx = gsap26.context(() => {
+      gsap26.from(containerRef.current, {
+        opacity: 0,
+        y: 40,
+        duration: 1.2,
+        ease: "power3.out"
+      });
+    }, containerRef);
+    return () => ctx.revert();
+  }, []);
+  const handleMouseMove = (e) => {
+    if (!containerRef.current || !circleRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    gsap26.to(circleRef.current, {
+      attr: { cx: x, cy: y },
+      duration: 0.3,
+      ease: "power2.out"
+    });
+  };
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    gsap26.to(circleRef.current, {
+      attr: { r: maskSize },
+      duration: 0.4,
+      ease: "back.out(1.5)"
+    });
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+    gsap26.to(circleRef.current, {
+      attr: { r: 0 },
+      duration: 0.4,
+      ease: "power3.inOut"
+    });
+  };
+  const styles = {
+    container: {
+      position: "relative",
+      width: "100%",
+      minHeight: "50vh",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: bgMain,
+      overflow: "hidden",
+      cursor: "none",
+      // Hide default cursor since the mask acts as a cursor
+      fontFamily: '"Inter", -apple-system, sans-serif',
+      padding: "40px",
+      boxSizing: "border-box",
+      ...style
+    },
+    layer: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+      pointerEvents: "none"
+      // Let container handle all mouse events
+    },
+    baseLayer: {
+      zIndex: 1
+    },
+    revealLayer: {
+      zIndex: 2,
+      // Apply the SVG mask
+      WebkitMask: `url(#${maskId})`,
+      mask: `url(#${maskId})`
+    }
+  };
+  return /* @__PURE__ */ React26.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style: styles.container,
+      onMouseMove: handleMouseMove,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    },
+    /* @__PURE__ */ React26.createElement("svg", { style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" } }, /* @__PURE__ */ React26.createElement("defs", null, /* @__PURE__ */ React26.createElement("mask", { id: maskId }, /* @__PURE__ */ React26.createElement("rect", { width: "100%", height: "100%", fill: "black" }), /* @__PURE__ */ React26.createElement(
+      "circle",
+      {
+        ref: circleRef,
+        cx: "50%",
+        cy: "50%",
+        r: "0",
+        fill: "white"
+      }
+    )))),
+    /* @__PURE__ */ React26.createElement("div", { style: { ...styles.layer, ...styles.baseLayer } }, baseContent),
+    /* @__PURE__ */ React26.createElement("div", { style: { ...styles.layer, ...styles.revealLayer } }, revealContent)
+  );
+};
+
+// src/components/Canvas/CanvasReveal.jsx
+import React27, { useRef as useRef27, useEffect as useEffect27 } from "react";
+import { gsap as gsap27 } from "gsap";
+import { FiCode } from "react-icons/fi";
+var CanvasReveal = ({
+  children,
+  dotColor = "#6366f1",
+  dotSize = 1.5,
+  dotSpacing = 24,
+  hoverRadius = 160,
+  hoverMultiplier = 4,
+  // How much dots expand on hover
+  theme = "dark",
+  // "dark" | "light"
+  style = {}
+}) => {
+  const containerRef = useRef27(null);
+  const canvasRef = useRef27(null);
+  const isLight2 = theme === "light";
+  const bgMain = isLight2 ? "#f8fafc" : "#020617";
+  const borderCol = isLight2 ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
+  const getRgb = (hex) => {
+    let r = 0, g = 0, b = 0;
+    if (hex.length === 4) {
+      r = parseInt(hex[1] + hex[1], 16);
+      g = parseInt(hex[2] + hex[2], 16);
+      b = parseInt(hex[3] + hex[3], 16);
+    } else if (hex.length === 7) {
+      r = parseInt(hex.substring(1, 3), 16);
+      g = parseInt(hex.substring(3, 5), 16);
+      b = parseInt(hex.substring(5, 7), 16);
+    }
+    return `${r}, ${g}, ${b}`;
+  };
+  useEffect27(() => {
+    const ctx = gsap27.context(() => {
+      gsap27.from(containerRef.current, {
+        opacity: 0,
+        scale: 0.95,
+        duration: 1.2,
+        ease: "power3.out"
+      });
+    }, containerRef);
+    return () => ctx.revert();
+  }, []);
+  useEffect27(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    let animationFrameId;
+    let width = 0;
+    let height = 0;
+    const rgbColor = getRgb(dotColor);
+    const mouse = { x: -1e3, y: -1e3 };
+    const targetMouse = { x: -1e3, y: -1e3 };
+    const resize = () => {
+      const parent = canvas.parentElement;
+      width = parent.clientWidth;
+      height = parent.clientHeight;
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      ctx.scale(dpr, dpr);
+    };
+    const handleMouseMove = (e) => {
+      const rect = canvas.getBoundingClientRect();
+      targetMouse.x = e.clientX - rect.left;
+      targetMouse.y = e.clientY - rect.top;
+    };
+    const handleMouseLeave = () => {
+      targetMouse.x = -1e3;
+      targetMouse.y = -1e3;
+    };
+    window.addEventListener("resize", resize);
+    canvas.parentElement.addEventListener("mousemove", handleMouseMove);
+    canvas.parentElement.addEventListener("mouseleave", handleMouseLeave);
+    resize();
+    const render = () => {
+      mouse.x += (targetMouse.x - mouse.x) * 0.15;
+      mouse.y += (targetMouse.y - mouse.y) * 0.15;
+      ctx.clearRect(0, 0, width, height);
+      for (let x = 0; x < width; x += dotSpacing) {
+        for (let y = 0; y < height; y += dotSpacing) {
+          const dx = x - mouse.x;
+          const dy = y - mouse.y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          let radius = dotSize;
+          let opacity = 0.2;
+          if (dist < hoverRadius) {
+            const intensity = 1 - dist / hoverRadius;
+            radius = dotSize + intensity * dotSize * hoverMultiplier;
+            opacity = 0.2 + intensity * 0.8;
+          }
+          ctx.beginPath();
+          ctx.arc(x, y, radius, 0, Math.PI * 2);
+          ctx.fillStyle = `rgba(${rgbColor}, ${opacity})`;
+          ctx.fill();
+        }
+      }
+      animationFrameId = requestAnimationFrame(render);
+    };
+    render();
+    return () => {
+      var _a, _b;
+      window.removeEventListener("resize", resize);
+      (_a = canvas.parentElement) == null ? void 0 : _a.removeEventListener("mousemove", handleMouseMove);
+      (_b = canvas.parentElement) == null ? void 0 : _b.removeEventListener("mouseleave", handleMouseLeave);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [dotColor, dotSize, dotSpacing, hoverRadius, hoverMultiplier]);
+  const styles = {
+    container: {
+      position: "relative",
+      width: "100%",
+      minHeight: "400px",
+      backgroundColor: bgMain,
+      borderRadius: "24px",
+      border: `1px solid ${borderCol}`,
+      overflow: "hidden",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontFamily: '"Inter", -apple-system, sans-serif',
+      boxShadow: isLight2 ? "0 20px 40px rgba(0,0,0,0.05)" : "0 20px 40px rgba(0,0,0,0.4)",
+      cursor: "crosshair",
+      ...style
+    },
+    canvas: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      // Let container capture hover events perfectly
+      zIndex: 1
+    },
+    contentOverlay: {
+      position: "relative",
+      zIndex: 2,
+      pointerEvents: "none",
+      // Hovering over text continues to trigger canvas beneath
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    defaultContent: {
+      padding: "40px",
+      textAlign: "center",
+      color: isLight2 ? "#0f172a" : "#ffffff",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "16px"
+    },
+    iconBlock: {
+      width: "60px",
+      height: "60px",
+      borderRadius: "16px",
+      backgroundColor: isLight2 ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: dotColor,
+      fontSize: "24px",
+      boxShadow: isLight2 ? "0 10px 20px rgba(0,0,0,0.02)" : "0 10px 20px rgba(0,0,0,0.2)"
+    },
+    headline: {
+      margin: 0,
+      fontSize: "32px",
+      fontWeight: "800",
+      letterSpacing: "-0.02em"
+    },
+    subheadline: {
+      margin: 0,
+      fontSize: "16px",
+      fontWeight: "500",
+      color: isLight2 ? "rgba(15,23,42,0.6)" : "rgba(255,255,255,0.6)"
+    }
+  };
+  return /* @__PURE__ */ React27.createElement("div", { ref: containerRef, style: styles.container }, /* @__PURE__ */ React27.createElement("canvas", { ref: canvasRef, style: styles.canvas }), /* @__PURE__ */ React27.createElement("div", { style: styles.contentOverlay }, children || /* @__PURE__ */ React27.createElement("div", { style: styles.defaultContent }, /* @__PURE__ */ React27.createElement("div", { style: styles.iconBlock }, /* @__PURE__ */ React27.createElement(FiCode, null)), /* @__PURE__ */ React27.createElement("h2", { style: styles.headline }, "Canvas Reveal"), /* @__PURE__ */ React27.createElement("p", { style: styles.subheadline }, "Hover your mouse to interact dynamically."))));
+};
 export {
   AuraLogin,
   AuraRegister,
   Button,
   Canvas,
+  CanvasReveal,
   Carousel,
   Footer,
   Grid,
@@ -6729,6 +7033,7 @@ export {
   SideBar,
   Skills,
   Spotlight,
+  SvgMaskEffect,
   Testimonials,
   TextImage,
   TextWriting,

package/package.json

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