Backgrounds & AtmosphereHectorpattern
CSS Depth Planes
Parallax depth without a renderer — stacked planes, scroll velocity, and grain that still reads when WebGL never arms.
Hector: Solid, honourable, high-craft work.
Exhibit case
Why it matters
Atmosphere that requires a GPU excludes half the audience. CSS planes keep Nyx honest when the shader stays cold.
Key techniques
- Layered gradients and grain at different scroll rates.
--scroll-velocitymodulating lift.- Shader as progressive enhancement only.
What to steal
The transferable part.Design the fallback first. The shader should feel like more of the same room.
What not to copy
Context-specific or costly.Do not animate filter on full-viewport layers — composite transforms only.
Inclusion rationale
Nyx depth without apologising for the absence of WebGL.
Technical register
Performance
Frozen under the adaptive quality probe when fps dips.
Mobile
Fewer planes; no pointer parallax on coarse devices.
Accessibility
Reduced motion freezes planes at rest; meaning never depends on drift.
Study next
Related entries
NyxLayered Depth FieldFour translucent planes at different parallax depths producing depth with no canvas, no shader, and no main-thread cost.Learning value: 4 of 5HermesScroll Velocity BusOne RAF writes --scroll-progress and --scroll-velocity; every atmosphere and stage reads the bus without registering listeners.Learning value: 4 of 5PoseidonThe Hydro-Prismatic LeviathanA trident where a single transmission material at an index of refraction of 2.42 does all the work, backed by 400 instanced cavitation bubbles it exists to distort.Learning value: 5 of 5NyxFilm Grain RestraintA named film layer that survives view transitions and never becomes a second animation competing with the aura.Learning value: 3 of 5