# Interactive Grid Pattern A grid of thin lines where each square lights up as the mouse passes and fades slowly, leaving a trail. > Interactive Grid Pattern is a background from THM Componentes built with SVG: a grid of thin lines where the square under the cursor lights up instantly and fades within a second, leaving a trail wherever the mouse goes. Light and canvas-free, it suits feature sections, developer product pages and technical heroes. - Category: Backgrounds and atmospheres - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4 - Interaction: Mouse - URL: https://vibecode.thmtecnologia.com/en/components/interactive-grid-pattern/ ## What it looks like It is like graph paper where each square lights up as the mouse moves over it. The lines are thin, semi-transparent gray, so they work in light and dark mode. When the cursor passes, the square below fills with light gray right away and, once the cursor leaves, fades out over one second, leaving a short trail along the mouse path. By default there are 24 by 24 squares of 40 pixels. In the demo the grid is tilted, with a circular mask that fades the edges and a headline on top; another version lights the squares in blue. ## You may be looking for this if you asked for something like - “a grid background that lights up where I move the mouse” - “that grid of squares that leaves a glowing trail behind the cursor” - “a technical grid background for my SaaS features section” - “a subtle grid behind the headline that reacts to the mouse without slowing the page” - “an interactive graph paper effect for a developer site” - “a grid background that works in both light and dark mode” ## Also known as grid pattern, interactive grid, hover grid, grid background, SVG grid pattern, graph paper background ## When to use - A SaaS features or integrations section - A developer product, API or documentation page - A technical hero with a short centered headline - A card area background that needs a quiet texture ## When to avoid - Sites visited almost only on phones, because the effect depends on a cursor - Very dense grids on large screens, since every square is an SVG element on the page ## How to ask your AI ```text Create an SVG grid background for the features section where the square under the cursor lights up and fades slowly, leaving a trail: thin lines in my theme colors, a radial mask at the edges, good contrast in light and dark mode and a static version for reduced motion. ``` 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 Interactive Grid Pattern ### Does Interactive Grid Pattern work on phones? The grid shows up normally, but the light-up effect depends on a cursor: Interactive Grid Pattern reacts to the mouse entering and leaving each square, with no specific touch handling. On phones it works as a mostly still grid texture, which is usually enough for a background. ### How do I make Interactive Grid Pattern cover a wide section? The grid has a fixed number of squares: by default 24 by 24 at 40 pixels, which covers 960 pixels in each direction. In Interactive Grid Pattern, raise the squares prop, or adjust width and height for larger squares, until the section is filled. Very dense grids create many SVG elements. ### Can I change the square color in Interactive Grid Pattern? Yes. Interactive Grid Pattern accepts extra classes: squaresClassName applies to every square, and the colored demo uses a blue fill on hover; className applies to the whole grid, for things like a mask or a tilt. The THM Componentes prompt tells your AI to use your project color tokens. ## Related components - [Flickering Grid](https://vibecode.thmtecnologia.com/en/components/flickering-grid/): A grid of tiny squares that light up and dim at random, at a slow pace, like an idle LED panel. - [Pattern Background](https://vibecode.thmtecnologia.com/en/components/pattern-background/): A fine grid or dotted backdrop that fades at the edges and can slowly slide in one direction. - [Infinite Grid](https://vibecode.thmtecnologia.com/en/components/infinite-grid/): A wall of image cards you can drag in any direction without ever reaching the edge. - [Tetris](https://vibecode.thmtecnologia.com/en/components/tetris/): Squares that slowly fall through a grid and pile up at the bottom like Tetris, then vanish when you click them. - [Animate Grid](https://vibecode.thmtecnologia.com/en/components/animate-grid/): A logo grid tilted in 3D where the logo under the mouse pops forward and glows green. --- 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).