# Telegrama As letras aparecem uma a uma com um cursor piscando, somem e dão lugar à próxima palavra da lista. > Telegrama é um componente do THM Componentes que escreve um texto letra por letra, com um cursor piscando no fim, e pode alternar entre várias frases: digita, espera, apaga e passa para a próxima, em loop. É leve e funciona bem em títulos com termos que se revezam e em chats simulados. - 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, Motion for Vue - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/telegrama/ ## 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ó, o componente 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 animação de digitação, 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 ```text 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 Telegrama ### O texto de Telegrama vem no HTML gerado pelo Nuxt? Não. Telegrama começa sem texto 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 de Telegrama? Telegrama 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. ### Telegrama atrapalha leitores de tela? Pode atrapalhar. Telegrama 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. ## Componentes relacionados - [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. - [Tinteiro](https://vibecode.thmtecnologia.com/componentes/tinteiro/): Uma palavra derrete e se transforma na próxima, com as letras se fundindo como gotas de tinta. - [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. - [Caldeira](https://vibecode.thmtecnologia.com/componentes/caldeira/): Janela de terminal escura em que a pessoa digita comandos, vê respostas coloridas e acompanha um deploy de demonstração. --- 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.