What it looks like
Think of the changing part of a sign: the sentence stays put and only one word in the middle of it changes. By default the current word stays on screen for three seconds, then grows to twice its size, blurs and fades out in 0.6 seconds. The next word comes in letter by letter, each letter rising slightly out of a blur, 50 milliseconds apart. After the last word, the list starts over. The default color is a near-black gray in light mode and near-white in dark mode, and a class can switch it to a highlight color, as the demo does with the theme primary color.
You may be looking for this if you asked for something like
- a word that keeps changing in the middle of the headline
- a headline that cycles through different words by itself
- rotating text in the hero to show all my services
- that effect where one word fades out and another takes its place
- change the audience in my opening line without adding more lines
- a sentence where the profession keeps switching: doctors, lawyers, dentists
- animated changing words for a landing page tagline
Also known as
- word swap headline
- rotating text
- rotating words
- word rotator
- changing words animation
- word carousel
When to use
- A hero that speaks to several audiences, such as doctors, lawyers and dentists
- An opening line that lists services or benefits without adding lines
- Landing pages for agencies and consultancies with several specialties
- Product sections that need to show several use cases in little space
When to avoid
- Information people must read in full, since each word stays only a few seconds
- Long lists, where people will not wait for the full cycle
- Centered lines, where words of different lengths shift the rest of the sentence on every change
How to ask your AI
Create a rotating words effect in the hero headline: one word in the middle of the sentence cycles through the audiences I serve, with the next word coming in letter by letter, my brand highlight color, a static version for reduced motion and a stable width on mobile.
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 Sinônimo
How do I change the words and timing in Sinônimo?
In Sinônimo, the words come from a list in the words prop, as many as you need, and the duration prop sets how many milliseconds each one stays on screen, 3000 by default. Each swap takes another 0.6 seconds. The component also emits events when a word finishes entering and leaving, handy for syncing other elements.
Do the words in Sinônimo show up in the HTML for SEO?
With Nuxt server rendering, Sinônimo delivers only the first word of the list in the HTML; the others are swapped in by the browser later. Keep your main message in the fixed part of the sentence and treat the rotating words as a complement, not as the only mention of your service.
Does Sinônimo respect reduced motion settings?
The original component always animates. The THM Componentes prompt asks your AI for a static version for people who turn on reduced motion in their system settings, which with Sinônimo can be as simple as showing a single word, or the full list, with no transition.
