All components
Particle Field
Background EffectsA canvas field of drifting, twinkling particles.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/particle-field.jsonOr install manually
1. Install dependencies
pnpm add clsx tailwind-merge2. Copy the component source into
components/library/particle-field.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 60 | Number of particles. |
| color | string | "currentColor" | Particle fill. Resolved from the element's computed text colour. |
| size | number | 1.6 | Maximum particle radius in CSS pixels. |
| speed | number | 0.4 | Drift speed multiplier. |
Accessibility
- Canvas is decorative - keep meaningful content in the DOM.
- Respects devicePixelRatio, so it stays sharp on retina screens.
- Cancels its animation frame and observer on unmount.
- Pass a theme-aware colour so it stays visible in light and dark.
Dependencies
clsxtailwind-merge