pelatform-ui 1.2.9 → 1.3.1

package/dist/animation.js

@@ -1,2 +1,1785 @@
-// src/animation.ts
-export * from "@pelatform/ui.components/animation";
+"use client";
+import {
+  HoverBackground
+} from "./chunk-4Z3DBWB6.js";
+
+// src/ui/animation/avatar-group.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion,
+  useMotionValue,
+  useSpring,
+  useTransform
+} from "motion/react";
+import { cn } from "@pelatform/utils";
+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("flex -space-x-2.5", 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(
+              "absolute -top-16 left-1/2 z-50 flex -translate-x-1/2 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: "absolute inset-x-10 -bottom-px 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: "absolute -bottom-px 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 { cn as cn2 } from "@pelatform/utils";
+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: cn2("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 { StarIcon } from "lucide-react";
+import { motion as motion3, useInView as useInView2 } from "motion/react";
+import { cn as cn3 } from "@pelatform/utils";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var githubButtonVariants = cva(
+  "backface-visibility-hidden group relative inline-flex transform-gpu cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap font-medium ring-offset-background transition-transform duration-200 ease-out will-change-transform hover:scale-105 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "border-gray-700 bg-zinc-950 text-white hover:bg-zinc-900 dark:border-gray-300 dark:bg-zinc-50 dark:text-zinc-950 dark:hover:bg-zinc-50",
+        outline: "border border-input bg-background text-accent-foreground hover:bg-accent"
+      },
+      size: {
+        default: "h-8.5 gap-2 rounded-md px-3 text-[0.8125rem] leading-none [&_svg]:size-4",
+        sm: "h-7 gap-1.5 rounded-md px-2.5 text-xs leading-none [&_svg]:size-3.5",
+        lg: "h-10 gap-2.5 rounded-md px-4 text-sm leading-none [&_svg]:size-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: cn3(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: cn3(
+              "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(StarIcon, { className: "fill-muted-foreground text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx3(
+            StarIcon,
+            {
+              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: cn3("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 { cn as cn4 } from "@pelatform/utils";
+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: cn4(
+        "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 { cn as cn5 } from "@pelatform/utils";
+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: cn5("relative size-full overflow-hidden", background, className),
+      style: gridStyle,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: cn5("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: cn5("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: cn5(
+                "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 { cn as cn6 } from "@pelatform/utils";
+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: cn6(
+        "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: cn6(
+              !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 { cn as cn7 } from "@pelatform/utils";
+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: cn7(
+        "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, useLayoutEffect, useMemo as useMemo3, 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);
+  const animationFrameRef = useRef4(null);
+  const timeoutRef = useRef4(null);
+  const onCompleteRef = useRef4(onComplete);
+  useLayoutEffect(() => {
+    onCompleteRef.current = onComplete;
+  }, [onComplete]);
+  useEffect3(() => {
+    setCurrentValue(from);
+    setHasAnimated(false);
+    setAnimationKey((prev) => prev + 1);
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, [from]);
+  const shouldStart = useMemo3(() => {
+    if (!startOnView) return true;
+    if (!isInView) return false;
+    if (once && hasAnimated) return false;
+    return true;
+  }, [startOnView, isInView, once, hasAnimated]);
+  useEffect3(() => {
+    if (!shouldStart) return;
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setHasAnimated(true);
+    timeoutRef.current = setTimeout(() => {
+      const startTime = Date.now();
+      const difference = to - from;
+      const animate2 = () => {
+        const elapsed = Date.now() - startTime;
+        const progress = Math.min(elapsed / (duration * 1e3), 1);
+        const easeOutCubic = 1 - (1 - progress) ** 3;
+        const newValue = from + difference * easeOutCubic;
+        setCurrentValue(newValue);
+        if (progress < 1) {
+          animationFrameRef.current = requestAnimationFrame(animate2);
+        } else {
+          setCurrentValue(to);
+          animationFrameRef.current = null;
+          onCompleteRef.current?.();
+        }
+      };
+      animationFrameRef.current = requestAnimationFrame(animate2);
+    }, delay * 1e3);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+    };
+  }, [shouldStart, from, to, duration, delay]);
+  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 = useMemo3(
+    () => Array.from({ length: maxDigits }, (_, i) => 10 ** (maxDigits - i - 1)),
+    [maxDigits]
+  );
+  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 { cn as cn8 } from "@pelatform/utils";
+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: cn8("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 { cn as cn9 } from "@pelatform/utils";
+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: cn9("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: cn9("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 { cn as cn10 } from "@pelatform/utils";
+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: cn10("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: cn10(
+              "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 { cn as cn11 } from "@pelatform/utils";
+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: cn11("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 { cn as cn12 } from "@pelatform/utils";
+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: cn12("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: cn12("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
+};