Sparkles
Customizable sparkle particle effect with four particle shapes, four trigger modes, adjustable density, and interactive hover/click generation for premium experiences.
Pro Features
Unlock advanced capabilities with the Pro version
4 Particle Shapes
Star, circle, square, and diamond sparkles
4 Trigger Modes
Continuous, hover, click, or none
Interactive Sparkles
Generate sparkles on hover and click
Density Control
Low, medium, or high generation frequency
Custom Ranges
Fine-tune size, duration, and opacity ranges
Lightweight Runtime
Pure CSS keyframe animation with no extra dependencies
Installation
Install via CLI
npx @moontra/moonui-cli add sparklesUsage
Premium Experience
Elevate your interface with magical sparkles
Examples
Cosmic Galaxy Backdrop
Dense continuous star sparkles over a cosmic gradient
Explore the Cosmos
Journey through infinite possibilities with continuous sparkle animations
Diamond Treasure Chest
Luxury showcase using diamond-shaped sparkles
Diamond Collection
Exclusive premium treasures await
Golden Achievement Burst
Celebration sparkles generated on click (trigger="click")
🎊 LEGENDARY ACHIEVEMENT!
Click to celebrate your victory!
Crypto Wealth Dashboard
Financial dashboard with continuous circle sparkles
Portfolio Value
Bitcoin
12.5 BTC
+5.2%
Ethereum
84.3 ETH
+8.7%
Solana
1,429 SOL
+12.3%
VIP Membership Card
Exclusive membership card with diamond sparkles
VIP PLATINUM
Member since 2024
Card Number
**** **** **** 7890
Magical Loading State
Loading state with continuous circle sparkles
Creating Magic...
Your premium content is being prepared
Interactive Game Achievement
Achievement unlock with hover-triggered sparkles (trigger="hover")
MASTER COLLECTOR
Hover to activate celebration!
Premium Subscription Banner
Subtle low-density sparkles with a reduced opacity range
Upgrade to Premium
Unlock all features and accelerate your workflow
$99/month
$49/month