components / blueprint
blueprint.
engineering graph-paper substrate — minor/major grid, corner registration marks, edge fade, and an optional pointer crosshair with a live coordinate readout. four stacked linear-gradients rather than a tiled image, so it stays crisp at any zoom and costs no request.
drawing no. 04
move the pointer
the crosshair reads out in grid cells
installation
bunx @justin06lee/chrome@latest add blueprintprops
| name | type | default | description |
|---|---|---|---|
| cell | number | 8 | minor grid pitch in px. |
| major | number | 5 | minor cells per major line; 0 draws minor lines only. |
| color | string | 'rgba(255,255,255,0.05)' | minor line colour. |
| majorColor | string | 'rgba(255,255,255,0.1)' | major line colour. |
| fade | 'none' | 'radial' | 'top' | 'bottom' | 'none' | masks the grid toward the edges so it reads as a substrate, not a table. |
| ticks | boolean | false | L-shaped registration marks in the four corners. |
| crosshair | boolean | false | full-bleed rules that track the pointer, with a mono coordinate readout. ignored for coarse pointers. |
| formatCoordinate | (x: number, y: number, cell: number) => string | - | formats the crosshair readout. defaults to grid cell coordinates. |
| as | ElementType | 'div' | |
| children | ReactNode | - | |
| className | string | - |