ElasticMesh

Superficie de malla elástica que se estira bajo el puntero.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/ElasticMesh-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
image	string	''
color1	string	#5227FF
color2	string	#B19EEF
showGrid	boolean	true
gridDensity	number	20
gridOpacity	number	0.28
gridColor	string	#ffffff
highlight	string	#ffffff
borderRadius	number	25
stiffness	number	0.05
damping	number	0.2
grabRadius	number	0.6
pull	number	0.4
wobble	number	5
tilt	number	14
shading	number	0.5
resolution	number	25
interaction	"hover" \| "drag"	"hover"
enabled	boolean	true
className	string	''
style	object	—

Otros efectos de animaciones

GooeySvgFilter — Filtro SVG que une elementos como gotas.
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.