Ocaso · Lab · Composición / Medios sincronizados

Cómo se construyó Ocaso

Cuatro tarjetas de producto de un estudio de interiorismo que cambian de piel con la hora: en modo día muestran una foto fija del salón; al pasar a noche, un vídeo en bucle aparece por encima con un fundido de 4,5 s mientras la foto de debajo se sustituye por su versión nocturna con el mismo cruce. Por dentro, cada tarjeta no maqueta en porcentajes: dibuja sobre un lienzo fijo de 660×836 px que se escala con transform hasta encajar en la caja real, y ese lienzo es un contenedor de consulta, así que el pie mide en cqw y conserva la proporción exacta a cualquier ancho. La barra inferior deja mover la duración del fundido, encadenar ciclos automáticos día-noche y leer en vivo la escala calculada.

Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si te interesa algo parecido para tu producto, hablamos.

Qué demuestra

• Artboard fijo de 660×836 px escalado con min(ancho/660, alto/836) y recalculado con ResizeObserver: la maqueta interna nunca se deforma
• container-type: inline-size en el artboard para que el pie mida en cqw y el titular ocupe siempre la misma fracción de la tarjeta
• Cruce foto → vídeo del spec literal: opacidad 0→1 en 4,5 s con cubic-bezier(.22, 1, .36, 1), con el vídeo por encima y la foto quieta debajo
• La foto además cambia de archivo a su versión nocturna con el mismo fundido: baja a 0, se sustituye al cargar la nueva y vuelve a 1
• El vídeo solo se reproduce de noche (play/pause en el conmutador) para no gastar decodificación de balde
• Caja de la tarjeta del spec al pie de la letra: aspect-ratio 319/404, radio fluido y doble sombra proyectada
• Un único par de archivos para las cuatro tarjetas, encuadrado distinto en cada una con object-position
• Mando de duración del fundido (0,4–8 s), ciclo automático encadenado y conmutador «solo vídeo» para ver dónde acaba una capa y empieza la otra
• Lectura en vivo de la escala del artboard y del tamaño real de la caja
• Cuatro iconos de Material Icons del spec redibujados a mano como SVG de trazo 1.6; la Neue Montreal del spec, que no es libre, se sustituye por Inter
• Rejilla del spec: 4 columnas, 2 por debajo de 920 px y 1 por debajo de 540 px