Particles
Interactive particle animation component for React and Next.js applications. Built with TypeScript support, HTML5 Canvas, and Tailwind CSS styling featuring mouse interaction, customizable behavior, and performance optimization.
Preview Error
Could not load preview for: particles-basic
Error details
Error: ENOENT: no such file or directory, open '/app/apps/docs/examples/particles-basic.tsx'
Installation
npx shadcn@latest add https://www.shadcn.io/registry/particles.jsonnpx shadcn@latest add https://www.shadcn.io/registry/particles.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/particles.jsonbunx shadcn@latest add https://www.shadcn.io/registry/particles.jsonFeatures
- Mouse interaction - Magnetic particle attraction with real-time tracking using HTML5 Canvas for React apps
- 60fps animations - Smooth performance with requestAnimationFrame optimization using JavaScript
- Customizable behavior - Control quantity, size, color, speed, and movement patterns using TypeScript props
- Responsive canvas - Auto-resize handling with container dimension detection for Next.js applications
- Edge detection - Smooth particle fading at boundaries with automatic regeneration using Tailwind CSS
- Open source - Free particle system with comprehensive configuration options
Examples
Interactive Experience
Preview Error
Could not load preview for: particles-interactive
Error details
Error: ENOENT: no such file or directory, open '/app/apps/docs/examples/particles-interactive.tsx'
Use Cases
- Hero sections - Dynamic backgrounds with particle animation effects
- Interactive demos - Mouse-following effects for engagement and storytelling
- Portfolio sites - Creative backgrounds that respond to user interaction
- Gaming interfaces - Ambient particle effects for immersive experiences
API Reference
Particles
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply to the container |
quantity | number | 100 | Number of particles to render |
staticity | number | 50 | Controls how much particles are affected by mouse |
ease | number | 50 | Easing factor for particle movement |
size | number | 0.4 | Base size of particles |
refresh | boolean | false | Forces particles to regenerate when true |
color | string | "#ffffff" | Hex color code for particles |
vx | number | 0 | Horizontal velocity bias for particles |
vy | number | 0 | Vertical velocity bias for particles |
Implementation
Uses HTML5 Canvas with absolute positioning. Place within relative container. Content needs higher z-index. Particles auto-regenerate at boundaries. Mouse interaction calculated from canvas center.
Interactive Grid Pattern
Interactive SVG grid background component for React and Next.js applications. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design featuring hover effects, customizable dimensions, and responsive layouts.
Pin List
Interactive list component with pin/unpin functionality and smooth layout animations. Perfect for React applications requiring organized content management with Next.js integration and TypeScript support.