Como ele é
Parece uma tecla em relevo encaixada no meio da frase. Dentro dela, uma palavra grande e em negrito fica parada por três segundos; então a caixa estica ou encolhe com suavidade até a largura da próxima palavra, e as letras novas aparecem da esquerda para a direita, saindo de um desfoque. No modo claro, a caixa tem um degradê cinza-claro, borda fina e uma sombra suave embaixo, com texto preto; no escuro, vira um cinza-grafite com borda levemente azulada e texto branco. O ciclo passa por todas as palavras da lista e recomeça.
Você pode estar procurando isto se pediu algo assim
- palavra que troca no meio da frase dentro de uma caixinha
- título com uma palavra rotativa que muda sozinha a cada poucos segundos
- efeito de palavra trocando com a caixa mudando de tamanho
- mostrar vários benefícios no mesmo título, um de cada vez
- aquele destaque em forma de tecla com a palavra mudando dentro
- frase do hero em que o final vai alternando entre adjetivos
Também chamado de
- text flip
- palavra rotativa
- rotating words
- word rotator
- texto alternado
- palavra trocando no título
- animated word swap
Quando usar
- Título de hero que lista benefícios, públicos ou usos do produto
- Landing pages de SaaS com uma frase curta e uma palavra variável
- Seções de apresentação de agência ou serviço com vários adjetivos
- Destaque no meio de um título que precisa de movimento discreto
Quando evitar
- Palavras de tamanhos muito diferentes, em que o vaivém da largura empurra o resto da frase
- Mensagens que a pessoa precisa ler por completo, como avisos ou preços
Como pedir para a sua IA
Crie um efeito de palavra rotativa dentro de uma caixa em relevo no título do hero: a cada poucos segundos entra a próxima palavra, a caixa ajusta a largura com suavidade e as letras surgem do desfoque, com modo escuro, versão estática para movimento reduzido e as cores do meu projeto.
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 Tecla
Dá para trocar as palavras e o ritmo de Tecla?
Sim. Tecla recebe a lista de palavras, o intervalo entre as trocas e a duração da transição, além de classes extras para a caixa e para o texto. A caixa vem em tons de cinza fixos, e o prompt do THM Componentes orienta a IA a substituir esses tons pelos tokens de cor e tipografia do projeto.
Tecla funciona no modo escuro?
Sim. Tecla já traz duas aparências: no modo claro, caixa em degradê cinza-claro com texto preto e sombra suave; no modo escuro, caixa cinza-grafite com borda levemente azulada e texto branco. A troca segue a variante dark do Tailwind configurada no projeto.
Tecla respeita quem prefere menos movimento?
O componente original anima sempre, trocando de palavra em intervalos fixos. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema, o que em Tecla é simples: mostrar uma palavra fixa, ou trocar sem animar a largura nem o desfoque.
