Survey grid

The three faces

lines the drafting sheet

dots marks without the argument

both — move the pointer over it

Lines behind a static band; dots where a headline has to win; both where the visitor is meant to reach into it.

Code

<GdSurveyGrid />                       <!-- lines, the default -->
<!-- leave `strength` unset: lines take 5%, dots take 11% -->
<GdSurveyGrid variant="dots" />
<GdSurveyGrid variant="both" />        <!-- dots + a pointer-tracked reveal -->

The hero reveal

Find out what you can build.

Move the pointer across the band.

The hero band, liveThe host owns position and overflow — the grid fills whatever it is placed in and never sizes anything.

Code

<div class="hero">
  <GdSurveyGrid variant="both" />
  <div class="hero__words">…</div>
</div>

<style>
.hero { position: relative; overflow: hidden; }
/* the words must not eat the pointer the reveal is tracking */
.hero__words { position: relative; pointer-events: none; }
</style>

API

Props

PropTypeDefault

variant"lines" | "dots" | "both""lines"

What the sheet shows. `lines` is the drafting sheet; `dots` is marks without lines; `both` is dots at rest with the lines revealed around the pointer.

strengthnumber5

Ink strength, in percent. The three that exist in the system: 4 behind a page header, 5 inside card media, 12 for the hero's revealed lines.

revealRadiusnumber150

The reveal pool's radius, in pixels. `both` only — the other two faces ignore it.

The element is aria-hidden and takes no slots and emits no events. The pitch — 22px — is not a prop.

Usage Guidelines

Use lines behind a static band — a page header at 4%, card media at 5%, a feature card over a wash at the same 5%.
Use dots on a surface that has to carry a headline.
Use both only where the visitor is meant to reach into the surface — today that is the landing hero and nowhere else.
Set strength, never the pitch. A texture behind a page header and one inside a small card tile need different weights to read the same.
Give it a positioned host with overflow: hidden. It fills its container and sizes nothing.
Never put it behind text that has to be read twice. It belongs under a headline, a plaque or an empty band.
Never put it on the map.

Behavior & Anatomy

One pitch, and it is not a prop

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 reveal

A pool of the lot grid follows the pointer — a torchlight over the drawing, never the whole sheet at once.

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. Left to each surface to re-type at whatever opacity looked right, a brand texture becomes three slightly different brand textures.

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