# Tecla

Uma palavra dentro de uma caixa em relevo que troca sozinha, e a caixa estica ou encolhe para caber a nova.

> Tecla é um componente do THM Componentes que alterna palavras dentro de uma caixa em relevo no meio do título: a cada três segundos entra a próxima, a caixa estica ou encolhe para caber nela e as letras surgem do desfoque. Tem visual próprio para modo claro e escuro e serve para benefícios rotativos.

- Categoria: Texto e tipografia
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue
- Interação: Nenhuma: o efeito roda sozinho
- URL: https://vibecode.thmtecnologia.com/componentes/tecla/

## 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

```text
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.

## Componentes relacionados

- [Sinônimo](https://vibecode.thmtecnologia.com/componentes/sinonimo/): Uma palavra no meio do título troca sozinha a cada poucos segundos, com a nova entrando letra por letra.
- [Parafina](https://vibecode.thmtecnologia.com/componentes/parafina/): Palavras que se revezam no título, derretendo uma na outra como gotas que se juntam antes de ficarem nítidas.
- [Tinteiro](https://vibecode.thmtecnologia.com/componentes/tinteiro/): Uma palavra derrete e se transforma na próxima, com as letras se fundindo como gotas de tinta.
- [Arlequim](https://vibecode.thmtecnologia.com/componentes/arlequim/): Uma palavra do título em que cada letra ganha uma cor viva e as cores se embaralham a cada cinco segundos.
- [Bobina](https://vibecode.thmtecnologia.com/componentes/bobina/): Cada linha de texto rola na vertical e dá lugar a uma cópia idêntica, no ritmo da rolagem.

---
THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.