# Réstia Pontinhos que flutuam devagar pelo fundo e deslizam de leve na direção do mouse, como poeira no ar. > Réstia é um fundo do THM Componentes em que pequenos pontos flutuam devagar e deslizam de leve na direção do cursor ou do dedo, cada um numa intensidade, criando profundidade. Usa canvas 2D, sem WebGL, tem cor e quantidade ajustáveis e funciona bem em heros, telas de login e páginas de contato. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/restia/ ## 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 ```text 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. ## 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. - [Firmamento](https://vibecode.thmtecnologia.com/componentes/firmamento/): Céu noturno com estrelas de três tamanhos subindo devagar e se deslocando de leve quando o mouse passa. - [Cosmonauta](https://vibecode.thmtecnologia.com/componentes/cosmonauta/): Estrelas que saem do centro da tela e correm para as bordas com rastro de luz, como uma nave acelerando. - [Piracema](https://vibecode.thmtecnologia.com/componentes/piracema/): Centenas de setas finas voam juntas como um bando de pássaros e se espalham quando o cursor chega perto. - [Limalha](https://vibecode.thmtecnologia.com/componentes/limalha/): Centenas de milhares de grãos finos correm em filamentos, como tinta no papel, e giram em volta do cursor. --- 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.