Loading component…
Components /Interactive Particles
Image-sampled particles that scatter around the cursor
Run the following command
npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/interactive-particles.json| Prop Name | Type | Default | Description |
|---|---|---|---|
| src | string | - | Initial image URL to sample particles from. Optional when uploads are allowed. |
| allowUpload | boolean | true | Show an 'Upload image' control so users can supply their own image. |
| uploadLabel | string | 'Upload image' | Label for the upload control. |
| onUpload | (file: File) => void | - | Fired with the uploaded File whenever the user picks an image. |
| maxDimension | number | 320 | Longest edge the source is downscaled to before sampling (caps particle count). |
| background | string | '#000000' | Wrapper background color. |
| color | string | '#ffffff' | Particle tint. Keeps the image's greyscale tones by default. |
| size | number | 1.2 | Steady-state particle size multiplier. |
| randomness | number | 1.8 | Steady-state random spread of the particles. |
| depth | number | 3 | Steady-state depth (z displacement). |
| touchRadius | number | 0.15 | Cursor touch radius (0–1). |
| threshold | number | 34 | Brightness cutoff (0–255) below which pixels are discarded. |
| className | string | - | Additional classes for the wrapper element. |