# Ditado As palavras saem do desfoque e aparecem uma depois da outra, como se o texto estivesse sendo gerado na hora. > Ditado é um componente do THM Componentes que revela um texto palavra por palavra: cada uma começa transparente e desfocada e ganha nitidez em sequência, logo depois que a página carrega. É leve, sem dependências, e funciona bem em respostas simuladas de IA, manifestos, citações e frases de abertura. - 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/ditado/ ## Como ele é Parece uma frase revelada aos poucos por trás de um vidro embaçado que vai secando. Todas as palavras já ocupam o lugar delas desde o início, mas invisíveis e borradas, então o layout não pula. Assim que o componente é montado na página, a primeira palavra fica nítida, e as seguintes acompanham com um intervalo de 0,2 segundo entre uma e outra; cada transição dura 0,7 segundo por padrão. Um atraso inicial permite encadear blocos, como uma frase que só começa depois da anterior. O desfoque pode ser desligado, deixando só o surgimento suave. Fonte, cor e tamanho vêm do seu texto. ## Você pode estar procurando isto se pediu algo assim - “texto que vai aparecendo palavra por palavra igual resposta do ChatGPT” - “frase que surge do borrado e vai ficando nítida aos poucos” - “animação de palavras aparecendo uma por uma na abertura do site” - “mostrar a resposta da minha IA aparecendo com efeito suave” - “citação ou manifesto que se revela devagar quando a página abre” - “texto com fade in palavra a palavra sem usar biblioteca” ## Também chamado de palavras saindo do desfoque, texto gerado, word by word fade in, blur in text, palavra por palavra, efeito de texto de IA, fade in escalonado ## Quando usar - Respostas simuladas de IA em landing pages de produtos com IA - Manifesto, missão ou citação em destaque logo no topo da página - Frases de abertura de apresentações, onboarding e telas de boas-vindas - Blocos encadeados, em que um parágrafo começa depois do outro ## Quando evitar - Seções longe do topo, porque a animação roda ao montar e pode terminar antes de a pessoa chegar - Respostas de IA em streaming de verdade, já que o componente anima um texto fixo, definido de uma vez ## Como pedir para a sua IA ```text Crie um efeito de texto em que as palavras saem do desfoque uma a uma na frase de abertura da página, disparado quando o bloco entra na tela, com versão estática para movimento reduzido e sem mudar o layout durante a animação. ``` 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 Ditado ### Ditado começa quando a pessoa rola até o texto? Não. A animação de Ditado começa assim que o componente é montado na página, depois do atraso que você definir. Se o texto ficar mais abaixo, peça à IA para disparar o efeito quando o bloco entrar na tela, com IntersectionObserver, para a pessoa ver as palavras surgindo. ### O texto de Ditado fica no HTML da página? Fica. Ditado escreve todas as palavras no HTML desde o início e só as deixa transparentes até a animação rodar, então o conteúdo existe para leitores de tela e para quem copia o texto. O prompt do THM Componentes pede à IA uma versão estática para movimento reduzido. ### Dá para usar Ditado com respostas de IA em streaming? Não do jeito que vem. Ditado recebe uma frase pronta e anima as palavras uma única vez, ao montar. Para respostas que chegam aos poucos, o THM Componentes tem Prosa, componente feito para tokens em streaming com cursor e markdown. ## Componentes relacionados - [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. - [Prosa](https://vibecode.thmtecnologia.com/componentes/prosa/): A resposta do assistente aparece aos poucos, palavra por palavra, saindo de um leve desfoque, como num chat de IA. - [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. - [Entrelinha](https://vibecode.thmtecnologia.com/componentes/entrelinha/): Cada linha do parágrafo sobe de trás de uma borda invisível e aparece em sequência, com parada suave. - [Levante](https://vibecode.thmtecnologia.com/componentes/levante/): Título que entra na página com cada letra subindo de baixo, uma depois da outra, como uma onda. --- 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.