What it looks like
It looks like a word melting and reshaping into another, like hot wax or drops of ink joining together. The current word grows blurry and transparent while the next one emerges from the blur in the same spot; an SVG filter hardens the edges of the blur, so halfway through the change the letters of both words seem to drip and fuse like liquid. Each transformation takes 1.5 seconds, and the new word stays sharp for half a second before the next change, in an endless loop. The text is large, bold and centered, and inherits the page color.
You may be looking for this if you asked for something like
- a word that melts and turns into another word
- text that transforms into different text with a liquid effect
- a headline that switches words like it is made of goo
- that effect where the letters blend from one word into the next
- rotating messages at the top of the site with a fluid transition
- text that changes on its own like ink mixing
Also known as
- melting words effect
- text morph animation
- fusing letters animation
- liquid text transition
- word morph effect
- blur morph text
When to use
- A hero with a short word or message that alternates between options
- An opening or loading screen that lists benefits in sequence
- Launches and campaigns for creative, fashion or design brands
- Product presentations that alternate feature names
When to avoid
- Content that matters for SEO, because the text is inserted only in the browser and is not in the server HTML
- Long sentences, which wrap and spill out of the component's fixed height
- Pages with several looping animations, since this effect runs nonstop, even off screen
How to ask your AI
Create a text effect in the hero that morphs one word into the next, with the letters melting together like liquid on each change, real text available to screen readers and search engines, a pause when off screen and a static version 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 Tinteiro
Does Tinteiro work with Nuxt SSR?
It works in the browser, but it renders no text on the server: Tinteiro writes the words with JavaScript on every frame, so the initial HTML arrives empty, and the demo wraps it in ClientOnly. For SEO, keep your main message nearby as plain text and ask your AI for an accessible label listing the words.
Can I change the speed of Tinteiro?
Yes. In Tinteiro, the morphTime prop sets in seconds how long each transformation lasts, 1.5 by default, and coolDownTime sets how long the new word stays still and sharp, 0.5 by default. The words come from the list in the texts prop and repeat in a loop, with no limit on how many.
Will Tinteiro slow down my site?
Not much. Tinteiro only adjusts the blur and opacity of two text layers and applies an SVG filter, with no WebGL, and is rated Light in THM Componentes. Its animation loop does run all the time, even when the component is off screen, so it is worth asking your AI to pause it when it is not visible.
