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