@djangocfg/ui-nextjs 2.1.100 → 2.1.102

package/dist/animations.cjs

@@ -0,0 +1,880 @@
+'use strict';
+
+var react = require('react');
+var lib = require('@djangocfg/ui-core/lib');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var variantMap = {
+  "gradient-mesh": "mesh-gradient",
+  "dot-matrix": "geometric-flow",
+  "grid-lines": "geometric-flow",
+  "aurora": "aurora-borealis",
+  "particles": "floating-orbs",
+  "waves": "liquid-gradient"
+};
+var AnimatedBackground = /* @__PURE__ */ __name(({
+  variant = "mesh-gradient",
+  className,
+  intensity = "medium",
+  colorScheme = "vibrant"
+}) => {
+  const resolvedVariant = variantMap[variant] || variant;
+  const intensityConfig = react.useMemo(() => ({
+    subtle: { opacity: 0.15, blur: "blur-3xl", scale: 0.8 },
+    medium: { opacity: 0.25, blur: "blur-2xl", scale: 1 },
+    strong: { opacity: 0.4, blur: "blur-xl", scale: 1.2 }
+  })[intensity], [intensity]);
+  const colors = react.useMemo(() => {
+    const palettes = {
+      vibrant: [
+        "hsl(var(--chart-1))",
+        // Blue
+        "hsl(var(--chart-2))",
+        // Green
+        "hsl(var(--chart-3))",
+        // Purple
+        "hsl(var(--chart-4))",
+        // Orange
+        "hsl(var(--chart-5))"
+        // Red
+      ],
+      monochrome: [
+        "hsl(var(--primary))",
+        "hsl(var(--primary) / 0.8)",
+        "hsl(var(--primary) / 0.6)"
+      ],
+      cool: [
+        "hsl(var(--chart-1))",
+        // Blue
+        "hsl(var(--chart-3))",
+        // Purple
+        "hsl(210 100% 50%)",
+        // Bright blue
+        "hsl(260 100% 60%)"
+        // Violet
+      ],
+      warm: [
+        "hsl(var(--chart-4))",
+        // Orange
+        "hsl(var(--chart-5))",
+        // Red
+        "hsl(35 100% 55%)",
+        // Gold
+        "hsl(350 100% 60%)"
+        // Rose
+      ]
+    };
+    return palettes[colorScheme];
+  }, [colorScheme]);
+  if (resolvedVariant === "none") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: lib.cn("absolute overflow-hidden pointer-events-none", className),
+      style: { inset: 0, width: "100%", height: "100%" },
+      children: [
+        resolvedVariant === "aurora-borealis" && /* @__PURE__ */ jsxRuntime.jsx(AuroraBorealis, { colors, intensity: intensityConfig }),
+        resolvedVariant === "mesh-gradient" && /* @__PURE__ */ jsxRuntime.jsx(MeshGradient, { colors, intensity: intensityConfig }),
+        resolvedVariant === "floating-orbs" && /* @__PURE__ */ jsxRuntime.jsx(FloatingOrbs, { colors, intensity: intensityConfig }),
+        resolvedVariant === "geometric-flow" && /* @__PURE__ */ jsxRuntime.jsx(GeometricFlow, { colors, intensity: intensityConfig }),
+        resolvedVariant === "liquid-gradient" && /* @__PURE__ */ jsxRuntime.jsx(LiquidGradient, { colors, intensity: intensityConfig }),
+        resolvedVariant === "spotlight" && /* @__PURE__ */ jsxRuntime.jsx(Spotlight, { colors, intensity: intensityConfig }),
+        /* @__PURE__ */ jsxRuntime.jsx(AnimationStyles, {})
+      ]
+    }
+  );
+}, "AnimatedBackground");
+var AuroraBorealis = /* @__PURE__ */ __name(({ colors, intensity }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0",
+      style: {
+        background: `linear-gradient(135deg, ${colors[0]} 0%, transparent 50%, ${colors[1]} 100%)`,
+        opacity: intensity.opacity * 0.3
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute inset-0", intensity.blur),
+      style: {
+        background: `linear-gradient(110deg,
+          transparent 0%,
+          ${colors[0]} 20%,
+          ${colors[2] || colors[0]} 35%,
+          ${colors[1]} 50%,
+          ${colors[3] || colors[1]} 65%,
+          ${colors[0]} 80%,
+          transparent 100%
+        )`,
+        opacity: intensity.opacity,
+        animation: "aurora-shift 15s ease-in-out infinite",
+        transform: `translateY(-30%) scaleY(${intensity.scale})`
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute inset-0", intensity.blur),
+      style: {
+        background: `linear-gradient(70deg,
+          transparent 0%,
+          ${colors[1]} 25%,
+          ${colors[2] || colors[0]} 50%,
+          ${colors[0]} 75%,
+          transparent 100%
+        )`,
+        opacity: intensity.opacity * 0.7,
+        animation: "aurora-shift 20s ease-in-out infinite reverse",
+        animationDelay: "-5s",
+        transform: `translateY(-20%) scaleY(${intensity.scale * 0.8})`
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0",
+      style: {
+        background: `radial-gradient(ellipse 100% 50% at 50% 0%,
+          ${colors[2] || colors[0]} 0%,
+          transparent 70%
+        )`,
+        opacity: intensity.opacity * 0.4,
+        animation: "aurora-shimmer 8s ease-in-out infinite"
+      }
+    }
+  )
+] }), "AuroraBorealis");
+var MeshGradient = /* @__PURE__ */ __name(({ colors, intensity }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute rounded-full", intensity.blur),
+      style: {
+        width: "60%",
+        height: "60%",
+        top: "-10%",
+        right: "-10%",
+        background: `radial-gradient(circle, ${colors[0]} 0%, transparent 70%)`,
+        opacity: intensity.opacity,
+        animation: "mesh-float-1 25s ease-in-out infinite",
+        transform: `scale(${intensity.scale})`
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute rounded-full", intensity.blur),
+      style: {
+        width: "50%",
+        height: "50%",
+        bottom: "-5%",
+        left: "-5%",
+        background: `radial-gradient(circle, ${colors[1]} 0%, transparent 70%)`,
+        opacity: intensity.opacity,
+        animation: "mesh-float-2 30s ease-in-out infinite",
+        transform: `scale(${intensity.scale})`
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute rounded-full", intensity.blur),
+      style: {
+        width: "40%",
+        height: "40%",
+        top: "30%",
+        left: "25%",
+        background: `radial-gradient(circle, ${colors[2] || colors[0]} 0%, transparent 70%)`,
+        opacity: intensity.opacity * 0.8,
+        animation: "mesh-float-3 20s ease-in-out infinite",
+        transform: `scale(${intensity.scale})`
+      }
+    }
+  ),
+  colors[3] && /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute rounded-full", intensity.blur),
+      style: {
+        width: "35%",
+        height: "35%",
+        bottom: "20%",
+        right: "15%",
+        background: `radial-gradient(circle, ${colors[3]} 0%, transparent 70%)`,
+        opacity: intensity.opacity * 0.6,
+        animation: "mesh-float-4 22s ease-in-out infinite",
+        transform: `scale(${intensity.scale})`
+      }
+    }
+  )
+] }), "MeshGradient");
+var FloatingOrbs = /* @__PURE__ */ __name(({ colors, intensity }) => {
+  const orbs = react.useMemo(() => {
+    return Array.from({ length: 12 }).map((_, i) => ({
+      id: i,
+      size: 60 + i % 4 * 40,
+      x: i * 23 % 100,
+      y: i * 31 % 100,
+      color: colors[i % colors.length],
+      duration: 15 + i % 5 * 5,
+      delay: i * 1.5
+    }));
+  }, [colors]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: orbs.map((orb) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute rounded-full", intensity.blur),
+      style: {
+        width: `${orb.size * intensity.scale}px`,
+        height: `${orb.size * intensity.scale}px`,
+        left: `${orb.x}%`,
+        top: `${orb.y}%`,
+        background: `radial-gradient(circle at 30% 30%, ${orb.color}, transparent 70%)`,
+        opacity: intensity.opacity * (0.5 + orb.id % 3 * 0.2),
+        animation: `orb-float-${orb.id % 4 + 1} ${orb.duration}s ease-in-out infinite`,
+        animationDelay: `${orb.delay}s`
+      }
+    },
+    orb.id
+  )) });
+}, "FloatingOrbs");
+var GeometricFlow = /* @__PURE__ */ __name(({ colors, intensity }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0",
+      style: {
+        background: `linear-gradient(135deg,
+          ${colors[0]} 0%,
+          transparent 30%,
+          transparent 70%,
+          ${colors[1]} 100%
+        )`,
+        opacity: intensity.opacity * 0.3
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0",
+      style: {
+        backgroundImage: `
+          linear-gradient(${colors[0]}20 1px, transparent 1px),
+          linear-gradient(90deg, ${colors[0]}20 1px, transparent 1px)
+        `,
+        backgroundSize: "60px 60px",
+        animation: "grid-drift 30s linear infinite",
+        opacity: intensity.opacity
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0",
+      style: {
+        backgroundImage: `repeating-linear-gradient(
+          45deg,
+          transparent,
+          transparent 80px,
+          ${colors[2] || colors[0]}10 80px,
+          ${colors[2] || colors[0]}10 82px
+        )`,
+        animation: "diagonal-shift 20s linear infinite",
+        opacity: intensity.opacity
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute rounded-full", intensity.blur),
+      style: {
+        width: "40%",
+        height: "40%",
+        top: "20%",
+        left: "50%",
+        transform: "translateX(-50%)",
+        background: `radial-gradient(circle, ${colors[0]} 0%, transparent 70%)`,
+        opacity: intensity.opacity * 0.5,
+        animation: "pulse-glow 8s ease-in-out infinite"
+      }
+    }
+  )
+] }), "GeometricFlow");
+var LiquidGradient = /* @__PURE__ */ __name(({ colors, intensity }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0",
+      style: {
+        background: `linear-gradient(180deg,
+          transparent 0%,
+          ${colors[0]}15 30%,
+          ${colors[1]}20 50%,
+          ${colors[2] || colors[0]}15 70%,
+          transparent 100%
+        )`,
+        opacity: intensity.opacity
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute", intensity.blur),
+      style: {
+        width: "120%",
+        height: "50%",
+        bottom: "-10%",
+        left: "-10%",
+        background: `linear-gradient(90deg,
+          ${colors[0]} 0%,
+          ${colors[1]} 33%,
+          ${colors[2] || colors[0]} 66%,
+          ${colors[0]} 100%
+        )`,
+        opacity: intensity.opacity,
+        borderRadius: "50% 50% 0 0",
+        animation: "liquid-flow-1 12s ease-in-out infinite",
+        transform: `scaleY(${intensity.scale})`
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute", intensity.blur),
+      style: {
+        width: "100%",
+        height: "40%",
+        bottom: "-5%",
+        left: "0",
+        background: `linear-gradient(90deg,
+          ${colors[1]} 0%,
+          ${colors[2] || colors[0]} 50%,
+          ${colors[3] || colors[1]} 100%
+        )`,
+        opacity: intensity.opacity * 0.8,
+        borderRadius: "60% 40% 0 0",
+        animation: "liquid-flow-2 15s ease-in-out infinite",
+        transform: `scaleY(${intensity.scale * 0.9})`
+      }
+    }
+  ),
+  Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute rounded-full",
+      style: {
+        width: `${12 + i * 4}px`,
+        height: `${12 + i * 4}px`,
+        left: `${15 + i * 15}%`,
+        bottom: "10%",
+        background: `radial-gradient(circle at 30% 30%,
+            ${colors[i % colors.length]}80,
+            ${colors[i % colors.length]}20
+          )`,
+        border: `1px solid ${colors[i % colors.length]}40`,
+        opacity: intensity.opacity,
+        animation: `bubble-float ${8 + i * 2}s ease-in-out infinite`,
+        animationDelay: `${i * 2}s`
+      }
+    },
+    i
+  ))
+] }), "LiquidGradient");
+var Spotlight = /* @__PURE__ */ __name(({ colors, intensity }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute", intensity.blur),
+      style: {
+        width: "80%",
+        height: "80%",
+        top: "-20%",
+        left: "50%",
+        transform: "translateX(-50%)",
+        background: `conic-gradient(from 180deg at 50% 50%,
+          ${colors[0]} 0deg,
+          ${colors[1]} 60deg,
+          ${colors[2] || colors[0]} 120deg,
+          ${colors[3] || colors[1]} 180deg,
+          ${colors[0]} 240deg,
+          ${colors[1]} 300deg,
+          ${colors[0]} 360deg
+        )`,
+        opacity: intensity.opacity,
+        animation: "spotlight-rotate 30s linear infinite"
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0",
+      style: {
+        background: `radial-gradient(circle at 50% 30%,
+          transparent 0%,
+          hsl(var(--background)) 70%
+        )`
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute rounded-full", intensity.blur),
+      style: {
+        width: "50%",
+        height: "50%",
+        top: "10%",
+        left: "25%",
+        background: `radial-gradient(circle, ${colors[0]} 0%, transparent 70%)`,
+        opacity: intensity.opacity * 0.5,
+        animation: "pulse-glow 6s ease-in-out infinite"
+      }
+    }
+  )
+] }), "Spotlight");
+var AnimationStyles = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+    @keyframes aurora-shift {
+      0%, 100% {
+        transform: translateX(-10%) translateY(-30%) scaleX(1.1);
+      }
+      50% {
+        transform: translateX(10%) translateY(-25%) scaleX(0.9);
+      }
+    }
+
+    @keyframes aurora-shimmer {
+      0%, 100% {
+        opacity: 0.2;
+        transform: scale(1);
+      }
+      50% {
+        opacity: 0.4;
+        transform: scale(1.05);
+      }
+    }
+
+    @keyframes mesh-float-1 {
+      0%, 100% { transform: translate(0, 0) scale(1); }
+      25% { transform: translate(-5%, 10%) scale(1.05); }
+      50% { transform: translate(5%, 5%) scale(0.95); }
+      75% { transform: translate(-3%, -5%) scale(1.02); }
+    }
+
+    @keyframes mesh-float-2 {
+      0%, 100% { transform: translate(0, 0) scale(1); }
+      33% { transform: translate(8%, -8%) scale(1.08); }
+      66% { transform: translate(-6%, 6%) scale(0.92); }
+    }
+
+    @keyframes mesh-float-3 {
+      0%, 100% { transform: translate(0, 0) scale(1); }
+      50% { transform: translate(10%, 10%) scale(1.1); }
+    }
+
+    @keyframes mesh-float-4 {
+      0%, 100% { transform: translate(0, 0) scale(1); }
+      25% { transform: translate(5%, -10%) scale(0.95); }
+      75% { transform: translate(-8%, 5%) scale(1.05); }
+    }
+
+    @keyframes orb-float-1 {
+      0%, 100% { transform: translate(0, 0); }
+      50% { transform: translate(30px, -40px); }
+    }
+
+    @keyframes orb-float-2 {
+      0%, 100% { transform: translate(0, 0); }
+      50% { transform: translate(-25px, 35px); }
+    }
+
+    @keyframes orb-float-3 {
+      0%, 100% { transform: translate(0, 0); }
+      33% { transform: translate(40px, 20px); }
+      66% { transform: translate(-20px, -30px); }
+    }
+
+    @keyframes orb-float-4 {
+      0%, 100% { transform: translate(0, 0); }
+      25% { transform: translate(-35px, -25px); }
+      75% { transform: translate(25px, 40px); }
+    }
+
+    @keyframes grid-drift {
+      0% { transform: translate(0, 0); }
+      100% { transform: translate(60px, 60px); }
+    }
+
+    @keyframes diagonal-shift {
+      0% { transform: translateX(0); }
+      100% { transform: translateX(160px); }
+    }
+
+    @keyframes pulse-glow {
+      0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
+      50% { opacity: 0.6; transform: translateX(-50%) scale(1.1); }
+    }
+
+    @keyframes liquid-flow-1 {
+      0%, 100% {
+        transform: translateY(0) scaleX(1);
+        border-radius: 50% 50% 0 0;
+      }
+      25% {
+        transform: translateY(-30px) scaleX(1.05);
+        border-radius: 45% 55% 0 0;
+      }
+      50% {
+        transform: translateY(-50px) scaleX(0.95);
+        border-radius: 55% 45% 0 0;
+      }
+      75% {
+        transform: translateY(-25px) scaleX(1.02);
+        border-radius: 48% 52% 0 0;
+      }
+    }
+
+    @keyframes liquid-flow-2 {
+      0%, 100% {
+        transform: translateY(0) scaleX(1);
+        border-radius: 60% 40% 0 0;
+      }
+      33% {
+        transform: translateY(-40px) scaleX(1.08);
+        border-radius: 40% 60% 0 0;
+      }
+      66% {
+        transform: translateY(-60px) scaleX(0.92);
+        border-radius: 55% 45% 0 0;
+      }
+    }
+
+    @keyframes bubble-float {
+      0%, 100% {
+        transform: translateY(0) scale(1);
+        opacity: 0.6;
+      }
+      50% {
+        transform: translateY(-100px) scale(1.2);
+        opacity: 0.3;
+      }
+    }
+
+    @keyframes spotlight-rotate {
+      0% { transform: translateX(-50%) rotate(0deg); }
+      100% { transform: translateX(-50%) rotate(360deg); }
+    }
+  ` }), "AnimationStyles");
+var blurMap = {
+  sm: "blur-sm",
+  md: "blur-md",
+  lg: "blur-lg",
+  xl: "blur-xl",
+  "2xl": "blur-2xl",
+  "3xl": "blur-3xl"
+};
+var MouseFollower = /* @__PURE__ */ __name(({
+  variant = "glow",
+  size = 300,
+  color = "primary",
+  smoothness = 0.1,
+  opacity = 0.3,
+  blur = "2xl",
+  className,
+  showOnMobile = false,
+  disabled = false
+}) => {
+  const [mounted, setMounted] = react.useState(false);
+  const [isVisible, setIsVisible] = react.useState(false);
+  const [isMobile, setIsMobile] = react.useState(false);
+  const positionRef = react.useRef({ x: 0, y: 0 });
+  const targetRef = react.useRef({ x: 0, y: 0 });
+  const elementRef = react.useRef(null);
+  const rafRef = react.useRef(0);
+  const resolvedColor = react.useMemo(() => {
+    if (color === "primary") return "hsl(var(--primary))";
+    if (color === "secondary") return "hsl(var(--secondary))";
+    if (color === "accent") return "hsl(var(--accent))";
+    return color;
+  }, [color]);
+  react.useEffect(() => {
+    setMounted(true);
+    const checkMobile = /* @__PURE__ */ __name(() => {
+      setIsMobile("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    }, "checkMobile");
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  const animate = react.useCallback(() => {
+    const dx = targetRef.current.x - positionRef.current.x;
+    const dy = targetRef.current.y - positionRef.current.y;
+    positionRef.current.x += dx * smoothness;
+    positionRef.current.y += dy * smoothness;
+    if (elementRef.current) {
+      elementRef.current.style.transform = `translate(${positionRef.current.x - size / 2}px, ${positionRef.current.y - size / 2}px)`;
+    }
+    rafRef.current = requestAnimationFrame(animate);
+  }, [smoothness, size]);
+  react.useEffect(() => {
+    if (disabled || !mounted) return;
+    if (isMobile && !showOnMobile) return;
+    const handleMouseMove = /* @__PURE__ */ __name((e) => {
+      targetRef.current = { x: e.clientX, y: e.clientY };
+      if (!isVisible) setIsVisible(true);
+    }, "handleMouseMove");
+    const handleMouseLeave = /* @__PURE__ */ __name(() => {
+      setIsVisible(false);
+    }, "handleMouseLeave");
+    const handleMouseEnter = /* @__PURE__ */ __name(() => {
+      setIsVisible(true);
+    }, "handleMouseEnter");
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    document.addEventListener("mouseenter", handleMouseEnter);
+    rafRef.current = requestAnimationFrame(animate);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+      document.removeEventListener("mouseenter", handleMouseEnter);
+      cancelAnimationFrame(rafRef.current);
+    };
+  }, [disabled, mounted, isMobile, showOnMobile, animate, isVisible]);
+  if (!mounted || disabled) return null;
+  if (isMobile && !showOnMobile) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn(
+        "fixed inset-0 pointer-events-none overflow-hidden z-0",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: elementRef,
+          className: lib.cn(
+            "absolute top-0 left-0 transition-opacity duration-300",
+            isVisible ? "opacity-100" : "opacity-0"
+          ),
+          style: { width: size, height: size },
+          children: [
+            variant === "glow" && /* @__PURE__ */ jsxRuntime.jsx(
+              GlowEffect,
+              {
+                size,
+                color: resolvedColor,
+                opacity,
+                blur: blurMap[blur]
+              }
+            ),
+            variant === "spotlight" && /* @__PURE__ */ jsxRuntime.jsx(
+              SpotlightEffect,
+              {
+                size,
+                color: resolvedColor,
+                opacity,
+                blur: blurMap[blur]
+              }
+            ),
+            variant === "gradient-blob" && /* @__PURE__ */ jsxRuntime.jsx(
+              GradientBlobEffect,
+              {
+                size,
+                color: resolvedColor,
+                opacity,
+                blur: blurMap[blur]
+              }
+            ),
+            variant === "ring" && /* @__PURE__ */ jsxRuntime.jsx(
+              RingEffect,
+              {
+                size,
+                color: resolvedColor,
+                opacity
+              }
+            ),
+            variant === "trail" && /* @__PURE__ */ jsxRuntime.jsx(
+              TrailEffect,
+              {
+                size,
+                color: resolvedColor,
+                opacity,
+                blur: blurMap[blur]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, "MouseFollower");
+var GlowEffect = /* @__PURE__ */ __name(({ size, color, opacity, blur }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: lib.cn("w-full h-full rounded-full", blur),
+    style: {
+      background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
+      opacity
+    }
+  }
+), "GlowEffect");
+var SpotlightEffect = /* @__PURE__ */ __name(({ size, color, opacity, blur }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute inset-0", blur),
+      style: {
+        background: `conic-gradient(from 180deg at 50% 50%,
+          transparent 0deg,
+          ${color} 150deg,
+          ${color} 210deg,
+          transparent 360deg
+        )`,
+        opacity: opacity * 0.6
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute rounded-full", blur),
+      style: {
+        width: "40%",
+        height: "40%",
+        top: "30%",
+        left: "30%",
+        background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
+        opacity
+      }
+    }
+  )
+] }), "SpotlightEffect");
+var GradientBlobEffect = /* @__PURE__ */ __name(({ size, color, opacity, blur }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("w-full h-full", blur),
+      style: {
+        background: `radial-gradient(ellipse 60% 40% at 50% 50%, ${color} 0%, transparent 70%)`,
+        opacity,
+        animation: "blob-morph 8s ease-in-out infinite"
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: lib.cn("absolute inset-0", blur),
+      style: {
+        background: `radial-gradient(ellipse 40% 60% at 50% 50%, ${color} 0%, transparent 60%)`,
+        opacity: opacity * 0.5,
+        animation: "blob-morph 8s ease-in-out infinite reverse",
+        animationDelay: "-4s"
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+      @keyframes blob-morph {
+        0%, 100% { transform: scale(1) rotate(0deg); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
+        25% { transform: scale(1.1) rotate(90deg); border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
+        50% { transform: scale(0.9) rotate(180deg); border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
+        75% { transform: scale(1.05) rotate(270deg); border-radius: 60% 40% 50% 40% / 70% 30% 50% 60%; }
+      }
+    ` })
+] }), "GradientBlobEffect");
+var RingEffect = /* @__PURE__ */ __name(({ size, color, opacity }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0 rounded-full",
+      style: {
+        border: `2px solid ${color}`,
+        opacity: opacity * 0.3
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute rounded-full",
+      style: {
+        inset: "15%",
+        border: `2px solid ${color}`,
+        opacity: opacity * 0.5,
+        animation: "ring-pulse 2s ease-in-out infinite"
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute rounded-full",
+      style: {
+        inset: "30%",
+        border: `2px solid ${color}`,
+        opacity: opacity * 0.7,
+        animation: "ring-pulse 2s ease-in-out infinite",
+        animationDelay: "-1s"
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute rounded-full",
+      style: {
+        width: "8px",
+        height: "8px",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        background: color,
+        opacity
+      }
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+      @keyframes ring-pulse {
+        0%, 100% { opacity: 0.3; transform: scale(1); }
+        50% { opacity: 0.7; transform: scale(1.05); }
+      }
+    ` })
+] }), "RingEffect");
+var TrailEffect = /* @__PURE__ */ __name(({ size, color, opacity, blur }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: lib.cn("absolute rounded-full", blur),
+    style: {
+      width: `${100 - i * 15}%`,
+      height: `${100 - i * 15}%`,
+      top: `${i * 7.5}%`,
+      left: `${i * 7.5}%`,
+      background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
+      opacity: opacity * (1 - i * 0.15),
+      transition: `transform ${0.1 + i * 0.05}s ease-out`
+    }
+  },
+  i
+)) }), "TrailEffect");
+
+exports.AnimatedBackground = AnimatedBackground;
+exports.MouseFollower = MouseFollower;
+//# sourceMappingURL=animations.cjs.map
+//# sourceMappingURL=animations.cjs.map