SquishSwitch

Interruptor que se estira según la velocidad y se aplasta al llegar.

Código: RODD·MI·026
Familia: Microinteracciones
Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

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

Cuándo usarlo

Para acciones frecuentes: confirmar, marcar, valorar. El feedback convierte un clic en una sensación.

Props para personalizarlo

Prop	Tipo	Por defecto
checked	boolean	undefined
defaultChecked	boolean	false
onChange	(checked: boolean) => void	-
label	string	""
disabled	boolean	false
trackColor	string	"#27272a"
trackOnColor	string	"#f5f5f5"
thumbColor	string	""
thumbOnColor	string	""
width	number	76
height	number	38
radius	number	19
speed	number	50
stretch	number	36
hoverScale	number	1.035
colorDuration	number	320
ariaLabel	string	-
className	string	""
id	string	-

Otros efectos de microinteracciones

VoicePill — Botón de micrófono que se convierte en ecualizador al grabar.
BellToggle — Botón de notificaciones con campana que suena al activarlo.
DodgeField — El contenido huye del puntero dentro de un área.
HoldButton — Botón de “mantén para confirmar” con relleno líquido.
PaperCrumple — Imagen que se arruga como papel al mantenerla pulsada.
RainbowButton — Botón con un borde arcoíris animado.