CursorGrid
Rejilla cuyas celdas se iluminan alrededor del cursor.
- Código: RODD·AN·007
- Familia: Animaciones
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/CursorGrid-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 |
|---|
| cellSize | number | 70 |
| color | string | "#D946EF" |
| radius | number | 140 |
| falloff | "linear" | "smooth" | "sharp" | "smooth" |
| holdTime | number | 400 |
| fadeDuration | number | 800 |
| lineWidth | number | 1.2 |
| maxOpacity | number | 1 |
| fillOpacity | number | 0 |
| gridOpacity | number | 0 |
| cellRadius | number | 0 |
| clickPulse | boolean | true |
| pulseSpeed | number | 600 |
| className | string | "" |
Otros efectos de animaciones
- 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.
- ScrollExpand — Un marco de imagen que crece a pantalla completa con el scroll.