ThoughtLine

Cabecera de razonamiento de IA con pasos y temporizador.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/ThoughtLine-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
label	string	"Thinking…"
doneLabel	string	""
renderLabel	(text, working) => ReactNode	-
glyph	'sparkle' \| 'dot' \| 'none' \| ReactNode	'sparkle'
steps	string[]	[]
collapsible	boolean	true
collapseOnSettle	boolean	true
color	string	"currentColor"
glyphColor	string	""
fontSize	number	16
breathPeriod	number	1.6
breathDepth	number	0.45
shimmer	boolean	true
shimmerDuration	number	1.8
settleDuration	number	350
settleBlur	number	2
working	boolean	true
settleAfter	number	0
elapsed	number	undefined
showTimer	boolean	true
onSettle	(seconds) => void	-
className	string	""
style	CSSProperties	-

Otros efectos de microinteracciones

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.
ShimmerButton — Botón con un destello que recorre su borde.