Como ele é
Funciona como a parte variável de um letreiro: a frase fica parada e só uma palavra no meio dela muda. No padrão, a palavra atual fica três segundos na tela; depois cresce até o dobro do tamanho, desfoca e some em 0,6 segundo. A próxima entra letra por letra, cada uma subindo de leve e saindo do desfoque, com 50 milissegundos de diferença entre elas. No fim da lista, o ciclo recomeça. A cor padrão é um cinza quase preto no tema claro e quase branco no escuro, e uma classe troca essa cor por uma de destaque, como a demo faz com a cor primária do tema.
Você pode estar procurando isto se pediu algo assim
- palavra que troca no meio da frase do título
- título que vai alternando entre várias palavras sozinho
- texto rotativo no topo do site para mostrar vários serviços
- aquele efeito em que uma palavra some e outra aparece no lugar
- trocar o público da frase de abertura sem ocupar mais linhas
- frase em que a profissão fica trocando: médicos, advogados, dentistas
- headline com a palavra principal mudando de tempos em tempos
Também chamado de
- palavras rotativas
- texto rotativo
- palavra alternando
- título com palavra variável
- rotating text
- word rotator
- word carousel
Quando usar
- Hero que fala com vários públicos, como médicos, advogados e dentistas
- Frase de abertura que lista serviços ou benefícios sem ocupar mais linhas
- Landing pages de agências e consultorias com várias especialidades
- Seções de produto que precisam mostrar vários casos de uso em pouco espaço
Quando evitar
- Informação que a pessoa precisa ler inteira, já que cada palavra fica só alguns segundos
- Listas longas, em que a pessoa não espera o ciclo completo
- Linhas centralizadas, em que palavras de tamanhos diferentes fazem o resto da frase mudar de lugar a cada troca
Como pedir para a sua IA
Crie um efeito de palavras rotativas no título do hero: uma palavra no meio da frase alterna entre os públicos que atendo, com a próxima entrando letra por letra, a cor de destaque da minha marca, versão estática para movimento reduzido e largura estável no celular.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Sinônimo
Como mudo as palavras e o tempo de Sinônimo?
Em Sinônimo, as palavras vêm de uma lista na prop words, em qualquer quantidade, e a prop duration define quantos milissegundos cada uma fica na tela, 3000 no padrão. A troca leva mais 0,6 segundo. O componente também emite eventos ao fim da entrada e da saída de cada palavra, úteis para sincronizar outros elementos.
As palavras de Sinônimo aparecem no HTML para SEO?
Com Nuxt e renderização no servidor, Sinônimo entrega no HTML apenas a primeira palavra da lista; as outras entram depois, pelo navegador. Por isso, deixe a mensagem principal no trecho fixo da frase e use as palavras rotativas como complemento, não como a única menção ao seu serviço.
Sinônimo respeita quem prefere menos movimento?
O componente original anima sempre. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a preferência de reduzir movimento no sistema, o que em Sinônimo pode ser tão simples quanto mostrar uma única palavra, ou a lista inteira, sem transição.
