MetaBalls
Metabolas líquidas que se fusionan y separan.
- Código: RODD·AN·023
- Familia: Animaciones
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/MetaBalls-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 |
|---|
| color | string | #ffffff |
| speed | number | 0.3 |
| enableMouseInteraction | boolean | true |
| enableTransparency | boolean | false |
| hoverSmoothness | number | 0.05 |
| animationSize | number | 30 |
| ballCount | number | 15 |
| clumpFactor | number | 1 |
| cursorBallSize | number | 3 |
| cursorBallColor | string | #ffffff |
Otros efectos de animaciones
- PixelSwap — Los píxeles cubren, intercambian y revelan contenido.
- ScrollExpand — Un marco de imagen que crece a pantalla completa con el scroll.
- StarBorder — Borde con destellos que orbitan alrededor del contenido.
- AnimatedContent — Envoltorio que anima cualquier contenido al entrar en pantalla.
- Confetti — Lanza confeti para celebrar una acción.
- DitherVeil — Foto impresa en dither de 1 bit que el cursor “quema” hasta el color.