SplashCursor

Simulación de fluido que salpica al mover el cursor.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/SplashCursor-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
SIM_RESOLUTIONnumber128
DYE_RESOLUTIONnumber1440
CAPTURE_RESOLUTIONnumber512
DENSITY_DISSIPATIONnumber3.5
VELOCITY_DISSIPATIONnumber2
PRESSUREnumber0.1
PRESSURE_ITERATIONSnumber20
CURLnumber3
SPLAT_RADIUSnumber0.2
SPLAT_FORCEnumber6000
SHADINGbooleantrue
COLOR_UPDATE_SPEEDnumber10
RAINBOW_MODEbooleantrue
COLORstring'#ff0000'
BACK_COLORobject{ r: 0.5, g: 0, b: 0 }

Otros efectos de animaciones

  • AnimatedContent — Envoltorio que anima cualquier contenido al entrar en pantalla.
  • Confetti — Lanza confeti para celebrar una acción.
  • DitherVeil — Foto impresa en dither de 1 bit que el cursor “quema” hasta el color.
  • Float — Envoltorio que hace flotar suavemente su contenido.
  • Gravity — Elementos que caen con física real y puedes lanzar.
  • LogoLoop — Carrusel infinito de logos que se pausa al pasar el ratón.