Como ele é
Parece um céu estrelado visto de longe, ou poeira de purpurina flutuando sob a luz. Pontinhos de tamanhos variados se espalham pela área, a maioria subindo devagar com leve desvio para os lados, e cada um pisca suavemente no seu tempo, ficando mais claro e mais apagado em ciclos de alguns segundos. Quando um ponto sai por uma borda, volta pelo lado oposto. Por padrão, os brilhos são brancos sobre um fundo azul-escuro; com fundo transparente, ficam sobre a cor da página. Na demo, aparecem concentrados logo abaixo de uma linha de luz sob o título, sumindo para os lados.
Você pode estar procurando isto se pediu algo assim
- brilhinhos piscando embaixo do título, tipo purpurina
- fundo com estrelinhas cintilando para a página de lançamento
- aquele efeito de faíscas brilhando sob uma linha de luz
- deixar a chamada principal com cara de premium com uns brilhos
- partículas brilhantes subindo devagar no fundo escuro
- céu estrelado animado atrás do nome do produto
- efeito de glitter discreto para o topo do site
Também chamado de
- brilhos
- cintilação
- purpurina animada
- partículas cintilantes
- sparkles effect
- glitter background
- twinkling stars
Quando usar
- Realçar o título de uma página de lançamento
- Dar acabamento premium a uma chamada para ação
- Fundo de hero escuro para produtos de tecnologia ou de luxo
- Telas de anúncio, contagem regressiva ou evento especial
Quando evitar
- Fundos claros com brilhos claros, em que o efeito desaparece
- Páginas com outros efeitos de partículas, que somados poluem a tela
Como pedir para a sua IA
Adicione um campo de brilhos cintilantes em canvas sob o título do lançamento: pontinhos nas cores da minha marca subindo devagar e piscando, concentrados atrás de uma linha de luz, com pausa fora da tela, versão estática para movimento reduzido e densidade ajustada ao celular.
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 Chispa
Que cores posso usar em Chispa?
Chispa recebe a cor dos brilhos em particleColor e a cor de fundo em background, que pode ser transparent para mostrar a página por trás. Use hexadecimal de seis dígitos, como #FFFFFF, porque o componente acrescenta a transparência ao final do código da cor. O prompt do THM Componentes pede à IA para trocar as cores fixas pelos tokens do projeto.
Chispa funciona no celular?
Funciona: Chispa usa canvas 2D, sem WebGL, e não depende de toque. Em telas de alta densidade, comuns em celulares, o código aplica a escala de pixels duas vezes e só parte dos brilhos aparece; ao adaptar, vale pedir à IA para corrigir esse cálculo e calibrar particleDensity. O prompt do THM Componentes também pede teste em mobile.
Chispa respeita quem prefere menos movimento?
Não por conta própria: Chispa anima o tempo todo e só para quando o componente é removido, não quando sai da tela. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento, além de carregar sob demanda. Uma imagem com os pontos parados mantém o visual sem animação.
