What it looks like
It looks like a camera viewfinder hunting for focus. The sentence appears in large, extra-bold letters, with every word blurred except one. Around the sharp word, four glowing corner brackets, like a camera's framing marks, form a frame. In automatic mode, every 1.5 seconds by default, the frame slides and resizes to the next word, which comes out of the blur while the previous one blurs again. In manual mode, focus goes to the word under the cursor and returns to the first word when the mouse leaves. The frame is green by default and accepts any color.
You may be looking for this if you asked for something like
- blurred words with one in focus at a time
- a camera focusing effect on each word of my tagline
- a corner bracket frame that jumps from word to word
- highlight one word at a time in the company slogan
- a sentence where a word gets sharp when I hover over it
- that viewfinder effect around the text
- a brand manifesto line that spotlights each word
Also known as
- focus text effect
- blur focus text
- word focus animation
- viewfinder text
- focus frame
- spotlight words
When to use
- A slogan or positioning line with a few strong words
- A brand manifesto on an about or company page
- A presentation or event opener that highlights one value at a time
- A company values section, such as speed, clarity and trust
When to avoid
- Sentences people need to read at once, since out-of-focus words stay blurred
- Sentences full of short words like articles and prepositions, which also get the frame
- Touch screens, if manual mode is the only option, because it depends on hovering
How to ask your AI
Create a word focus effect for the page slogan: words are blurred and a corner-bracket frame in my brand color highlights one at a time, with automatic mode on mobile, a static version for reduced motion and text that stays readable for screen readers.
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 Focus
Does Focus work on phones?
Yes, in automatic mode, which is the default: Focus moves the highlight to the next word by itself, with no interaction needed. Manual mode relies on hovering over words, which touch screens do not handle reliably, so on phones stick with automatic mode or switch modes based on the device.
Can I change the timing and frame color in Focus?
Yes. In Focus, the animationDuration prop sets how long the frame takes to travel between words, 0.5 seconds by default, and pauseBetweenAnimations sets the pause between changes, 1 second. The borderColor prop accepts any CSS color, and blurAmount controls how blurred the other words are.
Does the blurred text in Focus hurt SEO or screen readers?
For screen readers and search engines, no. In Focus, the blur is only a visual CSS filter: the whole sentence stays in the HTML as plain text. The real concern is people with low vision, since blurred words are hard to read, so avoid making Focus the only place an important message appears.
