# Luneta A sentence with blurred words, where a camera-style frame brings one word into focus at a time. > Luneta is a THM Componentes component that blurs the words of a sentence and highlights one at a time with a corner-bracket frame, like a camera viewfinder. It can cycle by itself or follow the mouse. It is light, built with CSS and a position animation, and suits slogans, manifestos and positioning statements. - 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: Mouse - URL: https://vibecode.thmtecnologia.com/en/components/luneta/ ## 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 ```text 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 Luneta ### Does Luneta work on phones? Yes, in automatic mode, which is the default: Luneta 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 Luneta? Yes. In Luneta, 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 Luneta hurt SEO or screen readers? For screen readers and search engines, no. In Luneta, 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 Luneta the only place an important message appears. ## Related components - [Ênfase](https://vibecode.thmtecnologia.com/en/components/enfase/): A band of color grows behind a passage of text, like a highlighter pen moving across the line. - [Pincelada](https://vibecode.thmtecnologia.com/en/components/pincelada/): A band of color fills the background of a word from left to right, like a highlighter pen. - [Florada](https://vibecode.thmtecnologia.com/en/components/florada/): Headlines and paragraphs that appear one after another, rising slightly out of a blur until they turn sharp. - [Cadência](https://vibecode.thmtecnologia.com/en/components/cadencia/): A large block of text where each word comes out of a blur and turns sharp as you scroll, at reading pace. - [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. --- 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).