GlareHover

Reflejo de luz realista que cruza un elemento al pasar el ratón.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/GlareHover-TS-TW

Cuándo usarlo

Refuerzan una interacción concreta: un CTA, una tarjeta, un cursor. Nunca decoran por decorar.

Props para personalizarlo

Prop	Tipo	Por defecto
width	string	500px
height	string	500px
background	string	#000
borderRadius	string	10px
borderColor	string	#333
children	React.ReactNode	undefined
glareColor	string	#ffffff
glareOpacity	number	0.5
glareAngle	number	-45
glareSize	number	250
transitionDuration	number	650
playOnce	boolean	false
className	string	""
style	React.CSSProperties	{}

Otros efectos de animaciones

ImageTrail — Estela de imágenes que sigue al cursor, con varias variantes.
Magnet — Los elementos se sienten atraídos por el cursor y vuelven con muelle.
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.