Magical Potion Background 🧙🏻♀️
A mesmerizing, fully customizable React background component that creates an immersive liquid potion effect.
Perfect for fantasy games, magical applications, or any project that needs an enchanting animated background.
Blue Magical Potion
A mesmerizing blue potion background with a magical liquid effect.
Pumki UIInstallation
Usage
1import { PotionBackground } from '@/components/pumki-ui/backgrounds/bg-potion';1<PotionBackground />Example
Basic (Golden Potion)
A simple golden potion background with a shimmering liquid effect.
Pumki UIFull customization
Pumki UICustom particle counts
Pumki UIPerformance optimized
fewer particles, faster animation
Pumki UIMinimal version
no particles
Pumki UIProps
PotionBackground Props
| Prop | Type | Default |
|---|---|---|
glitterCount | { mobile?: number; desktop?: number } | { mobile: 250, desktop: 500 } |
sparkCount | { mobile?: number; desktop?: number } | { mobile: 200, desktop: 350 } |
colors | ColorConfig | See ColorConfig defaults |
animations | AnimationConfig | See AnimationConfig defaults |
particleConfig | ParticleConfig | See ParticleConfig defaults |
features | FeatureConfig | See FeatureConfig defaults |
className | string | "" |
ColorConfig Props
| Prop | Type | Default |
|---|---|---|
gradient | string[] | ['#faf398', '#f9f295', '#e0aa3e', '#b88a44', '#8b6f47'] |
glitterParticle | { inner?: string; middle?: string; outer?: string } | { inner: '#ffffff', middle: '#faf398', outer: '#e0aa3e' } |
sparkParticle | { inner?: string; middle?: string; outer?: string } | { inner: '#fff', middle: 'rgba(255, 255, 255, 0.9)', outer: 'rgba(224, 170, 62, 0.9)' } |
highlights | { primary?: string; secondary?: string; accent?: string } | { primary: 'rgba(255, 255, 255, 0.1)', secondary: 'rgba(255, 255, 255, 0.15)', accent: 'rgba(212, 175, 55, 0.1)' } |
AnimationConfig Props
| Prop | Type | Default |
|---|---|---|
liquidShiftDuration | number | 8 |
surfaceRippleDuration | number | 6 |
shimmerSweepDuration | number | 10 |
particleFloatDuration | { min?: number; max?: number } | { min: 3, max: 7 } |
ParticleConfig Props
| Prop | Type | Default |
|---|---|---|
glitterSize | number | 4 |
sparkSize | number | 2 |
opacity | { min?: number; max?: number } | { min: 0.5, max: 1.0 } |
FeatureConfig Props
| Prop | Type | Default |
|---|---|---|
showGlitter | boolean | true |
showSparks | boolean | true |
showSurfaceHighlights | boolean | true |
showShimmer | boolean | true |
Last updated on