MagicRings

Anillos mágicos concéntricos que siguen al ratón.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/MagicRings-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#fc42ff
colorTwostring#42fcff
ringCountnumber6
speednumber1
attenuationnumber10
lineThicknessnumber2
baseRadiusnumber0.35
radiusStepnumber0.1
scaleRatenumber0.1
opacitynumber1
blurnumber0
noiseAmountnumber0.1
rotationnumber0
ringGapnumber1.5
fadeInnumber0.7
fadeOutnumber0.5
followMousebooleanfalse
mouseInfluencenumber0.2
hoverScalenumber1.2
parallaxnumber0.05
clickBurstbooleanfalse
alphaMode'luminance' | 'coverage''luminance'

Otros efectos de animaciones

  • OrbitImages — Imágenes que orbitan siguiendo una trayectoria SVG.
  • PixelTransition — Transición pixelada entre dos contenidos al hover.
  • ShineBorder — Borde con un brillo de degradado animado.
  • Strands — Hebras luminosas que ondulan y se entrelazan.
  • BlobCursor — Cursor orgánico en forma de gota con inercia y morphing elástico.
  • Crosshair — Cursor de mira con líneas que siguen al ratón y distorsionan enlaces.