Background

Gradient Animation

Interactive gradient backgrounds with mouse tracking. Perfect for React applications requiring dynamic animated effects with Next.js integration and TypeScript support.

Loading component...

Installation

npx shadcn@latest add https://www.shadcn.io/registry/background-gradient-animation.json
npx shadcn@latest add https://www.shadcn.io/registry/background-gradient-animation.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/background-gradient-animation.json
bunx shadcn@latest add https://www.shadcn.io/registry/background-gradient-animation.json

Features

  • Five animated orbs with independent movement patterns and customizable timing cycles
  • Interactive mouse tracking creating dynamic gradient effects that follow cursor movement
  • Customizable color system supporting RGB values for all orbs and background gradients
  • Multiple blend modes including hard-light, screen, overlay, multiply, and color-dodge
  • Safari optimizations with SVG filters and automatic fallbacks for cross-browser compatibility
  • TypeScript support with complete interface definitions for reliable integration
  • Responsive design scaling appropriately across all screen sizes and devices
  • Performance optimized using CSS animations and efficient DOM manipulation

Examples

Custom Colors

Loading component...

Use Cases

This free open source React component works well for:

  • Landing pages - Dynamic hero backgrounds with interactive effects built with Next.js
  • Creative portfolios - Artistic gradient animations showcasing design skills using TypeScript
  • Tech presentations - Modern gradient effects for product demos using shadcn/ui design
  • Gaming interfaces - Interactive backgrounds that respond to user input
  • App onboarding - Engaging visual effects during user registration flows
  • Marketing sites - Eye-catching backgrounds that maintain focus on content using Tailwind CSS

API Reference

BackgroundGradientAnimation

PropTypeDefaultDescription
gradientBackgroundStartstring"rgb(108, 0, 162)"Starting color of the background gradient
gradientBackgroundEndstring"rgb(0, 17, 82)"Ending color of the background gradient
firstColorstring"18, 113, 255"RGB values for the first animated orb
secondColorstring"221, 74, 255"RGB values for the second animated orb
thirdColorstring"100, 220, 255"RGB values for the third animated orb
fourthColorstring"200, 50, 50"RGB values for the fourth animated orb
fifthColorstring"180, 180, 50"RGB values for the fifth animated orb
pointerColorstring"140, 100, 255"RGB values for the interactive mouse pointer orb
sizestring"80%"Size of the animated orbs
blendingValuestring"hard-light"CSS mix-blend-mode for the orbs
interactivebooleantrueWhether to enable mouse tracking
childrenReact.ReactNode-Content to display over the background
classNamestring-Additional CSS classes for the content wrapper
containerClassNamestring-Additional CSS classes for the main container

Customization

Color Values

Provide RGB values without the rgb() wrapper:

<BackgroundGradientAnimation
  firstColor="255, 0, 128" // Pink
  secondColor="0, 255, 128" // Green
  thirdColor="128, 0, 255" // Purple
/>

Blend Modes

Available CSS blend modes:

  • hard-light (default), screen, overlay, multiply, color-dodge

Implementation Notes

  • Component uses five independent animated orbs with different movement patterns (20s-40s cycles)
  • Interactive orb follows mouse movement with smooth easing when interactive={true}
  • Colors should be provided as RGB values without the rgb() wrapper
  • Background gradients accept full CSS color values (e.g., rgb(45, 212, 191))
  • Includes Safari-specific optimizations with SVG filters and automatic fallbacks
  • Uses CSS custom properties for easy theming and dynamic color changes
  • Compatible with shadcn/ui design system and responsive across all devices