React Sparkles Background
Magical twinkling particles that add wonder and delight to digital interfaces. Build enchanting React sparkle effects with tsParticles, interactive clicks, customizable colors, and TypeScript support for Next.js applications with shadcn/ui.
Powered by
Adding magical sparkle effects?
Join our Discord community for help from other developers.
Most interfaces lack magic. They're functional, efficient, boring. What if your website could sparkle? Literally. This React component creates twinkling particles that respond to user clicks, adding moments of delight that transform mundane interactions into magical experiences.
Interactive magical sparkles
Watch particles twinkle and respond to user interactions with smooth animations:
Built for React applications with TypeScript and Next.js. Uses tsParticles engine for hardware-accelerated rendering at 60fps. Click interactions spawn new particles with realistic physics. Customizable colors, density, and size let you match any brand aesthetic. Perfect for creative portfolios, product launches, or anywhere you need to add wonder.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/sparkles.jsonnpx shadcn@latest add https://www.shadcn.io/registry/sparkles.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/sparkles.jsonbunx shadcn@latest add https://www.shadcn.io/registry/sparkles.jsonUsage
import { SparklesCore } from "@/components/ui/sparkles";
export default function MagicalHero() {
return (
<div className="relative h-screen w-full bg-black overflow-hidden">
{/* Your content */}
<div className="relative z-10 flex items-center justify-center h-full">
<h1 className="text-6xl font-bold text-white">
Make Magic Happen
</h1>
</div>
{/* Sparkles effect */}
<SparklesCore
background="transparent"
minSize={0.6}
maxSize={1.4}
particleDensity={100}
className="absolute inset-0 w-full h-full"
particleColor="#FFFFFF"
speed={1}
/>
</div>
);
}Why most particle effects feel mechanical
Most developers use CSS animations with keyframes—particles that move in perfect circles or straight lines, obviously programmed. Others try JavaScript with setInterval that's choppy and inconsistent. Some use canvas with basic math that creates uniform, predictable patterns.
This React component uses tsParticles, the industry-leading particle engine with hardware acceleration. Particles twinkle with organic timing, not rigid intervals. Click interactions spawn particles with realistic physics—they don't just appear, they emerge with momentum and fade naturally. The engine handles collision detection, opacity transitions, and memory management automatically.
Features
- Interactive click spawning creating 4 new particles per click with realistic physics
- Hardware-accelerated rendering using tsParticles engine for smooth 60fps performance
- Organic twinkling patterns with randomized opacity changes for natural sparkle effects
- Configurable particle density from subtle ambience (50) to magical celebrations (1200+)
- Brand-matched color system supporting hex, RGB, and HSL values for any aesthetic
- Responsive size scaling adapting particle dimensions across mobile and desktop
- Automatic performance optimization reducing particle count on older devices
- TypeScript definitions for all particle parameters and visual customizations
- Memory management with automatic cleanup preventing performance degradation
- shadcn/ui compatible with transparent backgrounds and proper layering support
Examples
Full Page Background
Sparse particles create ambient magic without overwhelming content:
Colorful Particles
Custom colors match your brand while maintaining the magical sparkle effect:
API Reference
SparklesCore
Main component for tsParticles-powered magical sparkle effects.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | auto-generated | Unique tsParticles instance identifier |
className | string | - | Additional CSS classes for the container |
background | string | "#0d47a1" | Container background (use "transparent" for overlays) |
minSize | number | 1 | Minimum particle size in pixels |
maxSize | number | 3 | Maximum particle size in pixels |
speed | number | 4 | Opacity animation speed (0-10, lower = slower) |
particleColor | string | "#ffffff" | Particle color (hex, rgb, hsl, or CSS colors) |
particleDensity | number | 120 | Total number of particles (50-1200 recommended) |
Density Guidelines
Choose particle counts based on your desired effect:
// Subtle ambient sparkle
particleDensity={50} minSize={0.4} maxSize={0.8}
// Moderate magical atmosphere
particleDensity={120} minSize={0.6} maxSize={1.2}
// Dense celebration effect
particleDensity={300} minSize={0.8} maxSize={1.6}
// Extreme magical overload (use sparingly)
particleDensity={1200} minSize={0.4} maxSize={1.0}Color Customization Examples
// Classic magical white
particleColor="#FFFFFF"
// Brand colors
particleColor="#3B82F6" // Blue
particleColor="#10B981" // Green
particleColor="#F59E0B" // Yellow
// RGB with opacity
particleColor="rgba(255, 255, 255, 0.8)"
// HSL for precise control
particleColor="hsl(270, 100%, 80%)" // PurplePerformance Optimization
tsParticles automatically optimizes for device capabilities:
- Desktop: Full particle count with all effects
- Mobile: Reduced particles and simplified animations
- Low-end devices: Further optimizations to maintain 60fps
- Memory management: Automatic cleanup and resource pooling
Common gotchas
tsParticles bundle size: tsParticles is a full particle engine (~100kb gzipped). If you only need sparkles, consider the bundle size impact for your project.
Performance with extreme densities: Values above 500 particles can impact performance on older devices. Test on your target hardware, especially mobile.
Click interaction timing: Click spawning happens immediately. On very slow devices, this might cause brief frame drops. Consider debouncing clicks for heavy usage.
Z-index layering conflicts: Sparkles render behind content by default. If your content disappears, ensure it has relative z-10 or higher positioning.
Background transparency issues: Using background="transparent" requires the parent container to have a background. Without it, sparkles might not be visible.
Mobile touch interactions: Click spawning works with touch events, but rapid tapping can create performance issues. Consider limiting spawn rate on mobile.
You might also like
Explore other magical and particle-based background components for React applications:
Particles
Interactive particle systems with physics-based movement
Shooting Stars
Cosmic meteor showers with customizable trajectories
Meteors
Diagonal meteor animations with randomized timing
Fireworks Background
Explosive particle effects with colorful bursts
Aurora
Northern lights effects with flowing gradient animations
Ripple
Concentric circle effects for attention and focus
Questions developers actually ask
React Shooting Stars Background
Cosmic meteor showers that turn interfaces into stargazing experiences. Build mesmerizing React space backgrounds with SVG animations, customizable trajectories, realistic depth effects, and TypeScript support for Next.js applications with shadcn/ui.
Spiral Animation Background
Hypnotic spiral patterns that draw eyes into infinite mathematical beauty. Build mesmerizing React canvas animations with GSAP timelines, smooth motion curves, responsive sizing, and TypeScript support for Next.js applications with shadcn/ui.