reticle-grid-pattern

Reticle Grid Pattern

The canonical layout system for Agent Machines landing sections. Every section is a structural grid of hoverable cells with hairline borders, rounded cards inside cells, full-width separator lines, and hatched margins.

Page-level structure

[outer] [gutter 4rem] [hatch margin 4rem] [content max-w] [hatch margin 4rem] [gutter 4rem] [outer]

• Content: centered, capped at --ret-content-max (1200px).
• Margins: --ret-rail-offset (4rem) wide, filled with 45deg hatch (repeating-linear-gradient(45deg, var(--ret-rail) 0 1px, transparent 1px 6px)).
• Gutters: same width as margins, empty, bordered on their inner edge.
• Page root has overflow-x-hidden to clip full-bleed hairlines.

Grid construction

Sections use CSS Grid with a narrow auto-width left column + N equal columns:

<div className="grid grid-cols-4 auto-rows-auto md:grid-cols-[auto_repeat(8,1fr)]">

• Column 1 (auto): narrow rail for navigation/tool icons.
• Columns 2–9 (1fr each): content cells.
• Mobile collapses to grid-cols-4, hiding rail and rightmost cells.

Cell anatomy

Every cell uses the Cell component:

<Cell action="..." agent={agent} hue={hue} className="..." hoverVisual={...}>
  {children}
</Cell>

• Borders: border-b border-r border-[var(--ret-border)] — hairline on bottom and right. Last column in a row gets !border-r-0. Last row gets !border-b-0. This prevents doubled borders at edges.
• Hover: every cell (including empty ones) has a hover overlay with:
  • A visual effect (HoverHatch, HoverGlow, HoverPulseGrid, HoverScene, HoverGradient).
  • An agent action label (logo + monospaced text + pulsing dot) in the bottom-left corner, colored in the active agent's hue.

Cards inside cells

Content cells contain a rounded card with padding:

<Cell ...>
  <div className="h-full p-1.5">
    <div className="h-full rounded-lg border border-[var(--ret-border)] bg-[var(--ret-bg)]">
      {/* content */}
    </div>
  </div>
</Cell>