Graph Grid Paper CTA Block for React

Pass different cells to squares on GridPattern: each is [column, row] counted from the grid's corner, and this block's list is kept at the top of the file. The grid is flipped so rows count up from the bottom. cellSize sets the cell, squareColor the fill and lineColor the lines. Both are mixes of the foreground colour, so the paper reads in a light theme and in a dark one.

A two-part mask: one radial gradient fades the grid out toward the edges, a second keeps the corner where the staircase stands visible. On a phone the corner is smaller, so the steps stay clear of the text.

Its top rule and the + marks on its ends come from a Guides with rules="top" and no sides, and the cells are split by divide-x from sm up (rows with divide-y on a phone). It closes the block, so the column has no bottom padding, and the next block's top rule is the block's bottom edge.

Only the content's entrance, a fade up that turns off with reduced motion. The grid is a static SVG pattern and the staircase is still.

Yes. The paper layer is mirrored with rtl:-scale-x-100, so the staircase moves to the other corner with the copy's inline start.

It is plain text in a code element you can select. For a copy button, replace it with a Clipboard and CopyButton, as the dark install command hero does. The package name is fictional.