GridBackground

GridBackground is a faint blueprint grid behind the whole page. It fades out toward the edges with a radial mask, so it frames the content without competing with it.

import { GridBackground } from 'jarvis-react-ui';

Basic

The grid is a fixed, full-viewport layer with z-index: 0. Render it once near the root of your app and give the content that should sit on top a position (e.g. relative). gridSize sets the cell size in pixels; the default is 44.

The demo frames on this site use a GridBackground themselves. Here, the demo frame contains the fixed layer; in an app it covers the viewport.

import { GridBackground } from 'jarvis-react-ui';

export default function Basic() {
    return (
        <>
            <GridBackground gridSize={22} />
            <span className="relative text-[10px] uppercase tracking-[2px] text-text-muted">
                Grid underlay
            </span>
        </>
    );
}

Drift

drift scrolls the grid slowly in a loop, by one cell every gridSize / 10 seconds.

import { GridBackground } from 'jarvis-react-ui';

export default function Drift() {
    return (
        <>
            <GridBackground drift gridSize={66} />
            <span className="relative text-[10px] uppercase tracking-[2px] text-text-muted">
                Drifting grid
            </span>
        </>
    );
}

For a complete backdrop with grid, stars, scanlines and vignette use Scene.

Accessibility

• The layer is aria-hidden and ignores pointer events.
• The grid is very low contrast and carries no information. Its lines are tinted from --accent.
• With prefers-reduced-motion: reduce the drift animation stops and the grid stays still.

API