Como ele é
Lembra a cera de uma luminária de lava. Uma palavra grande e grossa, em azul-marinho, fica parada por pouco mais de um segundo e meio. Então ela começa a desfocar e sumir enquanto a próxima surge do mesmo borrão, e no meio da troca as letras parecem uma massa líquida, com pontas que se esticam e se juntam. Em cerca de um segundo, a nova palavra assenta com bordas firmes. Acima, uma linha menor e mais clara completa a frase e não se mexe. O ciclo se repete sozinho e pausa quando sai da tela.
Você pode estar procurando isto se pediu algo assim
- palavra que troca no meio da frase derretendo uma na outra
- texto que muda de palavra com efeito líquido, tipo gota
- título com várias palavras se alternando de um jeito fluido
- efeito de letras derretendo para mostrar os serviços da empresa
- topo do site com a frase que vai trocando o final sozinha
- aquele texto meio gosmento que se transforma em outra palavra
- palavras que se misturam como lava antes de aparecer
Também chamado de
- palavra rotativa com fusão
- texto líquido
- efeito gooey
- metaball text
- rotating words
- texto que derrete
- liquid text effect
Quando usar
- Hero com proposta de valor que troca de palavra, como serviços ou benefícios
- Chamada de agência ou consultoria que lista áreas de atuação
- Abertura de landing page com título curto e palavra final rotativa
- Marcas criativas que querem movimento orgânico sem pesar a página
Quando evitar
- Palavras longas ou frases inteiras, que ficam confusas durante a fusão
- Informações que a pessoa precisa ler com calma, como preço ou prazo
- Seções que já têm outro texto animado por perto, o que dispersa a atenção
Como pedir para a sua IA
Crie no hero um título com efeito gooey: palavras que se alternam e se fundem como líquido com filtro SVG, nítidas em repouso, com troca instantânea para quem prefere menos movimento, pausa fora da tela e a palavra atual anunciada para leitores de tela.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Parafina
Parafina pesa no site?
Pouco. Parafina usa duas camadas de texto e um filtro SVG, sem canvas nem WebGL, e tem peso Leve no THM Componentes. A animação pausa quando o título sai da tela e retoma sem pular etapas quando a pessoa volta para a aba. Em celulares mais simples, vale testar com fonte menor e fusão mais fraca.
Como Parafina se comporta com movimento reduzido?
Quando o sistema pede menos movimento, Parafina continua trocando as palavras no mesmo intervalo, mas a troca acontece de uma vez, sem desfoque nem fusão líquida. A mensagem rotativa se mantém, e o derretimento sai de cena para quem é sensível a animação.
Dá para trocar as palavras e as cores de Parafina?
Sim. Parafina recebe a lista de palavras, a linha menor de cima, a cor do texto, o tamanho da fonte, o tempo de pausa em cada palavra, a duração da transformação e a força da fusão líquida. O prompt orienta a IA a usar os tokens de cor do seu projeto.
