```
- Column 1: narrow rail (agent selector or tool clusters)
- Columns 2–8: content cells
- Column 9: right edge rail
- Mobile: `grid-cols-4`, hide rail + rightmost cells with `hidden md:block`
## Cell Component (core primitive)
Every grid cell — even empty decorative ones — wraps in `Cell`:
```tsx
| }
cellAgent={CELL_AGENTS[0]} // which agent "owns" this cell
toolIcon="shell" // optional tool/service icon
>
{children}
```
**Cell anatomy:**
- Outer: `border-b border-r border-[var(--ret-border)]` — hairline on bottom + right
- Hover overlay: `absolute inset-[6px] rounded-lg opacity-0 → opacity-100`
- Tinted background: `${ca.hue}0a`
- Visual effect fills the overlay
- Pulsing dot: top-right, `animate-pulse`, agent hue + `boxShadow`
- Agent label: bottom-left (logo + service/tool icon)
- Action string: bottom-right, `font-mono text-[8px]`, agent hue
**Border deduplication:**
- Last column: `!border-r-0`
- Last row: `!border-b-0`
- Adjacent to full-bleed hairline: remove matching border
## Cards Inside Cells
```tsx
|
```
- Padding: `p-1.5` (6px)
- Card: `rounded-lg border border-[var(--ret-border)] bg-[var(--ret-bg)]`
- 3D viewports: use `bg-[var(--ret-bg-soft)]` + corner cross marks
- Decorative/empty cells: same card structure, add nyx-lines texture at `opacity-0 dark:opacity-20`
## Full-Width Hairline System
Hairlines are the dominant structural element — they appear at **every** level
of the hierarchy: between page sections, inside component grids, as cell
borders, and as full-bleed rules that escape their container. The system has
four distinct mechanisms that work together:
### 1. Page-level spacers (`ReticleSpacer`)
Between every major section. A full-width `border-y` strip with `+` cross
marks pinned at the content-column edges:
```tsx
{/* 20px hairline strip + 4 corner crosses */}
{/* same, but filled with 45° hatch pattern */}
```
Implementation:
```tsx
{/* Optional hatch fill */}
{hatch && (
)}
{/* Cross marks at content-column intersections */}
```
The crosses are SVG `+` marks (`ReticleCross`) — two perpendicular lines
stroked in `var(--ret-cross)`, sized at `crossArm * 2` (default 10px),
centered exactly on the hairline/column intersection.
### 2. Full-bleed hairlines inside components
When a hairline must span the entire viewport width (not just the content
column), use absolute positioning with `200vw` width centered at `-50vw`:
```tsx
```
Used in the hero heading card (top + bottom), and anywhere a cell needs
a rule that visually connects to the page-grid margin rails. The page shell
uses `overflow-x: clip` (not `hidden` — `clip` doesn't create a new stacking
context) so these extend to viewport edges cleanly.
**When to use:** A cell or component needs a line that reads as part of the
page structure, not just its own border. The heading card uses two of these
to create a band that reads as a full-width stripe.
**Deduplication:** Cells adjacent to a full-bleed hairline must remove their
own matching border: `!border-t-0` or `!border-b-0`.
### 3. Inline horizontal rules (`ReticleHRule`)
Section-internal dividers with four variants:
```tsx
{/* single hairline, edge to edge within content */}
{/* hairline with + mark in center (default) */}
{/* border-y strip filled with 45° hatch, h-6 */}
AGENTS {/* hairlines flanking centered text */}
```
The "label" variant creates the pattern:
```
─────────── AGENTS ───────────
```
Using `h-px flex-1 bg-[var(--ret-border)]` on both sides of the text.
### 4. Cell-level borders (grid lines)
Every `Cell` in the hero/feature grids contributes to the grid-line mesh:
```tsx
className="border-b border-r border-[var(--ret-border)]"
```
This creates a continuous grid of hairlines where:
- Each cell draws its **bottom** and **right** border
- The grid container has no padding — cells are edge-to-edge
- Edges are deduplicated: last column gets `!border-r-0`, last row gets `!border-b-0`
- `border-y` or `border-t` on hatch accent strips within components (e.g. FleetDemo's 1px hatch bar)
### 5. Component-internal hairlines
Inside cards and panels, hairlines separate zones:
```tsx
{/* Dashed internal divider */}
{/* Solid footer divider */}
{/* Hatch accent strip (1px tall) */}
```
**Dashed vs solid:** Dashed borders (`border-dashed`) are used **only** for
internal card subdivisions (resource stats, identity rows) and the rules
flanking headline text. All structural/grid borders are solid.
### 6. Framed panels (`ReticleFrame`)
Bordered container with `+` cross marks pulled outside the border at all
four corners:
```tsx
{children}
```
Implementation: `border border-[var(--ret-border)] bg-[var(--ret-bg)]` with
four `ReticleCross` positioned at `-10px` (crossOffset) from each corner so
the `+` center sits exactly on the corner point.
### Hierarchy summary
```
Viewport edge
│
├─ ReticlePageGrid margin rails (absolute, full-height, hatched)
│ │
│ ├─ ReticleSpacer (border-y, full content-width, + crosses at column edges)
│ │
│ ├─ Full-bleed hairlines (200vw absolute, escapes content column)
│ │
│ ├─ ReticleHRule (content-width, with cross/hatch/label variants)
│ │
│ ├─ Cell borders (border-b + border-r, forms grid mesh)
│ │
│ └─ Component internals (border-t, border-b, border-dashed for subdivisions)
│
└─ overflow-x: clip on page shell (clips rails + bleed hairlines at viewport)
```
### Rules for new hairlines
1. **Between sections** → `
` (always, never skip)
2. **Inside a section, full-bleed** → absolute `h-px` + `200vw` + `z-30`
3. **Inside a section, content-width** → `
`
4. **Grid cells** → `border-b border-r` on each cell, deduplicate edges
5. **Inside a card** → `border-t` or `border-b` (solid for structure, dashed for subdivision)
6. **Accent strips** → `h-1 border-y` with hatch fill at reduced opacity
7. **Never** use `
` directly — always use a Reticle primitive
## Hover Visual Primitives
| Primitive | Effect | Code pattern |
|-----------|--------|--------------|
| `HoverHatch` | Repeating diagonal lines | `repeating-linear-gradient(${angle}deg, ${color}18 0 1px, transparent 1px 6px)` |
| `HoverGlow` | Radial gradient from center | `radial-gradient(circle at center, ${color}15 0%, transparent 70%)` |
| `HoverPulseGrid` | Dot grid + glowing orb | 12px grid lines + centered `animate-pulse` circle |
| `HoverGradient` | Directional corner gradient | `linear-gradient(135deg, ${color}0c 0%, transparent 60%)` |
| `HoverScene` | Full 3D wireframe | Lazy-loaded R3F scene filling the cell |
All tinted in the active agent's hue — they shift color as the agent cycles.
## Spec Readout Cells
Small instrument-readout cells:
```tsx
BOOT
~30s
```
## Capability Chips
Agent-hue-tinted pills:
```tsx
{cap}
```
## Corner Crosshair Marks
Used on banners, 3D viewports, spacers:
```tsx
```
For larger viewport marks (2px borders, h-2 w-2), used on the 3D card.
## 3D Scenes (React Three Fiber)
- **HeroOrbitScene:** wireframe dodecahedron + torus rings center, 5 agent logos orbiting on a sphere
- **WireframeShapes:** per-cell mini wireframes (Dashboard, Loadout, Hosts, Environment)
- Canvas: DPR ≤ 1.5, antialias OFF (crisp 1px lines), `powerPreference: "low-power"`
- All geometry is `lineSegments` + `wireframeGeometry` + `lineBasicMaterial`
- No particles, no custom shaders, no solid meshes
## Animation Budget
| Technique | Use case |
|-----------|----------|
| React `useState` + `setTimeout` | Typewriter, brand mark cycle |
| CSS `@keyframes` | `ret-caret`, `ret-panel-in`, `ret-skeleton-shimmer`, `fleet-wire-travel` |
| Three.js `useFrame` | Continuous 3D rotation + camera lerp |
| CSS `transition-*` | Hover states (200–400ms) |
| `animate-pulse` | Status dots |
No GSAP. No Framer Motion. No scroll hijacking.
## Global FX
- **Grain:** `.ret-grain` — fixed SVG fractal noise, `mix-blend-mode: multiply` (light) / `screen` (dark), opacity 0.035/0.06
- **Wing backgrounds:** theme-aware PNG textures via `WingBackground` component
- **Nyx-lines texture:** `bg-nyx-lines.png` at `opacity-0 dark:opacity-20` inside decorative card cells
## Do NOT
- Use `border-dashed` for structural borders (all borders are solid hairlines; dashed only flanks headlines)
- Add padding to grid containers (cells fill edge-to-edge)
- Use `overflow-hidden` on hero wrapper (breaks full-bleed lines; use `overflow-x: clip`)
- Mix `style={{}}` with Tailwind for static values (style only for dynamic agent hue)
- Create cells without hover behavior (every cell gets a `hoverVisual` and an `action`)
- Use border-radius on outer grid structure (only inner cards get `rounded-lg`)
- Import animation libraries (budget is timers + CSS + useFrame)
- Use gradients/shadows on backgrounds (ground is flat token color + subtle grain)