nudaui-cover

Hay una conversación que se repite mucho en el mundo del frontend.

Alguien quiere añadir una animación a su proyecto. Un loader, una transición, algo que haga que la interfaz se sienta viva. Busca opciones, encuentra varias librerías, elige una, la instala, importa el componente, descubre que necesita configurar algo más, lee la documentación, y veinte minutos después tiene una animación que funciona pero su bundle creció, su proyecto ahora depende de algo que no controla, y si algún día esa librería deja de mantenerse, el problema es suyo.

Todo eso para un loader que gira.

Eso es lo que quería resolver con NudaUI.

La idea es simple

NudaUI es una colección de animaciones CSS y JS de copy-paste. Sin dependencias. Sin npm install. Sin build steps. Sin runtime.

Entras a nudaui.dev, encuentras la animación que necesitas, copias el código y lo pegas en tu proyecto. Funciona en React, Vue, Svelte, Astro, Laravel, Django, Rails, o HTML plano. Funciona en cualquier sitio donde puedas escribir CSS.

Eso es todo.

No hay nada que instalar porque no hay nada que instalar. El código es tuyo desde el momento en que lo copias. Si dentro de dos años NudaUI desaparece, tus animaciones siguen funcionando porque están en tu proyecto, no en una dependencia.

Por qué esto importa más de lo que parece

El ecosistema frontend tiene un problema de dependencias que hemos normalizado tanto que ya no lo vemos.

Instalamos librerías para cosas que CSS puede hacer solo. Añadimos paquetes que traen otros paquetes que traen otros paquetes. Actualizamos cuando hay breaking changes aunque no hayamos pedido nada nuevo. Y en proyectos grandes, hay un momento en que nadie sabe exactamente qué hay en el node_modules ni por qué.

NudaUI parte de la premisa contraria. Si algo se puede hacer con CSS puro, se hace con CSS puro. Si necesita un poco de JavaScript, que sea JavaScript mínimo, sin abstracciones innecesarias. Y si el código cabe en veinte líneas, no hay razón para que sea un paquete.

Hay algo satisfactorio en entender exactamente cómo funciona cada cosa que tienes en tu proyecto. NudaUI intenta preservar eso.

Cómo funciona en la práctica

Imagina que necesitas un spinner para un estado de carga. Vas a nudaui.dev, buscas el que te encaja visualmente, copias el CSS y el HTML, lo pegas donde lo necesitas. Si quieres ajustar el color o el tamaño, editas directamente las variables CSS. No hay props que aprender, no hay API que consultar.

Todos los componentes están pensados así. Son puntos de partida, no cajas negras.

Además, todos respetan prefers-reduced-motion por defecto. Accesibilidad no como añadido sino como parte del diseño desde el principio.

Para quién es esto

Para cualquiera que quiera animaciones que funcionen sin complicaciones.

Si trabajas en un proyecto que ya tiene su stack definido y no quieres añadir dependencias solo para animar un botón, NudaUI es para ti. Si construyes con HTML y CSS sin ningún framework, también. Si usas React pero te da pereza configurar otra librería de animaciones para algo pequeño, igual.

La compatibilidad no es una promesa de marketing. Es el resultado de que el código no asume nada sobre tu entorno.

Está disponible en nudaui.dev. Si lo usas y tienes feedback, me lo puedes decir por LinkedIn o abriendo un issue en el repo.

Nos leemos.

Santi