---
title: "Ocaso — tarjeta que cruza de foto a vídeo | Logic2b Lab"
description: "Demo técnica: tarjetas de producto con crossfade de 4,5 s entre foto y vídeo en bucle según el modo día/noche, sobre un artboard escalado con container queries. HTML, CSS y JS sin dependencias."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/ocaso/
  md: https://logic2b.com/lab/ocaso/index.md
---

# Ocaso Lab · Composición / Medios sincronizados

lab.logic2b.com/ocaso

Ruta: [Lab](https://logic2b.com/lab) › [Interfaces y composición](https://logic2b.com/sistemas/interfaces-composicion)

## 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

### Detalles

**Categoría**

Composición / Medios sincronizados

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- Vídeo HTML5
- SVG

### Categorías

[Interfaces y composición](https://logic2b.com/sistemas/interfaces-composicion) Vídeo Modo oscuro Container queries Microinteracciones

### Lo ofrecemos con webs de

[Fotógrafos y creativos](https://logic2b.com/diseno-web/fotografos)

## Labs relacionados

[Ver todos](https://logic2b.com/lab)

[**Sumario** Interfaces y composición](https://logic2b.com/lab/sumario) [**Pespunte** Comercio / Configuradores de producto](https://logic2b.com/lab/pespunte) [**Zaguán** Interfaces y composición](https://logic2b.com/lab/zaguan)

---

Logic2b S.L. · Castellón (España) · [info@logic2b.com](mailto:info@logic2b.com) · [Contacto](https://logic2b.com/contacto/) · [Auditoría gratuita](https://logic2b.com/auditoria/) · [Índice para IA](https://logic2b.com/llms.txt)