MagnetLines
Campo de agujas que apuntan hacia el cursor.
- Código: RODD·AN·022
- Familia: Animaciones
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/MagnetLines-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 |
|---|
| rows | number | 9 |
| columns | number | 9 |
| containerSize | string | 80vmin |
| lineColor | string | #efefef |
| lineWidth | string | 1vmin |
| lineHeight | string | 6vmin |
| baseAngle | number | -10 |
| className | string | |
| style | object | {} |
Otros efectos de animaciones
- ParallaxFloating — Imágenes flotantes con parallax al mover el ratón.
- Screensaver — Elementos que rebotan por la pantalla como un salvapantallas.
- SplashCursor — Simulación de fluido que salpica al mover el cursor.
- TargetCursor — Cursor de cuatro esquinas que se ajusta a los elementos objetivo.
- ClickSpark — Chispas de partículas en el punto donde haces clic.
- CursorGrid — Rejilla cuyas celdas se iluminan alrededor del cursor.