Gradient Wave Background

'use client'
 
import { GradientWaveBackground } from '@/components/background/gradient-wave-background'
 
<div className="relative h-[496px] w-full overflow-hidden rounded-lg border bg-background">
  <GradientWaveBackground />
</div>

'use client'
 
import { motion } from 'motion/react'
 
import { cn } from '@/lib/utils'
 
interface GradientWaveBackgroundProps {
  className?: string
}
 
export const GradientWaveBackground = ({
  className,
}: GradientWaveBackgroundProps) => {
  return (
    <motion.div
      className={cn(
        'absolute inset-0 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500',
        className
      )}
      animate={{
        backgroundPosition: ['0% 50%', '100% 50%', '0% 50%'],
      }}
      transition={{
        duration: 10,
        repeat: Infinity,
        ease: 'linear',
      }}
    />
  )
}