CONSTRUÍDONO SCROLL.

CONTEXTO

Rolar constrói o prédio. Voltar desconstrói.

Site de escritório de arquitetura quase sempre é catálogo de fotos estáticas. Mostra só o resultado, nunca o processo, e não convence quem valoriza execução.

Um escritório de arquitetura vende execução, não fotos. O site é um filme real de obra — do andaime à fachada — cujo tempo pertence 100% ao scroll, sem autoplay. No meio, o vídeo escurece e vira mesa de luz: a planta se desenha com cotas reais.

O QUE FOI FEITO

Um filme real de obra (do andaime à fachada pronta) cujo tempo de vídeo é 100% amarrado ao scroll, sem autoplay: rolar constrói o prédio, voltar desconstrói. A planta baixa se desenha sobre o vídeo como numa mesa de luz, uma linha de cota mede a obra em dias, e depois do filme o site vira o arquivo completo do estúdio, com obras entregues, processo e contato.

VÍDEO REAL · 100% CONTROLADO PELO SCROLL

SOLUÇÕES

• Vídeo 100% scroll-driven

  Sem autoplay: currentTime do vídeo perseguido por rAF com damping, GOP 1 pra seek instantâneo.

• Planta que se desenha

  Cena 'Prancha' com paredes, cotas e carimbo desenhados ao vivo sobre o vídeo escurecido.

• Auto-auditoria de design

  Parecer crítico 0-10 rodado contra o build real; achou e corrigiu um bug de nav ilegível e outro de menu mobile quebrado.

1. 01 / SCRUBUm ScrollTrigger por seção escreve (cena, progresso); um rAF lê isso a cada frame e persegue o currentTime do vídeo com damping. Pular de cena é um dolly de tempo, nunca um corte seco.
2. 02 / PRANCHAO vídeo escurece até virar uma mesa de luz e a planta do pavimento tipo se desenha amarrada ao scroll: paredes, mobiliário, cotas e carimbo (ESC 1:75).
3. 03 / ENTREGUEDepois do filme, o site vira o arquivo do estúdio: obras, processo e contato, com trilho de progresso e cursor próprio.

DETALHE TÉCNICO

• MOTOR DE SCROLLEstado mutável compartilhado (world.ts), ScrollTrigger escreve, rAF lê e persegue o vídeo com damping. Roteiro em scenes.ts.+

  A arquitetura separa o vídeo do scroll do DOM por um estado mutável compartilhado (world.ts), a mesma base do AUREX MOTORS. Um ScrollTrigger por seção escreve (cena, progresso) e um rAF lê isso a cada frame pra perseguir o currentTime do vídeo com damping, então pular de cena vira um dolly de tempo, nunca um corte seco. O roteiro do filme vive num arquivo único (scenes.ts) mapeando cada cena a uma fração da duração do vídeo. O vídeo em si é codificado com GOP 1, ou seja, todo frame é keyframe, porque sem isso o seek durante o scrub engasga. O preço é um arquivo maior, pago conscientemente.

• VIDEO SCRUBGOP 1 — todo frame é keyframe, senão o seek engasga. Arquivo maior, pago conscientemente.+

  A cena mais autoral é a 'Prancha': o vídeo escurece até virar uma mesa de luz e a planta do pavimento tipo se desenha amarrada ao scroll, com paredes, mobiliário, linhas de cota com medidas reais e um carimbo de prancha, usando a mesma técnica de pathLength=1 de um projeto anterior da família. As fronteiras do roteiro não foram chute. Extraí frames do vídeo-fonte a cada 0,5s pra achar onde a transformação visual acontece de verdade, que ficou concentrada entre 40% e 70% da duração, e recalibrei as cenas pra que 'Vedação' e 'Fachada' realmente parecessem etapas diferentes. Antes disso, duas das três cenas mostravam praticamente o mesmo andaime parado.

• PLANTAPlanta com pathLength=1; fronteiras das cenas calibradas extraindo frames a cada 0,5 s (transformação real entre 40% e 70%).+

  Como no projeto anterior de estádios, o site passou por uma auto-auditoria crítica de design (hero, storytelling, UX, UI, responsividade, nota 0-10 por eixo), rodada contra o próprio build de produção e não contra a intenção. O achado mais grave foi o header fixo, que não tinha fundo opaco de verdade: qualquer título claro passando por baixo dele durante o scroll virava texto sobre texto ilegível. A correção revelou um gotcha sutil de CSS. Um 'backdrop-filter' no header vira containing block pra 'position: fixed', então o menu mobile em tela cheia estava sendo calculado relativo à altura do próprio header, não do viewport, até o painel ser movido pra fora do elemento. Depois da auditoria entraram navegação mobile com hambúrguer de verdade, CTAs diferenciados (um fecha o filme, só o outro converte), trilho de progresso do filme e um cursor customizado.

NÚMEROS

• 100%

  DO VÍDEO NO SCROLL

• GOP 1

  TODO FRAME É KEYFRAME

• 0,5s

  ENTRE FRAMES ANALISADOS

• 1:75

  ESCALA DA PRANCHA

TELAS

RESULTADO

Projeto autoral, no ar

VÍDEO REAL DE OBRA, 100% SCROLL-DRIVEN

QUERO ALGO PARECIDO ↗ABRIR SITE ↗