@pelatform/ui 1.5.0

package/dist/animation.cjs

@@ -0,0 +1,1936 @@
+"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }'use client';
+
+
+
+var _chunkCJXIPSTGcjs = require('./chunk-CJXIPSTG.cjs');
+
+// src/ui/animation/avatar-group.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react); var React3 = _interopRequireWildcard(_react); var React4 = _interopRequireWildcard(_react); var React6 = _interopRequireWildcard(_react); var React7 = _interopRequireWildcard(_react);
+
+
+
+
+
+
+var _react2 = require('motion/react');
+var _jsxruntime = require('react/jsx-runtime');
+var AvatarGroupContext = React.createContext(null);
+var StaggeredContent = ({ content }) => {
+  const children = React.Children.toArray(content);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _react2.motion.div,
+    {
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      variants: {
+        animate: { transition: { staggerChildren: 0.08 } }
+      },
+      children: children.map((child, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _react2.motion.div,
+        {
+          variants: {
+            initial: { opacity: 0, y: 20 },
+            animate: {
+              opacity: 1,
+              y: 0,
+              transition: { duration: 0.3, ease: "easeOut" }
+            },
+            exit: {
+              opacity: 0,
+              y: -20,
+              transition: { duration: 0.2, ease: "easeIn" }
+            }
+          },
+          children: child
+        },
+        i
+      ))
+    }
+  );
+};
+function AvatarGroup({
+  children,
+  className,
+  tooltipClassName,
+  animation = "default"
+}) {
+  const contextValue = {
+    tooltipClassName,
+    animation
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkCJXIPSTGcjs.cn.call(void 0, "-space-x-2.5 flex", className), children }) });
+}
+function AvatarGroupItem({
+  children,
+  className,
+  tooltipClassName,
+  animation: itemAnimation
+}) {
+  const context = React.useContext(AvatarGroupContext);
+  const [hoveredIndex, setHoveredIndex] = React.useState(false);
+  const springConfig = { stiffness: 100, damping: 5 };
+  const x = _react2.useMotionValue.call(void 0, 0);
+  const animation = itemAnimation || _optionalChain([context, 'optionalAccess', _2 => _2.animation]) || "default";
+  const finalTooltipClassName = tooltipClassName || _optionalChain([context, 'optionalAccess', _3 => _3.tooltipClassName]);
+  const rotate = _react2.useSpring.call(void 0, _react2.useTransform.call(void 0, x, [-100, 100], [-45, 45]), springConfig);
+  const translateX = _react2.useSpring.call(void 0, _react2.useTransform.call(void 0, x, [-100, 100], [-50, 50]), springConfig);
+  const tooltipChild = React.Children.toArray(children).find(
+    (child) => React.isValidElement(child) && child.type === AvatarGroupTooltip
+  );
+  const otherChildren = React.Children.toArray(children).filter(
+    (child) => !(React.isValidElement(child) && child.type === AvatarGroupTooltip)
+  );
+  const tooltipContent = tooltipChild && React.isValidElement(tooltipChild) ? tooltipChild.props.children : null;
+  const handleMouseMove = (event) => {
+    const halfWidth = event.target.offsetWidth / 2;
+    x.set(event.nativeEvent.offsetX - halfWidth);
+  };
+  const animationVariants = {
+    default: {
+      initial: { opacity: 0, y: 20, scale: 0.6 },
+      animate: {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        transition: {
+          type: "spring",
+          stiffness: 260,
+          damping: 10
+        }
+      },
+      exit: {
+        opacity: 0,
+        y: 20,
+        scale: 0.6,
+        transition: {
+          duration: 0.2,
+          ease: "easeInOut"
+        }
+      }
+    },
+    flip: {
+      initial: { opacity: 0, rotateX: -90 },
+      animate: {
+        opacity: 1,
+        rotateX: 0,
+        transition: {
+          type: "spring",
+          stiffness: 180,
+          damping: 25
+        }
+      },
+      exit: {
+        opacity: 0,
+        rotateX: -90,
+        transition: {
+          duration: 0.3,
+          ease: "easeInOut"
+        }
+      }
+    },
+    reveal: {
+      initial: { opacity: 0, scale: 0.95 },
+      animate: {
+        opacity: 1,
+        scale: 1,
+        transition: { duration: 0.15, ease: "easeOut" }
+      },
+      exit: {
+        opacity: 0,
+        scale: 0.95,
+        transition: { duration: 0.1, ease: "easeIn" }
+      }
+    }
+  };
+  const selectedVariant = animationVariants[animation];
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _chunkCJXIPSTGcjs.cn.call(void 0, "group relative", className),
+      onMouseEnter: () => setHoveredIndex(true),
+      onMouseLeave: () => setHoveredIndex(false),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react2.AnimatePresence, { mode: "wait", children: hoveredIndex && tooltipContent && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _react2.motion.div,
+          {
+            initial: selectedVariant.initial,
+            animate: selectedVariant.animate,
+            exit: selectedVariant.exit,
+            style: {
+              translateX: animation === "reveal" ? 0 : translateX,
+              rotate: animation === "reveal" ? 0 : rotate,
+              whiteSpace: "nowrap",
+              transformOrigin: "center"
+            },
+            className: _chunkCJXIPSTGcjs.cn.call(void 0, 
+              "-top-16 -translate-x-1/2 absolute left-1/2 z-50 flex flex-col items-center justify-center rounded-md bg-black px-4 py-2 font-medium text-white text-xs shadow-xl",
+              finalTooltipClassName
+            ),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _react2.motion.div,
+                {
+                  className: "-bottom-px absolute inset-x-10 z-30 h-px w-[20%] bg-gradient-to-r from-transparent via-emerald-500 to-transparent dark:via-emerald-900",
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0 },
+                  transition: { duration: 0.15 }
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _react2.motion.div,
+                {
+                  className: "-bottom-px absolute left-10 z-30 h-px w-[40%] bg-gradient-to-r from-transparent via-sky-500 to-transparent dark:via-sky-900",
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0 },
+                  transition: { duration: 0.15 }
+                }
+              ),
+              animation === "reveal" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StaggeredContent, { content: tooltipContent }) : tooltipContent
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _react2.motion.div,
+          {
+            className: "relative cursor-pointer",
+            whileHover: {
+              zIndex: 30
+            },
+            whileTap: { scale: 0.95 },
+            transition: {
+              duration: 0.5
+            },
+            onMouseMove: handleMouseMove,
+            children: otherChildren
+          }
+        )
+      ]
+    }
+  );
+}
+function AvatarGroupTooltip({ children, className }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _react2.motion.div,
+    {
+      initial: { opacity: 0, y: 20, scale: 0.6 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.15 },
+      className: _chunkCJXIPSTGcjs.cn.call(void 0, "relative z-30 hidden", className),
+      children
+    }
+  );
+}
+
+// src/ui/animation/counting-number.tsx
+
+
+
+function CountingNumber({
+  from = 0,
+  to = 100,
+  duration = 2,
+  delay = 0,
+  className,
+  startOnView = true,
+  once = false,
+  inViewMargin,
+  onComplete,
+  format,
+  ...props
+}) {
+  const ref = _react.useRef.call(void 0, null);
+  const isInView = _react2.useInView.call(void 0, ref, { once, margin: inViewMargin });
+  const [hasAnimated, setHasAnimated] = _react.useState.call(void 0, false);
+  const [display, setDisplay] = _react.useState.call(void 0, from);
+  const motionValue = _react2.useMotionValue.call(void 0, from);
+  const shouldStart = !startOnView || isInView && (!once || !hasAnimated);
+  _react.useEffect.call(void 0, () => {
+    if (!shouldStart) return;
+    setHasAnimated(true);
+    const timeout = setTimeout(() => {
+      const controls = _react2.animate.call(void 0, motionValue, to, {
+        duration,
+        onUpdate: (v) => setDisplay(v),
+        onComplete
+      });
+      return () => controls.stop();
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [shouldStart, to, duration, delay, motionValue, onComplete]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react2.motion.span, { ref, className: _chunkCJXIPSTGcjs.cn.call(void 0, "inline-block", className), ...props, children: format ? format(display) : Math.round(display) });
+}
+
+// src/ui/animation/github-button.tsx
+
+var _classvarianceauthority = require('class-variance-authority');
+var _lucidereact = require('lucide-react');
+
+
+var githubButtonVariants = _classvarianceauthority.cva.call(void 0, 
+  "cursor-pointer relative overflow-hidden will-change-transform backface-visibility-hidden transform-gpu transition-transform duration-200 ease-out hover:scale-105 group focus-visible:outline-hidden inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-zinc-950 hover:bg-zinc-900 text-white border-gray-700 dark:bg-zinc-50 dark:border-gray-300 dark:text-zinc-950 dark:hover:bg-zinc-50",
+        outline: "bg-background text-accent-foreground border border-input hover:bg-accent"
+      },
+      size: {
+        default: "h-8.5 rounded-md px-3 text-[0.8125rem] leading-none [&_svg]:size-4 gap-2",
+        sm: "h-7 rounded-md px-2.5 text-xs leading-none [&_svg]:size-3.5 gap-1.5",
+        lg: "h-10 rounded-md px-4 text-sm leading-none [&_svg]:size-5 gap-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function GithubButton({
+  initialStars = 0,
+  targetStars = 0,
+  starsClass = "",
+  fixedWidth = true,
+  animationDuration = 2,
+  animationDelay = 0,
+  autoAnimate = true,
+  className,
+  variant = "default",
+  size = "default",
+  showGithubIcon = true,
+  showStarIcon = true,
+  roundStars = false,
+  separator = false,
+  filled = false,
+  repoUrl,
+  onClick,
+  label = "",
+  useInViewTrigger = false,
+  inViewOptions = { once: true },
+  transition,
+  ...props
+}) {
+  const [currentStars, setCurrentStars] = _react.useState.call(void 0, initialStars);
+  const [isAnimating, setIsAnimating] = _react.useState.call(void 0, false);
+  const [starProgress, setStarProgress] = _react.useState.call(void 0, filled ? 100 : 0);
+  const [hasAnimated, setHasAnimated] = _react.useState.call(void 0, false);
+  const formatNumber = (num) => {
+    const units = ["k", "M", "B", "T"];
+    if (roundStars && num >= 1e3) {
+      let unitIndex = -1;
+      let value = num;
+      while (value >= 1e3 && unitIndex < units.length - 1) {
+        value /= 1e3;
+        unitIndex++;
+      }
+      const formatted = value % 1 === 0 ? value.toString() : value.toFixed(1);
+      return `${formatted}${units[unitIndex]}`;
+    }
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  };
+  const startAnimation = _react.useCallback.call(void 0, () => {
+    if (isAnimating || hasAnimated) return;
+    setIsAnimating(true);
+    const startTime = Date.now();
+    const startValue = 0;
+    const endValue = targetStars;
+    const duration = animationDuration * 1e3;
+    const animate2 = () => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easeOutQuart = 1 - (1 - progress) ** 4;
+      const newStars = Math.round(startValue + (endValue - startValue) * easeOutQuart);
+      setCurrentStars(newStars);
+      setStarProgress(progress * 100);
+      if (progress < 1) {
+        requestAnimationFrame(animate2);
+      } else {
+        setCurrentStars(endValue);
+        setStarProgress(100);
+        setIsAnimating(false);
+        setHasAnimated(true);
+      }
+    };
+    setTimeout(() => {
+      requestAnimationFrame(animate2);
+    }, animationDelay * 1e3);
+  }, [isAnimating, hasAnimated, targetStars, animationDuration, animationDelay]);
+  const ref = React.default.useRef(null);
+  const isInView = _react2.useInView.call(void 0, ref, inViewOptions);
+  _react.useEffect.call(void 0, () => {
+    setHasAnimated(false);
+    setCurrentStars(initialStars);
+  }, [initialStars]);
+  _react.useEffect.call(void 0, () => {
+    if (useInViewTrigger) {
+      if (isInView && !hasAnimated) {
+        startAnimation();
+      }
+    } else if (autoAnimate && !hasAnimated) {
+      startAnimation();
+    }
+  }, [autoAnimate, useInViewTrigger, isInView, hasAnimated, startAnimation]);
+  const navigateToRepo = () => {
+    if (!repoUrl) {
+      return;
+    }
+    try {
+      const link = document.createElement("a");
+      link.href = repoUrl;
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch (e) {
+      try {
+        window.open(repoUrl, "_blank", "noopener,noreferrer");
+      } catch (e2) {
+        window.location.href = repoUrl;
+      }
+    }
+  };
+  const handleClick = (event) => {
+    if (onClick) {
+      onClick(event);
+      return;
+    }
+    if (repoUrl) {
+      navigateToRepo();
+    } else if (!hasAnimated) {
+      startAnimation();
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (repoUrl) {
+        navigateToRepo();
+      } else if (!hasAnimated) {
+        startAnimation();
+      }
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
+    {
+      ref,
+      className: _chunkCJXIPSTGcjs.cn.call(void 0, githubButtonVariants({ variant, size, className }), separator && "ps-0"),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      "aria-label": repoUrl ? `Star ${label} on GitHub` : label,
+      ...props,
+      children: [
+        showGithubIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: _chunkCJXIPSTGcjs.cn.call(void 0, 
+              "relative flex h-full items-center justify-center",
+              separator && "w-9 border-input border-e bg-muted/60"
+            ),
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { role: "img", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" }) })
+          }
+        ),
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: label }),
+        showStarIcon && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative inline-flex shrink-0", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Star, { className: "fill-muted-foreground text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _lucidereact.Star,
+            {
+              className: "absolute start-0 top-0 fill-yellow-400 text-yellow-400",
+              size: 18,
+              "aria-hidden": "true",
+              style: {
+                clipPath: `inset(${100 - starProgress}% 0 0 0)`
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkCJXIPSTGcjs.cn.call(void 0, "relative flex flex-col overflow-hidden font-semibold", starsClass), children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _react2.motion.div,
+            {
+              animate: { opacity: 1 },
+              transition: {
+                type: "spring",
+                stiffness: 300,
+                damping: 30,
+                ...transition
+              },
+              className: "tabular-nums",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: currentStars > 0 && formatNumber(currentStars) })
+            }
+          ),
+          fixedWidth && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "h-0 overflow-hidden tabular-nums opacity-0", children: formatNumber(targetStars) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/ui/animation/gradient-background.tsx
+
+
+function GradientBackground({
+  className,
+  transition = { duration: 10, ease: "easeInOut", repeat: Infinity },
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _react2.motion.div,
+    {
+      "data-slot": "gradient-background",
+      className: _chunkCJXIPSTGcjs.cn.call(void 0, 
+        "size-full bg-[length:300%_300%] bg-gradient-to-br from-0% from-fuchsia-400 via-50% via-violet-500 to-100% to-fuchsia-600",
+        className
+      ),
+      animate: {
+        backgroundPosition: [
+          "0% 0%",
+          "50% 50%",
+          "100% 0%",
+          "50% 100%",
+          "0% 50%",
+          "100% 100%",
+          "0% 0%"
+        ]
+      },
+      whileTap: {
+        scale: 0.98
+      },
+      transition,
+      ...props
+    }
+  );
+}
+
+// src/ui/animation/grid-background.tsx
+
+
+
+function GridBackground({
+  className,
+  children,
+  gridSize = "8:8",
+  colors = {},
+  beams = {},
+  ...props
+}) {
+  const {
+    background = "bg-slate-900",
+    borderColor = "border-slate-700/50",
+    borderSize = "1px",
+    borderStyle = "solid"
+  } = colors;
+  const {
+    count = 12,
+    colors: beamColors = [
+      "bg-cyan-400",
+      "bg-purple-400",
+      "bg-fuchsia-400",
+      "bg-violet-400",
+      "bg-blue-400",
+      "bg-indigo-400",
+      "bg-green-400",
+      "bg-yellow-400",
+      "bg-orange-400",
+      "bg-red-400",
+      "bg-pink-400",
+      "bg-rose-400"
+    ],
+    shadow = "shadow-lg shadow-cyan-400/50 rounded-full",
+    speed = 4
+  } = beams;
+  const [cols, rows] = gridSize.split(":").map(Number);
+  const animatedBeams = React3.useMemo(
+    () => Array.from({ length: Math.min(count, 12) }, (_, i) => {
+      const direction = Math.random() > 0.5 ? "horizontal" : "vertical";
+      const startPosition = Math.random() > 0.5 ? "start" : "end";
+      return {
+        id: i,
+        color: beamColors[i % beamColors.length],
+        direction,
+        startPosition,
+        // For horizontal beams: choose a row index (1 to rows-1) - exclude edges
+        // For vertical beams: choose a column index (1 to cols-1) - exclude edges
+        gridLine: direction === "horizontal" ? Math.floor(Math.random() * (rows - 1)) + 1 : Math.floor(Math.random() * (cols - 1)) + 1,
+        delay: Math.random() * 2,
+        duration: speed + Math.random() * 2
+      };
+    }),
+    [count, beamColors, speed, cols, rows]
+  );
+  const gridStyle = {
+    "--border-style": borderStyle
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _react2.motion.div,
+    {
+      "data-slot": "grid-background",
+      className: _chunkCJXIPSTGcjs.cn.call(void 0, "relative size-full overflow-hidden", background, className),
+      style: gridStyle,
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: _chunkCJXIPSTGcjs.cn.call(void 0, "absolute inset-0 size-full", borderColor),
+            style: {
+              display: "grid",
+              gridTemplateColumns: `repeat(${cols}, 1fr)`,
+              gridTemplateRows: `repeat(${rows}, 1fr)`,
+              borderRightWidth: borderSize,
+              borderBottomWidth: borderSize,
+              borderRightStyle: borderStyle,
+              borderBottomStyle: borderStyle
+            },
+            children: Array.from({ length: cols * rows }).map((_, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                className: _chunkCJXIPSTGcjs.cn.call(void 0, "relative", borderColor),
+                style: {
+                  borderTopWidth: borderSize,
+                  borderLeftWidth: borderSize,
+                  borderTopStyle: borderStyle,
+                  borderLeftStyle: borderStyle
+                }
+              },
+              index
+            ))
+          }
+        ),
+        animatedBeams.map((beam) => {
+          const horizontalPosition = beam.gridLine / rows * 100;
+          const verticalPosition = beam.gridLine / cols * 100;
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _react2.motion.div,
+            {
+              className: _chunkCJXIPSTGcjs.cn.call(void 0, 
+                "absolute z-20 rounded-full backdrop-blur-sm",
+                beam.color,
+                beam.direction === "horizontal" ? "h-0.5 w-6" : "h-6 w-0.5",
+                shadow
+              ),
+              style: {
+                ...beam.direction === "horizontal" ? {
+                  // Position exactly on the horizontal grid line
+                  top: `${horizontalPosition}%`,
+                  left: beam.startPosition === "start" ? "-12px" : "calc(100% + 12px)",
+                  transform: "translateY(-50%)"
+                  // Center on the line
+                } : {
+                  // Position exactly on the vertical grid line
+                  left: `${verticalPosition}%`,
+                  top: beam.startPosition === "start" ? "-12px" : "calc(100% + 12px)",
+                  transform: "translateX(-50%)"
+                  // Center on the line
+                }
+              },
+              initial: {
+                opacity: 0
+              },
+              animate: {
+                opacity: [0, 1, 1, 0],
+                ...beam.direction === "horizontal" ? {
+                  // Move across the full width of the container
+                  x: beam.startPosition === "start" ? [0, "calc(100vw + 24px)"] : [0, "calc(-100vw - 24px)"]
+                } : {
+                  // Move across the full height of the container
+                  y: beam.startPosition === "start" ? [0, "calc(100vh + 24px)"] : [0, "calc(-100vh - 24px)"]
+                }
+              },
+              transition: {
+                duration: beam.duration,
+                delay: beam.delay,
+                repeat: Infinity,
+                repeatDelay: Math.random() * 3 + 2,
+                // 2-5s pause between repeats
+                ease: "linear",
+                times: [0, 0.1, 0.9, 1]
+                // Quick fade in, maintain, quick fade out
+              }
+            },
+            beam.id
+          );
+        }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative z-10 size-full", children })
+      ]
+    }
+  );
+}
+
+// src/ui/animation/hover-background.tsx
+
+
+
+function HoverBackground({
+  className,
+  objectCount = 12,
+  children,
+  colors = {},
+  ...props
+}) {
+  const {
+    background = "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900",
+    objects = [
+      "bg-cyan-400/20",
+      "bg-purple-400/20",
+      "bg-fuchsia-400/20",
+      "bg-violet-400/20",
+      "bg-blue-400/20",
+      "bg-indigo-400/20"
+    ],
+    glow = "shadow-cyan-400/50"
+  } = colors;
+  const [isHovered, setIsHovered] = React4.useState(false);
+  const mouseX = _react2.useMotionValue.call(void 0, 0);
+  const mouseY = _react2.useMotionValue.call(void 0, 0);
+  const springX = _react2.useSpring.call(void 0, mouseX, {
+    stiffness: 300,
+    damping: 30,
+    // Slower return to center when hover ends
+    restSpeed: 0.1,
+    restDelta: 0.1
+  });
+  const springY = _react2.useSpring.call(void 0, mouseY, {
+    stiffness: 300,
+    damping: 30,
+    restSpeed: 0.1,
+    restDelta: 0.1
+  });
+  const animatedObjects = React4.useMemo(
+    () => Array.from({ length: objectCount }, (_, i) => {
+      const shape = Math.random() > 0.5 ? "circle" : "square";
+      return {
+        id: i,
+        x: Math.random() * 90 + 5,
+        // 5-95% to avoid edges
+        y: Math.random() * 90 + 5,
+        size: Math.random() * 60 + 20,
+        // 20-80px
+        color: objects[i % objects.length],
+        delay: Math.random() * 2,
+        shape,
+        floatDirection: Math.random() > 0.5 ? 1 : -1,
+        breathDuration: Math.random() * 3 + 3,
+        // 3-6 seconds
+        parallaxStrength: Math.random() * 0.5 + 0.3,
+        // 0.3-0.8 for more varied parallax depth
+        baseRotation: Math.random() * 360
+        // Random starting rotation offset
+      };
+    }),
+    [objectCount, objects]
+  );
+  const handleMouseMove = (event) => {
+    if (!isHovered) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+    const x = (event.clientX - rect.left - centerX) / centerX;
+    const y = (event.clientY - rect.top - centerY) / centerY;
+    mouseX.set(x * 15);
+    mouseY.set(y * 15);
+  };
+  const handleHoverStart = () => {
+    setIsHovered(true);
+  };
+  const handleHoverEnd = () => {
+    setIsHovered(false);
+    mouseX.set(0);
+    mouseY.set(0);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _react2.motion.div,
+    {
+      "data-slot": "hover-background",
+      className: _chunkCJXIPSTGcjs.cn.call(void 0, "relative size-full overflow-hidden", background, className),
+      onHoverStart: handleHoverStart,
+      onHoverEnd: handleHoverEnd,
+      onMouseMove: handleMouseMove,
+      whileHover: { scale: 1.02 },
+      transition: { duration: 0.3, ease: "easeOut" },
+      animate: {
+        backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
+      },
+      style: {
+        backgroundSize: "200% 200%"
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _react2.motion.div,
+          {
+            className: "absolute inset-0 bg-gradient-radial from-white/5 via-transparent to-transparent",
+            animate: {
+              opacity: [0.3, 0.6, 0.3],
+              scale: [1, 1.1, 1]
+            },
+            transition: {
+              duration: 4,
+              repeat: Infinity,
+              ease: "easeInOut"
+            }
+          }
+        ),
+        animatedObjects.map((obj) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _react2.motion.div,
+          {
+            className: _chunkCJXIPSTGcjs.cn.call(void 0, 
+              "absolute border border-white/10 backdrop-blur-sm",
+              obj.color,
+              obj.shape === "circle" ? "rounded-full" : "rotate-45 rounded-lg"
+            ),
+            style: {
+              left: `${obj.x}%`,
+              top: `${obj.y}%`,
+              width: obj.size,
+              height: obj.size,
+              // Apply parallax with individual object strength
+              x: springX.get() * obj.parallaxStrength,
+              y: springY.get() * obj.parallaxStrength
+            },
+            initial: {
+              scale: 0.6,
+              opacity: 0.4,
+              rotate: obj.baseRotation
+            },
+            animate: {
+              // Default state animations - breathing with base rotation offset
+              scale: [0.6, 0.8, 0.6],
+              opacity: [0.4, 0.6, 0.4],
+              rotate: obj.shape === "circle" ? [obj.baseRotation, obj.baseRotation + 10, obj.baseRotation] : [obj.baseRotation, obj.baseRotation + 5, obj.baseRotation],
+              y: [0, obj.floatDirection * 15, 0],
+              x: [0, obj.floatDirection * 8, 0]
+            },
+            transition: {
+              duration: obj.breathDuration,
+              delay: obj.delay,
+              ease: "easeInOut",
+              repeat: Infinity,
+              repeatType: "reverse"
+            },
+            whileHover: {
+              scale: 1.5,
+              boxShadow: `0 0 30px ${glow.replace("shadow-", "").replace("/50", "")}`
+            }
+          },
+          obj.id
+        )),
+        isHovered && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pointer-events-none absolute inset-0", children: Array.from({ length: 20 }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _react2.motion.div,
+          {
+            className: "absolute h-1 w-1 rounded-full bg-white/60",
+            style: {
+              left: `${Math.random() * 100}%`,
+              top: `${Math.random() * 100}%`
+            },
+            initial: { opacity: 0, scale: 0 },
+            animate: {
+              opacity: [0, 1, 0],
+              scale: [0, 1, 0],
+              y: [0, -50, -100]
+            },
+            transition: {
+              duration: 3,
+              delay: Math.random() * 2,
+              repeat: Infinity,
+              ease: "easeOut"
+            }
+          },
+          `particle-${i}`
+        )) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative z-10 size-full", children })
+      ]
+    }
+  );
+}
+
+// src/ui/animation/marquee.tsx
+
+
+function Marquee({
+  className,
+  reverse = false,
+  pauseOnHover = false,
+  children,
+  vertical = false,
+  repeat = 4,
+  ariaLabel,
+  ariaLive = "off",
+  ariaRole = "marquee",
+  ...props
+}) {
+  const marqueeRef = _react.useRef.call(void 0, null);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ...props,
+      ref: marqueeRef,
+      "data-slot": "marquee",
+      className: _chunkCJXIPSTGcjs.cn.call(void 0, 
+        "group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
+        {
+          "flex-row": !vertical,
+          "flex-col": vertical
+        },
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-live": ariaLive,
+      role: ariaRole,
+      tabIndex: 0,
+      children: React.default.useMemo(
+        () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: Array.from({ length: repeat }, (_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: _chunkCJXIPSTGcjs.cn.call(void 0, 
+              !vertical ? "flex-row [gap:var(--gap)]" : "flex-col [gap:var(--gap)]",
+              "flex shrink-0 justify-around",
+              !vertical && "animate-marquee flex-row",
+              vertical && "animate-marquee-vertical flex-col",
+              pauseOnHover && "group-hover:[animation-play-state:paused]",
+              reverse && "[animation-direction:reverse]"
+            ),
+            children
+          },
+          i
+        )) }),
+        [repeat, children, vertical, pauseOnHover, reverse]
+      )
+    }
+  );
+}
+
+// src/ui/animation/shimmering-text.tsx
+
+
+
+function ShimmeringText({
+  text,
+  duration = 2,
+  delay = 0,
+  repeat = true,
+  repeatDelay = 0.5,
+  className,
+  startOnView = true,
+  once = false,
+  inViewMargin,
+  spread = 2,
+  color,
+  shimmerColor
+}) {
+  const ref = _react.useRef.call(void 0, null);
+  const isInView = _react2.useInView.call(void 0, ref, { once, margin: inViewMargin });
+  const dynamicSpread = _react.useMemo.call(void 0, () => {
+    return text.length * spread;
+  }, [text, spread]);
+  const shouldAnimate = !startOnView || isInView;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _react2.motion.span,
+    {
+      ref,
+      className: _chunkCJXIPSTGcjs.cn.call(void 0, 
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[--base-color:var(--color-zinc-400)] [--shimmer-color:var(--color-zinc-950)]",
+        "[background-repeat:no-repeat,padding-box]",
+        "[--shimmer-bg:linear-gradient(90deg,transparent_calc(50%-var(--spread)),var(--shimmer-color),transparent_calc(50%+var(--spread)))]",
+        "dark:[--base-color:var(--color-zinc-600)] dark:[--shimmer-color:var(--color-white)]",
+        className
+      ),
+      style: {
+        "--spread": `${dynamicSpread}px`,
+        ...color && { "--base-color": color },
+        ...shimmerColor && { "--shimmer-color": shimmerColor },
+        backgroundImage: `var(--shimmer-bg), linear-gradient(var(--base-color), var(--base-color))`
+      },
+      initial: {
+        backgroundPosition: "100% center",
+        opacity: 0
+      },
+      animate: shouldAnimate ? {
+        backgroundPosition: "0% center",
+        opacity: 1
+      } : {},
+      transition: {
+        backgroundPosition: {
+          repeat: repeat ? Infinity : 0,
+          duration,
+          delay,
+          repeatDelay,
+          ease: "linear"
+        },
+        opacity: {
+          duration: 0.3,
+          delay
+        }
+      },
+      children: text
+    }
+  );
+}
+
+// src/ui/animation/sliding-number.tsx
+
+
+
+function Digit({
+  place,
+  value,
+  digitHeight,
+  duration
+}) {
+  const valueRoundedToPlace = Math.floor(value / place);
+  const animatedValue = _react2.useSpring.call(void 0, valueRoundedToPlace, {
+    duration: duration * 1e3
+    // Convert to milliseconds
+  });
+  _react.useEffect.call(void 0, () => {
+    animatedValue.set(valueRoundedToPlace);
+  }, [animatedValue, valueRoundedToPlace]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { height: digitHeight }, className: "relative w-[1ch] overflow-hidden tabular-nums", children: Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MyNumber, { mv: animatedValue, number: i, digitHeight }, i)) });
+}
+function MyNumber({
+  mv,
+  number,
+  digitHeight
+}) {
+  const y = _react2.useTransform.call(void 0, mv, (latest) => {
+    const placeValue = latest % 10;
+    const offset = (10 + number - placeValue) % 10;
+    let memo = offset * digitHeight;
+    if (offset > 5) {
+      memo -= 10 * digitHeight;
+    }
+    return memo;
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react2.motion.span, { style: { y }, className: "absolute inset-0 flex items-center justify-center", children: number });
+}
+function SlidingNumber({
+  from,
+  to,
+  duration = 2,
+  delay = 0,
+  startOnView = true,
+  once = false,
+  className = "",
+  onComplete,
+  digitHeight = 40
+}) {
+  const ref = _react.useRef.call(void 0, null);
+  const isInView = _react2.useInView.call(void 0, ref, { once: false });
+  const [currentValue, setCurrentValue] = _react.useState.call(void 0, from);
+  const [hasAnimated, setHasAnimated] = _react.useState.call(void 0, false);
+  const [animationKey, setAnimationKey] = _react.useState.call(void 0, 0);
+  _react.useEffect.call(void 0, () => {
+    setCurrentValue(from);
+    setHasAnimated(false);
+    setAnimationKey((prev) => prev + 1);
+  }, [from]);
+  _react.useEffect.call(void 0, () => {
+    setCurrentValue(from);
+    setHasAnimated(false);
+    setAnimationKey((prev) => prev + 1);
+  }, [from]);
+  _react.useEffect.call(void 0, () => {
+    if (!startOnView || !isInView) return;
+    if (once && hasAnimated) return;
+    const timer = setTimeout(() => {
+      setAnimationKey((prev) => prev + 1);
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [isInView, startOnView, once, hasAnimated]);
+  const shouldStart = !startOnView || isInView && (!once || !hasAnimated);
+  _react.useEffect.call(void 0, () => {
+    if (!shouldStart) return;
+    setHasAnimated(true);
+    const timer = setTimeout(() => {
+      const startTime = Date.now();
+      const startValue = currentValue;
+      const difference = to - startValue;
+      const animate2 = () => {
+        const elapsed = Date.now() - startTime;
+        const progress = Math.min(elapsed / (duration * 1e3), 1);
+        const easeOutCubic = 1 - (1 - progress) ** 3;
+        const newValue = startValue + difference * easeOutCubic;
+        setCurrentValue(newValue);
+        if (progress < 1) {
+          requestAnimationFrame(animate2);
+        } else {
+          setCurrentValue(to);
+          _optionalChain([onComplete, 'optionalCall', _4 => _4()]);
+        }
+      };
+      requestAnimationFrame(animate2);
+    }, delay * 1e3);
+    return () => clearTimeout(timer);
+  }, [shouldStart, currentValue, to, duration, delay, onComplete]);
+  const roundedValue = Math.round(currentValue);
+  const absValue = Math.abs(roundedValue);
+  const maxDigits = Math.max(Math.abs(from).toString().length, Math.abs(to).toString().length);
+  const places = Array.from({ length: maxDigits }, (_, i) => 10 ** (maxDigits - i - 1));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, className: `flex items-center ${className}`, children: [
+    roundedValue < 0 && "-",
+    places.map((place) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      Digit,
+      {
+        place,
+        value: absValue,
+        digitHeight,
+        duration
+      },
+      `${place}-${animationKey}`
+    ))
+  ] });
+}
+
+// src/ui/animation/svg-text.tsx
+
+
+
+function SvgText({
+  svg,
+  children,
+  className = "",
+  fontSize = "20vw",
+  fontWeight = "bold",
+  as: Component = "div"
+}) {
+  const textRef = _react.useRef.call(void 0, null);
+  const [textDimensions, setTextDimensions] = _react.useState.call(void 0, { width: 0, height: 0 });
+  const content = React6.Children.toArray(children).join("");
+  const maskId = React6.useId();
+  _react.useEffect.call(void 0, () => {
+    if (!textRef.current) return;
+    const updateDimensions = () => {
+      const rect = _optionalChain([textRef, 'access', _5 => _5.current, 'optionalAccess', _6 => _6.getBoundingClientRect, 'call', _7 => _7()]);
+      if (rect) {
+        setTextDimensions({
+          width: Math.max(rect.width, 200),
+          height: Math.max(rect.height, 100)
+        });
+      }
+    };
+    updateDimensions();
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(textRef.current);
+    return () => resizeObserver.disconnect();
+  }, []);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Component, { className: _chunkCJXIPSTGcjs.cn.call(void 0, "relative inline-block", className), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref: textRef,
+        className: "pointer-events-none absolute whitespace-nowrap font-bold opacity-0",
+        style: {
+          fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+          fontWeight,
+          fontFamily: "system-ui, -apple-system, sans-serif"
+        },
+        children: content
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "svg",
+      {
+        className: "block",
+        width: textDimensions.width,
+        height: textDimensions.height,
+        viewBox: `0 0 ${textDimensions.width} ${textDimensions.height}`,
+        style: {
+          fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+          fontWeight,
+          fontFamily: "system-ui, -apple-system, sans-serif"
+        },
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "mask", { id: maskId, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: "100%", height: "100%", fill: "black" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "text",
+              {
+                x: "50%",
+                y: "50%",
+                textAnchor: "middle",
+                dominantBaseline: "central",
+                fill: "white",
+                style: {
+                  fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+                  fontWeight,
+                  fontFamily: "system-ui, -apple-system, sans-serif"
+                },
+                children: content
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", { mask: `url(#${maskId})`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "foreignObject",
+            {
+              width: "100%",
+              height: "100%",
+              style: {
+                overflow: "visible"
+              },
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "div",
+                {
+                  style: {
+                    width: `${textDimensions.width}px`,
+                    height: `${textDimensions.height}px`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "div",
+                    {
+                      style: {
+                        width: "400px",
+                        height: "200px",
+                        transform: `scale(${Math.max(textDimensions.width / 400, textDimensions.height / 200)})`,
+                        transformOrigin: "center"
+                      },
+                      children: svg
+                    }
+                  )
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: content })
+  ] });
+}
+
+// src/ui/animation/text-reveal.tsx
+
+
+
+var containerVariants = {
+  fade: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.02 }
+    }
+  },
+  slideUp: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.04 }
+    }
+  },
+  slideDown: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.04 }
+    }
+  },
+  slideLeft: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.04 }
+    }
+  },
+  slideRight: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.04 }
+    }
+  },
+  scale: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.06 }
+    }
+  },
+  blur: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.03 }
+    }
+  },
+  typewriter: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.15 }
+    }
+  },
+  wave: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.12 }
+    }
+  },
+  stagger: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.08 }
+    }
+  },
+  rotate: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.05 }
+    }
+  },
+  elastic: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.07 }
+    }
+  }
+};
+var itemVariants = {
+  fade: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { duration: 0.6, ease: "easeOut" }
+    }
+  },
+  slideUp: {
+    hidden: { opacity: 0, y: 50, scale: 0.95 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1] }
+    }
+  },
+  slideDown: {
+    hidden: { opacity: 0, y: -30, scale: 0.98 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] }
+    }
+  },
+  slideLeft: {
+    hidden: { opacity: 0, x: 60, rotateY: 15 },
+    visible: {
+      opacity: 1,
+      x: 0,
+      rotateY: 0,
+      transition: { duration: 0.65, ease: [0.16, 1, 0.3, 1] }
+    }
+  },
+  slideRight: {
+    hidden: { opacity: 0, x: -60, rotateY: -15 },
+    visible: {
+      opacity: 1,
+      x: 0,
+      rotateY: 0,
+      transition: { duration: 0.65, ease: [0.16, 1, 0.3, 1] }
+    }
+  },
+  scale: {
+    hidden: { opacity: 0, scale: 0.8 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: { duration: 0.4, ease: [0.34, 1.56, 0.64, 1] }
+    }
+  },
+  blur: {
+    hidden: { opacity: 0, filter: "blur(4px)" },
+    visible: {
+      opacity: 1,
+      filter: "blur(0px)",
+      transition: { duration: 0.6, ease: "easeOut" }
+    }
+  },
+  typewriter: {
+    hidden: { width: 0 },
+    visible: {
+      width: "auto",
+      transition: { duration: 0.3, ease: "easeInOut" }
+    }
+  },
+  wave: {
+    hidden: { opacity: 0, y: 20, rotateZ: -5 },
+    visible: {
+      opacity: 1,
+      y: [20, -10, 0],
+      rotateZ: [-5, 5, 0],
+      transition: {
+        duration: 0.8,
+        ease: [0.34, 1.56, 0.64, 1],
+        times: [0, 0.5, 1]
+      }
+    }
+  },
+  stagger: {
+    hidden: { opacity: 0, y: 30, scale: 0.9 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94] }
+    }
+  },
+  rotate: {
+    hidden: { opacity: 0, rotateY: -90 },
+    visible: {
+      opacity: 1,
+      rotateY: 0,
+      transition: { duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94] }
+    }
+  },
+  elastic: {
+    hidden: { opacity: 0, scale: 0 },
+    visible: {
+      opacity: 1,
+      scale: [0, 1.2, 1],
+      transition: {
+        duration: 0.8,
+        ease: [0.68, -0.55, 0.265, 1.55],
+        times: [0, 0.6, 1]
+      }
+    }
+  }
+};
+function TextReveal({
+  children,
+  variant = "fade",
+  className,
+  style,
+  delay = 0,
+  duration = 0.6,
+  staggerDelay = 0.03,
+  once = true,
+  startOnView = true,
+  wordLevel = false
+}) {
+  const ref = _react.useRef.call(void 0, null);
+  const isInView = _react2.useInView.call(void 0, ref, { once, margin: "-10%" });
+  const [hasAnimated, setHasAnimated] = _react.useState.call(void 0, false);
+  const shouldAnimate = startOnView ? isInView : true;
+  const elements = wordLevel ? children.split(" ").map((word, i, arr) => i < arr.length - 1 ? `${word} ` : word) : children.split("");
+  const customContainerVariants = {
+    ...containerVariants[variant],
+    visible: {
+      transition: {
+        staggerChildren: staggerDelay,
+        delayChildren: delay
+      }
+    }
+  };
+  const originalVariant = itemVariants[variant];
+  const customItemVariants = duration === 0.6 ? originalVariant : {
+    hidden: originalVariant.hidden,
+    visible: {
+      ...originalVariant.visible,
+      transition: {
+        ...originalVariant.visible.transition,
+        duration
+      }
+    }
+  };
+  _react.useEffect.call(void 0, () => {
+    if (shouldAnimate && !hasAnimated) {
+      setHasAnimated(true);
+    }
+  }, [shouldAnimate, hasAnimated]);
+  const MotionComponent = variant === "typewriter" ? _react2.motion.div : _react2.motion.span;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _react2.motion.div,
+    {
+      ref,
+      className: _chunkCJXIPSTGcjs.cn.call(void 0, "inline-block", className),
+      variants: customContainerVariants,
+      initial: "hidden",
+      animate: shouldAnimate ? "visible" : "hidden",
+      style: {
+        willChange: "transform, opacity",
+        WebkitBackfaceVisibility: "hidden",
+        backfaceVisibility: "hidden",
+        WebkitTransform: "translate3d(0,0,0)",
+        transform: "translate3d(0,0,0)",
+        isolation: "isolate",
+        contain: "layout style paint",
+        ...style
+      },
+      children: variant === "typewriter" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _react2.motion.span,
+        {
+          className: "inline-block overflow-hidden whitespace-nowrap",
+          variants: customItemVariants,
+          style: {
+            display: "inline-block",
+            whiteSpace: "nowrap"
+          },
+          children
+        }
+      ) : elements.map((element, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        MotionComponent,
+        {
+          className: _chunkCJXIPSTGcjs.cn.call(void 0, "inline-block", {
+            "whitespace-pre": !wordLevel
+          }),
+          variants: customItemVariants,
+          style: {
+            display: "inline-block",
+            transformOrigin: variant === "rotate" ? "center center" : void 0,
+            willChange: "transform, opacity",
+            WebkitBackfaceVisibility: "hidden",
+            backfaceVisibility: "hidden",
+            WebkitTransform: "translate3d(0,0,0)",
+            transform: "translate3d(0,0,0)",
+            isolation: "isolate"
+          },
+          children: element === " " ? "\xA0" : element
+        },
+        index
+      ))
+    }
+  );
+}
+
+// src/ui/animation/typing-text.tsx
+
+
+
+
+
+
+var cursorVariants = {
+  blinking: {
+    opacity: [0, 0, 1, 1],
+    transition: {
+      duration: 1,
+      repeat: Infinity,
+      repeatDelay: 0,
+      ease: "linear",
+      times: [0, 0.5, 0.5, 1]
+    }
+  }
+};
+function TypingText({
+  text,
+  texts,
+  speed = 100,
+  delay = 0,
+  showCursor = true,
+  cursorClassName = "",
+  cursor = "|",
+  loop = false,
+  pauseDuration = 2e3,
+  className,
+  onComplete,
+  startOnView = true,
+  once = false,
+  inViewMargin,
+  ...props
+}) {
+  const ref = _react.useRef.call(void 0, null);
+  const isInView = _react2.useInView.call(void 0, ref, {
+    once,
+    margin: inViewMargin
+  });
+  const [hasAnimated, setHasAnimated] = _react.useState.call(void 0, false);
+  const [displayText, setDisplayText] = _react.useState.call(void 0, "");
+  const [currentIndex, setCurrentIndex] = _react.useState.call(void 0, 0);
+  const [isTyping, setIsTyping] = _react.useState.call(void 0, false);
+  const [currentTextIndex, setCurrentTextIndex] = _react.useState.call(void 0, 0);
+  const shouldStart = !startOnView || isInView && (!once || !hasAnimated);
+  const textArray = texts && texts.length > 0 ? texts : [text];
+  const currentText = _nullishCoalesce(textArray[currentTextIndex], () => ( ""));
+  _react.useEffect.call(void 0, () => {
+    if (!shouldStart) return;
+    const timeout = setTimeout(() => {
+      setIsTyping(true);
+      setHasAnimated(true);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [delay, shouldStart]);
+  _react.useEffect.call(void 0, () => {
+    if (!isTyping) return;
+    if (currentIndex < currentText.length) {
+      const timeout = setTimeout(() => {
+        setDisplayText(currentText.slice(0, currentIndex + 1));
+        setCurrentIndex(currentIndex + 1);
+      }, speed);
+      return () => clearTimeout(timeout);
+    } else {
+      _optionalChain([onComplete, 'optionalCall', _8 => _8()]);
+      if (loop && texts && texts.length > 1) {
+        const timeout = setTimeout(() => {
+          setDisplayText("");
+          setCurrentIndex(0);
+          setCurrentTextIndex((prev) => (prev + 1) % texts.length);
+        }, pauseDuration);
+        return () => clearTimeout(timeout);
+      }
+    }
+  }, [currentIndex, currentText, isTyping, speed, loop, texts, pauseDuration, onComplete]);
+  const finalVariants = {
+    container: {
+      hidden: { opacity: 0, y: 10 },
+      show: { opacity: 1, y: 0, transition: { staggerChildren: 0.02 } },
+      exit: { opacity: 0 }
+    }
+  };
+  const MotionComponent = _react2.motion.span;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    MotionComponent,
+    {
+      ref,
+      variants: finalVariants.container,
+      initial: "hidden",
+      whileInView: startOnView ? "show" : void 0,
+      animate: startOnView ? void 0 : "show",
+      exit: "exit",
+      className: _chunkCJXIPSTGcjs.cn.call(void 0, "whitespace-pre-wrap", className),
+      viewport: { once },
+      ...props,
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: { display: "inline-flex", alignItems: "center" }, children: [
+        displayText,
+        showCursor && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _react2.motion.span,
+          {
+            variants: cursorVariants,
+            animate: "blinking",
+            className: _chunkCJXIPSTGcjs.cn.call(void 0, 
+              "ms-1 inline-block w-px select-none font-normal text-foreground",
+              cursorClassName
+            ),
+            children: cursor
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/ui/animation/video-text.tsx
+
+
+
+function VideoText({
+  src,
+  children,
+  className = "",
+  autoPlay = true,
+  muted = true,
+  loop = true,
+  preload = "auto",
+  fontSize = "20vw",
+  fontWeight = "bold",
+  as: Component = "div",
+  onPlay,
+  onPause,
+  onEnded
+}) {
+  const videoRef = _react.useRef.call(void 0, null);
+  const canvasRef = _react.useRef.call(void 0, null);
+  const textRef = _react.useRef.call(void 0, null);
+  const containerRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    const textElement = textRef.current;
+    const container = containerRef.current;
+    if (!video || !canvas || !textElement || !container) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    let animationId;
+    const updateCanvas = () => {
+      const text = textElement.textContent || "";
+      ctx.font = `${fontWeight} ${typeof fontSize === "number" ? `${fontSize}px` : fontSize} system-ui, -apple-system, sans-serif`;
+      const textMetrics = ctx.measureText(text);
+      const textWidth = textMetrics.width;
+      const textHeight = typeof fontSize === "number" ? fontSize : parseFloat(fontSize.replace(/[^\d.]/g, "")) || 100;
+      const padding = 40;
+      canvas.width = Math.max(textWidth + padding * 2, 400);
+      canvas.height = Math.max(textHeight + padding * 2, 200);
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      ctx.globalCompositeOperation = "destination-in";
+      ctx.fillStyle = "white";
+      ctx.font = `${fontWeight} ${typeof fontSize === "number" ? `${fontSize}px` : fontSize} system-ui, -apple-system, sans-serif`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(text, canvas.width / 2, canvas.height / 2);
+      ctx.globalCompositeOperation = "source-over";
+      animationId = requestAnimationFrame(updateCanvas);
+    };
+    const handleVideoLoad = () => {
+      updateCanvas();
+    };
+    const handleResize = () => {
+      updateCanvas();
+    };
+    video.addEventListener("loadeddata", handleVideoLoad);
+    video.addEventListener("play", updateCanvas);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      video.removeEventListener("loadeddata", handleVideoLoad);
+      video.removeEventListener("play", updateCanvas);
+      window.removeEventListener("resize", handleResize);
+      if (animationId) {
+        cancelAnimationFrame(animationId);
+      }
+    };
+  }, [fontSize, fontWeight]);
+  const sources = Array.isArray(src) ? src : [src];
+  const content = React7.Children.toArray(children).join("");
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    Component,
+    {
+      ref: containerRef,
+      className: _chunkCJXIPSTGcjs.cn.call(void 0, "relative inline-block overflow-hidden", className),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "video",
+          {
+            ref: videoRef,
+            className: "pointer-events-none absolute opacity-0",
+            autoPlay,
+            muted,
+            loop,
+            preload,
+            playsInline: true,
+            onPlay,
+            onPause,
+            onEnded,
+            crossOrigin: "anonymous",
+            children: [
+              sources.map((source, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "source", { src: source }, index)),
+              "Your browser does not support the video tag."
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "block",
+            style: {
+              width: "100%",
+              height: "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            ref: textRef,
+            className: "pointer-events-none absolute font-bold opacity-0",
+            style: {
+              fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+              fontWeight
+            },
+            "aria-label": content,
+            children
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: content })
+      ]
+    }
+  );
+}
+
+// src/ui/animation/word-rotate.tsx
+
+
+
+
+
+
+function WordRotate({
+  words,
+  duration = 1500,
+  animationStyle = "fade",
+  loop = true,
+  className,
+  containerClassName,
+  pauseDuration = 300,
+  startOnView = true,
+  once = false,
+  inViewMargin,
+  ...props
+}) {
+  const ref = _react.useRef.call(void 0, null);
+  const isInView = _react2.useInView.call(void 0, ref, {
+    once,
+    margin: inViewMargin
+  });
+  const [hasAnimated, setHasAnimated] = _react.useState.call(void 0, false);
+  const [currentWord, setCurrentWord] = _react.useState.call(void 0, 0);
+  const [show, setShow] = _react.useState.call(void 0, true);
+  const variants = {
+    fade: {
+      initial: { opacity: 0 },
+      animate: {
+        opacity: 1,
+        transition: {
+          duration: 0.4,
+          ease: [0.4, 0, 0.2, 1]
+          // Custom cubic-bezier for smooth fade
+        }
+      },
+      exit: {
+        opacity: 0,
+        transition: {
+          duration: 0.3,
+          ease: [0.4, 0, 1, 1]
+          // Faster exit
+        }
+      }
+    },
+    "slide-up": {
+      initial: { opacity: 0, y: 24 },
+      animate: {
+        opacity: 1,
+        y: 0,
+        transition: {
+          type: "spring",
+          stiffness: 300,
+          damping: 25,
+          mass: 0.8
+        }
+      },
+      exit: {
+        opacity: 0,
+        y: -24,
+        transition: {
+          duration: 0.25,
+          ease: [0.4, 0, 1, 1]
+        }
+      }
+    },
+    "slide-down": {
+      initial: { opacity: 0, y: -24 },
+      animate: {
+        opacity: 1,
+        y: 0,
+        transition: {
+          type: "spring",
+          stiffness: 300,
+          damping: 25,
+          mass: 0.8
+        }
+      },
+      exit: {
+        opacity: 0,
+        y: 24,
+        transition: {
+          duration: 0.25,
+          ease: [0.4, 0, 1, 1]
+        }
+      }
+    },
+    scale: {
+      initial: { opacity: 0, scale: 0.8 },
+      animate: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+          type: "spring",
+          stiffness: 400,
+          damping: 30,
+          mass: 0.6
+        }
+      },
+      exit: {
+        opacity: 0,
+        scale: 0.9,
+        transition: {
+          duration: 0.2,
+          ease: [0.4, 0, 1, 1]
+        }
+      }
+    },
+    flip: {
+      initial: { opacity: 0, rotateX: 90 },
+      animate: {
+        opacity: 1,
+        rotateX: 0,
+        transition: {
+          type: "spring",
+          stiffness: 200,
+          damping: 20,
+          mass: 1
+        }
+      },
+      exit: {
+        opacity: 0,
+        rotateX: -90,
+        transition: {
+          duration: 0.3,
+          ease: [0.4, 0, 1, 1]
+        }
+      }
+    }
+  };
+  const shouldStart = !startOnView || isInView && (!once || !hasAnimated);
+  _react.useEffect.call(void 0, () => {
+    if (!shouldStart) return;
+    setHasAnimated(true);
+    const interval = setInterval(() => {
+      setShow(false);
+      setTimeout(() => {
+        setCurrentWord((prev) => {
+          if (loop) {
+            return (prev + 1) % words.length;
+          } else {
+            return prev < words.length - 1 ? prev + 1 : prev;
+          }
+        });
+        setShow(true);
+      }, pauseDuration);
+    }, duration + pauseDuration);
+    return () => clearInterval(interval);
+  }, [shouldStart, duration, pauseDuration, words.length, loop]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _react2.motion.span,
+    {
+      ref,
+      className: _chunkCJXIPSTGcjs.cn.call(void 0, "inline-block overflow-hidden", containerClassName),
+      ...props,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _react2.motion.span,
+        {
+          initial: "initial",
+          animate: show ? "animate" : "exit",
+          exit: "exit",
+          variants: variants[animationStyle],
+          transition: { duration: 0.5 },
+          style: {
+            perspective: animationStyle === "flip" ? 1e3 : void 0
+          },
+          className: _chunkCJXIPSTGcjs.cn.call(void 0, "inline-block overflow-hidden", className),
+          children: words[currentWord]
+        },
+        currentWord
+      )
+    }
+  );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.AvatarGroup = AvatarGroup; exports.AvatarGroupItem = AvatarGroupItem; exports.AvatarGroupTooltip = AvatarGroupTooltip; exports.CountingNumber = CountingNumber; exports.GithubButton = GithubButton; exports.GradientBackground = GradientBackground; exports.GridBackground = GridBackground; exports.HoverBackground = HoverBackground; exports.Marquee = Marquee; exports.ShimmeringText = ShimmeringText; exports.SlidingNumber = SlidingNumber; exports.SvgText = SvgText; exports.TextReveal = TextReveal; exports.TypingText = TypingText; exports.VideoText = VideoText; exports.WordRotate = WordRotate; exports.githubButtonVariants = githubButtonVariants;