Bolha nas Letras Plus

Sobre este efeito

O cursor carrega uma bolha invisível por cima de um título. As letras dentro dela incham: ganham peso na fonte variável, crescem e sobem, mais no centro e menos na borda; empurram as vizinhas de lado, pra fora da bolha, e acendem na cor de destaque com uma luz por trás. Cada letra tem a sua mola, então quando a bolha passa elas balançam antes de assentar, como gelatina. O clique, ou o toque no celular, estoura a bolha: as letras dentro dela pulam pra fora, um anel se abre e a bolha volta quando o cursor mexe. Sem mouse, a bolha passeia sozinha pelo título. O leitor de tela lê o texto original. Funciona com qualquer fonte variável com eixo de peso, como as do Google Fonts. Com a preferência de menos movimento, o título fica parado. Alcance da bolha, peso fora e no centro, quanto a letra cresce e sobe, empurrão, balanço, luz, força do estouro e passeio 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

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

No celular

Moderado: usa 25% 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-bolha-nas-letras.

Assuntos

• texto
• título
• tipografia
• fonte variável
• peso
• mouse
• cursor
• hover
• bolha
• mola
• estouro
• clique