Survey grid
The brand's ground texture — GRIDD's mark is a surveyed lot, and this is that idea as a surface. One pitch, one ink rule, three faces.
The three faces
The difference is what the surface underneath is doing, not how it looks.
The pitch is 22px and is not a prop. A grid whose spacing changes per surface is not a grid, it is a pattern somebody chose — the whole point of a cadastral ground is that it reads as the same sheet everywhere. What does vary is strength, the ink percentage, because a texture behind a page header and one inside a small card tile need different weights to read the same.
The hero reveal
The landing's one piece of motion. Dots at rest, and a pool of the lot grid follows the pointer — a torchlight over the drawing, never the whole sheet at once.
Find out what you can build.
Move the pointer across the band.
- The marks are always there; the LINES appear when someone reaches for them. That asymmetry is the whole idea — it is what a person surveying a site actually does.
- A ~150px pool, not the full sheet. Lighting the entire grid on hover was the first attempt and it read as a state change rather than as an instrument.
- The revealed lines run stronger (12%) than a static grid, because only a handful are ever visible at once — a 5% line inside a small pool is invisible.
- CSS cannot read a cursor, so the component tracks the pointer itself and writes two custom properties. No reactive state: moving across the surface never triggers a re-render.
- The fade is a
transition, so the global reduced-motion rule already collapses it. There is deliberately no second reduced-motion block here — a duplicate rule is one that can drift.
Where it appears
Four surfaces, one texture. Before this component each of them re-typed it, at three different opacities.
- Page headers — 4% lines behind the full-bleed band (Page header).
- Card media — 5% lines under a plaque or a glyph (Cards).
- Feature cards — the same 5%, over a wash (Marketing sections).
- The landing hero — dots plus the pointer reveal (Hero).
The rules
- Never behind text read twice. A grid under a paragraph someone must re-read is noise; it belongs under a headline, a plaque or an empty band.
- Never on the map. The map already has a cadastre, and a decorative grid over a real one is a lie about which lines mean something.
- It is texture, so it is
aria-hidden. A screen reader has nothing to gain from it. - The ink is
color-mixover--gd-ink, never a literal — that is what keys it to the theme, and why one declaration gives pale lines on a light ground and pale lines on a dark one.