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