ShapeBlur
Forma geométrica que se difumina según la distancia al ratón.
- Código: RODD·AN·033
- Familia: Animaciones
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/ShapeBlur-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 |
|---|
| variation | number | 0 |
| pixelRatioProp | number | 2 |
| shapeSize | number | 1.2 |
| roundness | number | 0.4 |
| borderSize | number | 0.05 |
| circleSize | number | 0.3 |
| circleEdge | number | 0.5 |
Otros efectos de animaciones
- Strands — Hebras luminosas que ondulan y se entrelazan.
- BlobCursor — Cursor orgánico en forma de gota con inercia y morphing elástico.
- 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.