AETHER FIELD
DETECTING…

Offline field guide · July 2026

Materials of the living web

Browsers no longer just paint rectangles. They form light, time, space, and continuity. This page is a single-file museum: each section is the technique it explains.

Enter the field Open the lab
Stack
WebGL2 · CSS · Vanilla JS
Network
Zero CDN · fully offline
Motion
Scroll + cursor · reduced-motion safe

01 · Orientation

How to read this page

Four materials. Four live specimens. One laboratory. Static meaning always works first — graphics only amplify what the words already say.

  1. 01

    Light

    Fragment shaders turn the screen into a continuous field — not a stack of images.

  2. 02

    Time

    Scroll-driven CSS maps progress to animation timelines without scroll listeners.

  3. 03

    Space

    Anchor positioning and container queries place UI relative to meaning, not magic numbers.

  4. 04

    Continuity

    View Transitions keep object identity across state changes — SPA feel without an SPA tax.

02 · Material · Light

The screen as a field

The background is a WebGL2 fragment shader driven by time, cursor, and scroll. Each pixel is computed, not composited from assets. That is the difference between decoration and material.

As of late 2025–2026, WebGPU ships across major browsers and adds compute shaders + WGSL. This offline build uses WebGL2 + GLSL ES 3.00 so the field runs without any toolchain or CDN — with an honest CSS still-field if GPU context fails.

  • u_time · domain warping of noise layers
  • u_pointer · soft gravitational lens at cursor
  • u_scroll · intensity and palette shift through the page
  • u_still · freezes evolution for reduced motion

GPU path: detecting…

field.frag · live uniforms
Mini viewport samples the same shader family as the page field. Move the cursor over it.

03 · Material · Time

Scroll is a timeline

CSS scroll-driven animations bind animation-timeline to scroll or view progress. No scroll event thrash. The strip below uses scroll-snap + progress-linked fills; when the browser supports view timelines, bars scrub as they enter.

Foundations

Custom properties, grid, container queries draft, WebGL2 mainstream.

Scroll & color

Scroll-driven animations, OKLCH, View Transitions (same-document) land in Chromium first.

Interop wave

Anchor positioning, broader view transitions, WebGPU nears multi-browser default.

Material web

Design systems treat light, time, and space as first-class materials — with progressive enhancement.

Your constraints

Offline, a11y, reduced motion, and honest fallbacks remain the craft bar — not the shader alone.

Care note

Scroll-driven motion should explain structure, not hijack the wheel. This page never traps scroll. Prefer transform / opacity; keep body text still.

04 · Material · Space

Position relative to meaning

CSS Anchor Positioning tethers floating UI to a source element without fragile getBoundingClientRect math. Hover or focus a specimen chip — the note docks to it when the browser supports anchors; otherwise it stacks accessibly below.

Container queries let the specimen stage change density from its own width, not only the viewport — critical for reusable design systems.

anchor + container
OKLCH

Perceptual color space for gradients and tokens that stay even under theme shifts.

Activate chips with click, hover, or keyboard focus.

05 · Material · Continuity

Identity across states

View Transitions keep a shared element’s identity while the surrounding tree changes. Use the tabs — the active panel cross-fades; supporting browsers morph with document.startViewTransition.

Feedback motion

Short (80–200ms). Confirms input. Never blocks the next keystroke. Ideal for presses, toggles, validation.

06 · Live laboratory

Tune the material

Adjust uniforms driving the page field. Values are local state only — nothing leaves the machine.

Lab ready.

07 · Principles

How not to waste the frontier

  1. 01

    Static first

    If the GPU dies, the thesis must still be readable. Motion is amplification, not meaning.

  2. 02

    One purpose per motion

    Feedback, continuity, hierarchy, navigation, story, or brand — pick one. Delete the rest.

  3. 03

    Do not hijack scroll

    Users own the wheel. Pin sparingly. Never trap focus on a canvas.

  4. 04

    Progressive materials

    Anchor, view timelines, View Transitions, WebGPU — enhance when present; never require for core reading.

  5. 05

    Material honesty

    Do not imply product capabilities, data, or support levels the page does not have.