WebGL Maximalist

# WebGL Maximalist — style sheet

> Gradient meshes, shader distortion, sound on, 120fps swagger. The browser as a demo scene — spectacle first, information second.

Derived from 3 curated reference(s) in the `webgl-max` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- Aeonik — 1/3
- IBM Plex Mono — 1/3
- Migra — 1/3
- Neue Machina — 1/3
- Neue Montreal — 1/3
- Space Mono — 1/3

## Color

- `#101010` dark neutral — 2/3
- `#f5f5f5` light neutral — 2/3
- `#151ab0` chromatic — 1/3
- `#3d6ef2` chromatic — 1/3
- `#8c5bf2` chromatic — 1/3
- `#e33fa1` chromatic — 1/3
- `#e84f38` chromatic — 1/3
- `#f2a03d` chromatic — 1/3
- `#41d3f2` chromatic — 1/3
- `#39e0c8` chromatic — 1/3

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#101010` / `#f5f5f5` — 17.5:1
- `#101010` / `#39e0c8` — 11.5:1
- `#101010` / `#41d3f2` — 10.7:1
- `#151ab0` / `#f5f5f5` — 10.7:1

## Moves

### motion/interaction

- Every transition is a shader morph — no cuts, no fades. Continuity of surface across the whole session. — 22-lusion-v3
- Case studies load as 'levels' with a persistent HUD — game grammar for portfolio navigation. — 23-active-theory-portfolio
- Scroll-driven mask reveal on the hero: image emerges through type counters. Type as window, not label. — 24-unseen-studio

### texture/material

- Real-time cloth sim reacts to cursor like a physical drape. The site has mass. — 22-lusion-v3

### grid/layout

- Depth replaces the grid: content organized along the z-axis, camera moves instead of page scrolls. — 23-active-theory-portfolio

### typography

- Display type runs through a fluid-distortion shader on hover but stays 100% legible at rest — spectacle with an off switch. — 24-unseen-studio

## References

- 22-lusion-v3 — Lusion v3 (exemplar)
- 23-active-theory-portfolio — Active Theory — portfolio
- 24-unseen-studio — Unseen Studio