Site cinematográfico com performance: frames, Canvas, GSAP e carregamento progressivo

Primeiro se define a narrativa

Antes de escrever código, divida a experiência em cenas: entrada, transformação, foco no produto, transição e fechamento. Cada cena precisa ter duração visual, enquadramento e objetivo. Isso evita criar um efeito bonito que não conduz o usuário para nenhuma informação ou ação.

Quando a narrativa está clara, fica mais fácil decidir o que realmente precisa ser animado e o que pode permanecer como conteúdo HTML convencional.

Sequência de frames é diferente de vídeo comum

Em uma sequência de frames, o scroll controla qual imagem é renderizada. Isso oferece precisão quadro a quadro e permite travar a cena enquanto o usuário avança. O custo é o número de arquivos, por isso renderização e compressão precisam ser pensadas em conjunto.

WebP e AVIF podem reduzir bastante o peso, mas a melhor configuração depende do tipo de imagem. O importante é manter continuidade visual sem entregar resolução maior que a necessária para o viewport.

Canvas é o palco, não o carregador

O Canvas desenha os frames com eficiência, mas não resolve sozinho a estratégia de rede. Carregar 200 imagens na inicialização continua sendo pesado. Uma implementação robusta pré-carrega a primeira faixa, inicia a experiência e busca o restante em grupos conforme o usuário se aproxima das cenas.

Também é possível adaptar a densidade de frames para dispositivos mais limitados, desde que a transição permaneça fluida.

GSAP e ScrollTrigger organizam o tempo

GSAP e ScrollTrigger são úteis para sincronizar progresso, pinning, transições e estados. A biblioteca não precisa controlar tudo. Textos, links e conteúdo semântico devem continuar no HTML para acessibilidade, SEO e manutenção.

Uma boa arquitetura separa o estado da cena, o render do frame e a interface. Isso evita recalcular layout desnecessariamente em cada evento de scroll.

SEO continua sendo HTML, conteúdo e links

O mecanismo cinematográfico deve enriquecer a experiência, não esconder o conteúdo. Títulos, parágrafos, CTAs e links importantes precisam existir no DOM e ser rastreáveis. Imagens relevantes também devem aparecer em elementos `img` quando a intenção é indexá-las no Google Imagens.

Um Canvas pode ser excelente para o efeito principal, mas não deve ser o único lugar onde a informação existe.

Performance é parte da direção de arte

Reduzir peso depois de terminar tudo é mais difícil do que desenhar a experiência com orçamento de performance desde o início. Defina dimensões, formatos, número de frames e pontos de carregamento antes da exportação final. Assim, o resultado visual e o técnico deixam de competir.