Amicro

Galería de micro-interacciones React: pruebas el botón, copias el código con Tailwind y Motion.

Para qué reto sirve

El botón que no se siente presionable, el estado que cambia de golpe, el control que no acusa recibo. Aquí ves la micro-interacción funcionando antes de escribirla y te llevas el código hecho, en vez de afinar curvas y duraciones a ciegas.

Qué es

Colección de micro-transiciones para React construidas sobre Motion, la antigua Framer Motion. Es un sandbox: previsualizas cada botón en vivo, cambias entre rejilla, lista y matriz, alternas tema claro y oscuro, y copias el código React con Tailwind ya generado. Hecho con React y TypeScript, Tailwind, Motion, Lucide y Vite.

Cuándo no usarla

La landing promete instalación con un comando y componentes tree-shakeable, y el repositorio no tiene nada de eso: no hay paquete en npm, ni CLI, ni releases. Se clona, se levanta en local y se copia el código a mano. Además ese código sale atado a Tailwind y a Motion, así que en un proyecto sin Tailwind hay que traducirlo. Y es muy joven: 5 commits, cero forks, un autor.

Mi veredicto

Sin probar. Sirve como catálogo de referencia visual, no como dependencia: lo que te llevas es el código, no un paquete. Para mí tiene un problema concreto, y es que este sitio no usa Tailwind a propósito, así que cada pieza habría que traducirla a CSS con tokens. Lo dejo como fuente de ideas de motion, que es donde sí gana.

Lo que dice la landing y lo que hay en el repositorio

Vale la pena dejarlo escrito porque es la diferencia entre poder usarlo y no.

La landing dice	El repositorio tiene
«Add… with a single CLI command»	Ningún CLI. Se clona el proyecto y se levanta con `npm run dev`
«lightweight and tree-shakeable components»	Ningún paquete publicado en npm, ni releases
Librería de componentes	Un sandbox con botón de copiar código

No es un defecto del código: es que el producto real es una galería, no una librería. Encaja perfecto si lo usas para eso.

Qué trae el sandbox

Previsualización en vivo de cada micro-transición, con tres disposiciones —rejilla, lista y matriz— y escalado instantáneo al cambiar. Conmutador de tema claro y oscuro, y el código que copias respeta el tema activo. Contador de estrellas del repositorio en vivo.

Para añadir una transición propia hay que tocar tres archivos: src/data/buttons.tsx para las propiedades del disparador, src/components/AnimatedButton.tsx para el comportamiento de entrada y salida, y src/utils/codeGenerator.ts para la plantilla que se copia.

Frente a lo que ya tienes

Se solapa con la skill emil-design-eng, y la diferencia importa. Amicro te da piezas hechas; Emil te da el criterio para decidir la duración, la curva y si esa animación debería existir. Si la interacción se repite muchas veces al día, Emil diría que no la animes — y ninguna galería te va a decir eso.