Sparkles Background is a lightweight, canvas-powered animation component for Framer that adds subtle, floating sparkle particles to your designs. Each particle gently twinkles and drifts, creating an elegant atmosphere ideal for modern hero sections, feature blocks, and immersive layouts—all while staying performance friendly.
Smooth Canvas Animation – Hardware-accelerated rendering for fluid motion
Customizable Particles – Adjust color, density (100–3000), and size range
Gradient Accents – Optional dual-color top gradients for added depth
Radial Masking – Soft fade edges for seamless blending with content
Fully Responsive – Automatically adapts to any container or screen size
Performance Optimized – Efficient particle system that won’t slow your site
Zero Dependencies – Pure React implementation, no external libraries
Particle Settings
Particle Color
Particle Density (100–3000)
Min / Max Size (0.1px–5px)
Visual Effects
Background Color
Gradient Toggle (on/off)
Dual Gradient Colors
Radial Mask Toggle
Mask Radius (100px–800px)
Drag Sparkles Background onto your canvas
Resize to fit any section or full-screen layout
Adjust particle color and density
Enable gradients or masking for different styles
Layer content on top using Framer stacks or positioning
Hero sections & landing pages
Product highlights
Event banners
Portfolio headers
Testimonial blocks
Call-to-action backgrounds
Loading or transition screens
Premium feature sections
Add subtle magic to your Framer projects. Install Sparkles Background today and create polished, animated visuals that elevate your design instantly.
If you need help or run into any issues, feel free to reach out at: sobakhul.munir527@gmail.com