Antigravity
Campo de partículas 3D que se repelen del cursor.
- Código: RODD·AN·002
- Familia: Animaciones
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/Antigravity-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 |
|---|
| count | number | 300 |
| magnetRadius | number | 10 |
| ringRadius | number | 10 |
| waveSpeed | number | 0.4 |
| waveAmplitude | number | 1 |
| particleSize | number | 2 |
| lerpSpeed | number | 0.1 |
| color | string | #FF9FFC |
| autoAnimate | boolean | false |
| particleVariance | number | 1 |
| rotationSpeed | number | 0 |
| depthFactor | number | 1 |
| pulseSpeed | number | 3 |
| particleShape | string | capsule |
| fieldStrength | number | 10 |
Otros efectos de animaciones
- Crosshair — Cursor de mira con líneas que siguen al ratón y distorsionan enlaces.
- ElasticMesh — Superficie de malla elástica que se estira bajo el puntero.
- GlowCursor — Estela de luz por shader que sigue al puntero con pulso y brillo.
- ImageTrail — Estela de imágenes que sigue al cursor, con varias variantes.
- Magnet — Los elementos se sienten atraídos por el cursor y vuelven con muelle.
- OrbitImages — Imágenes que orbitan siguiendo una trayectoria SVG.