React Particles Background
Canvas floating particles with mouse magnetism—particles drift and respond to cursor movement
React Particles Background preview
This particle system is all about subtle interactivity. Hundreds of tiny dots float around the screen, each with its own random drift velocity. But here's where it gets interesting: they're magnetized to your cursor. Each particle has a different magnetism strength, so some follow closely while others barely react—it creates this nice layered depth effect. The staticity prop controls how strongly they respond overall, and ease smooths out the movement. It's canvas-based so performance is solid even with 100+ particles. When particles drift off-screen, they respawn with a smooth alpha fade at the edges. Good for hero sections, ambient backgrounds, or anywhere you want that floaty, responsive feel.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this background for you — no copy-paste, no CLI:
use shadcnio to install the particles background into my projectRelated Components
Sparkles
Twinkling particle effect
Dot Pattern
Interactive dot grid
Meteors
Falling star trails
Vortex
Spiral particle animation
Fireworks
Explosive particle bursts
Shooting Stars
Multi-directional stars
FAQ
Was this page helpful?
Sign in to leave feedback.
Paper
Hand-made paper texture background for React and Next.js — thousands of pre-baked ink fibers layered over aged cardstock, with a gentle breathing alpha oscillation that keeps the surface quietly alive.
Paths
Animated SVG bezier curves flowing across the screen with layered depth and smooth motion