CONSTRUIDOEN EL SCROLL.

Desplazarse construye el edificio. Volver lo desmonta.

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.

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

  LEER EL DETALLE TÉCNICO

  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.+

  LEER EL DETALLE TÉCNICO

  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.

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

  LEER EL DETALLE TÉCNICO

  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.

• AUDITORÍA DE DISEÑOAutoauditoría 0–10 contra el build real: header ilegible y menú móvil roto por backdrop-filter — corregidos.+

  LEER EL DETALLE TÉCNICO

  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.

CONSTRUIDO CON — Next.js · TypeScript · GSAP · ScrollTrigger · Lenis · Tailwind · FFmpegCÓDIGO ↗

• 100%

  DEL VIDEO EN EL SCROLL

• GOP 1

  CADA FRAME ES KEYFRAME

• 0,5s

  ENTRE FRAMES ANALIZADOS

• 1:75

  ESCALA DEL PLANO

Proyecto propio, en línea

VIDEO REAL DE OBRA, 100% SCROLL-DRIVEN

[ QUIERO ALGO PARECIDO ]