Particles
Dots that drift slowly across their container, each fading in and out on its own, the field shifting away from the pointer with nearer dots moving more. One canvas, which reads the pointer without re-rendering.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| quantity | number | 100 | How many dots. |
| color | string | "#ffffff" | The dots' hex colour. Use the page's ink. |
| size | number | 0.4 | Dot size. |
| staticity | number | 50 | How little the dots follow the pointer; higher is stiller. |
| ease | number | 50 | How slowly they settle after the pointer moves. |
| vx | number | 0 | A steady drift across. |
| vy | number | 0 | A steady drift up or down. |
| refresh | boolean | false | Toggle to scatter the dots again. |
| className | string | — | Classes for the root element. |