Quiet Glass

Build a single-page personal site that opens on a full-screen photographic plate and then goes quiet: frosted glass panels placed sparingly on an asymmetric twelve-column field, with long pauses between sections and one thin vertical hairline marking each pause. The plate is the only loud moment, and everything after it should feel like turning the pages of a well-spaced book.

Make the plate `min-height: 100svh` with the portrait set twice. Behind, the same image covers the whole plate with `filter: blur(34px) saturate(1.35)` and `transform: scale(1.18)`, washed with 38% of the page ground colour and masked to fade out over its last 180px. In front, a twelve-column grid (max 1320px, padding 112px top and 124px bottom, items centred) holds a sharp print of the photo at its native size on columns 1 to 6, with a 16px radius, a deep `0 50px 90px -40px` shadow and a hairline white ring, plus a mono `Boulder, Colorado` pill in its lower-left corner. Never upscale the photo to full bleed; the blurred copy provides the bleed. Over the print draw an ensō, a brushed open circle as an SVG path with a 10px round-capped stroke and a thinner 2.5px echo at 60% opacity, about `min(64vw, 880px)` wide and centred at 38% across, in ink at 34% alpha. On columns 8 to 12, aligned to the bottom, place a strong glass title card with a mono label row (`Plate 00 · Boulder, Colorado · AntJanus`), the headline at `clamp(2.5rem, min(4.6vw, 7.4vh), 4.6rem)` with one serif-italic word, a lede, a three-cell stat strip and three buttons. Centre a glass pill at the bottom of the plate reading `Five sections below` with a small falling-line indicator.

Type is Geist at an 18px base and 1.6 line height, Instrument Serif italic for one accent word per headline, for the lowercase roman section numerals and for a large pull proverb, and Geist Mono for labels, dates and plate captions. The ground is `#e6ecf6` in light and `#060a13` in dark with ink `#0c1626` and `#eef3fb`. A fixed backdrop of four big blurred blobs takes its hues from the portrait's palette with lightness laddered to about 0.80 to 0.90 in light and 0.13 to 0.23 in dark, so muted ink still clears 4.5:1 on it. Glass is `rgba(255,255,255,.60)` in light and `rgba(16,24,40,.56)` in dark with `backdrop-filter: blur(18px) saturate(170%)`, a rim highlight, a long soft shadow and a pointer-following specular sheen, plus a strong variant for text and a smoke variant for the contact card. Provide a light/dark toggle that honours the system preference.

After the plate, use a twelve-column field for every section and separate sections with a `--pause` of `clamp(6rem, 13vw, 12.5rem)`. In each pause, draw one 1px vertical hairline at 62% of the pause height that fades in and out at its ends, and place it on a different column each time (4, 9, 6, 3, 10, 5) so the eye zigzags down the page. Each section starts with a mark: a 46px round glass bead holding a serif roman numeral (i to v), the section name in mono, and a horizontal hairline that extends from the bead. Start heads and bodies on different columns (2, 4, 5, 6, 8) and let the experiment tiles step downward within their row. Between the writing sections set one proverb, "The best code is no code at all.", in serif italic at `clamp(2.1rem, 4.4vw, 3.8rem)` with a small citation.

Motion should be brisk, not languid. On load the print settles from a 106% scale over 1.2s, and the title card's label, headline, lede, stats and buttons rise 16px from transparent over 520ms with a 70ms stagger after an 80ms start. The ensō strokes itself once over 1.2s using a `stroke-dasharray` reveal starting at 200ms, its echo following at 600ms. As you scroll, the plate frosts over, reaching full frost within the first 35% of its height. Below the plate, panels rise 22px over 480ms as they enter view, staggered 60ms; the section hairlines extend over 700ms and the pause hairlines draw down over 800ms. Card lifts take 180ms and image zooms on hover 400 to 500ms. Use `cubic-bezier(.16,.8,.24,1)` for all of it, and keep the backdrop drift slow (64 to 92 seconds). Only hide content for reveal when JavaScript is running.

What makes this work is the contrast between one full plate and a lot of calm space after it. Don't add more plates, don't fill the pauses, and don't slow the motion back down for drama; slow reveals make the page feel unresponsive. Below 820px collapse the field to one column, keep the pauses at their smaller size, move the pause hairlines to columns 2 and 3, and stack the plate print above the title card. With `prefers-reduced-motion` drop every animation, show all content in place and leave the plate unfrosted; with `prefers-reduced-transparency` make the panels near-solid.