# Paina Snowflakes falling gently across the page background, drifting slightly sideways, for winter and holiday campaigns. > Paina is an animated background from THM Componentes that makes snow fall over the page: round flakes of different sizes and transparency drift down nonstop with a slight sideways sway. Built with 2D canvas and no WebGL, it has adjustable color, amount, size and speed and suits Christmas, holiday and winter campaigns. - Category: Backgrounds and atmospheres - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript, Tailwind CSS v4, Canvas 2D - Interaction: None: the effect runs on its own - URL: https://vibecode.thmtecnologia.com/en/components/paina/ ## What it looks like It looks like light snow falling outside a window. By default, one hundred round flakes of different sizes and transparency fall at slightly different speeds, drift a little to the side and start again from the top when they reach the bottom. The flakes are plain dots with no crystal shape, which keeps the effect clean. The canvas is transparent, so the snow shows over your section background; in the demo the flakes are light blue. There is no interaction: the snowfall is steady and continuous. ## You may be looking for this if you asked for something like - “snow falling on my website background for Christmas” - “a snow effect for the holiday sale page” - “flakes falling slowly behind the campaign headline” - “give the site a winter feel without using a video” - “that little snow effect sites add in December” - “a background with dots falling like snow on the login screen” - “a light seasonal touch for the store homepage” ## Also known as snowfall effect, snow background, falling snow, animated snowflakes, winter background, holiday snow effect ## When to use - Christmas, New Year and holiday sale campaigns - Pages for winter products or destinations - An online store hero during seasonal dates, for a limited time - Digital greeting cards and year-end event pages ## When to avoid - Year-round use, since snow marks a specific season - White or very light backgrounds with light flakes, where the snow disappears - Checkout pages or long forms, where the motion distracts ## How to ask your AI ```text Add a falling snow canvas background to the homepage for the holiday campaign: flakes in my brand colors, fewer flakes on mobile, paused off screen, a static version for reduced motion and an easy way to switch it off after the season. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Paina ### Will Paina slow down my site? Usually not. Paina draws simple dots on a 2D canvas with no WebGL, and it is rated Medium in THM Componentes. The animation runs nonstop, even off screen, so the prompt tells your AI to load it on demand and compare LCP and INP. On phones, lowering the quantity prop eases the load. ### How do I change the snow color and amount? Paina has color, quantity, speed, minRadius and maxRadius props. Pass the color as a six-digit hex value such as #FFFFFF, because the code does not expand the three-digit short form. The THM Componentes prompt asks your AI to use your project color tokens; since the canvas needs a hex value, the AI should convert the token first. ### Does Paina work on phones? Yes. Paina uses 2D canvas, supported by every modern browser, and follows the screen pixel density so the flakes stay sharp. It does not react to touch and does not get in the way of scrolling. For people who prefer reduced motion it keeps snowing, so the THM Componentes prompt asks your AI for a static version. ## Related components - [Réstia](https://vibecode.thmtecnologia.com/en/components/restia/): Tiny dots that float slowly across the background and drift gently toward the mouse, like dust in the air. - [Cosmonauta](https://vibecode.thmtecnologia.com/en/components/cosmonauta/): Stars that rush out from the center of the screen toward the edges with glowing trails, like a ship speeding up. - [Chispa](https://vibecode.thmtecnologia.com/en/components/chispa/): Tiny points of light that twinkle and drift slowly upward, like glitter in the air, behind a headline or whole section. - [Bólido](https://vibecode.thmtecnologia.com/en/components/bolido/): Small streaks with tails cross the card diagonally, like shooting stars, each one at its own pace. - [Folia](https://vibecode.thmtecnologia.com/en/components/folia/): A burst of colorful paper bits shoots up and falls across the screen when someone completes a purchase or a goal. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).