Serviço
Sites cinematográficos
Site cinematográfico é um site em que o scroll dirige a atenção como uma câmera dirige um plano: cada seção é uma cena, o movimento tem peso e intenção, e a página conta uma história em vez de listar informação.
A página que você está lendo agora foi construída assim — e é o argumento mais honesto que eu tenho. Role a página inicial deste site e veja o que acontece com as partículas: aquilo é WebGL amarrado ao scroll, rodando a 60fps, sem travar o celular e degradando com elegância para quem pediu menos movimento no sistema.
O que torna um site 'cinematográfico'?
Não é quantidade de efeito — é direção. Sites premiados quase sempre têm um único golpe de mestre e o resto sóbrio o bastante para ele respirar. O que separa cinema de template é peso no movimento (easing próprio, inércia, antecipação), ritmo entre momentos densos e silêncios, tipografia em escala editorial e uma paleta apertada com direção de luz consistente entre o HTML e o 3D. Efeito empilhado sem hierarquia parece demo de biblioteca, não produto.
Isso não deixa o site lento?
Deixa, quando é mal feito — e é assim que morre a maioria das tentativas. Eu trabalho com orçamento de performance definido antes da primeira linha: LCP abaixo de 2,5s, 60fps no scroll, nada de animar propriedade cara, WebGL carregado sob demanda e pausado quando sai da tela. No site que você está lendo, o three.js inteiro fica num chunk separado que só baixa depois do primeiro paint.
E quem não pode ou não quer ver animação?
O conteúdo continua lá. Todo site que eu entrego é construído em camadas: o HTML semântico funciona sozinho, com JavaScript desligado, e a animação é melhoria progressiva por cima. Quem tem 'reduzir movimento' ativado no sistema recebe a página sem o movimento, sem layout quebrado. Isso não é só acessibilidade — é também o que faz o Google conseguir ler a página.
Para quem isso vale a pena?
Para quem vende algo em que percepção de qualidade faz parte do preço: lançamento de produto, marca de alto padrão, portfólio de estúdio, captação de investimento. Se o objetivo é converter tráfego pago no menor custo possível, uma landing simples e rápida ganha — e eu digo isso antes de você gastar.
O que entra na entrega
Stack
- Next.js
- TypeScript
- GSAP ScrollTrigger
- Lenis
- React Three Fiber
- three.js
- GLSL
- Tailwind CSS
- Vercel
Perguntas que sempre aparecem
Quanto tempo leva um site cinematográfico?
De duas a quatro semanas para uma página única com uma cena 3D, contando direção de arte. Sites com várias páginas e mais de uma cena passam disso. Boa parte do prazo vai em decisão visual, não em código — quanto mais claro estiver o que a marca é, mais rápido anda.
Funciona no celular?
Funciona, com uma versão pensada para o celular e não apenas encolhida. Scroll com trava e cena 3D pesada engasgam em aparelho mediano, então o mobile recebe menos partículas, sem seção travada e com animação mais curta. É decisão de projeto, não acidente.
Preciso ter identidade visual pronta?
Não. Se você já tem, eu trabalho a partir dela. Se não tem, a direção de arte faz parte do projeto — paleta, tipografia e direção de luz são decididas junto com você antes de qualquer animação.
Dá para aplicar isso num site que já existe?
Dá, e frequentemente é o caminho mais barato. A arquitetura em camadas foi feita para isso: o conteúdo e as rotas continuam, e o movimento entra por cima, camada por camada, sem reescrever o site inteiro.
Me conta o que você quer construir.
Uma conversa de 30 minutos sobre o problema costuma resolver mais do que três trocas de e-mail sobre tecnologia. Se não for pra mim, eu digo na hora.
andre@andrebordignon.dev · Brasília, Brasil