.png)
Construí mi portafolio y hubo una función que me hizo especial ilusión: un cielo vivo con nubes que cruzan la pantalla. Más allá del efecto wow, me permitió explorar cómo crear experiencias pulidas en frontend, empaquetarlas como librería y compartirlas con la comunidad. Y ya que en Q2BSTUDIO ayudamos a empresas con software a medida, aplicaciones a medida, inteligencia artificial, ciberseguridad, servicios cloud AWS y Azure, inteligencia de negocio y power bi, me pareció una oportunidad perfecta para contar el proceso y por qué puede aportar valor real a una marca personal o corporativa.
La idea nació sin plan previo. Quería algo único en mi portfolio. Pensé en mostrar mi nombre y, al hacer clic, revelar su significado con un cielo animado. Para las nubes necesité imágenes PNG con transparencia y encontré buenos recursos en pngtree. Preparé cinco variaciones de nube para tener variedad y sensación de profundidad.
Definí tres requisitos clave para la interacción: primero, las nubes debían aparecer desde ambos lados y cruzar el viewport; segundo, la animación debía ser horizontal y continua; tercero, el cielo debía superponerse al contenido existente sin romper la navegación. Con eso, diseñé una pila de capas con z-index: fondo base, fondo del cielo, componentes, nubes y la barra de navegación siempre por encima.
El contenedor de nubes fue absolutamente posicionado, con ancho al cien por cien, sin saltos de línea y sin capturar eventos del puntero para no bloquear clics del contenido. Así se asegura que todo el viewport actúe como escenario y que el usuario pueda seguir interactuando con la página.
Para el movimiento utilicé dos animaciones tipo marquee: de izquierda a derecha y de derecha a izquierda. Empiezan completamente fuera de pantalla y terminan del lado opuesto, usando valores relativos al ancho del viewport. Con tiempos diferentes para cada nube, se obtiene un patrón orgánico que no resulta repetitivo.
Me apoyé en temas visuales. Además del clásico modo claro y modo oscuro, añadí un modo atardecer. Así, la apariencia del cielo y los filtros de color de las nubes se adaptan al tema activo, con ajustes de brillo y ligeras rotaciones de tono para transmitir atmósferas distintas.
Cada nube tiene su propio comportamiento para crear profundidad: la nube 1 cruza de derecha a izquierda en 40 s cerca del borde superior; la nube 2 va de izquierda a derecha en 45 s, a un 60 por ciento de escala y a un 15 por ciento de altura; la nube 3 de derecha a izquierda en 50 s, escala 80 por ciento; la nube 4 de izquierda a derecha en 55 s, escala 75 por ciento; y la nube 5 de derecha a izquierda en 60 s, escala 70 por ciento. Este escalado, junto a opacidades distintas, refuerza la sensación de capas y 3D.
Las animaciones son en bucle, sin interrupciones y con timings variados para que el movimiento se sienta natural. El objetivo es que el usuario perciba un cielo vivo, no una secuencia mecánica.
La paleta por tema quedó así: en claro, crema para el fondo principal y azul cielo para el área de nubes; en oscuro, negro con azul marino profundo; en atardecer, azul oscuro con lavanda suave. Ese contraste controla la legibilidad del contenido mientras las nubes flotan por encima.
Como me gustó el resultado, decidí convertirlo en un paquete público. En el portfolio el disparador era un texto en bengalí akash que significa cielo, pero para un paquete hacía falta un control independiente de encendido y apagado. El objetivo del componente es sencillo: añadir un cielo interactivo con nubes animadas, sensible al tema y fácil de activar, que no estorbe la experiencia ni la accesibilidad.
Extraje el código a un proyecto independiente con una estructura clara: un componente CloudAnimation que acepta rutas de imágenes y opciones de personalización; un ThemeContext con lógica de tema basada en horario y anulación manual, con almacenamiento en local configurable; un ThemeToggle ligero para los controles; y una hoja de estilos con contenedor, posiciones, animaciones y filtros por tema. La idea es que cualquier proyecto pueda integrar el cielo con la mínima fricción.
Para la demo preparé una aplicación de ejemplo. Tenía dos secciones con el cielo y, como compartían el mismo proveedor de contexto, al cambiar el tema se sincronizaban ambas. Para evitarlo dupliqué el proveedor con estados propios en cada sección, y así cada demo mantiene sus controles y estado sin interferencias.
Si quieres ver el resultado, aquí tienes la demo en vivo en cloudanimation y el paquete en npm. Es sencillo de instalar, no bloquea la interacción y es compatible con temas. Seguiré mejorándolo y cualquier sugerencia es bienvenida.
¿Por qué merece la pena algo así en un portfolio o en una web corporativa? Porque una microinteracción bien cuidada eleva la marca, demuestra atención al detalle y comunica capacidades técnicas reales. En proyectos de productos digitales, estas capas visuales pueden integrarse en ecosistemas mayores, desde sistemas de diseño hasta pipelines de despliegue, y aprovechar infraestructuras modernas en la nube como nuestros servicios cloud AWS y Azure para servir contenido estático y dinámico con rendimiento y seguridad.
En Q2BSTUDIO aplicamos el mismo rigor para crear experiencias a la medida que generen impacto medible. Desde software a medida y aplicaciones a medida hasta soluciones de ia para empresas, agentes IA y analítica avanzada con power bi, aterrizamos ideas en productos sólidos y seguros. Si te interesa explorar cómo la inteligencia artificial puede potenciar tu frontend, automatizar pruebas visuales o personalizar experiencias en tiempo real, hablamos y te mostramos casos concretos.
Palabras clave que trabajamos y que pueden ayudarte a encontrar soluciones como esta: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, pentesting, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi y automatización de procesos. Si buscas elevar la experiencia de tu producto y diferenciarte, este pequeño cielo de nubes es un buen ejemplo de cómo empezar por los detalles que marcan la diferencia.
