ScrollExpand

Un marco de imagen que crece a pantalla completa con el scroll.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/ScrollExpand-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
srcstring''
mediaType"image" | "video""image"
posterstring''
altstring''
titlestring''
scrollHintstring''
startWidthnumber42
startHeightnumber58
startRadiusnumber24
endRadiusnumber0
mediaZoomnumber1.35
scrollDistancenumber1.2
holdDistancenumber0.35
smoothingnumber0.1
overlayScrimnumber0.45
useWindowScrollbooleanfalse
enabledbooleantrue
childrenReact.ReactNode—
classNamestring''
styleobject—

Otros efectos de animaciones

  • StickerPeel — Pegatina que se despega de la esquina con sombra 3D.
  • Antigravity — Campo de partículas 3D que se repelen del cursor.
  • 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.