background-clouds: un fondo animado de nubes low-poly para sitios web

Fuentes: background-clouds: a lightweight animated low-poly cloud background for websites

background-clouds es una biblioteca JavaScript que dibuja un banco de nubes low-poly en movimiento detrás de un sitio web mediante un único elemento . Está pensada como un detalle ambiental sutil: ligera, sin dependencias en tiempo de ejecución y con métodos de ciclo de vida para integrarse en aplicaciones de página única.

Su instalación es directa a través de npm (npm install background-clouds) y su uso se reduce a crear un en el HTML y llamar a createCloudBackground() pasando ese elemento y, opcionalmente, parámetros de configuración. El paquete respeta automáticamente la preferencia prefers-reduced-motion del sistema operativo, deteniendo la animación para usuarios que han solicitado reducir el movimiento, lo que la hace accesible sin configuración adicional.

Entre las opciones disponibles destacan seed (cadena o número que determina una disposición de nubes reproducible y estable entre sesiones), speed (multiplicador de velocidad, con 0 para nubes estáticas), opacity (opacidad general), pixelRatio (ratio máximo de píxeles del dispositivo) y reducedMotion (para sobrescribir la consulta de medios manualmente). El controlador devuelto expone los métodos start(), stop(), resize(), setSeed() y destroy() para detener, redimensionar, cambiar la semilla o desmontar la animación al cambiar de ruta en una SPA.

La biblioteca no aplica estilos al lienzo: el desarrollador debe definir en su CSS la posición, el color de fondo y el orden de apilamiento. El se coloca habitualmente como position: fixed con pointer-events: none y z-index negativo, de modo que las nubes actúan como fondo puramente decorativo sin interferir en la interacción.