Centered Diagonal Line Grid Hero Block for React

The lines are our GridPattern, a square grid drawn by one SVG pattern, turned 45 degrees so they run diagonally. It sits in an oversized layer (-inset-full) inside a clipping wrapper, so the turned square covers the whole section at any width. cellSize sets the spacing (32px here), lineColor the color, color-mix(in oklab, var(--foreground) 18%, transparent), and strokeDasharray turns the lines into dashes or dots. The fade is a radial mask-image on the wrapper, opaque near the middle and transparent at the edges: widen the ellipse to show more of the grid.

No. The grid's layer is aria-hidden and ignores the pointer, so it's never announced, focused or clicked, and its lines are faint enough that every text keeps at least 4.5:1 contrast in every theme, light and dark. The announcement has a solid background, so its small text never sits on a line, and so do the feature rows. The headline is the page's one h1, the features are a list with their check marks hidden, and the announcement and both buttons are links named by their text. On Base UI, each button renders its link with render={<a href="#" />} and nativeButton={false}.

Edit the FEATURES array: each string is one row. The rows are a list with divide-y, so every row boundary is a solid hairline from rail to rail, and the first rule is drawn by a Guides layer so its + marks land on the rails. Text is centered on desktop and starts at the check mark on a phone, where a longer feature wraps with its check mark on the first line. The check marks use the foreground color: the theme's primary color is kept for the main button.

The headline grows from text-4xl on phones to text-5xl and then text-6xl from the lg breakpoint. The two buttons stack, centered, and sit on the first screen with the feature rows below them. The grid keeps its spacing at every width: it tiles, it doesn't stretch.

It's CSS. The announcement, the headline, the sentence, the buttons and the feature rows each start transparent and 16px low through Tailwind's starting: variant (@starting-style), and rise into place when they first render, about 75 ms apart. The grid doesn't move. With reduced motion there is no transition, so everything renders at rest at once, and nothing runs in a script.

Use the line grid when you want a clean technical texture that suggests precision, behind copy that sits in the middle of the page. The crosshatch hero draws a denser grid that clears the middle and shows at the edges, and a gradient hero trades the texture for a soft glow, for a warmer, more consumer feel.