Gradient Background

1'use client';
2 
3import * as React from 'react';
4import { motion, type HTMLMotionProps } from 'motion/react';
5 
6import { cn } from '@/lib/utils';
7 
8type GradientBackgroundProps = HTMLMotionProps<'div'>;
9 
10function GradientBackground({
11  className,
12  transition = { duration: 15, ease: 'easeInOut', repeat: Infinity },
13  ...props
14}: GradientBackgroundProps) {
15  return (
16    <motion.div
17      data-slot="gradient-background"
18      className={cn(
19        'size-full bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 bg-[length:400%_400%]',
20        className,
21      )}
22      animate={{ backgroundPosition: ['0% 50%', '100% 50%', '0% 50%'] }}
23      transition={transition}
24      {...props}
25    />
26  );
27}
28 
29export { GradientBackground, type GradientBackgroundProps };