CONSTRUÍDONO SCROLL.

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

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.

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

  LER O DETALHE TÉCNICO

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

  LER O DETALHE TÉCNICO

  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.

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

  LER O DETALHE TÉCNICO

  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.

• AUDITORIA DE DESIGNAuto-auditoria 0–10 contra o build real: header ilegível e menu mobile quebrado por backdrop-filter — corrigidos.+

  LER O DETALHE TÉCNICO

  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.

CONSTRUÍDO COM — Next.js · TypeScript · GSAP · ScrollTrigger · Lenis · Tailwind · FFmpegCÓDIGO ↗

• 100%

  DO VÍDEO NO SCROLL

• GOP 1

  TODO FRAME É KEYFRAME

• 0,5s

  ENTRE FRAMES ANALISADOS

• 1:75

  ESCALA DA PRANCHA

Projeto autoral, no ar

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

[ QUERO ALGO PARECIDO ]