Drawably: librería de controles de interfaz con estilo a mano alzada

Fuentes: Drawably: Hand-drawn UI controls with seeded randomness

Drawably es una librería de JavaScript de código abierto que genera controles de interfaz de usuario (UI) con un estilo de dibujo a mano alzada. Su característica principal es que cada montaje de un componente genera un nuevo boceto a partir de aleatoriedad semilla, creando un efecto de animación sutil donde el trazo 'hierve' como un dibujo animado. La librería destaca por su minimalismo técnico: no depende de frameworks externos, ocupa aproximadamente 9 KB de JavaScript comprimido y 3 KB de hoja de estilos, manteniendo la compatibilidad con lectores de pantalla y accesibilidad mediante SVG ocultos bajo aria-hidden.

El sistema ofrece tres variantes visuales: contorno, sólido y garabato, además de un estado de máquina para gestionar estados asíncronos como carga, error o éxito. En React, se proporcionan componentes específicos que permiten controlar el estado sin redibujar el boceto, solo cambiando el color o la forma según la configuración CSS. La librería incluye funciones para botones, entradas, listas y elementos decorativos como subrayados, círculos y flechas. Además, incorpora una fuente TrueType de 31 KB llamada 'Drawably Pen' para unificar la tipografía con el estilo de los trazos. El código está licenciado bajo MIT y está diseñado para integrarse en proyectos que buscan una estética orgánica y personalizada sin la sobrecarga de dependencias tradicionales.