# Telegrama

Letters appear one by one with a blinking cursor, then disappear to make way for the next word in the list.

> Telegrama is a THM Componentes component that writes text letter by letter, with a blinking cursor at the end, and can cycle through several phrases: it types, waits, deletes and moves to the next one, in a loop. It is lightweight and works well for headlines with rotating terms and simulated chats.

- Category: Text and typography
- Origin: Adapted from open source under the MIT license, with a ready THM prompt
- Load weight: Light: CSS or light JavaScript, no noticeable cost
- Technology: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue
- Interaction: None: the effect runs on its own
- URL: https://vibecode.thmtecnologia.com/en/components/telegrama/

## What it looks like

It is like watching someone type on a typewriter. Letters appear one at a time, every 50 milliseconds by default, and a vertical bar blinks right after the last one. With a list of phrases, each one stays complete on screen for two seconds, is erased from the end, faster than it was typed, and the next one starts after another pause. At the end of the list it returns to the first by default. With a single text, it types once and stops. Because it sits inline with the rest of the sentence, it can swap just the last word of a headline.

## You may be looking for this if you asked for something like

- “text that types itself out with a blinking cursor”
- “a headline where the last word keeps changing with a typing effect”
- “a typewriter effect for the top of my website”
- “fake someone typing a message in a chat on my landing page”
- “a phrase that types, deletes and writes something else”
- “rotating words being typed in the middle of a sentence”

## Also known as

auto-typing text, typewriter effect, typing animation, typing text effect, rotating typed words, blinking cursor text

## When to use

- Headlines with rotating terms, such as audience, benefit or city
- A simulated chat or terminal on a product page
- A sample search box showing what people can look for
- Personal portfolio intros that cycle through a person's roles

## When to avoid

- The main keyword of the page, since the typed text is not in the server HTML
- Information people need to read calmly, since each phrase disappears after a few seconds

## How to ask your AI

```text
Create a typewriter effect in my homepage headline that types, deletes and cycles through three terms at the end of the sentence, with a blinking cursor, an accessible label with the full phrase and a static version showing the first term for reduced motion.
```

With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.

## Questions about Telegrama

### Is Telegrama's text in the HTML that Nuxt renders?

No. Telegrama starts empty and writes the letters only after the page loads in the browser, so the server-rendered HTML does not include the phrases. Keep the fixed part of the headline outside the component and use the effect only for the rotating terms.

### How do I adjust the speed of Telegrama?

Telegrama has separate props for the time between typed letters, 50 milliseconds by default, the time between deleted letters, 30, the pause before deleting, 2 seconds, and a start delay. You can also change the cursor character, hide the cursor while typing and turn off the loop.

### Does Telegrama get in the way of screen readers?

It can. Telegrama changes its content letter by letter and, in the original code, there is no label with the full phrase. Ask your AI for an aria-label with the complete text and to mark the cursor as decorative; the THM Componentes prompt already asks for a static version for reduced motion.

## Related components

- [Sinônimo](https://vibecode.thmtecnologia.com/en/components/sinonimo/): One word in the middle of the headline changes by itself every few seconds, the new one arriving letter by letter.
- [Tecla](https://vibecode.thmtecnologia.com/en/components/tecla/): A word inside a raised box that changes by itself, while the box stretches or shrinks to fit the next one.
- [Tinteiro](https://vibecode.thmtecnologia.com/en/components/tinteiro/): One word melts and turns into the next, with the letters merging like drops of ink.
- [Prosa](https://vibecode.thmtecnologia.com/en/components/prosa/): An assistant reply that shows up bit by bit, word by word, coming out of a soft blur like in an AI chat.
- [Caldeira](https://vibecode.thmtecnologia.com/en/components/caldeira/): A dark terminal window where people type commands, see colored output and watch a demo deploy fill its progress bars.

---
THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).
