GradualBlur

Desenfoque progresivo en capas para bordes cinematográficos.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/GradualBlur-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
position"top" | "bottom" | "left" | "right""bottom"
strengthnumber2
heightstring"6rem"
widthstring—
divCountnumber5
exponentialbooleanfalse
curve"linear" | "bezier" | "ease-in""linear"
opacitynumber1
animated"boolean" | "scroll"false
durationstring"0.3s"
easingstring"ease-out"
hoverIntensitynumber—
target"parent" | "page""parent"
preset"top" | "bottom" | "left" | "right"—
responsivebooleanfalse
zIndexnumber1000
onAnimationComplete() => void—
classNamestring—
styleReact.CSSProperties—

Otros efectos de animaciones

  • 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.
  • AnimatedContent — Envoltorio que anima cualquier contenido al entrar en pantalla.