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-out on 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.