RippleDistortion

Distorsión de agua que deja una estela al pasar el puntero.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/RippleDistortion-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'https://images.unsplash.com/...'
brushSizenumber150
strengthnumber0.2
swirlnumber1
ringsnumber4
spreadnumber5
fadenumber3
spacingnumber15
dispersionnumber0
glintnumber0
tintstring#a855f7
tintAmountnumber0.1
highlightColorstring#ffffff
grayscalebooleantrue
trigger'hover' | 'click' | 'both''hover'
clickStrengthnumber2
quality'low' | 'medium' | 'high''low'
enabledbooleantrue
classNamestring''

Otros efectos de animaciones

  • SplashCursor — Simulación de fluido que salpica al mover el cursor.
  • TargetCursor — Cursor de cuatro esquinas que se ajusta a los elementos objetivo.
  • ClickSpark — Chispas de partículas en el punto donde haces clic.
  • CursorGrid — Rejilla cuyas celdas se iluminan alrededor del cursor.
  • FadeContent — Envoltorio de fundido con desenfoque al entrar en pantalla.
  • GradualBlur — Desenfoque progresivo en capas para bordes cinematográficos.