SloshGauge

Indicador de depósito con líquido que se mueve con inercia.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/SloshGauge-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
value	number	undefined
defaultValue	number	60
onChange	(value: number) => void	-
interactive	boolean	false
showValue	boolean	true
disabled	boolean	false
liquidColor	string	"#f5f5f5"
glassColor	string	"#27272a"
width	number	88
height	number	180
radius	number	20
ticks	number	4
viscosity	number	0.15
tilt	number	0.45
splash	number	0.42
unit	string	"%"
ariaLabel	string	"Level"
className	string	""

Otros efectos de microinteracciones

TearTicket — Entrada cuya matriz se arranca a mano con fibras de papel.
AnimatedBadge — Etiqueta con brillo animado para novedades.
CodeSlots — Campo de código de un solo uso (OTP) con animación por dígito.
FuseButton — Botón con “deshacer” sobre una mecha que se consume.
LatticeLoader — Indicador de estado de agente IA con rejilla de puntos en ola.
PulsatingButton — Botón que late para llamar la atención.