Compatibility · experimental

Experiments

Non-obvious treatments — most drawn from the domain (water, depth, optics, signal) rather than generic UI. Several animate; all respect prefers-reduced-motion. These are wildcards to react to, not proposals — flag anything that feels right and we refine it.

Water & depth

Treatments that reference the medium itself — caustics, the water column, bathymetry, sonar.

Caustics · animated

Blurred drifting noise tinted aqua — the dappled light on a pool floor. Slow, ambient.

noise · blur · drift
0 m → 50 m
Depth strata

Aqua stepping darker down the water column. Section background that means something.

stepped linear-gradient
Bathymetric contours

Concentric depth lines — a chart motif rendered as surface. Quiet, technical, on-domain.

repeating-radial-gradient ×2
Sonar ping · animated

Expanding rings from a center node. For a live / listening state.

scale + fade keyframes

Signal & instrument

Readout aesthetics — oscilloscope, radar, reticle framing, data as the surface itself.

Oscilloscope

Scanline field with a glowing signal trace. The instrument's own screen.

repeating-linear + glow trace
Radar sweep · animated

A conic sweep over a ringed dial. Survey-in-progress motif.

conic-gradient · rotate
Target685
Reticle frame

Corner crop-marks framing content — measurement framing without the AV/CV aesthetic.

corner brackets
Chl-a · 24 h4,087
Data-ink card

The chart is the background; the number sits in it. Edward Tufte by way of a stat card.

area chart watermark
Halftone density

Dot field that thins across a gradient — print/engineering texture, density = signal.

radial dots + mask fade

Light & optics

The laser side — beams, dispersion, drifting aurora.

Laser beam · animated

A single glowing beam tracking across the dark. Literal to the instrument.

blurred line · translate
Light enters here
Spectral edge / prism

A thin dispersion edge on an otherwise white card — the only place full spectrum belongs.

border-image spectrum
Aurora drift · animated

The dark hero band, but breathing — glows slowly migrate. Alive without a video.

blurred radials · drift
Depth
Layered glass depth

Two frosted panes at different blur — parallax depth over a colour field.

stacked backdrop-filter

Material & image

How photography and technical surfaces could be treated to stay on-brand.

Duotone treatment

Grayscale mapped to aqua→ink — the "treated photography" the brief asks for, faked here with noise.

blend-mode duotone
Duotone · warm

Same recipe, warm map — for editorial / human (team, field) imagery.

blend-mode duotone (warm)
Blueprint

Cyan grid on deep teal with technical line-art — schematic / spec-sheet surface.

grid + line drawing
Perspective grid

A receding grid — seafloor / horizon. Depth cue for a dark hero floor.

perspective rotateX

Connective tissue · section dividers

How one section meets the next — something we hadn't covered. Rendered between two faux bands.

Hairline + node
Spectral hairline
Water wave
Gradient fade to dark