BlobCursor

Cursor orgánico en forma de gota con inercia y morphing elástico.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/BlobCursor-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
blobType	'circle' \| 'square'	'circle'
fillColor	string	'#5227FF'
trailCount	number	3
sizes	number[]	[60, 125, 75]
innerSizes	number[]	[20, 35, 25]
innerColor	string	'rgba(255,255,255,0.8)'
opacities	number[]	[0.6, 0.6, 0.6]
shadowColor	string	'rgba(0,0,0,0.75)'
shadowBlur	number	5
shadowOffsetX	number	10
shadowOffsetY	number	10
filterId	string	'blob'
filterStdDeviation	number	30
filterColorMatrixValues	string	'1 0 0 ...'
useFilter	boolean	true
fastDuration	number	0.1
slowDuration	number	0.5
fastEase	string	'power3.out'
slowEase	string	'power1.out'
zIndex	number	100

Otros efectos de animaciones

Cubes — Rejilla de cubos 3D que se inclinan hacia el cursor.
ElectricBorder — Borde eléctrico con arcos de energía y brillo ajustable.
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.