TargetCursor
Cursor de cuatro esquinas que se ajusta a los elementos objetivo.
- Código: RODD·AN·039
- Familia: Animaciones
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/TargetCursor-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 |
|---|
| targetSelector | string | ".cursor-target" |
| spinDuration | number | 2 |
| hideDefaultCursor | boolean | true |
| hoverDuration | number | 0.2 |
| parallaxOn | boolean | true |
| cursorColor | string | '#ffffff' |
| cursorColorOnTarget | string | undefined |
Otros efectos de animaciones
- Confetti — Lanza confeti para celebrar una acción.
- 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.