Background
Gradient Animation
Interactive gradient backgrounds with mouse tracking. Perfect for React applications requiring dynamic animated effects with Next.js integration and TypeScript support.
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
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
Prop | Type | Default | Description |
---|---|---|---|
gradientBackgroundStart | string | "rgb(108, 0, 162)" | Starting color of the background gradient |
gradientBackgroundEnd | string | "rgb(0, 17, 82)" | Ending color of the background gradient |
firstColor | string | "18, 113, 255" | RGB values for the first animated orb |
secondColor | string | "221, 74, 255" | RGB values for the second animated orb |
thirdColor | string | "100, 220, 255" | RGB values for the third animated orb |
fourthColor | string | "200, 50, 50" | RGB values for the fourth animated orb |
fifthColor | string | "180, 180, 50" | RGB values for the fifth animated orb |
pointerColor | string | "140, 100, 255" | RGB values for the interactive mouse pointer orb |
size | string | "80%" | Size of the animated orbs |
blendingValue | string | "hard-light" | CSS mix-blend-mode for the orbs |
interactive | boolean | true | Whether to enable mouse tracking |
children | React.ReactNode | - | Content to display over the background |
className | string | - | Additional CSS classes for the content wrapper |
containerClassName | string | - | 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
Circles
Hypnotic rotating circles that mesmerize and captivate. This React component creates ethereal orbital animations perfect for Next.js meditation apps, creative portfolios, and spiritual wellness platforms.
Paths
Floating SVG path animations with gradient text effects. Perfect for React applications requiring dynamic backgrounds with Next.js integration and TypeScript support.