LaserFlow

Haz láser que fluye y se derrama sobre una superficie.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/LaserFlow-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
horizontalBeamOffsetnumber0.1
verticalBeamOffsetnumber0.0
horizontalSizingnumber0.5
verticalSizingnumber2.0
wispDensitynumber1
wispSpeednumber15.0
wispIntensitynumber5.0
flowSpeednumber0.35
flowStrengthnumber0.25
fogIntensitynumber0.45
fogScalenumber0.3
fogFallSpeednumber0.6
mouseTiltStrengthnumber0.01
mouseSmoothTimenumber0.0
decaynumber1.1
falloffStartnumber1.2
dprnumberauto
colorstring#FF79C6
backgroundColorstring#000000

Otros efectos de animaciones

  • MetaBalls — Metabolas líquidas que se fusionan y separan.
  • ParallaxFloating — Imágenes flotantes con parallax al mover el ratón.
  • Screensaver — Elementos que rebotan por la pantalla como un salvapantallas.
  • 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.