FadeContent
Envoltorio de fundido con desenfoque al entrar en pantalla.
- Código: RODD·AN·011
- Familia: Animaciones
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/FadeContent-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 |
|---|
| children | ReactNode | |
| blur | boolean | false |
| delay | number | 0 |
| ease | string | power2.out |
| className | string | |
| disappearEase | string | power2.in |
Otros efectos de animaciones
- Gravity — Elementos que caen con física real y puedes lanzar.
- LogoLoop — Carrusel infinito de logos que se pausa al pasar el ratón.
- MetallicPaint — Pintura metálica líquida aplicada sobre cualquier logo.
- 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.