@pelatform/ui 1.6.0 → 2.0.0

package/dist/animation.js

@@ -1,1752 +1,2 @@
-"use client";
-'use client';
-
-import {
-  HoverBackground
-} from "./chunk-D373YKDA.js";
-import {
-  cn
-} from "./chunk-RQHJBTEU.js";
-
-// src/ui/animation/avatar-group.tsx
-import * as React from "react";
-import {
-  AnimatePresence,
-  motion,
-  useMotionValue,
-  useSpring,
-  useTransform
-} from "motion/react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var AvatarGroupContext = React.createContext(null);
-var StaggeredContent = ({ content }) => {
-  const children = React.Children.toArray(content);
-  return /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      initial: "initial",
-      animate: "animate",
-      exit: "exit",
-      variants: {
-        animate: { transition: { staggerChildren: 0.08 } }
-      },
-      children: children.map((child, i) => /* @__PURE__ */ jsx(
-        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__ */ jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: cn("-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 = useMotionValue(0);
-  const animation = itemAnimation || context?.animation || "default";
-  const finalTooltipClassName = tooltipClassName || context?.tooltipClassName;
-  const rotate = useSpring(useTransform(x, [-100, 100], [-45, 45]), springConfig);
-  const translateX = useSpring(useTransform(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__ */ jsxs(
-    "div",
-    {
-      className: cn("group relative", className),
-      onMouseEnter: () => setHoveredIndex(true),
-      onMouseLeave: () => setHoveredIndex(false),
-      children: [
-        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: hoveredIndex && tooltipContent && /* @__PURE__ */ jsxs(
-          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: cn(
-              "-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__ */ jsx(
-                motion.div,
-                {
-                  className: "-bottom-px absolute inset-x-10 z-30 h-px w-[20%] bg-linear-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__ */ jsx(
-                motion.div,
-                {
-                  className: "-bottom-px absolute left-10 z-30 h-px w-[40%] bg-linear-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__ */ jsx(StaggeredContent, { content: tooltipContent }) : tooltipContent
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          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__ */ jsx(
-    motion.div,
-    {
-      initial: { opacity: 0, y: 20, scale: 0.6 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: { duration: 0.15 },
-      className: cn("relative z-30 hidden", className),
-      children
-    }
-  );
-}
-
-// src/ui/animation/counting-number.tsx
-import { useEffect, useRef, useState as useState2 } from "react";
-import { animate, motion as motion2, useInView, useMotionValue as useMotionValue2 } from "motion/react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function CountingNumber({
-  from = 0,
-  to = 100,
-  duration = 2,
-  delay = 0,
-  className,
-  startOnView = true,
-  once = false,
-  inViewMargin,
-  onComplete,
-  format,
-  ...props
-}) {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once, margin: inViewMargin });
-  const [hasAnimated, setHasAnimated] = useState2(false);
-  const [display, setDisplay] = useState2(from);
-  const motionValue = useMotionValue2(from);
-  const shouldStart = !startOnView || isInView && (!once || !hasAnimated);
-  useEffect(() => {
-    if (!shouldStart) return;
-    setHasAnimated(true);
-    const timeout = setTimeout(() => {
-      const controls = animate(motionValue, to, {
-        duration,
-        onUpdate: (v) => setDisplay(v),
-        onComplete
-      });
-      return () => controls.stop();
-    }, delay);
-    return () => clearTimeout(timeout);
-  }, [shouldStart, to, duration, delay, motionValue, onComplete]);
-  return /* @__PURE__ */ jsx2(motion2.span, { ref, className: cn("inline-block", className), ...props, children: format ? format(display) : Math.round(display) });
-}
-
-// src/ui/animation/github-button.tsx
-import React2, { useCallback, useEffect as useEffect2, useState as useState3 } from "react";
-import { cva } from "class-variance-authority";
-import { Star } from "lucide-react";
-import { motion as motion3, useInView as useInView2 } from "motion/react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var githubButtonVariants = cva(
-  "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] = useState3(initialStars);
-  const [isAnimating, setIsAnimating] = useState3(false);
-  const [starProgress, setStarProgress] = useState3(filled ? 100 : 0);
-  const [hasAnimated, setHasAnimated] = useState3(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 = useCallback(() => {
-    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 = React2.useRef(null);
-  const isInView = useInView2(ref, inViewOptions);
-  useEffect2(() => {
-    setHasAnimated(false);
-    setCurrentStars(initialStars);
-  }, [initialStars]);
-  useEffect2(() => {
-    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 {
-      try {
-        window.open(repoUrl, "_blank", "noopener,noreferrer");
-      } catch {
-        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__ */ jsxs2(
-    "button",
-    {
-      ref,
-      className: cn(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__ */ jsx3(
-          "div",
-          {
-            className: cn(
-              "relative flex h-full items-center justify-center",
-              separator && "w-9 border-input border-e bg-muted/60"
-            ),
-            children: /* @__PURE__ */ jsx3("svg", { role: "img", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx3("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__ */ jsx3("span", { children: label }),
-        showStarIcon && /* @__PURE__ */ jsxs2("div", { className: "relative inline-flex shrink-0", children: [
-          /* @__PURE__ */ jsx3(Star, { className: "fill-muted-foreground text-muted-foreground", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx3(
-            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__ */ jsxs2("div", { className: cn("relative flex flex-col overflow-hidden font-semibold", starsClass), children: [
-          /* @__PURE__ */ jsx3(
-            motion3.div,
-            {
-              animate: { opacity: 1 },
-              transition: {
-                type: "spring",
-                stiffness: 300,
-                damping: 30,
-                ...transition
-              },
-              className: "tabular-nums",
-              children: /* @__PURE__ */ jsx3("span", { children: currentStars > 0 && formatNumber(currentStars) })
-            }
-          ),
-          fixedWidth && /* @__PURE__ */ jsx3("span", { className: "h-0 overflow-hidden tabular-nums opacity-0", children: formatNumber(targetStars) })
-        ] })
-      ]
-    }
-  );
-}
-
-// src/ui/animation/gradient-background.tsx
-import { motion as motion4 } from "motion/react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-function GradientBackground({
-  className,
-  transition = { duration: 10, ease: "easeInOut", repeat: Infinity },
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(
-    motion4.div,
-    {
-      "data-slot": "gradient-background",
-      className: cn(
-        "size-full bg-linear-to-br bg-size-[300%_300%] 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
-import * as React3 from "react";
-import { motion as motion5 } from "motion/react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-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__ */ jsxs3(
-    motion5.div,
-    {
-      "data-slot": "grid-background",
-      className: cn("relative size-full overflow-hidden", background, className),
-      style: gridStyle,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx5(
-          "div",
-          {
-            className: cn("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__ */ jsx5(
-              "div",
-              {
-                className: cn("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__ */ jsx5(
-            motion5.div,
-            {
-              className: cn(
-                "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__ */ jsx5("div", { className: "relative z-10 size-full", children })
-      ]
-    }
-  );
-}
-
-// src/ui/animation/marquee.tsx
-import React4, { useRef as useRef2 } from "react";
-import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
-function Marquee({
-  className,
-  reverse = false,
-  pauseOnHover = false,
-  children,
-  vertical = false,
-  repeat = 4,
-  ariaLabel,
-  ariaLive = "off",
-  ariaRole = "marquee",
-  ...props
-}) {
-  const marqueeRef = useRef2(null);
-  return /* @__PURE__ */ jsx6(
-    "div",
-    {
-      ...props,
-      ref: marqueeRef,
-      "data-slot": "marquee",
-      className: cn(
-        "group flex gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
-        {
-          "flex-row": !vertical,
-          "flex-col": vertical
-        },
-        className
-      ),
-      "aria-label": ariaLabel,
-      "aria-live": ariaLive,
-      role: ariaRole,
-      tabIndex: 0,
-      children: React4.useMemo(
-        () => /* @__PURE__ */ jsx6(Fragment, { children: Array.from({ length: repeat }, (_, i) => /* @__PURE__ */ jsx6(
-          "div",
-          {
-            className: cn(
-              !vertical ? "flex-row gap-(--gap)" : "flex-col gap-(--gap)",
-              "flex shrink-0 justify-around",
-              !vertical && "animate-marquee flex-row",
-              vertical && "animate-marquee-vertical flex-col",
-              pauseOnHover && "group-hover:paused",
-              reverse && "direction-[reverse]"
-            ),
-            children
-          },
-          i
-        )) }),
-        [repeat, children, vertical, pauseOnHover, reverse]
-      )
-    }
-  );
-}
-
-// src/ui/animation/shimmering-text.tsx
-import { useMemo as useMemo2, useRef as useRef3 } from "react";
-import { motion as motion6, useInView as useInView3 } from "motion/react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-function ShimmeringText({
-  text,
-  duration = 2,
-  delay = 0,
-  repeat = true,
-  repeatDelay = 0.5,
-  className,
-  startOnView = true,
-  once = false,
-  inViewMargin,
-  spread = 2,
-  color,
-  shimmerColor
-}) {
-  const ref = useRef3(null);
-  const isInView = useInView3(ref, { once, margin: inViewMargin });
-  const dynamicSpread = useMemo2(() => {
-    return text.length * spread;
-  }, [text, spread]);
-  const shouldAnimate = !startOnView || isInView;
-  return /* @__PURE__ */ jsx7(
-    motion6.span,
-    {
-      ref,
-      className: cn(
-        "relative inline-block bg-size-[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
-import { useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
-import { motion as motion7, useInView as useInView4, useSpring as useSpring2, useTransform as useTransform2 } from "motion/react";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-function Digit({
-  place,
-  value,
-  digitHeight,
-  duration
-}) {
-  const valueRoundedToPlace = Math.floor(value / place);
-  const animatedValue = useSpring2(valueRoundedToPlace, {
-    duration: duration * 1e3
-    // Convert to milliseconds
-  });
-  useEffect3(() => {
-    animatedValue.set(valueRoundedToPlace);
-  }, [animatedValue, valueRoundedToPlace]);
-  return /* @__PURE__ */ jsx8("div", { style: { height: digitHeight }, className: "relative w-[1ch] overflow-hidden tabular-nums", children: Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ jsx8(MyNumber, { mv: animatedValue, number: i, digitHeight }, i)) });
-}
-function MyNumber({
-  mv,
-  number,
-  digitHeight
-}) {
-  const y = useTransform2(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__ */ jsx8(motion7.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 = useRef4(null);
-  const isInView = useInView4(ref, { once: false });
-  const [currentValue, setCurrentValue] = useState4(from);
-  const [hasAnimated, setHasAnimated] = useState4(false);
-  const [animationKey, setAnimationKey] = useState4(0);
-  useEffect3(() => {
-    setCurrentValue(from);
-    setHasAnimated(false);
-    setAnimationKey((prev) => prev + 1);
-  }, [from]);
-  useEffect3(() => {
-    setCurrentValue(from);
-    setHasAnimated(false);
-    setAnimationKey((prev) => prev + 1);
-  }, [from]);
-  useEffect3(() => {
-    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);
-  useEffect3(() => {
-    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);
-          onComplete?.();
-        }
-      };
-      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__ */ jsxs4("div", { ref, className: `flex items-center ${className}`, children: [
-    roundedValue < 0 && "-",
-    places.map((place) => /* @__PURE__ */ jsx8(
-      Digit,
-      {
-        place,
-        value: absValue,
-        digitHeight,
-        duration
-      },
-      `${place}-${animationKey}`
-    ))
-  ] });
-}
-
-// src/ui/animation/svg-text.tsx
-import * as React5 from "react";
-import { useEffect as useEffect4, useRef as useRef5, useState as useState5 } from "react";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function SvgText({
-  svg,
-  children,
-  className = "",
-  fontSize = "20vw",
-  fontWeight = "bold",
-  as: Component = "div"
-}) {
-  const textRef = useRef5(null);
-  const [textDimensions, setTextDimensions] = useState5({ width: 0, height: 0 });
-  const content = React5.Children.toArray(children).join("");
-  const maskId = React5.useId();
-  useEffect4(() => {
-    if (!textRef.current) return;
-    const updateDimensions = () => {
-      const rect = textRef.current?.getBoundingClientRect();
-      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__ */ jsxs5(Component, { className: cn("relative inline-block", className), children: [
-    /* @__PURE__ */ jsx9(
-      "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__ */ jsxs5(
-      "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__ */ jsx9("defs", { children: /* @__PURE__ */ jsxs5("mask", { id: maskId, children: [
-            /* @__PURE__ */ jsx9("rect", { width: "100%", height: "100%", fill: "black" }),
-            /* @__PURE__ */ jsx9(
-              "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__ */ jsx9("g", { mask: `url(#${maskId})`, children: /* @__PURE__ */ jsx9(
-            "foreignObject",
-            {
-              width: "100%",
-              height: "100%",
-              style: {
-                overflow: "visible"
-              },
-              children: /* @__PURE__ */ jsx9(
-                "div",
-                {
-                  style: {
-                    width: `${textDimensions.width}px`,
-                    height: `${textDimensions.height}px`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  },
-                  children: /* @__PURE__ */ jsx9(
-                    "div",
-                    {
-                      style: {
-                        width: "400px",
-                        height: "200px",
-                        transform: `scale(${Math.max(textDimensions.width / 400, textDimensions.height / 200)})`,
-                        transformOrigin: "center"
-                      },
-                      children: svg
-                    }
-                  )
-                }
-              )
-            }
-          ) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx9("span", { className: "sr-only", children: content })
-  ] });
-}
-
-// src/ui/animation/text-reveal.tsx
-import { useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
-import { motion as motion8, useInView as useInView5 } from "motion/react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-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 = useRef6(null);
-  const isInView = useInView5(ref, { once, margin: "-10%" });
-  const [hasAnimated, setHasAnimated] = useState6(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
-      }
-    }
-  };
-  useEffect5(() => {
-    if (shouldAnimate && !hasAnimated) {
-      setHasAnimated(true);
-    }
-  }, [shouldAnimate, hasAnimated]);
-  const MotionComponent = variant === "typewriter" ? motion8.div : motion8.span;
-  return /* @__PURE__ */ jsx10(
-    motion8.div,
-    {
-      ref,
-      className: cn("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__ */ jsx10(
-        motion8.span,
-        {
-          className: "inline-block overflow-hidden whitespace-nowrap",
-          variants: customItemVariants,
-          style: {
-            display: "inline-block",
-            whiteSpace: "nowrap"
-          },
-          children
-        }
-      ) : elements.map((element, index) => /* @__PURE__ */ jsx10(
-        MotionComponent,
-        {
-          className: cn("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
-import { useEffect as useEffect6, useRef as useRef7, useState as useState7 } from "react";
-import {
-  motion as motion9,
-  useInView as useInView6
-} from "motion/react";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-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 = useRef7(null);
-  const isInView = useInView6(ref, {
-    once,
-    margin: inViewMargin
-  });
-  const [hasAnimated, setHasAnimated] = useState7(false);
-  const [displayText, setDisplayText] = useState7("");
-  const [currentIndex, setCurrentIndex] = useState7(0);
-  const [isTyping, setIsTyping] = useState7(false);
-  const [currentTextIndex, setCurrentTextIndex] = useState7(0);
-  const shouldStart = !startOnView || isInView && (!once || !hasAnimated);
-  const textArray = texts && texts.length > 0 ? texts : [text];
-  const currentText = textArray[currentTextIndex] ?? "";
-  useEffect6(() => {
-    if (!shouldStart) return;
-    const timeout = setTimeout(() => {
-      setIsTyping(true);
-      setHasAnimated(true);
-    }, delay);
-    return () => clearTimeout(timeout);
-  }, [delay, shouldStart]);
-  useEffect6(() => {
-    if (!isTyping) return;
-    if (currentIndex < currentText.length) {
-      const timeout = setTimeout(() => {
-        setDisplayText(currentText.slice(0, currentIndex + 1));
-        setCurrentIndex(currentIndex + 1);
-      }, speed);
-      return () => clearTimeout(timeout);
-    } else {
-      onComplete?.();
-      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 = motion9.span;
-  return /* @__PURE__ */ jsx11(
-    MotionComponent,
-    {
-      ref,
-      variants: finalVariants.container,
-      initial: "hidden",
-      whileInView: startOnView ? "show" : void 0,
-      animate: startOnView ? void 0 : "show",
-      exit: "exit",
-      className: cn("whitespace-pre-wrap", className),
-      viewport: { once },
-      ...props,
-      children: /* @__PURE__ */ jsxs6("span", { style: { display: "inline-flex", alignItems: "center" }, children: [
-        displayText,
-        showCursor && /* @__PURE__ */ jsx11(
-          motion9.span,
-          {
-            variants: cursorVariants,
-            animate: "blinking",
-            className: cn(
-              "ms-1 inline-block w-px select-none font-normal text-foreground",
-              cursorClassName
-            ),
-            children: cursor
-          }
-        )
-      ] })
-    }
-  );
-}
-
-// src/ui/animation/video-text.tsx
-import * as React6 from "react";
-import { useEffect as useEffect7, useRef as useRef8 } from "react";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-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 = useRef8(null);
-  const canvasRef = useRef8(null);
-  const textRef = useRef8(null);
-  const containerRef = useRef8(null);
-  useEffect7(() => {
-    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 = React6.Children.toArray(children).join("");
-  return /* @__PURE__ */ jsxs7(
-    Component,
-    {
-      ref: containerRef,
-      className: cn("relative inline-block overflow-hidden", className),
-      children: [
-        /* @__PURE__ */ jsxs7(
-          "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__ */ jsx12("source", { src: source }, index)),
-              "Your browser does not support the video tag."
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx12(
-          "canvas",
-          {
-            ref: canvasRef,
-            className: "block",
-            style: {
-              width: "100%",
-              height: "auto"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx12(
-          "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__ */ jsx12("span", { className: "sr-only", children: content })
-      ]
-    }
-  );
-}
-
-// src/ui/animation/word-rotate.tsx
-import { useEffect as useEffect8, useRef as useRef9, useState as useState8 } from "react";
-import {
-  motion as motion10,
-  useInView as useInView7
-} from "motion/react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-function WordRotate({
-  words,
-  duration = 1500,
-  animationStyle = "fade",
-  loop = true,
-  className,
-  containerClassName,
-  pauseDuration = 300,
-  startOnView = true,
-  once = false,
-  inViewMargin,
-  ...props
-}) {
-  const ref = useRef9(null);
-  const isInView = useInView7(ref, {
-    once,
-    margin: inViewMargin
-  });
-  const [hasAnimated, setHasAnimated] = useState8(false);
-  const [currentWord, setCurrentWord] = useState8(0);
-  const [show, setShow] = useState8(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);
-  useEffect8(() => {
-    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__ */ jsx13(
-    motion10.span,
-    {
-      ref,
-      className: cn("inline-block overflow-hidden", containerClassName),
-      ...props,
-      children: /* @__PURE__ */ jsx13(
-        motion10.span,
-        {
-          initial: "initial",
-          animate: show ? "animate" : "exit",
-          exit: "exit",
-          variants: variants[animationStyle],
-          transition: { duration: 0.5 },
-          style: {
-            perspective: animationStyle === "flip" ? 1e3 : void 0
-          },
-          className: cn("inline-block overflow-hidden", className),
-          children: words[currentWord]
-        },
-        currentWord
-      )
-    }
-  );
-}
-export {
-  AvatarGroup,
-  AvatarGroupItem,
-  AvatarGroupTooltip,
-  CountingNumber,
-  GithubButton,
-  GradientBackground,
-  GridBackground,
-  HoverBackground,
-  Marquee,
-  ShimmeringText,
-  SlidingNumber,
-  SvgText,
-  TextReveal,
-  TypingText,
-  VideoText,
-  WordRotate,
-  githubButtonVariants
-};
+// src/animation.ts
+export * from "@pelatform/ui.animation";