Magnet
Los elementos se sienten atraídos por el cursor y vuelven con muelle.
- Código: RODD·AN·021
- Familia: Animaciones
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/Magnet-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 |
|---|
| activeTransition | string | "transform 0.3s ease-out" |
| inactiveTransition | string | "transform 0.5s ease-in-out" |
| wrapperClassName | string | "" |
| innerClassName | string | "" |
| children | ReactNode | |
Otros efectos de animaciones
- OrbitingCircles — Iconos orbitando alrededor de un centro.
- RippleDistortion — Distorsión de agua que deja una estela al pasar el puntero.
- SmoothCursor — Cursor con física de muelle que gira según la dirección.
- SwarmCursor — Enjambre de partículas que persigue al cursor.
- BorderBeam — Haz de luz que recorre el borde de un contenedor.
- Cubes — Rejilla de cubos 3D que se inclinan hacia el cursor.