Como ele é
É como ver alguém digitando numa máquina de escrever. As letras surgem uma por vez, a cada 50 milissegundos por padrão, e um traço vertical pisca depois da última. Com uma lista de frases, cada uma fica completa na tela por dois segundos, é apagada de trás para frente, mais rápido do que foi escrita, e a próxima começa após outra pausa. No fim da lista, volta à primeira por padrão. Com um texto só, ele digita uma vez e para. Por ficar em linha com o resto da frase, serve para trocar só a palavra final de um título.
Você pode estar procurando isto se pediu algo assim
- texto que vai se escrevendo sozinho com o cursor piscando
- título onde a última palavra fica trocando com efeito de digitação
- efeito máquina de escrever para o topo do site
- simular alguém digitando uma mensagem no chat da landing page
- frase que digita, apaga e escreve outra coisa no lugar
- palavras rotativas sendo digitadas no meio da frase
Também chamado de
- typewriter text
- efeito máquina de escrever
- typing animation
- texto digitando
- typewriter effect
- rotating typed words
- cursor piscando
Quando usar
- Título com termos que se revezam, como público, benefício ou cidade
- Simulação de chat ou de terminal em página de produto
- Campo de busca de exemplo mostrando o que dá para pesquisar
- Apresentação pessoal em portfólio, alternando as profissões da pessoa
Quando evitar
- A palavra-chave principal da página, porque o texto digitado não vem no HTML do servidor
- Informação que a pessoa precisa ler com calma, já que cada frase some depois de alguns segundos
Como pedir para a sua IA
Crie um efeito de máquina de escrever no título da página inicial que digite, apague e alterne entre três termos no fim da frase, com cursor piscando, rótulo acessível com a frase completa e versão estática que mostre o primeiro termo 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 Typewriter Text
O texto do Typewriter Text vem no HTML gerado pelo Nuxt?
Não. O Typewriter Text começa vazio e escreve as letras só depois que a página carrega no navegador, então o HTML gerado no servidor não traz as frases. Deixe a parte fixa do título fora do componente e use o efeito só nos termos que se revezam.
Como ajustar a velocidade do Typewriter Text?
O Typewriter Text tem props separadas para o tempo entre letras digitadas, 50 milissegundos por padrão, o tempo entre letras apagadas, 30, a pausa antes de apagar, de 2 segundos, e um atraso inicial. Também dá para trocar o caractere do cursor, ocultar o cursor durante a digitação e desligar o loop.
O Typewriter Text atrapalha leitores de tela?
Pode atrapalhar. O Typewriter Text troca o conteúdo letra por letra e, no código original, não há um rótulo com a frase completa. Vale pedir à IA um aria-label com o texto inteiro e marcar o cursor como decorativo; o prompt do THM Componentes já pede uma versão estática para movimento reduzido.
