What it looks like
It looks like a game of Tetris 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 Tetris
- 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
- tetris 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
Create a Tetris-style falling blocks background 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 Tetris
Can people actually play Tetris with it?
Not as a full game. In Tetris, 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 Tetris blocks?
The squareColor prop takes one color, and Tetris 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 Tetris heavy on phones?
What it does is simple: a one-second timer moves the blocks, with no canvas or WebGL. Each grid square in Tetris 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.
