# Arlequim

Uma palavra do título em que cada letra ganha uma cor viva e as cores se embaralham a cada cinco segundos.

> Arlequim é um componente do THM Componentes que destaca uma palavra dentro do título: cada letra recebe uma cor de uma paleta viva, do verde ao laranja, e a cada cinco segundos as cores se embaralham numa onda, com um leve pulo e desfoque em cada letra. É leve e serve para palavras-chave em heros e chamadas.

- 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/arlequim/

## Como ele é

Lembra um letreiro de fliperama mudando de cor. No meio de um título comum, uma palavra aparece com cada letra numa cor diferente, tirada de uma paleta que passa pelo verde, azul, violeta, rosa e laranja. A cada cinco segundos, as cores se embaralham: uma onda corre da primeira à última letra, e cada uma dá um pulinho de poucos pixels, desfoca por um instante e assenta na nova cor, em cerca de meio segundo. As letras partem do branco, por isso o efeito foi pensado para fundos escuros, como na demo.

## Você pode estar procurando isto se pediu algo assim

- “uma palavra do título com letras de cores diferentes que ficam trocando”
- “texto colorido tipo arco-íris que muda de cor sozinho”
- “destacar a palavra principal da frase com cores vivas animadas”
- “aquele efeito de letras piscando em várias cores num fundo escuro”
- “título com uma palavra colorida que se mexe para chamar atenção”
- “palavra-chave do hero mudando de cor em onda de tempos em tempos”

## Também chamado de

texto colorido, color changing text, rainbow text, texto arco-íris, letras multicoloridas, animated color text, texto que muda de cor

## Quando usar

- Palavra-chave de destaque dentro do título do hero
- Landing pages de produtos criativos, jogos ou eventos com fundo escuro
- Chamadas curtas que precisam de energia e cor sem imagem
- Banners de lançamento ou de promoção com uma palavra forte

## Quando evitar

- Marcas com paleta restrita, a menos que você troque as cores pelas da marca
- Fundos claros sem ajustar a cor inicial, que é branca
- Frases inteiras, em que tantas cores juntas cansam e prejudicam a leitura

## Como pedir para a sua IA

```text
Crie um efeito de texto colorido para a palavra-chave do título: cada letra numa cor da paleta da minha marca, trocando em onda a cada poucos segundos com um leve desfoque, com versão estática para movimento reduzido e contraste legível no fundo do hero.
```

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 Arlequim

### Dá para usar as cores da minha marca em Arlequim?

Sim. Arlequim recebe a lista de cores por prop, e o prompt do THM Componentes orienta a IA a usar os tokens do projeto em vez de cores fixas. Também dá para trocar a cor inicial das letras, que é branca por padrão, e a duração da animação de cada troca.

### Arlequim funciona em fundo claro?

Funciona, com um ajuste. Arlequim começa cada troca com as letras na cor inicial, que é branca por padrão e pensada para fundos escuros como o da demo. Em fundo claro, defina uma cor inicial escura e confira o contraste de cada cor da paleta com o fundo.

### Arlequim respeita quem prefere menos movimento?

O componente original anima sempre, a cada cinco segundos. 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 Arlequim é simples: manter as letras coloridas paradas, sem as trocas periódicas nem o desfoque.

## Componentes relacionados

- [Quilate](https://vibecode.thmtecnologia.com/componentes/quilate/): Estrelinhas violeta e rosa piscam e giram por cima da palavra, aparecendo e sumindo sem parar.
- [Lustro](https://vibecode.thmtecnologia.com/componentes/lustro/): Texto em cinza suave com uma faixa de brilho que atravessa as letras de tempos em tempos.
- [Ênfase](https://vibecode.thmtecnologia.com/componentes/enfase/): Uma faixa de cor cresce atrás de um trecho do texto, como um marca-texto passando sobre a frase.
- [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.
- [Tecla](https://vibecode.thmtecnologia.com/componentes/tecla/): Uma palavra dentro de uma caixa em relevo que troca sozinha, e a caixa estica ou encolhe para caber a nova.

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