O que é e como aplicar efeito texto Peter Pan em projetos web
O efeito conhecido como texto peter pan é basicamente uma técnica de CSS que faz elementos de texto flutuar suavemente para cima e para baixo, imitando o movimento de Peter Pan voando. Não é nada de outro mundo — é um simples keyframe animation com transform translateY, mas a forma como você aplica faz toda a diferença entre um resultado que parece profissional e um que quebra o layout. Aqui está o código base. Comecei escrevendo assim, sem complicar:
@keyframes peterPanFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
} p.peter-pan {
animation: peterPanFloat 3s ease-in-out infinite;
display: inline-block;
}
Isso resolve o básico. O problema é que na prática, a maioria das pessoas aplica isso em elementos block normais e o texto quebra em várias linhas durante a animação, o que cria um visual quebrado. O segredo é display: inline-block no elemento animado. Sem isso, o translateY não se comporta como esperado porque o elemento ocupa largura total e qualquer variação de posição visual afeta todo o fluxo ao redor.
texto peter pan com performace decente
Um detalhe que pouca gente menciona: use will-change: transform antes da animação começar, mas remova-o assim que a animação terminar ou quando o elemento sair do viewport. Deixa eu ser específico aqui porque já perdi duas horas debugando esse problema no passado. No ano passado, estava trabalhando em um projeto de landing page onde aplicamos texto peter pan em cerca de 8 títulos heroicos. O site carregava rápido, mas ao fazer scroll na versão mobile, a performance despencava para algo em torno de 12 fps. O problema era que o will-change estava aplicado globalmente a todos os elementos com a classe peter-pan, e o navegador estava alocando camadas de composição para cada um deles sem necessidade. A solução foi remover o will-change dos elementos que não estavam visíveis e adicionar uma classe .animating apenas quando entravam no viewport via Intersection Observer.
Resultado: FPS subiu para 58-60 no mobile e a animação ficou fluida. O custo extra foi cerca de 15 minutos de implementação adicional, mas compensou muito. Outro ponto importante que não aparece nos tutoriais genéricos: a duração. 3 segundos é o padrão recomendado, mas para textos menores (menores que 24px), use no máximo 2.5s. Textos grandes (acima de 40px) podem aguentar 3.5s ou até 4s sem causar desconforto visual. Animações muito longas em textos pequenos geram uma sensação de lentidão que distrai o leitor.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Pegadinhas comuns e como evitar
Vou listar problemas reais que encontrei e as soluções que funcionaram: Problema 1: O texto pisca ao carregar a página antes da animação começar. Isso acontece porque o navegador precisa calcular o primeiro frame. Solução: adicione a propriedade animation-delay: 0.01s ou aplique uma classe .loaded no body após o DOM estar pronto.
Problema 2: Layout shift quando o texto começa a flutuar. O elemento pode empurrar conteúdo adjacente se o container não tiver altura suficiente. Solução: adicione padding-bottom no container igual à amplitude da animação (no exemplo acima, 12px). Ou melhor ainda, envolva o texto em um wrapper com position relative e defina uma altura fixa que acomode o movimento. Problema 3: Acessibilidade. Usuários que preferem movimento reduzido vão sentir tontura. Sempre respeite a media query @media (prefers-reduced-motion: reduce) e desative a animação nesses casos. Isso é obrigatório, não opcional.
Quando NÃO usar texto peter pan
Seu texto é parte de um parágrafo longo? Não use. A animação contínua torna a leitura cansativa após alguns segundos. Use apenas em elementos que são essencialmente decorativos ou títulos de seção que o usuário vai ler rapidamente e depois passar adiante. Se o projeto precisa rodar em devices muito antigos (iPhone 6, por exemplo), evite. A animação com transformações CSS consome recursos significativos nesses aparelhos. Nesse caso, considere uma versão estática ou um efeito mais simples com opacity only.
Também evite em modo escuro com textos muito claros e brilhantes. O efeito de flutuação combinado com alto contraste pode criar uma vibração visual desagradável que piora com o tempo de exposição.
Alternativa mais leve
Se o efeito completo não cabe no seu projeto, existe uma versão simplificada que usa apenas uma transição de opacidade combinada com um leve deslocamento de 4px. Fica menos óbvio mas economiza processamento e funciona em quase qualquer dispositivo. O código é muito mais simples e a lista de problemas listada acima praticamente desaparece.
