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
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.
