mukulmunda41-create/rolagem-cinemática-3d

Rolagem cinematográfica e 3D

Uma rotina curta para adicionar uma técnica cinematográfica a um site que já existe. É o passo cinematográfico da skill futuristic-web-design, empacotado para funcionar sozinho.

Se ../futuristic-web-design/ estiver ao lado desta skill, leia references/cinematic-moves.md lá antes de escrever código de rolagem ou 3D. Lá estão o código para cada receita abaixo, o comando de re-codificação e o processo para uma história de rolagem 3D ao vivo completa.

O orçamento

Existem cinco técnicas: um hero com vídeo de fundo, movimento vinculado à rolagem, uma seção fixa, profundidade parallax e um objeto 3D ao vivo. Use o hero com vídeo de fundo e no máximo duas das outras quatro. Uma página que usa todas elas parece um reel de demonstração, cansa o visitante e enfraquece cada efeito.

Antes de escrever código, percorra a página e pergunte de cada posicionamento: o movimento tornaria algo mais claro, ou faria o visitante sentir algo específico? Diga o que você vai adicionar, onde, o que contribui e o que custa. Se o usuário pedir mais depois que dois já estiverem no ar, seja claro sobre a troca: peso adicionado e menor impacto para os que já existem.

Guardrails para toda técnica

Decoração nunca pode derrubar a página.

• Movimento reduzido. Sob prefers-reduced-motion: reduce não há fixação, nem controle por rolagem, nem download de 3D. Mostre um layout empilhado normal ou uma imagem estática. Isso também cobre rolagem suave e transições, e o movimento controlado por script precisa de sua própria verificação matchMedia, pois não obedece ao CSS.
• Toque. Verifique com rolagem por dedo: sem saltos, sem overflow horizontal, sem armadilhas de rolagem.
• Telas pequenas. Abaixo de 768px, troque 3D por uma imagem estática.
• Carregamento adiado. Busque o código do efeito quando sua seção se aproximar da viewport, nunca durante o carregamento inicial.
• Falha. Se o efeito der erro ou o WebGL estiver ausente, a imagem estática permanece e o resto da página funciona.
• Números verdadeiros. Um contador animado nunca deve repousar sobre um valor falso. Anime a apresentação, não os dados.
• Versões. Verifique a documentação atual para GSAP, Three.js, React Three Fiber e Lenis e suas versões compatíveis. Pergunte antes de instalar cada pacote.

Receitas

Hero com vídeo de fundo

• Um elemento video com autoplay, muted, loop, playsinline e um poster. Celulares só reproduzem vídeo automaticamente se estiver sem áudio e inline.
• O poster (hero-poster.webp) é exibido primeiro, então não há quadro vazio enquanto hero.mp4 é baixado.
• Para legibilidade, coloque um gradiente escurecido apenas sob o bloco de texto. Escurecer o clipe inteiro anula o propósito de tê-lo. O título deve ser legível em alguns segundos.
• Mantenha o texto longe do assunto focal do clipe. Decida isso separadamente para desktop e celular.
• Em movimento reduzido, mostre o poster e pule o autoplay.

História de rolagem fixa

• A seção gruda quando seu topo atinge o topo da viewport, avança por cerca de três batidas enquanto a rolagem continua, e então solta. Rolar para cima reproduz ao contrário.
• Cada batida é um numeral grande, um título curto e uma frase de texto real.
• Construa com GSAP ScrollTrigger (pin e scrub) dentro de gsap.matchMedia() para que exista apenas quando o movimento é permitido e se limpe depois.
• Crie a marcação como batidas empilhadas simples. Sem script rodando, essa marcação já é o fallback.
• Fixação é a técnica com maior chance de se comportar mal em celulares. Peça um teste com o polegar em um dispositivo real e informe se nenhum foi feito.

Um acento 3D procedural

• Um único objeto pequeno, colocado uma vez, ao lado do conteúdo da seção. Construa a geometria em código a partir de primitivas, trabalhando a partir de uma descrição verbal da forma. Nenhum arquivo de modelo baixado, a menos que o usuário peça.
• Uma rotação lenta ociosa mais uma leve inclinação impulsionada pela rolagem. Materiais e iluminação vêm do sistema de design, iluminados como uma foto de produto em estúdio.
• O contêiner começa com uma imagem estática do objeto. O canvas o substitui apenas depois que o código 3D carregou e montou.
• Carregue apenas em 768px ou mais largo, quando o movimento é permitido e quando a seção está perto da viewport. Pause a renderização enquanto fora da tela e limite o device pixel ratio a 2.

Vídeo controlado por rolagem

• Um clipe curto cujo playhead segue a posição da rolagem em ambas as direções. Dá um efeito de "produto se desmontando" por muito menos bytes que 3D ao vivo.
• Re-codifique primeiro para que cada quadro seja um keyframe, com áudio removido e o clipe cortado para os segundos que importam. Mire em cerca de 1 MB ou menos.
• Fixe a seção e mapeie o progresso da rolagem para video.currentTime. Marque o elemento como muted e playsinline, e nunca chame play() nele.
• Revele chamadas de texto em sequência a partir do mesmo valor de progresso. Solte a fixação prontamente.
• Em movimento reduzido, mostre o quadro estático mais informativo.

Meça o que custou

Depois de adicionar uma técnica, compare o tamanho da transferência antes e depois e relate uma tabela curta com os arquivos tocados e pacotes adicionados. Se algo estiver pesado, reduza. Se continuar pesado, remova.