GlowCursor

Estela de luz por shader que sigue al puntero con pulso y brillo.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/GlowCursor-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
colorstring'#67E8F9'
secondaryColorstring'#A78BFA'
trailLengthnumber40
trailWidthnumber8
trailTapernumber0.8
followSpeednumber0.16
glowIntensitynumber1.9
glowSpreadnumber1.2
hotspotnumber0.65
brightnessnumber1.25
opacitynumber1
pulseSpeednumber1.1
noiseStrengthnumber0.035
idleFadebooleantrue
idleTimeoutnumber700
fadeDurationnumber900
blendMode'normal' | 'screen' | 'plus-lighter''screen'
maxDevicePixelRationumber1.5
enabledbooleantrue
childrenReact.ReactNode—
classNamestring''
styleReact.CSSProperties{}

Otros efectos de animaciones

  • LaserFlow — Haz láser que fluye y se derrama sobre una superficie.
  • MagnetLines — Campo de agujas que apuntan hacia el cursor.
  • OrbitingCircles — Iconos orbitando alrededor de un centro.
  • RippleDistortion — Distorsión de agua que deja una estela al pasar el puntero.
  • SmoothCursor — Cursor con física de muelle que gira según la dirección.
  • SwarmCursor — Enjambre de partículas que persigue al cursor.