Interactive Grid

type

component

files

2

registry deps

@automindz/backdrop

npm deps

none

• ①size is a length in px and there is no viewBox, so a square is square in any container
• ②Lines are a tiled pattern and run to the container's edge — fade is opt-in, not the default
• ③A lit cell is a flat, pale fill at 0.145 — no gradient, no shrink — lighting in 100ms and fading over 1000ms
• ④Two angles in degrees — tilt recedes, rotate slants — sharing one origin and one turn
• ⑤pulse is a hash of position, not Math.random(): same field on the server and in the browser

**Two props tilt this grid, and both are plain degrees.** tilt is the recession — how far the plane leans away from the viewer: 0 is a flat wall, 35–60 a floor running to a horizon, clamped at 60 and positive only, because leaning it the other way puts the horizon at the bottom of the box. rotate is the slant — how far the lattice turns *inside* that plane, signed and clamped to ±30, so the rows run diagonally across the box and converge toward a vanishing point off to one side instead of straight up the middle. They compose and neither is a preset: <InteractiveGrid tilt={50} rotate={-14} /> is the receding floor seen from off its axis, which is the picture people mean when they ask for a tilted grid and get a merely foreshortened one. tilt is a real rotateX under a perspective, so cells foreshorten and columns converge — a skewY is the cheap version and does neither — and hit-testing follows the transformed shape, so the cell that lights is still the one under the pointer at any pair of angles. rotate is applied *inside* the SVG, on the one group that holds the line layer and the cells together: that is why the two lattices can never come out of phase, why the horizon stays level and the near edge stays pinned flat along the container's floor, and why a turn costs a little reach at the far corners and never costs coverage. Both are orthogonal to shape and behaviour — a slanted, tilted hexagon pulse is a thing you can ask for — and neither ever changes the tiling, only the field it is drawn on. A tilt always dissolves along its recession axis whatever fade says, because a horizon is not optional. The stylesheet is not optional either: add import "@/styles/automindz-interactive-grid.css" to your root layout once, or nothing responds. Skipping it is safe, never blank — the lines are there at the intensity you asked for, tiled edge to edge, tilted and turned if you asked for those, because every paint is a presentation attribute rather than a rule. **The caller wires one thing: the parent.** Like Backdrop and GridBeams this renders absolute inset-0 -z-10, so its container needs relative isolate — without a stacking context the negative z-index escapes upward and the grid paints behind an ancestor's background. <section className="relative isolate overflow-hidden py-24"><InteractiveGrid behaviour="hover" tilt={45} /><h1>…</h1></section> is the whole integration; no prop is required and there is no config file. **size is a length in CSS pixels, not a ratio** — the cell's width, default 40, clamped to 8–240 — and the SVG carries no viewBox, so one user unit is one CSS pixel: a square is square and a hexagon regular in every container, at every aspect ratio, at every angle, with nothing measured. A hexagon of width size has circumradius size / √3. **The grid always covers its container and runs to its edge**: the lines are an SVG <pattern> filling the field at that fixed pitch, and fade defaults to "none" so the container clips the field rather than a mask dissolving it — pass fade="edges" only for a grid that bleeds into other content instead of into a boundary. columns and rows (48 × 13 by default) bound how far a pointer gets a response, never how far the grid reaches. **A lit cell is the cell, and it is flat, pale and slow.** Every behaviour fills with flat currentColor, so the lit shape is the cell's own path — there is no gradient, no scale and no rim, and the cell lattice and the line lattice are displaced by one shared origin and turned by one shared rotation, so they cannot drift out of phase. That fill stops **half a hairline short of the outline**, which is not a shrink but the only way to keep a lit cell flat: an SVG <pattern> clips its content to its tile, so half of every line is painted *inside* the cell it borders, and a fill reaching the boundary composited over it — measured at 214 of 255 along a lit cell's left and top edges where every other line in the grid renders at 223, which reads as a darker border around a pale block. The inset is asymmetric on a square (the right and bottom lines belong to the next tile and already sit outside the cell, so pulling the fill back there would leave bare background instead) and one shared width on a hexagon. It is geometry, not a transform or a clip-path, so the hover target is unchanged: pointer-events: all hit-tests the cells' hairline stroke as well as their fill, and two neighbours still meet on the line between them. The fill is 0.145 of the layer's own alpha, which is measured rather than picked: it reproduces the rendered lightness the published implementations reach (about luminance 242 of 255 over white), in both themes, from currentColor alone. A cell lights in **100ms** and goes out over **1000ms**, so sweeping the pointer leaves a wake of cells still fading behind it — the falloff is in time, not in space, because CSS cannot name the cell below the one you are on. **press is kept for compatibility and renders exactly what hover does**; it used to shrink the cell and shade it like a well, which read as dark and busy next to the flat fill, so prefer hover in new code. **Clicks are handled, not hoped for**: the layer is pointer-events: none and only the cell group turns it back on, and only for hover and press, so a CTA in the section is in front of the grid rather than clicked through it, at any angle. **pulse is deterministic, not random** — each cell's phase and whether it breathes at all come from a hash of its position, so there is no Math.random(), no ResizeObserver, no state and no hydration mismatch; and **the cadence is capped, not documented**: interactiveGridDuration() floors the lap at 2s (0.5Hz per cell) whatever you pass, so set it with the duration prop and never by overriding --automindz-igrid-duration, which the component writes and the per-cell delays are measured against. The cell cap is arithmetic — 640 squares / 480 hexagons, matched in markup bytes — and trims rows, never columns. behaviour="static" renders the pattern and no cells at all. **intensity defaults to "strong", one step above Backdrop's scale**, because that scale is tuned for a texture you are not meant to notice and this is a grid you are invited to point at: strong puts a line at a 0.127 luminance delta against white, where normal is 0.074 and disappears. The derivation is unchanged, so one app still has one idea of a hairline, and intensity="normal" gets Backdrop's level back. The contrast caveat is Backdrop's: text-foreground clears 4.5:1 over every intensity, but text-muted-foreground drops to 3.6:1 at strong — put muted metadata on a bg-background card, or use fade="edges" to clear the text column. It is currentColor and alpha throughout — give it text-primary and lines and cells follow. Dials: --automindz-igrid-line (0.375), --automindz-igrid-line-width (1px), --automindz-igrid-cell (the lit fill, 0.145), --automindz-igrid-in / --automindz-igrid-out (attack and release, 100ms / 1000ms — the long release is the trail), --automindz-igrid-pulse-opacity (defaults through to --automindz-igrid-cell, so a breathing cell peaks where a hovered one holds), --automindz-igrid-depth (perspective distance behind a tilt, 900px — shorter is a wider-angle lens and a harder recession) and --automindz-igrid-fade (the whole mask layer list — only applies when there is a mask, so pair it with fade="edges" or a tilt).