ClickSpark
Chispas de partículas en el punto donde haces clic.
- Código: RODD·AN·004
- Familia: Animaciones
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/ClickSpark-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 |
|---|
| sparkColor | string | '#fff' |
| easing | string | 'ease-out' |
| children | React.ReactNode | |
Otros efectos de animaciones
- DitherVeil — Foto impresa en dither de 1 bit que el cursor “quema” hasta el color.
- Float — Envoltorio que hace flotar suavemente su contenido.
- Gravity — Elementos que caen con física real y puedes lanzar.
- LogoLoop — Carrusel infinito de logos que se pausa al pasar el ratón.
- MetallicPaint — Pintura metálica líquida aplicada sobre cualquier logo.
- PixelSwap — Los píxeles cubren, intercambian y revelan contenido.