# Quilate

Estrelinhas violeta e rosa piscam e giram por cima da palavra, aparecendo e sumindo sem parar.

> Quilate é um componente do THM Componentes que espalha estrelinhas de quatro pontas sobre uma palavra: cada uma pisca crescendo e girando em ciclos de menos de um segundo e, depois de alguns segundos, reaparece em outro ponto. É leve, sem WebGL, e funciona bem para destacar uma oferta, um plano premium ou um lançamento.

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

## Como ele é

Lembra o brilho desenhado em volta de uma joia num anúncio. Por padrão, dez estrelinhas de quatro pontas, em violeta e rosa, ficam espalhadas em pontos aleatórios por cima da palavra. Cada uma surge do nada, cresce enquanto gira um pouco e some, num pulso curto que se repete; depois de alguns segundos, troca de lugar, então o desenho nunca fica igual. O texto aparece grande e em negrito, com a cor e a fonte que você definir, e as estrelinhas não atrapalham cliques nem a seleção do texto.

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

- “palavra com estrelinhas brilhando em volta para chamar atenção”
- “efeito de brilho piscando em cima do nome do produto”
- “destacar a palavra premium com umas faíscas animadas”
- “texto com glitter ou cintilando para a página de oferta”
- “aquele brilhinho de estrela que aparece e some no título”
- “deixar o nome do plano mais caro com cara de especial”

## Também chamado de

palavra com faíscas, texto com brilhos, texto cintilante, sparkle effect, glitter text, texto com estrelinhas, twinkling text

## Quando usar

- Destaque de uma oferta, de um cupom ou do plano recomendado na tabela de preços
- Nome de lançamento ou de produto premium no topo da página
- Telas de conquista, como compra concluída ou nível desbloqueado
- Convites, datas comemorativas e campanhas sazonais

## Quando evitar

- Textos longos ou vários destaques ao mesmo tempo, que viram poluição visual
- Marcas sóbrias, como jurídico ou financeiro, em que o brilho soa informal

## Como pedir para a sua IA

```text
Crie um texto com estrelinhas de brilho animadas sobre o nome do plano premium na minha tabela de preços: estrelas nas cores da minha marca piscando e girando em pontos aleatórios, sem bloquear cliques, com versão estática para movimento reduzido.
```

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 Quilate

### Dá para mudar as cores e a quantidade de estrelinhas de Quilate?

Sim. Quilate recebe duas cores para as estrelinhas e a quantidade delas, que é dez por padrão. O prompt do THM Componentes orienta a IA a trocar o violeta e o rosa originais pelos tokens de cor do seu projeto, para o brilho combinar com a marca.

### Quilate deixa a página pesada?

Pouco. Quilate anima pequenos desenhos em SVG, sem WebGL nem canvas, e tem classificação Leve no THM Componentes. O componente atualiza as estrelinhas dez vezes por segundo enquanto está na página, então vale usar um por tela e comparar o INP antes e depois, como pede o prompt.

### Quilate 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 redução de movimento no sistema; em Quilate, isso pode ser feito mostrando só a palavra ou deixando algumas estrelinhas paradas como enfeite.

## Componentes relacionados

- [Chispa](https://vibecode.thmtecnologia.com/componentes/chispa/): Pontinhos de luz que piscam e sobem devagar, como purpurina no ar, atrás de um título ou de toda a seção.
- [Lustro](https://vibecode.thmtecnologia.com/componentes/lustro/): Texto em cinza suave com uma faixa de brilho que atravessa as letras de tempos em tempos.
- [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.
- [Pincelada](https://vibecode.thmtecnologia.com/componentes/pincelada/): Uma faixa de cor preenche o fundo da palavra da esquerda para a direita, como uma caneta marca-texto.
- [Lampejo](https://vibecode.thmtecnologia.com/componentes/lampejo/): Botão preto em pílula com um feixe de luz que percorre a borda sem parar e um brilho interno que cresce no hover.

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