HalftoneReveal

Trama de semitono de imprenta que se aclara alrededor del cursor.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/HalftoneReveal-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
src	string	picsum photo
inkColor	string	#141414
paperColor	string	#fff7e6
mode	"mono" \| "duotone" \| "color"	mono
dotSize	number	1
dotDensity	number	71
angle	number	45
shape	"circle" \| "square" \| "diamond" \| "line"	circle
contrast	number	1.15
invert	boolean	false
revealRadius	number	0.4
edge	number	0.8
follow	number	0.37
idleReveal	number	0
trigger	"hover" \| "always" \| "off"	hover
borderRadius	string	16px

Otros efectos de animaciones

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.
BlobCursor — Cursor orgánico en forma de gota con inercia y morphing elástico.