Palavra que Gira Ultra

Sobre este efeito

Uma pílula colorida no meio de um título ou de uma frase, com uma palavra que troca sozinha. As letras viram como um letreiro de aeroporto: a palavra velha gira pra cima e some, a nova vem de baixo, uma letra de cada vez. A pílula muda de largura com mola, e a frase em volta acompanha; cada palavra pode ter a sua cor, e um brilho passa pela pílula a cada troca. Com o mouse ou o foco do teclado em cima, ela espera, pra ninguém ser atropelado no meio da leitura; fora da tela e com a aba escondida, também. O leitor de tela lê todas as palavras de uma vez, sem ser interrompido a cada troca. Letras com acento e emoji contam como uma. Com a preferência de menos movimento, a palavra só esmaece ao trocar. Tempo de cada palavra, tempo da virada, atraso entre as letras, giro em 3D, brilho e cor das letras ajustáveis; as palavras e as cores vão direto no HTML. CSS e JavaScript puros.

Ficha

Categoria

Texto

Onde combina

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

Alcance

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

Plano

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

Peso

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

No celular

Leve: usa 18% 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-palavra-que-gira.

Assuntos

• texto
• título
• palavra
• troca
• letreiro
• pílula
• 3d
• hero
• acessível