Como ele é
Parece uma palavra derretendo e se transformando em outra, como cera quente ou gotas de tinta que se juntam. A palavra atual vai ficando borrada e transparente enquanto a próxima surge do desfoque no mesmo lugar; um filtro SVG endurece as bordas do borrão, então, no meio da troca, as letras das duas palavras parecem escorrer e se fundir como líquido. Cada transformação leva 1,5 segundo, e a palavra nova fica nítida por meio segundo antes da troca seguinte, num ciclo sem fim. O texto é grande, em negrito e centralizado, e herda a cor da página.
Você pode estar procurando isto se pediu algo assim
- palavra que derrete e vira outra palavra
- texto que se transforma em outro com efeito líquido
- título que troca de palavra como se fosse gosma
- aquele efeito de letras se fundindo entre uma palavra e outra
- mensagens alternando no topo do site com transição fluida
- texto que muda sozinho com efeito de tinta se misturando
Também chamado de
- texto que se transforma
- morph de texto
- efeito gooey
- morphing text
- text morph animation
- gooey text
- liquid text transition
Quando usar
- Hero com uma palavra ou mensagem curta que alterna entre opções
- Tela de abertura ou de carregamento que lista benefícios em sequência
- Lançamentos e campanhas de marcas criativas, de moda ou de design
- Apresentações de produto que alternam nomes de recursos
Quando evitar
- Conteúdo importante para SEO, porque o texto é inserido só no navegador e não vem no HTML do servidor
- Frases longas, que quebram linha e escapam da altura fixa do componente
- Páginas com várias animações em loop, já que o efeito roda sem parar, mesmo fora da tela
Como pedir para a sua IA
Crie um efeito de texto que se transforma entre palavras no hero, com as letras se fundindo como líquido a cada troca, texto real acessível a leitores de tela e buscadores, pausa quando sai da tela e versão estática para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Morphing Text
O Morphing Text funciona com SSR no Nuxt?
Funciona no navegador, mas não gera texto no servidor: o Morphing Text escreve as palavras por JavaScript a cada quadro, então o HTML inicial chega vazio, e a demo usa ClientOnly. Para SEO, mantenha a mensagem principal em texto comum por perto e peça à IA um rótulo acessível com as palavras.
Dá para mudar a velocidade do Morphing Text?
Sim. No Morphing Text, a prop morphTime define em segundos quanto dura cada transformação, 1,5 no padrão, e coolDownTime define quanto tempo a palavra nova fica parada e nítida, 0,5 no padrão. As palavras vêm da lista na prop texts e se repetem em ciclo, sem limite de quantidade.
O Morphing Text pesa no site?
Pouco. O Morphing Text só ajusta desfoque e opacidade de duas camadas de texto e aplica um filtro SVG, sem WebGL, e é classificado como Leve no THM Componentes. O laço de animação, porém, roda o tempo todo, mesmo com o componente fora da tela, então vale pedir à IA que o pause quando ele não estiver visível.
