Letras sob a Lente Ultra

Sobre este efeito

Um efeito pra títulos e textos que o mouse olha através de uma lente de vidro, como uma bola de vidro por cima da página. As letras perto do mouse crescem e ganham a cor de destaque; as de volta são empurradas pra fora, e as da borda da lente ficam um pouco apertadas, do jeito que uma lente de verdade faz. Como cada letra só se afasta do centro e nunca cresce mais que o espaço que ganhou, nenhuma passa por cima da outra, nem num título grande. Um aro de vidro, com brilho em cima e sombra embaixo, acompanha o mouse com um atraso suave, e a lente aparece e some devagar quando o mouse chega e vai embora. O tamanho da lente acompanha o tamanho da letra, então o mesmo efeito serve pra um título enorme e pra um parágrafo, e com dois blocos perto um do outro só acende a lente daquele em que o mouse está. No celular, a lente aparece onde o dedo toca. O leitor de tela lê o texto inteiro, sem letras soltas. Com a preferência de menos movimento, o texto fica parado. Tamanho da lente, aumento no centro, cor, aro de vidro e atraso ajustáveis. CSS e JavaScript puros.

Ficha

Categoria

Texto

Onde combina

topo (hero), recursos

Alcance

Área: vive dentro de um bloco da página.

Plano

Exclusivo do Ultra (R$ 39,90/mês) até 26/10/2026; depois entra no Plus.

Peso

5,6 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 9% do processador de um celular intermediário enquanto anima.

Na loja desde

25/09/2026

Como colocar no seu site

1. Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-letras-sob-a-lente.

Assuntos

• texto
• tipografia
• título
• letras
• mouse
• cursor
• lente
• lupa
• olho de peixe
• hover