ATELIER VERTEX

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.

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.

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.