AnimatedContent

Envoltorio que anima cualquier contenido al entrar en pantalla.

  • Código: RODD·AN·001
  • Familia: Animaciones
  • Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/AnimatedContent-TS-TW

Cuándo usarlo

Refuerzan una interacción concreta: un CTA, una tarjeta, un cursor. Nunca decoran por decorar.

Props para personalizarlo

PropTipoPor defecto
childrenReactNode
containerstring | HTMLElementnull
distancenumber100
directionstring"vertical"
reversebooleanfalse
durationnumber0.8
easestring"power3.out"
initialOpacitynumber0
animateOpacitybooleantrue
scalenumber1
thresholdnumber0.1
delaynumber0
onCompletefunctionundefined
dissappearAfternumber0
disappearDurationnumber0.5
disappearEasestring"power3.in"
onDisappearanceCompletefunctionundefined
classNamestring''

Otros efectos de animaciones

  • CoolMode — Partículas que salen al hacer clic en un botón.
  • ElasticLine — Línea elástica que se estira con el ratón.
  • GlareHover — Reflejo de luz realista que cruza un elemento al pasar el ratón.
  • HalftoneReveal — Trama de semitono de imprenta que se aclara alrededor del cursor.
  • MagicRings — Anillos mágicos concéntricos que siguen al ratón.
  • Noise — Grano fílmico animado para dar textura.