LatticeLoader

Indicador de estado de agente IA con rejilla de puntos en ola.

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

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/LatticeLoader-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	"Done in"
errorLabel	string	"Failed after"
status	"working" \| "done" \| "error"	"working"
pattern	string \| { cells, loop?, scale? }	"orbit"
grid	3 \| 4	3
shape	"square" \| "round"	"round"
color	string	"currentColor"
doneColor	string	"#22c55e"
errorColor	string	"#ef4444"
cellSize	number	6
gap	number	2
fontSize	number	14
step	number	90
idleOpacity	number	0.15
glow	boolean	false
glowColor	string	""
showTimer	boolean	true
elapsed	number	undefined
className	string	""
style	CSSProperties	undefined

Otros efectos de microinteracciones

PulseHeart — Botón de “me gusta” que late y cambia el contador.
ScrubField — Campo numérico que se arrastra para cambiar el valor.
SlingButton — Botón de enviar que se tensa como un tirachinas.
SwipeRow — Fila que se desliza para revelar acciones.
WakeSlider — Slider de barras que deja una estela según la velocidad.
BranchedMenu — Menú desplegable con ramas curvas hacia cada opción.