90 efeitos de texto com o prompt pronto pra tua IA
O CSS Text Effects é do mesmo criador do Kinetics: 90 efeitos de texto animado em CSS puro, de aurora a placa de aeroporto, cada um com o código e um prompt que já traz as regras. Quais usar em página de venda e como trocar pelas cores da tua marca.
Quando a gente pede um título animado pra IA, quase sempre volta a mesma coisa: um gradiente que brilha e pronto. E a culpa é mais da descrição do que da IA, porque é muito difícil explicar com palavra uma placa de aeroporto virando letra por letra, ou uma letra dourada com o reflexo passando na diagonal.
O CSS Text Effects resolve isso mostrando o efeito pronto. É do mesmo criador do Kinetics, aquele das 153 animações com física de mola que já apareceu aqui, e segue a mesma ideia: o efeito rodando na tela, o código pra copiar e um prompt pronto pra IA.
O que tem lá dentro
São 90 efeitos, numerados, todos em CSS puro, sem JavaScript e sem dependência, e todos rodando ao vivo na página. Agrupando do meu jeito, porque o site não separa por categoria:
- Luz e cor: Borealis (a aurora passando pelas letras), Neon-Haus (letreiro de neon que falha), Gold-Foil (letra dourada com o reflexo na diagonal), Holograph, Iridescent
- Tecnologia: Glitchcore, Teletype (máquina de escrever com o cursor piscando), Phosphor (tela verde de terminal), Datastream, Ghostwrite (o brilho de "pensando" das IAs)
- Placas e painéis: Split-Flap (placa de aeroporto), LED-Board (painel de estádio), Dot-Matrix, Tickertape
- Movimento: Rubber-Band (a palavra estica como elástico), Magnetic, Domino, Helium (letra de balão que enche e esvazia), Keycap (teclas sendo apertadas)
Os dois botões
Passando o mouse em cima de um efeito, aparecem dois botões: CSS e Prompt. Os dois abrem uma janela com o efeito em tamanho grande, o conteúdo e o botão de copiar.
O CSS é o código completo, com a marcação HTML indicada no topo. As cores ficam em três variáveis logo no começo (--ink, --ink-2 e --ink-3), então trocar pela tua paleta é mexer em três linhas.
O Prompt é uma instrução em inglês pro teu agente de código recriar o efeito exatamente igual. E a melhor parte está no fim dele, numa lista de requisitos:
- manter a marcação e o nome das classes exatamente como estão
- preservar as três variáveis de cor, pra dar pra trocar depois
- funcionar com qualquer palavra, e não só com a do exemplo
- desligar a animação pra quem pediu menos movimento no aparelho
- não usar JavaScript, só CSS
Quais eu usaria em página de venda
Texto animado é tempero. Numa página de venda, eu usaria em uma palavra da headline ou no título principal, e em mais nada. Os que eu escolheria:
- Gold-Foil: produto premium, mentoria, oferta de ticket alto
- Borealis: a palavra de destaque no topo de uma página de lançamento
- Hi-Liter: um marca-texto passando na palavra mais importante da headline
- Split-Flap: data de evento, "abre em", nome da turma
- Teletype: uma frase curta que se digita sozinha, em página de produto de tecnologia
E os que eu deixaria de fora: os que tremem, piscam ou embaralham a letra o tempo todo, como Glitchcore, Jitterbug e Signal-Noise. Funcionam em site de jogo ou de tecnologia, mas numa headline que precisa ser lida, atrapalham a leitura.
Como usar no teu projeto
Escolhe o efeito, copia o prompt e cola no Claude Code, no Codex ou no Cursor, dizendo onde ele entra ("aplica no título do topo da página"). Depois pede pra trocar as três variáveis de cor pelas da tua marca e a fonte pela do teu projeto, porque os exemplos vêm com a JetBrains Mono, que é uma fonte de programação. E abre no celular antes de publicar, pra ver se a palavra continua cabendo na largura da tela.
O que é grátis
Tudo. Não tem cadastro nem página de preço. A página diz que é licença MIT, que libera o uso em projeto de cliente. O repositório no GitHub ainda não tem o arquivo de licença, então, se for um projeto grande de cliente, eu confirmaria com o criador antes.
No menu lateral ficam as outras ferramentas do mesmo criador, como os botões com gradiente, os botões animados, os carregamentos e os interruptores em CSS.
A biblioteca está aqui: CSS Text Effects. Escolhe um efeito, pra uma palavra só, e deixa o prompt fazer o resto.