# Tinteiro Uma palavra derrete e se transforma na próxima, com as letras se fundindo como gotas de tinta. > Tinteiro é um componente do THM Componentes que alterna uma lista de palavras transformando uma na outra: a atual se desfaz no desfoque enquanto a próxima surge, e um filtro SVG faz as letras parecerem se fundir como líquido. É leve, sem WebGL, e funciona bem em heros e telas de abertura com mensagens curtas que se revezam. - Categoria: Texto e tipografia - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/tinteiro/ ## 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, palavra que derrete, text morph animation, letras que se fundem, 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 ```text 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 Tinteiro ### Tinteiro funciona com SSR no Nuxt? Funciona no navegador, mas não gera texto no servidor: Tinteiro 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 de Tinteiro? Sim. Em Tinteiro, 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. ### Tinteiro pesa no site? Pouco. Tinteiro só ajusta desfoque e opacidade de duas camadas de texto e aplica um filtro SVG, sem WebGL, e tem peso 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. ## Componentes relacionados - [Parafina](https://vibecode.thmtecnologia.com/componentes/parafina/): Palavras que se revezam no título, derretendo uma na outra como gotas que se juntam antes de ficarem nítidas. - [Sinônimo](https://vibecode.thmtecnologia.com/componentes/sinonimo/): Uma palavra no meio do título troca sozinha a cada poucos segundos, com a nova entrando letra por letra. - [Tecla](https://vibecode.thmtecnologia.com/componentes/tecla/): Uma palavra dentro de uma caixa em relevo que troca sozinha, e a caixa estica ou encolhe para caber a nova. - [Florada](https://vibecode.thmtecnologia.com/componentes/florada/): Títulos e parágrafos que aparecem um depois do outro, saindo de um borrão e subindo de leve até ficarem nítidos. - [Telegrama](https://vibecode.thmtecnologia.com/componentes/telegrama/): As letras aparecem uma a uma com um cursor piscando, somem e dão lugar à próxima palavra da lista. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.