Letra que Vira Foto Ultra

Sobre este efeito

Título em letras grandes em que cada letra guarda uma foto. Passando o mouse numa letra, a foto enche a letra a partir do lado por onde o ponteiro entrou, com uma linha de luz na frente, e a letra sobe um pouco; saindo, a foto fica um instante e escorre pelo lado por onde o ponteiro saiu. Passando o mouse depressa pela palavra, cada letra tocada se enche inteira antes de escorrer, então fica um rastro de fotos atrás do cursor. Quando a palavra aparece na tela, as letras entram uma depois da outra, com uma mola curta, e uma onda mostra a foto de cada letra uma vez, o que já ensina a mexer. A palavra continua sendo texto: a fonte, o tamanho e a cor são os do seu site, dá pra selecionar e copiar, e o leitor de tela lê a palavra inteira. No celular, tocar ou arrastar o dedo pela palavra enche as letras; no teclado, o foco enche todas em onda. As fotos vão direto no HTML, uma por letra, na ordem. Parada, a palavra não roda nada. Com a preferência de menos movimento, as letras já aparecem no lugar e a foto só esmaece por cima da cor. Jeito de encher (pelo lado de entrada, sempre de baixo, de cima ou da esquerda), tempos de encher, de segurar e de escorrer, zoom da foto, quanto a letra sobe, cor da linha de luz, entrada das letras e a onda ajustáveis. CSS e um JS pequeno, sem biblioteca.

Ficha

Categoria

Texto

Onde combina

topo (hero), recursos, chamada pra ação

Alcance

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

Plano

Exclusivo de quem assina o Ultra (R$ 39,90/mês).

Peso

7,3 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 14% 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-letra-que-vira-foto.

Assuntos

• texto
• título
• letras
• foto
• fotografia
• imagem
• hover
• mouse
• viagem
• portfolio
• tipografia
• css
• js