Animated Sparkle Particle Background

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.

Key Features:

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

Customization Controls:

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)

How to Use:

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

Ideal Use Cases:

Hero sections & landing pages
Product highlights
Event banners
Portfolio headers
Testimonial blocks
Call-to-action backgrounds
Loading or transition screens
Premium feature sections

Try it Out!

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

Suggested for you