# Granizo Squares that slowly fall through a grid and pile up at the bottom as in a block puzzle game, then vanish on click. > Granizo is a THM Componentes background where squares light up at the top of a grid, drop one row per second and stack at the bottom; when a row fills up, it clears. A click or tap removes a block. Built with HTML and CSS, it derives its shades from one color and suits 404 pages and youth events. - 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 - Interaction: Mouse, Touch - URL: https://vibecode.thmtecnologia.com/en/components/granizo/ ## What it looks like It looks like a classic falling-blocks game played in slow motion on graph paper. The area becomes a grid of squares with thin outlines, and every second a new square lights up in a random column at the top and drops one row at a time until it lands on the others, building piles at the bottom. When the bottom row fills up, it clears. Squares fade in and out softly, lighten under the cursor and disappear on click. The whole palette comes from one color, with its own shades for light and dark mode; in the demo it is green, with the grid edges fading out in a circle. ## You may be looking for this if you asked for something like - “a background with little squares falling like an old video game” - “something fun for my 404 error page” - “blocks that fall, stack up and disappear when I click” - “a retro game background for a youth event landing page” - “a grid where squares light up and slowly drop down” - “make the waiting page more fun with a little game in the back” - “falling pixels that people can click to clear” ## Also known as block puzzle background, falling blocks, pixel grid animation, block stacking effect, gamified background, retro game background ## When to use - A 404 or error page that can take a touch of humor - A youth event, hackathon or gamified campaign landing page - A waiting, maintenance or waitlist screen - A brand section tied to games, tech or retro culture ## When to avoid - Serious sales pages, where a game in the background distracts from the decision - Screens with lots of text on top, since the grid and blocks compete with reading ## How to ask your AI ```text Create a background of falling, stacking blocks on my 404 page: squares in my brand colors dropping and stacking in a grid, vanishing on click or tap, still for reduced motion, with good contrast in dark mode and client-only rendering in Nuxt. ``` 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 Granizo ### Can people actually play a game with Granizo? Not as a full game. In Granizo, single squares fall on their own, one per second, and stack at the bottom of the grid; when the bottom row fills up, it clears. Visitors interact by clicking or tapping a lit block, which fades away, and that is enough to make a 404 or waiting page more fun. ### How do I change the color and size of the blocks in Granizo? The squareColor prop takes one color, and Granizo generates a scale of shades from it for the blocks, the hover state and the borders, with variants for light and dark mode. The base prop sets how many blocks fit in a row, 10 by default, so a higher number means smaller squares. The THM Componentes prompt asks your AI to use your project color tokens. ### Is Granizo heavy on phones? What it does is simple: a one-second timer moves the blocks, with no canvas or WebGL. Each grid square in Granizo is an HTML element, though, so large areas with a high base value add many elements to the page; lower base on mobile. The demo renders it inside ClientOnly, and the THM Componentes prompt asks for on-demand loading. ## Related components - [Arranha-céu](https://vibecode.thmtecnologia.com/en/components/arranha-ceu/): A grid of tiny squares that light up and dim at random, at a slow pace, like an idle LED panel. - [Amarelinha](https://vibecode.thmtecnologia.com/en/components/amarelinha/): A grid of thin lines where each square lights up as the mouse passes and fades slowly, leaving a trail. - [Treliça](https://vibecode.thmtecnologia.com/en/components/trelica/): A fine grid or dotted backdrop that fades at the edges and can slowly slide in one direction. - [Ladrilho](https://vibecode.thmtecnologia.com/en/components/ladrilho/): A logo grid tilted in 3D where the logo under the mouse pops forward and glows green. - [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).