CONSTRUIDOEN EL SCROLL.

CONTEXTO

Desplazarse construye el edificio. Volver lo desmonta.

El sitio de un estudio de arquitectura casi siempre es un catálogo de fotos estáticas. Muestra solo el resultado, nunca el proceso, y no convence a quien valora la ejecución.

Un estudio de arquitectura vende ejecución, no fotos. El sitio es una película real de obra —del andamio a la fachada— cuyo tiempo pertenece 100% al scroll, sin autoplay. A la mitad, el video se oscurece y se vuelve mesa de luz: el plano se dibuja con cotas reales.

QUÉ SE HIZO

Una película real de obra (del andamio a la fachada terminada) cuyo tiempo de video está 100% amarrado al scroll, sin autoplay: bajar construye el edificio, subir lo deconstruye. La planta se dibuja sobre el video como en una mesa de luz, una línea de cota mide la obra en días, y después de la película el sitio se convierte en el archivo completo del estudio, con obras entregadas, proceso y contacto.

VIDEO REAL · 100% CONTROLADO POR EL SCROLL

SOLUCIONES

• Video 100% scroll-driven

  Sin autoplay: currentTime del video perseguido por rAF con damping, GOP 1 para seek instantáneo.

• Planta que se dibuja sola

  Escena 'Prancha' con paredes, cotas y sello dibujados en vivo sobre el video oscurecido.

• Autoauditoría de diseño

  Dictamen crítico 0-10 corrido contra el build real; encontró y corrigió un bug de nav ilegible y otro de menú mobile roto.

1. 01 / SCRUBUn ScrollTrigger por sección escribe (escena, progreso); un rAF lo lee en cada frame y persigue el currentTime del video con damping. Saltar de escena es un dolly de tiempo, nunca un corte seco.
2. 02 / LÁMINAEl video se oscurece hasta volverse mesa de luz y el plano de la planta tipo se dibuja atado al scroll: paredes, mobiliario, cotas y rótulo (ESC 1:75).
3. 03 / ENTREGADODespués de la película, el sitio se vuelve el archivo del estudio: obras, proceso y contacto, con riel de progreso y cursor propio.

DETALLE TÉCNICO

• MOTOR DE SCROLLEstado mutable compartido (world.ts): ScrollTrigger escribe, rAF lee y persigue el video con damping. Guion en scenes.ts.+

  La arquitectura separa el video del scroll del DOM por un estado mutable compartido (world.ts), la misma base de AUREX MOTORS. Un ScrollTrigger por sección escribe (escena, progreso) y un rAF lo lee en cada frame para perseguir el currentTime del video con damping, así que saltar de escena se vuelve un dolly de tiempo, nunca un corte seco. El guion de la película vive en un archivo único (scenes.ts) que mapea cada escena a una fracción de la duración del video. El video en sí está codificado con GOP 1, es decir, todo frame es keyframe, porque sin eso el seek durante el scrub se traba. El precio es un archivo más grande, pagado a conciencia.

• VIDEO SCRUBGOP 1 — cada frame es keyframe; si no, el seek se traba. Archivo más pesado, pagado a conciencia.+

  La escena más personal es la 'Prancha' (Lámina): el video se oscurece hasta volverse una mesa de luz y la planta del piso tipo se dibuja amarrada al scroll, con paredes, mobiliario, líneas de cota con medidas reales y un sello de lámina, usando la misma técnica de pathLength=1 de un proyecto anterior de la familia. Las fronteras del guion no fueron un tanteo. Extraje frames del video fuente cada 0,5s para encontrar dónde ocurre de verdad la transformación visual, que quedó concentrada entre el 40% y el 70% de la duración, y recalibré las escenas para que 'Vedação' y 'Fachada' realmente parecieran etapas distintas. Antes de eso, dos de las tres escenas mostraban prácticamente el mismo andamio quieto.

• PLANOPlano con pathLength=1; fronteras de las escenas calibradas extrayendo frames cada 0,5 s (transformación real entre 40% y 70%).+

  Como en el proyecto anterior de estadios, el sitio pasó por una autoauditoría crítica de diseño (hero, storytelling, UX, UI, responsividad, nota 0-10 por eje), corrida contra el propio build de producción y no contra la intención. El hallazgo más grave fue el header fijo, que no tenía fondo opaco de verdad: cualquier título claro que pasara por debajo durante el scroll se convertía en texto sobre texto ilegible. La corrección reveló un gotcha sutil de CSS. Un 'backdrop-filter' en el header se vuelve containing block para 'position: fixed', así que el menú mobile a pantalla completa se estaba calculando relativo a la altura del propio header, no del viewport, hasta que el panel se movió fuera del elemento. Después de la auditoría entraron navegación mobile con hamburguesa de verdad, CTAs diferenciados (uno cierra la película, solo el otro convierte), riel de progreso de la película y un cursor personalizado.

NÚMEROS

• 100%

  DEL VIDEO EN EL SCROLL

• GOP 1

  CADA FRAME ES KEYFRAME

• 0,5s

  ENTRE FRAMES ANALIZADOS

• 1:75

  ESCALA DEL PLANO

PANTALLAS

RESULTADO

Proyecto propio, en línea

VIDEO REAL DE OBRA, 100% SCROLL-DRIVEN

QUIERO ALGO PARECIDO ↗ABRIR SITIO ↗