A página que se monta enquanto você desce.

Landing page de sete cenas. Cada uma é uma etapa do pipeline do produto: varredura do ramo no mapa, auditoria do que já existe, briefing montado, demo do site novo gerada. Cada cena é um diorama em vídeo com poster estático, pinado enquanto o texto passa.

HTML, CSS e JavaScript puros, sem build, sem framework e sem nenhuma dependência externa carregada em runtime.

Enquadramento por CSS, nunca por recorte de arquivo. São três variáveis por cena: --escala, que iguala o tamanho aparente do objeto entre as sete e é derivada do bounding box do render; --foco, que centraliza no objeto; e --bancada, a cor de fundo amostrada do próprio render.

# a escala sai da medida, não do olho
--escala: 2150 / largura do bounding box do render
--foco: centro do objeto, em porcentagem do quadro
--bancada: cor amostrada do render, para o objeto pousar sem retângulo visível

Isso é exigência técnica antes de gosto: o poster precisa casar 1:1 com o primeiro frame do vídeo. Recortar o arquivo faria a troca de poster para vídeo dar um salto visível.

Ficha técnica em vez de screenshot. Cada cena mostra um pedaço da tela real do produto, reconstruído em cerca de 60 linhas de CSS reutilizadas nas sete. Um print custaria por volta de 200 KB por cena e envelheceria a cada mudança de interface.

Descartado

Cartão com borda, raio, sombra, backdrop-filter e pílula com blur. Cara de painel administrativo colado numa página que é cinema.

Escolhido

Fio de 1 px, caixa-alta miúda e serifada, como página de especificação de produto caro. A peça precisa poder estar num anúncio impresso.

Detalhe do mesmo tipo: a marca d'água do gerador saiu por mediana de raio grande, não por clonagem da região vizinha. Em algumas cenas a sombra do diorama passava perto e o clone trazia mancha junto.

1,5 MB servidos para as sete cenas, contra 45 MB de masters em 2752×1536. O caminho é um pipeline próprio: build.sh gera AVIF e WebP em 900, 1600 e 2400 px; build-video.sh gera webm e mp4 em 1024×576.

O efeito prático é o que importa para o público: a página carrega em conexão de celular de dono de PME, que é exatamente quem a recebe. E sem dependência externa não sobra requisição a terceiro no caminho crítico, nem superfície de quebra futura.