Texto que Respira Plus

Sobre este efeito

Um título que respira. Uma onda de peso e largura da fonte variável percorre as letras no ritmo de uma respiração lenta: cada letra engorda, alarga e sobe um pouco quando a onda passa, e volta ao fino quando ela vai embora. A onda nasce no meio e vai pras pontas, ou anda de um lado pro outro. As letras cheias puxam pra cor de destaque e uma luz atrás do título pulsa junto. Segurar o clique, ou o dedo no celular, inspira o título inteiro; soltar, ele exala numa onda que nasce no meio. O leitor de tela lê o texto original. Funciona com qualquer fonte variável com eixo de peso, como as do Google Fonts; com eixo de largura também, as letras alargam. Com a preferência de menos movimento, o título fica parado no meio da respiração. Ritmo, peso e largura no vazio e no cheio, tamanho da onda, subida, luz e o inspirar ajustáveis. JavaScript e CSS puros, sem biblioteca.

Ficha

Categoria

Texto

Onde combina

topo (hero), recursos

Alcance

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

Plano

Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).

Peso

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

No celular

Moderado: usa 38% do processador de um celular intermediário enquanto anima.

Na loja desde

26/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-texto-que-respira.

Assuntos

• texto
• título
• tipografia
• fonte variável
• peso
• largura
• respiração
• onda
• ambiente
• clique
• segurar