Grid Backdrops

A grid tells the reader they're looking at a drawing: something measured, with parts in their places. Put one behind an isometric scene, a hero figure, or an empty state's illustration. Use one grid per surface, and keep it faint: it's paper, not content.

#Installation

#Usage

Each backdrop fills its nearest positioned ancestor and paints behind the content, like the background components, so give the container relative isolate.

import { IsoScene, IsoStack, LineGrid } from '@youj/illustrations'

export function Figure() {
  return (
    <figure className="relative isolate rounded-xl border border-line bg-surface p-8">
      <LineGrid gap={20} />
      <IsoScene explode>…</IsoScene>
    </figure>
  )
}

• DotGrid: dots on a square grid, gap px apart, of radius size.
• LineGrid: hairlines gap px apart, a stronger line every major cells, and a small registration cross where two strong lines meet. major={0} leaves only the fine lines.
• IsoGrid: the isometric rhombi of a scene's floor, one grid unit every gap px, for a backdrop that shares the drawing's angles.

#Examples

#Reference