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 UIThe 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 UIWelcome to Pumki UI
Beautiful backgrounds for modern applications
Props
| Prop | Type | Default |
|---|---|---|
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', } |
transition? | SpringOptions | { stiffness: 100, damping: 20 } |
interactive? | boolean | false |
children? | React.ReactNode | - |
Last updated on