Como criar sites cinematográficos com IA

Esse projeto nasceu de uma pergunta simples: o que acontece quando você trata um website como se fosse um set de filmagem?

A resposta virou um template de sete seções, construído ao vivo no Instagram, e que agora está no GitHub pra qualquer pessoa clonar, estudar e adaptar. A ideia aqui não é só te dar o código. É te mostrar como ele pensa, pra você conseguir fazer o seu.

Repositório: github.com/rafhacorsini/cinematic-website-template

A filosofia em três princípios

Antes de qualquer linha de código, vale entender as três ideias que sustentam a interface inteira. Tudo no projeto serve a uma delas.

| Princípio | O que significa na prática | |---|---| | Scroll como narrativa | O usuário não rola pra ver mais. Ele rola pra avançar a história. | | Luz como hierarquia | O que importa é iluminado. O resto fica na sombra. | | Tipografia como coreografia | As palavras entram em tempos diferentes, como atores numa cena. |

Cada seção é uma cena. Cada animação serve ao ritmo, nunca ao ego.

Como clonar e rodar

git clone https://github.com/rafhacorsini/cinematic-website-template.git
cd cinematic-website-template
npm install
npm run dev

Abre em http://localhost:3000 e pronto.

Stack: Next.js 15 (App Router), React 19, Framer Motion 11, Tailwind CSS 3, TypeScript 5.

Sobre as fontes: o projeto usa a Neue Haas Grot Display na versão trial. Se você não tiver os arquivos .otf, ele cai pra Helvetica Neue como fallback e o layout aguenta bem. Nada quebra.

O que tem dentro do repositório

O repo vem com três documentos antes de qualquer componente. Eles são o mapa do projeto, e valem mais a leitura do que parece:

README.md é a introdução. Traz a filosofia, a tabela de stack, os comandos pra rodar e a paleta de propósito restrita: preto quase absoluto (#030303), branco sujo (#f0f0f0) e o verde neon que aparece na seleção de texto.

STRUCTURE.md é o mapa de verdade. Uma árvore completa com uma linha por arquivo, mostrando onde fica cada coisa, como as camadas de z-index se empilham e a decisão principal de arquitetura: nenhuma seção sabe da existência da outra. Cada uma cuida do próprio scroll. É isso que torna qualquer seção substituível sem quebrar o resto.

SNIPPETS.md são os trechos que importam. Sete blocos de código comentados cobrindo todas as técnicas. É o arquivo que você mais vai consultar na hora de adaptar.

As sete seções do site

Cada uma tem a própria linguagem de movimento. Em ordem:

| # | Seção | Técnica principal | |---|---|---| | 1 | Hero | Parallax de mouse em 7 camadas + crossfade de backgrounds + rotação de palavras + partículas | | 2 | CinematicReveal | Imagem emergindo da escuridão via scrubbing de scroll | | 3 | MaterialsStudy | Três layouts editoriais com imagens em escala scroll-linked | | 4 | SilhouettePresence | Mosaico com profundidade simulada via blur e brightness por camada | | 5 | ManifestoPhilosophy | Tipografia palavra a palavra sincronizada com scroll (rAF puro, zero Framer Motion) | | 6 | CinematicFooter | Grid arquitetural com scanline animada | | 7 | GlobalAtmosphere | Camada fixa de fundo: grain, grids e luz difusa, tudo bem sutil |

As técnicas que mais valem entender

Você não precisa decorar tudo. Mas se entender estes quatro pontos, consegue reconstruir o sentimento do site em qualquer projeto seu.

A easing que dá identidade ao projeto. A cubic-bezier [0.16, 1, 0.3, 1] aparece em quase tudo. Peso no começo, soltura no final, o oposto do ease-out padrão. É essa curva que faz o movimento parecer filmado em vez de animado.

Parallax de mouse com física de mola. São sete camadas com profundidades diferentes. A mola (useSpring com stiffness: 6, damping: 60, mass: 3) elimina o movimento mecânico, então tudo flutua como se tivesse inércia. As camadas mais distantes recebem amplitude maior, e o texto se move ao contrário do fundo pra reforçar a profundidade.

Scroll-linked com useScroll + useTransform. Sem duration, sem delay. O valor visual é uma função matemática direta da posição do scroll: opacidade, escala, blur e posição Y, tudo amarrado ao scrollY. É o que dá a sensação de câmera em vez de transição.

Tipografia palavra a palavra, a parte mais sofisticada. O componente ManifestoPhilosophy não usa Framer Motion. Ele usa requestAnimationFrame puro pra ler o scrollY e calcular a opacidade de cada palavra individualmente, com easing quartic. O track de scroll tem 500svh de altura, mas o conteúdo fica sticky em 100svh, criando o efeito de câmera lenta sem nenhuma transition de CSS. A função computeWordOpacity divide cada frase em três fases: revela em 20% do segmento, sustenta por 60% e dissolve nos últimos 20%. Cada palavra dentro da frase tem o próprio stagger.

Sistema de partículas estável. São 30 partículas com posição, duração e atraso aleatórios, calculados uma única vez na montagem com useMemo. Sem isso, cada re-render geraria valores novos e a animação reiniciaria do zero.

Quer o atalho? As skills fazem isso por você

Entender a técnica é uma coisa. Reescrever ela do zero em cada projeto é outra, e cansa. Foi por isso que empacotei tudo o que está aqui em skills prontas pro Claude Code: você digita um comando e o efeito sai do jeito certo, com cleanup, easing e responsividade já resolvidos.

Como adaptar pro seu projeto

A arquitetura foi pensada exatamente pra isso. Como cada seção é independente, dá pra mexer numa sem medo de derrubar as outras:

1. Pra trocar uma seção: apague o componente em src/components/sections/, remova o import em src/app/page.tsx e coloque o novo no lugar.
2. Pra mudar a paleta: edite as variáveis CSS em src/app/globals.css. São só três cores.
3. Pra reusar uma animação fora do projeto: copie o bloco correspondente do SNIPPETS.md. Todos são autocontidos.
4. Pra mudar o ritmo geral: ajuste o staggerChildren em src/utils/motion.ts e troque a easing [0.16, 1, 0.3, 1] por uma curva diferente.

Checklist: antes de dizer que ficou bom

O detalhe que separa um site cinematográfico de um template genérico mora nesses itens. Marque conforme conferir cada um:

• ✓Clonou e rodou local? npm install + npm run dev rodando em localhost:3000 sem erro.
• ✓Leu os três docs? README, STRUCTURE e SNIPPETS antes de tocar no código.
• ✓A easing está definida? Usou a cubic-bezier [0.16, 1, 0.3, 1] em vez do ease-out padrão.
• ✓O movimento tem peso? Físca de mola no parallax e durações longas o bastante pra dar inércia.
• ✓O scroll conta história? Valores visuais amarrados ao scrollY, não a transitions de CSS.
• ✓A paleta está restrita? Três cores no máximo, editadas direto no globals.css.
• ✓Nenhuma animação grita? Se você notou o efeito antes do conteúdo, ele está exagerado.

A regra implícita que atravessa tudo

Movimento que o usuário nota é movimento que falhou.

O parallax de mouse tem que parecer que o site sempre foi assim. O scroll-linked tem que parecer que o conteúdo tem peso de verdade. A poeira do fundo tem que ser encontrada, nunca notada.

Se você olha pra uma animação e pensa "que animação legal", ela está errada. Animação cinematográfica não é decoração. É hierarquia visual aplicada ao tempo.

Próximo passo

Clona, roda, mexe. O projeto inteiro são 7 seções e uns 10 arquivos que importam. Numa tarde você entende tudo.

E se construir algo em cima, marca o @rafha.gpt. Quero muito ver o que você vai fazer.