Gradient Wave Text

'use client'
 
import { GradientWaveText } from '@/components/text/gradient-wave-text'
 
<GradientWaveText text="Default Gradient Wave" />

'use client'
 
import { useState } from 'react'
 
import { motion, type Transition } from 'motion/react'
// import { useTheme } from 'next-themes'
 
import { cn } from '@/lib/utils'
 
interface GradientWaveTextProps {
  text: string
  direction?: 'to-r' | 'to-b' | 'to-br' | 'circle'
  fromColor?: string
  viaColor?: string
  toColor?: string
  duration?: number
  hoverEffect?: boolean
  className?: string
  gradientType?: 'linear' | 'radial'
  textStroke?: boolean
  easing?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut'
  theme?: 'default' | 'ocean' | 'sunset' | 'forest'
  animationType?: 'wave' | 'pulse' | 'shimmer'
  as?: React.ElementType
}
 
const themes = {
  default: { from: 'from-purple-500', via: 'via-pink-500', to: 'to-red-500' },
  ocean: { from: 'from-blue-500', via: 'via-cyan-400', to: 'to-teal-500' },
  sunset: { from: 'from-yellow-400', via: 'via-orange-500', to: 'to-red-600' },
  forest: { from: 'from-green-600', via: 'via-emerald-500', to: 'to-lime-400' },
}
 
const directionClasses = {
  'to-r': 'bg-gradient-to-r',
  'to-b': 'bg-gradient-to-b',
  'to-br': 'bg-gradient-to-br',
  circle: 'bg-radial',
}
 
export function GradientWaveText({
  text,
  direction = 'to-r',
  fromColor,
  viaColor,
  toColor,
  duration = 5,
  hoverEffect = false,
  className,
  gradientType = 'linear',
  textStroke = false,
  easing = 'linear',
  theme = 'default',
  animationType = 'wave',
  as: Component = 'div',
}: GradientWaveTextProps) {
  const MotionComponent = motion.create(Component)
 
  // const { theme: systemTheme } = useTheme()
 
  const [isHovered, setIsHovered] = useState(false)
 
  const { from, via, to } = themes[theme]
  const gradientColors = `${fromColor || from} ${viaColor || via} ${toColor || to}`
 
  const gradientClass =
    gradientType === 'radial' ? 'bg-radial' : directionClasses[direction]
 
  const getAnimationProps = () => {
    switch (animationType) {
      case 'pulse':
        return { scale: [1, 1.05, 1] }
      case 'shimmer':
        return { backgroundPosition: ['0% 0%', '100% 100%', '0% 0%'] }
      default: // wave
        return direction === 'to-b'
          ? { backgroundPosition: ['50% 0%', '50% 100%', '50% 0%'] }
          : { backgroundPosition: ['0% 50%', '100% 50%', '0% 50%'] }
    }
  }
 
  const textStrokeClass = textStroke ? 'text-stroke' : ''
 
  const transition: Transition = {
    duration: isHovered && hoverEffect ? duration / 2 : duration,
    repeat: Number.POSITIVE_INFINITY,
    ease: easing,
  }
 
  return (
    <MotionComponent
      className={cn(
        `cursor-pointer rounded bg-[length:200%_200%] bg-clip-text p-4 text-4xl font-bold
        text-transparent`,
        gradientClass,
        gradientColors,
        textStrokeClass,
        className
      )}
      animate={getAnimationProps()}
      transition={transition}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      aria-label={text}
      role="heading"
      // data-theme={systemTheme}
    >
      {text}
    </MotionComponent>
  )
}