2026 · Produto e engenharia
Cinematic Engine
Cinematic Engine é o template que eu uso para produzir sites cinematográficos sob medida em dias em vez de semanas, com o núcleo de animação e 3D separado do que muda a cada cliente.
Stack
- Next.js
- GSAP
- Lenis
- React Three Fiber
- Tailwind
O problema
Site cinematográfico dá muito trabalho e quase nada desse trabalho é reaproveitável quando cada projeto é escrito do zero. Ao mesmo tempo, transformar tudo num tema configurável costuma matar exatamente o que fazia o site ser especial. Eu precisava de uma linha que separasse o que é estável do que é autoral.
A abordagem
Separação estrita entre engine e skin, com a engine sem nenhum import da pasta de configuração. Três sistemas de personalização: tema por CSS variables, em que trocar um arquivo de marca reskina o site inteiro incluindo a luz da cena WebGL; registry declarativo de seções, em que a página é uma lista de tipo mais variante mais ordem; e uma biblioteca de heróis 3D plugáveis.
O que aconteceu
O primeiro cliente saiu do template, e a experiência já produziu o aprendizado mais valioso: um fork antigo não recebe as cenas novas, e uma variante inexistente falhava silenciosamente em vez de gritar. A engine ganhou tolerância a isso, e cada fork de cliente passou a ser versionado antes de qualquer sincronização.
Fatos do projeto
Engine sem nenhum import da configuração — a fronteira é verificável
Tema por CSS variables: um arquivo reskina site e cena 3D juntos
Página montada a partir de um registry declarativo de seções
Heróis 3D plugáveis: monólito, partículas e produto
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