Glass Plates

Build a personal home page that opens on a photograph treated like a plate in a printed book: the image fills the whole first screen, a frosted glass title card sits over it, and a small caption bar names the plate. As the reader scrolls, the photo softens and blurs into a colour mesh mixed from its own palette, so the rest of the page feels like it grew out of the picture.

The plate is a section with `min-height: 100svh`, a two-row grid (`1fr auto`), 104px of top padding to clear a floating glass dock nav, and the photo absolutely positioned behind it with `object-fit: cover`. Inside a 12-column grid in a wrap of `min(1240px, 100% - 2 * gutter)`, the title card spans columns 7 to 12 and aligns to the bottom. A foot row under it holds a round glass `Start here` cue on the left and, on the right, a glass caption pill reading `Plate 01 · Boulder, Colorado` with a `View image` button. Content sections below use 3, 2 and 4-column grids with 20 to 24px gaps.

Set type in **Geist**: the plate title around `clamp(2.5rem, 4.3vw, 4.4rem)` at weight 600 with `-0.04em` tracking and a line height of 1, with one final word in **Instrument Serif** italic at 1.06em. Eyebrows, the plate caption, dates and stat labels are **Geist Mono**.

Derive the page colour from the opening photo. Keep a precomputed table of five swatches per image (hex and coverage share) instead of reading pixels with canvas. Take the dominant swatch plus the three most saturated others, spread them 24 degrees apart when the image is nearly monochrome, and clamp each into a light band and a dark band so glass over them keeps AA text; write them to `--l1` to `--l4` and `--d1` to `--d4` on the root. A fixed mesh of four large blurred blobs uses those variables over `#eef2f8` in light mode and `#04070d` in dark mode, with ink `#0c1626` and slate `#364f6a` for primary buttons. Glass panels are translucent at about 70% with `backdrop-filter: blur(20px) saturate(160%)`, an inset white rim and a soft shadow. Persist the theme in `localStorage` inside try/catch.

The plate photo dissolves at its foot with a mask, `linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,.35) 86%, transparent)`, and a dark 180px gradient cap under the dock keeps the nav pill off bright patches. Drive a `--plate-p` custom property from 0 to 1 as the plate scrolls away (scroll position over 85% of its height) and use it to scale the photo from 1.02 to 1.10, blur it up to 16px, raise saturation by 40%, and lift the title card 28px. The card holds the eyebrow, headline, lede, a three-cell stat strip and buttons.

After Start here cards and the AI and Garden glass panels, add a matted portrait plate as an interlude: the same photo blurred to 48px, saturated 1.35 and scaled to 1.2 so it fills the band as a pure colour wash, faded at both top and bottom with a mask, and a sharp square print of the photo in a glass mat on the left (columns 1 to 5) beside a frosted About card (columns 6 to 12) with a heading, lede, short summary, stats and two buttons. Its caption pill reads `Plate 02 · Portrait`. Both `View image` buttons open one native `<dialog>` lightbox that steps between the plates with arrow keys. Close the page with experiment tiles, two link lists, a dark work-with-me card and a strong-glass footer.

Motion stays tied to scroll: the plate's blur and lift, a gentle bob on the down-arrow cue, slow mesh drift, and 200ms card lifts. Under `prefers-reduced-motion`, skip the scroll-driven blur and lift entirely and stop the drift and bob. At 400px the title card spans the full width over the lower part of the photo, the matted print shrinks to about 300px and stacks above its card, the caption bar wraps under the cue, and every grid becomes one column. The photograph is the design: do not cover it with more than one card, and keep the caption bar small.