# Paina Flocos de neve caindo devagar pelo fundo da página, com leve desvio para os lados, para campanhas de inverno. > Paina é um fundo animado do THM Componentes que faz neve cair sobre a página: flocos redondos de tamanhos e transparências variados descem sem parar, com um leve desvio lateral. Usa canvas 2D, sem WebGL, tem cor, quantidade, tamanho e velocidade ajustáveis e serve para campanhas de Natal, de fim de ano e de inverno. - 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: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/paina/ ## Como ele é Parece neve fina caindo do lado de fora de uma janela. Por padrão, cem flocos redondos de tamanhos e transparências diferentes descem em velocidades um pouco distintas, desviam de leve para os lados e voltam a cair do topo quando chegam ao fim da área. Os flocos são pontos lisos, sem desenho de cristal, o que deixa o efeito limpo. O canvas é transparente, então a neve aparece sobre a cor de fundo da sua seção; na demo, os flocos são azul-claros. Não há interação: a queda é contínua e constante. ## Você pode estar procurando isto se pediu algo assim - “neve caindo no fundo do site para o Natal” - “efeito de neve na página da promoção de fim de ano” - “flocos caindo devagar atrás do título da campanha” - “deixar o site com clima de inverno sem usar vídeo” - “aquele efeito de nevinha que os sites colocam em dezembro” - “fundo com pontinhos caindo como neve na tela de login” - “decoração sazonal leve para a home da loja” ## Também chamado de efeito de neve, neve caindo, flocos de neve animados, fundo de inverno, snowfall effect, snow background, falling snow ## Quando usar - Campanhas de Natal, Ano-Novo e promoções de fim de ano - Páginas de produtos ou de destinos de inverno - Hero de loja virtual em datas sazonais, por um período limitado - Cartões de felicitação digitais e páginas de evento de fim de ano ## Quando evitar - Uso o ano inteiro, já que a neve marca uma época específica - Fundos brancos ou muito claros com flocos claros, em que a neve some - Páginas de checkout ou formulários longos, em que o movimento distrai ## Como pedir para a sua IA ```text Adicione um fundo de neve caindo em canvas na home durante a campanha de fim de ano: flocos nas cores da minha marca, menos flocos no celular, pausa fora da tela, versão estática para movimento reduzido e um jeito simples de desligar depois da data. ``` 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 Paina ### Paina deixa o site lento? Em geral, não. Paina desenha pontos simples num canvas 2D, sem WebGL, e tem classificação Médio no THM Componentes. A animação roda sem parar, inclusive fora da tela, por isso o prompt orienta a IA a carregar sob demanda e a comparar LCP e INP. No celular, reduzir a prop quantity alivia o processamento. ### Como trocar a cor e a quantidade de neve? Paina tem as props color, quantity, speed, minRadius e maxRadius. Passe a cor em hexadecimal de seis dígitos, como #FFFFFF, porque o código não converte a forma curta de três dígitos. O prompt do THM Componentes pede à IA para usar os tokens de cor do projeto; como o canvas precisa de um valor hexadecimal, a IA deve converter o token antes. ### Paina funciona no celular? Funciona. Paina usa canvas 2D, suportado por todos os navegadores modernos, e acompanha a densidade de pixels da tela, então os flocos ficam nítidos. O efeito não reage ao toque e não atrapalha a rolagem. Para quem prefere menos movimento, a neve continua caindo, por isso o prompt do THM Componentes pede à IA uma versão estática. ## Componentes relacionados - [Réstia](https://vibecode.thmtecnologia.com/componentes/restia/): Pontinhos que flutuam devagar pelo fundo e deslizam de leve na direção do mouse, como poeira no ar. - [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. - [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. - [Bólido](https://vibecode.thmtecnologia.com/componentes/bolido/): Pequenos riscos com cauda atravessam o card na diagonal, como estrelas cadentes, cada um no seu ritmo. - [Folia](https://vibecode.thmtecnologia.com/componentes/folia/): Uma explosão de papeizinhos coloridos sobe e cai na tela quando a pessoa conclui uma compra, um cadastro ou uma meta. --- 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.