Como ele é
Lembra o visor de uma câmera procurando o foco. A frase aparece em letras grandes e muito grossas, com todas as palavras borradas, menos uma. Em volta da palavra nítida, quatro cantoneiras brilhantes, como as marcas de enquadramento de uma câmera, formam uma moldura. No modo automático, a cada 1,5 segundo no padrão, a moldura desliza e muda de tamanho até a palavra seguinte, que sai do desfoque enquanto a anterior volta a borrar. No modo manual, o foco vai para a palavra sob o cursor e volta para a primeira quando o mouse sai. A moldura é verde no padrão e aceita qualquer cor.
Você pode estar procurando isto se pediu algo assim
- palavras borradas com uma em foco de cada vez
- efeito de câmera focando em cada palavra da frase
- moldura de cantinhos que pula de palavra em palavra
- destacar uma palavra por vez no slogan da empresa
- frase em que a palavra fica nítida quando passo o mouse
- aquele efeito de visor de câmera em volta do texto
- texto do manifesto da marca destacando cada palavra
Também chamado de
- texto com foco
- foco por palavra
- moldura de foco
- focus text effect
- blur focus text
- viewfinder text
- word focus animation
Quando usar
- Slogan ou frase de posicionamento com poucas palavras de peso
- Manifesto da marca em página institucional ou de sobre nós
- Abertura de apresentação ou evento que destaca um valor por vez
- Seção de valores da empresa, como agilidade, clareza e confiança
Quando evitar
- Frases que precisam ser lidas de uma vez, já que as palavras fora de foco ficam borradas
- Frases cheias de palavras curtas, como artigos e preposições, que também ganham a moldura
- Telas de toque, se o modo manual for o único caminho, porque ele depende de passar o mouse
Como pedir para a sua IA
Crie um efeito de foco por palavra no slogan da página: as palavras ficam desfocadas e uma moldura com cantoneiras na cor da minha marca destaca uma por vez, com modo automático no celular, versão estática para movimento reduzido e texto legível para leitores de tela.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Luneta
Luneta funciona no celular?
Sim, no modo automático, que é o padrão: Luneta passa o destaque para a palavra seguinte por conta própria, sem depender de interação. O modo manual usa passar o mouse sobre as palavras, algo que telas de toque não tratam de forma confiável, então no celular prefira o automático ou troque de modo conforme o dispositivo.
Dá para mudar o ritmo e a cor da moldura de Luneta?
Dá. Em Luneta, a prop animationDuration define quanto a moldura leva para ir de uma palavra a outra, 0,5 segundo no padrão, e pauseBetweenAnimations define a pausa entre as trocas, 1 segundo. A prop borderColor aceita qualquer cor CSS, e blurAmount controla o quanto as outras palavras ficam borradas.
O texto desfocado de Luneta atrapalha SEO ou leitores de tela?
Para leitores de tela e buscadores, não. Em Luneta, o desfoque é só um filtro visual de CSS: a frase inteira continua no HTML como texto comum. O cuidado é com quem enxerga pouco, já que as palavras borradas ficam difíceis de ler, então evite usar Luneta como o único lugar de uma informação importante.
