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