Sparkles Background — Animated sparkle particle background

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:

1. Drag Sparkles Background onto your canvas

2. Resize to fit any section or full-screen layout

3. Adjust particle color and density

4. Enable gradients or masking for different styles

5. 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