Gradient Background

import { GradientBackground } from "@/components/animate-ui/backgrounds/gradient"

export default function GradientBackgroundDemo() {
  return <GradientBackground className="absolute inset-0" />
}

InstallationCopy Anchor Link

npx shadcn@latest add @animate-ui/backgrounds-gradient

pnpm dlx shadcn@latest add @animate-ui/backgrounds-gradient

yarn dlx shadcn@latest add @animate-ui/backgrounds-gradient

bun x shadcn@latest add @animate-ui/backgrounds-gradient

UsageCopy Anchor Link

import { GradientBackground } from '@/components/animate-ui/backgrounds/gradient';

export function Hero() {
  return (
    <section className="relative h-[480px] overflow-hidden">
      <GradientBackground className="absolute inset-0" />
    </section>
  );
}

AnimationCopy Anchor Link

• A large gradient slides back and forth behind the container (background-position), one round trip every 15s.
• It pauses off screen and while the tab is hidden.
• Under reduced motion, it holds its first frame.

API ReferenceCopy Anchor Link

GradientBackgroundCopy Anchor Link