text-bubbles

Contexto

O text-bubbles (abre em nova aba) é uma biblioteca open source, publicada no npm, que desenha um texto como uma nuvem de partículas. Começou como um script de demonstração e foi reescrita como biblioteca: um núcleo sem framework e duas formas de uso por cima dele. O playground fica em text-bubbles.pedrovilaca.dev (abre em nova aba).

Para instalar: npm i text-bubbles.

Como funciona

1. O texto é desenhado uma vez num Canvas 2D, fora da tela.
2. A biblioteca lê os pixels desse desenho e cria uma partícula a cada poucos pixels preenchidos. A posição de cada uma vira o seu "alvo".
3. A cada quadro, as partículas perto do ponteiro são empurradas; as demais voltam suavemente para o alvo.

O resultado é um texto que se desmancha quando o cursor ou o dedo passa e se recompõe sozinho.

Três formas de usar

• Núcleo (text-bubbles): createTextBubbles(elemento, opções), em JavaScript puro ou em qualquer framework, com update, pause, resume e destroy.
• React (text-bubbles/react): componente <TextBubbles> e hook useTextBubbles, prontos para o App Router do Next.js.
• Custom element (text-bubbles/element): a tag <text-bubbles>, para Astro, Vue, Svelte ou HTML puro, sem runtime de framework.

Leve, rápido e acessível

• Pequeno: cerca de 4 KB comprimidos, sem dependências, com limites de tamanho checados a cada build.
• Leve na CPU: o laço dorme quando nada se mexe, pausa fora da tela e com a aba oculta, e desenha um único caminho por cor.
• Nítido e responsivo: escala pelo devicePixelRatio, acompanha o container com ResizeObserver e quebra o texto em várias linhas em telas estreitas.
• Toque sem travar a rolagem: listeners passivos e touch-action: pan-y.
• Tema: cores podem ser var(--token) e acompanham a troca de tema.
• Acessível: o texto real continua no DOM e prefers-reduced-motion é respeitado.
• Testado: testes unitários com Vitest e testes no navegador com Playwright, rodando no CI de cada pull request.

Neste site

O nome no topo da página inicial é o <text-bubbles> instalado do npm. O <h1> de verdade fica dentro da tag, como texto acessível, e o script da biblioteca só é baixado depois que a página termina de carregar, para não atrasar a primeira pintura.