Como ele é
Parece poeira iluminada por um raio de sol num quarto escuro. Por padrão, cem pontinhos brancos de tamanhos e transparências diferentes flutuam muito devagar em direções aleatórias e somem suavemente perto das bordas. Quando o cursor passa pela área, os pontos deslizam de leve na direção dele, cada um numa intensidade, o que dá sensação de profundidade. O fundo do canvas é transparente, então a cor de trás vem da sua página. A cor dos pontos se troca por prop; na demo, eles ficam brancos no modo escuro e pretos no claro, espalhados em volta de um título grande.
Você pode estar procurando isto se pediu algo assim
- fundo com pontinhos flutuando devagar, tipo poeira no ar
- partículas que se mexem quando passo o mouse
- tela de login escura com bolinhas brilhando no fundo
- algo discreto para o topo do site que dê profundidade
- fundo de estrelinhas que acompanham o cursor
- deixar a página de contato menos vazia sem pesar
- aquele efeito de partículas no fundo de site de startup
Também chamado de
- fundo de partículas
- partículas flutuantes
- fundo de pontinhos
- floating particles
- poeira animada
- parallax de partículas
- canvas particles
Quando usar
- Hero de SaaS ou de startup com fundo escuro
- Tela de login ou de cadastro que precisa de algum movimento
- Página de contato ou de lista de espera com pouco conteúdo
- Seção de lançamento sobre fundo liso, em que os pontos aparecem bem
Quando evitar
- Fundos com foto ou textura, em que os pontos pequenos se perdem
- Páginas com vários canvas animados rodando ao mesmo tempo
Como pedir para a sua IA
Adicione um fundo de partículas flutuantes em canvas atrás do hero: pontos pequenos nas cores da minha marca que se deslocam de leve na direção do cursor, com versão estática para movimento reduzido, menos partículas no celular e pausa fora da tela.
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 Réstia
Réstia funciona no celular?
Funciona. Réstia desenha em canvas 2D, sem WebGL, e também acompanha o toque: ao tocar ou arrastar o dedo, os pontos se deslocam de leve na direção dele. Em aparelhos fracos, vale reduzir a prop quantity, que vem com 100 partículas, e comparar o INP antes e depois, como o prompt do THM Componentes orienta.
Dá para mudar a cor e a quantidade de partículas?
Sim. Réstia aceita a cor em hexadecimal na prop color, com 3 ou 6 dígitos, e a quantidade na prop quantity. As props staticity e ease controlam quanto os pontos reagem ao cursor e com que suavidade o seguem. O prompt do THM Componentes pede à IA para usar os tokens de cor do projeto em vez de cores fixas.
Réstia atrapalha leitores de tela?
Não. O contêiner de Réstia tem aria-hidden, então leitores de tela ignoram a camada decorativa e leem só o conteúdo da página. Para quem prefere menos movimento, o componente original continua animando; o prompt do THM Componentes pede à IA uma versão estática, que aqui pode ser apenas os pontos parados.
