SwarmCursor
Enjambre de partículas que persigue al cursor.
- Código: RODD·AN·038
- Familia: Animaciones
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/SwarmCursor-TS-TW
Cuándo usarlo
Refuerzan una interacción concreta: un CTA, una tarjeta, un cursor. Nunca decoran por decorar.
Props para personalizarlo
| Prop | Tipo | Por defecto |
|---|
| color | string | '#ffffff' |
| accentColor | string | '#ffffff' |
| count | number | 10 |
| size | number | 10 |
| merge | number | 0.77 |
| glow | number | 0.75 |
| opacity | number | 1 |
| spread | number | 100 |
| separation | number | 0.15 |
| speed | number | 2.5 |
| wander | number | 0.25 |
| trail | number | 0.75 |
| scatterOnClick | boolean | true |
| enabled | boolean | true |
| children | React.ReactNode | — |
Otros efectos de animaciones
- ClickSpark — Chispas de partículas en el punto donde haces clic.
- CursorGrid — Rejilla cuyas celdas se iluminan alrededor del cursor.
- FadeContent — Envoltorio de fundido con desenfoque al entrar en pantalla.
- GradualBlur — Desenfoque progresivo en capas para bordes cinematográficos.
- Lens — Lupa que amplía imágenes o vídeos al pasar el ratón.
- MetaBalls — Metabolas líquidas que se fusionan y separan.