Como adicionar transições de página fluidas a um site Next.js

Este artigo faz parte da série "Redesign de site com IA". Episódio anterior: Criar uma landing page com IA.

Porquê animações?

Um site não é apenas informação. É uma experiência. E as transições entre páginas são o momento em que a maioria dos sites quebra essa experiência. Um flash branco, um recarregamento brusco, e o utilizador perde o fio.

Queria que navegar no asuos.ch fosse fluido, quase táctil. Como folhear uma revista em vez de clicar em links.

A transição "Falling Paper"

A ideia

Quando se sai de uma página, ela não desaparece. Ela cai. Como uma folha de papel que desliza da mesa. Enquanto cai, a nova página já está visível por baixo, pronta a ser lida.

A implementação

O Claude Code criou um componente PageTransition.tsx (mais de 150 linhas) que captura a página atual no momento do clique de navegação, anima a saída com uma rotação 3D e uma translação vertical, adiciona um efeito de borda rasgada através de um SVG gerado dinamicamente que simula o bordo irregular de uma folha de papel arrancada, e gere o timing preciso entre o desaparecimento da página antiga e o aparecimento da nova.

O resultado é uma transição que dura cerca de 400ms. Suficientemente longa para ser percecionada, suficientemente curta para não prejudicar a navegação.

O CSS por trás

Mais de 170 linhas de CSS adicionadas em tailwind.css para as animações: keyframes, transforms 3D, timing functions cúbicas. O tipo de CSS que se escreve uma vez e nunca mais se toca. Perfeito para delegar à IA.

O efeito Ripple na mudança de tema

A ideia

Quando se alterna entre o tema claro e o tema escuro, um círculo propaga-se a partir do botão, como uma onda na água. Mas com uma subtileza: a direção depende do tema.

Para o tema claro (sol), a onda parte do botão e irradia para o exterior, como o sol que ilumina. Para o tema escuro (lua), a onda parte do exterior e converge para o botão, como a noite que cai.

A implementação

O Claude Code modificou o componente ThemeSwitch.tsx para adicionar um overlay em ecrã inteiro com uma animação de clip-path circular. O círculo expande-se (ou reduz-se) com uma curva de aceleração natural.

A parte técnica mais delicada: evitar as race conditions entre a mudança de tema CSS e a animação de transição. Se o tema muda antes de a animação começar, o efeito fica arruinado. O Claude Code resolveu isto com um sistema de timing preciso e callbacks sequenciais.

O scroll infinito animado

Nas páginas de listagem, as páginas de blog e de tags carregam agora os artigos progressivamente. Um IntersectionObserver deteta quando o utilizador se aproxima do fundo da lista e aciona o carregamento do lote seguinte. Cada novo artigo aparece com um ligeiro atraso em cascata: o primeiro aparece, depois o segundo 50ms depois, depois o terceiro, e assim sucessivamente. Isto cria um efeito de "cascata" muito natural. Sem botão "Carregar mais", é automático e transparente.

Os botões scroll-to-top e scroll-to-comments também foram revistos com animações suaves e um comportamento inteligente: só aparecem quando é pertinente e desaparecem em fade quando já não são necessários.

O hardening: acessibilidade e robustez

Após a implementação inicial, foi feita uma passagem completa de hardening. É a parte menos glamorosa, mas a mais importante.

Acessibilidade

O suporte de prefers-reduced-motion foi adicionado: se o utilizador ativou esta definição no seu SO, todas as animações são desativadas. Não reduzidas, desativadas. Porque para algumas pessoas, as animações não são uma questão de gosto mas de conforto visual.

Race conditions

O que acontece se clicarmos num link durante uma transição de página? Se mudarmos o tema durante uma navegação? Se fizermos scroll durante um carregamento? Cada um destes cenários foi identificado e tratado com guardas e cancelamentos adequados.

Fugas de memória

Todos os listeners de eventos (IntersectionObserver, scroll, transitionend) são devidamente limpos quando os componentes se desmontam. Sem zombies em memória.

A IA e a criatividade

Este é o episódio desta série que mais apreciei, e ilustra bem a dinâmica humano/IA.

A ideia da página que cai como uma folha de papel? Surgiu de uma conversa, de um impulso criativo. A implementação, o CSS, os keyframes, os transforms 3D, o SVG da borda rasgada, a gestão do timing? É o Claude Code. A iteração, "está demasiado lento", "a borda não é suficientemente irregular", "inverte a direção para o tema escuro"? Sou eu que guio, o Claude Code que executa.

Não se poderia ter um sem o outro. A IA sozinha nunca teria tido a ideia da folha que cai. E eu sozinho, teria passado dois dias a implementar estas animações em vez de duas horas.

Amanhã, passamos ao lado menos visível mas igualmente crucial: o SEO. Dados estruturados, sitemap multilingue, feed RSS, robots.txt. Uma auditoria completa que revelou surpresas. E não das boas.