Notes on the Optical Glass Redesign
Why I redesigned the site
The previous build pursued "organic depth" with a 3% SVG fractal-noise overlay applied at z-index: 9999 — meaning it sat on top of every element on the page. Even at 3% opacity, the buzz was tiring to read against.
What changed
The new direction is Optical Glass:
- The page background is a soft, fixed two-light radial gradient — a steel glow at the top-right, a near-imperceptible sage wash at the bottom-left. No noise overlay anywhere.
- Surfaces (cards, sidebar, mobile-nav) are translucent with
backdrop-filter: blur(20px) saturate(140%), plus a 1-px gradient highlight on the top edge that reads as light catching glass. - Motion is interaction-only plus a soft entrance stagger on lists. All transitions go through a token system:
--duration-fast,--duration-base,--duration-slow, with--ease-outon the way in. - Every animation respects
prefers-reduced-motion. There's an@supports not (backdrop-filter)fallback to opaque surfaces for browsers without blur.
Lead mood: modern observatory
Cool, precise, atmospheric. Steel forward; sage and amber stay as supporting accents.