import * as React from "react" import { motion, Variants } from "framer-motion" import { cn } from "@/lib/utils" interface AnimatedTextProps extends React.HTMLAttributes { text: string duration?: number delay?: number replay?: boolean className?: string textClassName?: string underlineClassName?: string as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" underlineGradient?: string underlineHeight?: string underlineOffset?: string } const AnimatedText = React.forwardRef( ({ text, duration = 0.5, delay = 0.1, replay = true, className, textClassName, underlineClassName, as: Component = "h1", underlineGradient = "from-blue-500 via-purple-500 to-pink-500", underlineHeight = "h-1", underlineOffset = "-bottom-2", ...props }, ref) => { const letters = Array.from(text) const container: Variants = { hidden: { opacity: 0 }, visible: (i: number = 1) => ({ opacity: 1, transition: { staggerChildren: duration, delayChildren: i * delay } }) } const child: Variants = { visible: { opacity: 1, y: 0, transition: { type: "spring", damping: 12, stiffness: 200 } }, hidden: { opacity: 0, y: 20, transition: { type: "spring", damping: 12, stiffness: 200 } } } const lineVariants: Variants = { hidden: { width: "0%", left: "50%" }, visible: { width: "100%", left: "0%", transition: { delay: letters.length * delay, duration: 0.8, ease: "easeOut" } } } return (

{letters.map((letter, index) => ( {letter === " " ? "\u00A0" : letter} ))}

) } ) AnimatedText.displayName = "AnimatedText" export { AnimatedText }