Toda vez que alguém vê um site meu pela primeira vez, a pergunta é sempre a mesma: "como você fez isso?"
A resposta honesta é que uso três animações. Só três. Que remixo e combino de formas diferentes dependendo do projeto.
Não são efeitos complexos. São efeitos com intenção — cada um resolve um problema específico de linguagem visual.
Abaixo você encontra o preview ao vivo de cada um, o prompt exato que uso e o código completo para copiar.
01 — 3D Infinite Gallery
A galeria que dá profundidade de cinema para qualquer página. Fotos avançando no eixo Z com blur direcional e título sobreposto com mix-blend-mode: difference. Esse detalhe é o que cria o efeito de inversão de cor que parece saído de um editorial de moda.
O scroll controla a velocidade. Para por 3 segundos após interação e retoma sozinho.
A profundidade Z cria a sensação de que o site tem volume. Quando o título inverte as cores das fotos embaixo, parece que ele existe num espaço diferente da galeria. Dissonância cognitiva usada a favor do design.
02 — Mouse Reveal Effect
Fundo escuro com texto na frente. Imagem escondida atrás. O cursor funciona como uma lanterna revelando a imagem com um radial-gradient de falloff longo e suave — 480px de raio, quase invisível nas bordas.
Zero dependências. CSS puro mais 15 linhas de JavaScript.
Cria curiosidade imediata. O usuário move o mouse compulsivamente porque quer ver o que está escondido. É o mesmo princípio de um menu escondido atrás de uma cortina: a revelação parcial é mais poderosa que a revelação total.
Quer saber cobrar R$10.000 por uma página?
No grupo você tem acesso a tudo que precisa para construir sites cinematográficos do zero e vender como serviço premium. Não é curso. É o material completo mais a comunidade de quem já está fazendo.
- ✓Todas as animações com código completo — Three.js, GSAP, CSS puro
- ✓Skills prontas para colar no Claude Code e gerar qualquer efeito em segundos
- ✓Templates cinematográficos completos para clonar e entregar
- ✓Prompts de venda para fechar projetos de R$5k a R$20k
- ✓Comunidade ativa para network, feedback e parcerias
03 — Text Reveal by Word
Palavras que ganham vida com o scroll. Cada palavra tem dois layers: um ghost com opacity: 0.15 mostrando o que vai vir e um reveal que passa de 0 para 1 à medida que você rola.
GSAP ScrollTrigger com scrub: 1 cria o vínculo perfeito entre scroll e animação. O texto inteiro fica position: sticky — a página rola, o texto fica parado enquanto as palavras se iluminam.
Transforma leitura em performance. O leitor não lê um parágrafo, ele assiste as palavras chegando. Isso desacelera o consumo de conteúdo de forma intencional, dando peso a cada palavra.
Como uso os três juntos
A maioria dos meus projetos combina a galeria 3D no hero para impacto imediato desde o primeiro frame, o text reveal nas seções de conteúdo para criar ritmo e peso narrativo e o mouse reveal em seções de portfolio ou before/after para interatividade sem ruído.
Cada um tem uma função. Nenhum existe por vaidade.
O prompt acima é o ponto de partida. O trabalho real é saber onde colocar cada animação e por quê. Isso é o que separa um site com efeitos de um site cinematográfico.