Glass Ma

Build a single-page personal site where frosted glass panels are placed on an asymmetric twelve-column field with deliberate empty space between them. The idea is Ma, the Japanese sense of meaningful pause: no two neighbouring blocks share a left edge or a top line, right-hand columns are often left empty on purpose, and the gaps are where a soft colour mesh shows through un-frosted. The panels are where the reading lives; the space is where the colour lives.

Lay every section out as a grid of `repeat(12, minmax(0, 1fr))` with a column gap of `clamp(14px, 1.8vw, 28px)`, capped at 1320px and centred with a `clamp(16px, 4vw, 40px)` gutter. Place blocks with two custom properties, a start column and a span (`grid-column: var(--from) / span var(--span)`), and start them on columns 2, 3, 4, 5, 6, 8 and 9 rather than always 1. Drop blocks by one of three offsets (`clamp(20px, 4vw, 64px)`, `clamp(32px, 8vw, 128px)`, `clamp(40px, 12vw, 200px)`) so they settle at different heights. Separate sections with a named pause token, `clamp(4.5rem, 11vw, 10.5rem)`, and a half-size variant. Each section after the opening carries a mark in columns 1 to 2: a mono section number above the section name set vertically (`writing-mode: vertical-rl`) in Instrument Serif italic around 2rem, with a 1px hairline beside it. Make the mark span every row of its section (`grid-row: 1 / span 40` with `row-gap: 0`) and `position: sticky; top: 112px` so it stays beside its section while it scrolls.

Use Geist for body and UI at an 18px base with 1.6 line height, Geist Mono at 0.875rem uppercase with 0.08em tracking for eyebrows, dates and stat labels, and Instrument Serif italic for exactly one accent word per headline. The opening headline runs `clamp(3rem, 6.8vw, 6.2rem)` with -0.045em tracking and 0.98 line height.

The ground is a pale blue-grey `#e6ecf6` in light and near-black `#060a13` in dark, with ink `#0c1626` and `#eef3fb`. Behind everything sits a fixed mesh of four large blurred radial blobs, the two biggest gathered top-right and bottom-left so a calm diagonal runs through the page; derive their hues from the portrait's palette, ladder their lightness (around 0.72 to 0.86 in light, 0.13 to 0.24 in dark) and walk each one until ink on it still clears 7:1, because headlines sit directly on the mesh. Add a faint fractal-noise grain at 14% in overlay blend. Glass panels are `rgba(255,255,255,.60)` in light and `rgba(16,24,40,.56)` in dark, `backdrop-filter: blur(18px) saturate(170%)`, a 28px radius, a white rim highlight, a soft long shadow, and a specular radial highlight that follows the pointer. Keep a stronger 0.84 variant for the cards that hold body text and a dark smoke variant for the proverbs and contact panels. Buttons use the brand slate `#364f6a`. Provide a light/dark toggle in the nav and honour the system preference.

Open with the headline set hard left across seven columns, aligned to the bottom of its row, and a tall 4:5 portrait frame on columns 9 to 12 dropped by the largest offset and spanning two rows. Overlay a glass lens on the bottom of the portrait holding three stats (20+ years building, 600+ GitHub stars, blogging since 2012). Below the headline, indent a strong-glass lede card on columns 2 to 7 with the primary, glass and text buttons. The Start-here section then lays three wide article cards down the field, each a two-column glass card with the image inset 10px on one side: the first on columns 3 to 10, the second flipped with its image on the right, starting on column 5 and dropped, the third on columns 4 to 10 and dropped again, so they read as a slow zigzag with long vertical gaps.

Mirror the opening for About: the portrait frame high on columns 1 to 5 with a mono caption, and the strong glass card on columns 7 to 12 dropped low, holding the greeting with an italic name, a lede, a short paragraph, a three-cell stat strip and two buttons. Follow with writing rows inside a glass panel, four experiment tiles that fall down the field like a stair (columns 3, 8, 4, 9 at four different drops), the five proverbs in a smoke panel stepping in at five indents, and an elsewhere band of three panels at three heights ending in a smoke contact card. Close with a strong glass footer panel spanning columns 3 to 12 with navigation, links and a newsletter field.

Panels rise into place as they scroll in: 22px up and from transparent over 0.9s on `cubic-bezier(.2,.7,.2,1)`, staggered 120ms within each batch that arrives together, plus one specular sheen sweep across the panel face as it settles. Run the fade on each glass panel itself, never on a wrapper, because an ancestor with opacity below 1 becomes a backdrop root and the glass inside it stops blurring the mesh. Only hide content when JavaScript is running. Let the mesh blobs drift slowly over 42 to 61 seconds. The floating glass dock sits top right of the field and marks the link for the section in view.

What makes this design work is restraint with the grid: resist filling the empty columns, resist aligning cards for tidiness, and don't add more glass layers to make the space feel busy. Below 820px collapse the field to one column, keep the pauses, keep a 6 to 10% indent on a few panels so the rhythm survives, and turn the vertical marks horizontal with a trailing hairline. With `prefers-reduced-motion` show every panel in place immediately, stop the drift and drop the sheen; with `prefers-reduced-transparency` make the panels near-solid.