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