Ambient Aurora Background 🌌

A serene and captivating background featuring slow-moving, ethereal gradients. Each bubble or orb gently shifts its color palette, blending seamlessly with its neighbors to create a calming, aurora-like effect. The animation is designed to be subtle and non-distracting, providing a tranquil and visually rich backdrop that enhances, rather than competes with, foreground content.

Basic Bubbles

Pumki UI

The background is interactive, allowing users to engage with the visual elements. Use interactive prop to enable this feature.

Installation

Usage

1import { BubbleBackground } from '@/components/pumki-ui/backgrounds/bg-ambient-aurora';

1<BubbleBackground />

Example

With Content Overlay

Background with centered content to show practical usage.

Pumki UI

Welcome to Pumki UI

Beautiful backgrounds for modern applications

Props

Prop	Type	Default	Description
`colors?`	`object`	`{ first: '18,113,255', second: '221,74,255', third: '0,220,255', fourth: '200,50,50', fifth: '180,180,50', sixth: '140,100,255' }`	Color palette for the bubbles.
`transition?`	`SpringOptions`	`{ stiffness: 100, damping: 20 }`	Spring animation options for transitions.
`interactive?`	`boolean`	`false`	Enable bubble interactivity.
`children?`	`React.ReactNode`	`-`	Content overlay for the background.