frontend/components/ui/GradientText.tsx

'use client'

import { motion } from 'framer-motion'
import { cn } from '@/lib/utils'

interface GradientTextProps {
    children: React.ReactNode
    className?: string
}

export default function GradientText({ children, className }: GradientTextProps) {
    return (
        <motion.span
            initial={{ backgroundPosition: '0% 50%' }}
            animate={{ backgroundPosition: '100% 50%' }}
            transition={{ duration: 5, repeat: Infinity, repeatType: 'reverse', ease: 'linear' }}
            className={cn(
                "bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 via-purple-600 to-cyan-600 bg-[length:200%_auto]",
                className
            )}
        >
            {children}
        </motion.span>
    )
}