Anatomia de um
Site Cinematográfico.

Vamos construir este artigo como construímos um site. Cada conceito que explicar, vais senti-lo em tempo real à medida que lês. Quando eu falar de tipografia, a tipografia muda à tua frente. Quando mencionar scroll-driven animations, o scroll que acabaste de fazer gerou uma. Quando chegarmos ao before-and-after, podes arrastar o slider e ver.

Não é truque. É prova. A maior parte dos artigos sobre design explicam conceitos com screenshots mortos e palavras que sobem ao ar sem pousarem em lado nenhum. Este não vai ser assim. Se a Autonoma entrega sites cinematográficos, então o mínimo que este artigo pode fazer é ser um.

01 · O Primeiro FoldTens 3 segundos.

É o tempo médio que um visitante dá a um site antes de decidir se fica ou sai. Três segundos. Menos que o tempo que demoraste a ler este parágrafo.

Nos primeiros 3 segundos, o visitante não lê — ele sente. Sente se o site parece caro ou barato, se parece sério ou amador, se parece de agora ou de 2015. Esse julgamento é visual, emocional, pré-racional. E é impossível de reverter depois de formado.

O primeiro fold — a parte do site visível sem fazer scroll — tem uma função só: convencer o visitante a ficar mais dez segundos.

Princípios do primeiro fold cinematográfico

• Respirar. Espaço negativo generoso. O luxo não se vê nos elementos; vê-se no espaço entre eles.
• Um único ponto de foco. O olho precisa de saber onde pousar. Se o hero tem cinco coisas a competir, não tem nenhuma.
• Movimento lento. Zoom-in de 20 segundos, luz que muda suavemente, partículas a cair. Movimento rápido = ansiedade. Movimento lento = confiança.
• Tipografia em carne viva. Serif grande, sans-serif subtil. Nunca ambos a gritar.

02 · TipografiaUma escolha emocional.

A tipografia não é uma escolha técnica. Cada tipografia carrega uma promessa implícita — antes do leitor ler sequer uma palavra. Prova tu próprio: clica nas opções abaixo e vê o mesmo texto transformar-se.

Cada uma comunica algo antes da leitura:

• Serif grande = estabelecido, autoridade, legado
• Sans-serif fino = moderno, tech, minimal
• Display editorial = intelectual, confiante, literário
• Mono tech = código, precisão, startup

Num site cinematográfico raramente usamos uma só. Usamos duas — uma para headlines, uma para corpo — e escolhemos com rigor:

• Contraste, não duplicação. Serif com sans-serif. Nunca duas serifs parecidas.
• Escala musical. Tamanhos relacionados por ratios (1.5×, 1.618×, 2×), não números aleatórios.
• Peso hierárquico. Bold só para o que realmente importa.

Olha para os headings deste artigo. Cormorant Garamond (serif clássico, 700 weight) para os títulos; Inter (sans-serif moderno, 400 weight) para o corpo. A tensão entre os dois é deliberada. Cria hierarquia sem precisar de cor.

03 · Cor e LuzTrês cores. Nunca mais.

Cor é o segundo diferenciador visual mais poderoso (o primeiro é tipografia). Mas cor mal usada destrói um site em segundos.

Passa o rato (ou toca) nas amostras abaixo. O próprio cartão responde à paleta escolhida.

Regras para paletas premium

1. Não usar mais de 3 cores — uma primária, uma neutra, um accent. Excepções são raras e deliberadas.
2. Neutro não é branco — é creme. Off-white. Pedra. #FAFAFA em vez de #FFFFFF muda a percepção toda.
3. Luz precisa de sombra. Se o site é todo claro, parece flat. Se é todo escuro, parece pesado. Premium é sempre claro com profundidade — sombras subtis, gradientes direccionais.
4. Ouro resolve 80% dos casos. Gradientes dourados sobre navy ou creme funcionam em quase qualquer setor. É cliché, mas é cliché por uma razão.

04 · Movimento e ScrollO scroll é uma timeline.

Aqui está o coração do cinema na web: scroll-driven storytelling. Um site cinematográfico não trata o scroll como navegação. Trata-o como timeline de um filme. Cada scroll é um frame novo, uma revelação progressiva.

Já estás a senti-lo. Cada parágrafo deste artigo entra em blur, focou-se quando apareceu no teu campo de visão. Rola um pouco para cima e para baixo para veres.

Técnicas essenciais

• Blur-to-sharp reveals. Texto entra blurred, foca-se quando visível. Usámos isto em todo este artigo.
• Parallax subtil. Background move mais devagar que o foreground. Cria profundidade sem exagero.
• Sticky storytelling. Imagem fica sticky enquanto o texto ao lado muda por secções.
• Scroll progress indicator. Traço fino no topo (olha para cima — está ali). Dá ao leitor noção de onde está.

A ferramenta: GSAP + ScrollTrigger. É o padrão de facto da indústria premium — Awwwards, FWA, SOTD. Nada mais chega perto em flexibilidade e performance.

05 · Before / AfterArrasta e vê.

A transformação não é "adicionar efeitos". É subtrair ruído. É o que separa um site que o cliente orgulhosamente partilha de um site que o cliente esconde. Arrasta o slider abaixo — é o próprio site da Autonoma, antes e depois.

Antes

Depois

Antes: template escuro, dense, sem respiração. Serif genérico. CTA perdido. Hero plano.

Depois: espaço, hierarquia, vídeo cinematográfico, tipografia deliberada, movimento que respeita o leitor.

06 · Micro-interaçõesO detalhe premium.

Micro-interações são o acabamento de couro no carro caro. Invisíveis até notares. Memoráveis depois de notares.

Passa o cursor sobre o botão abaixo. Notas? Ele puxa o cursor ligeiramente — um efeito chamado magnetic cursor. É subtil, mas os clientes comentam.

Outras micro-interações que vale a pena investir

• Text scramble — letras que se descodificam ao aparecer. Digital, intrigante, memorable.
• Cursor reveal — conteúdo extra aparece só onde o cursor está. Respeita espaço, recompensa exploração.
• Hover reveal — informação adicional emerge em hover. Reduz clutter visual.
• Particle burst — partículas que explodem num clique importante. Celebra a acção.

Cada uma é pequena, quase nenhuma é obrigatória. O efeito cumulativo é o que conta: este site foi construído com cuidado.

07 · Performance vs. BelezaA tensão real.

Aqui chega o conflito que toda a gente evita mencionar.

Tudo o que descrevi — vídeo hero, GSAP animations, scroll effects — custa em performance. A Google penaliza sites lentos. Os utilizadores abandonam.

O truque do site cinematográfico bem feito não é evitar o premium. É entregar premium sem sacrificar performance:

• Vídeos MP4 em H.264 com bitrate optimizado. 6–8 MB, não 30.
• GSAP são apenas 27KB. Mais leve que a maior parte dos frameworks de animação.
• preload="metadata" em vídeos. loading="lazy" em imagens below-the-fold.
• CSS content-visibility para secções fora do ecrã.
• Fonts com font-display: swap.

Resultado: Lighthouse 90+ mesmo com experiência cinematográfica. Dá trabalho. É exactamente por isso que vale.

08 · O Que Tudo Isto CustaSem rodeios.

Um site cinematográfico feito por uma agência tradicional: €8.000 a €25.000, 3 a 6 meses.

Um site cinematográfico feito por freelancer sozinho com AI: €800 a €2.500, 4 a 8 semanas, qualidade muito inconsistente.

Um site cinematográfico feito por uma agência boutique com AI + curadoria humana — como nós — fica entre os dois, com consistência e velocidade que nenhum dos outros consegue.

Vou parar aqui com a auto-promoção. Se queres saber números precisos e se faz sentido para o teu projecto, fala connosco abaixo.