Glass Aurora

Build a personal home page of frosted glass panels floating over a living aurora. The aurora is a fixed full-screen field of blurred coloured light that slowly sways behind everything; the glass sits on top with a lit rim, and one phrase in each headline is filled with a moving aurora gradient. It should feel luminous but stay easy to read.

Centre content in a wrap of `min(1240px, 100% - 2 * gutter)` with a gutter of about `clamp(16px, 4vw, 40px)`. A floating glass dock nav pill sits 16px from the top: logo, the brand name, centred links with the current one as a filled dark pill, the AI link as a gradient hairline ring, and search and theme buttons. The hero is a two-column grid, copy left and portrait right. Sections below use 3-column, 2-column and 4-column grids with 24px gaps and generous vertical spacing of around 104px.

Set everything in **Geist**: hero `h1` near `clamp(3rem, 7vw, 6rem)` at weight 600 with `-0.045em` tracking and a line height of 1. The accent phrase is **Instrument Serif** italic, used once per headline and filled with a slow gradient sweep via `background-clip: text` (dark stops on light glass, bright stops on dark surfaces). Labels, eyebrows, dates and stat captions are **Geist Mono**, uppercase with letter-spacing, with a short coloured dash before each eyebrow.

Build the aurora as a fixed layer of stacked elements: a slate sky glow, four large blurred blobs (teal `#2de2c4`, blue `#3ab8ff`, violet `#8b6cff`, pink `#ff5ca8`) with `filter: blur(80px)` drifting on 30 to 50 second alternating keyframes, two skewed `conic-gradient` ribbons blurred and swaying in opposite directions, and an SVG `feTurbulence` grain on top. In dark mode, screen-blend saturated hues over `#05060c`; in light mode, mix the same hues about 62% with white over `#eef0f8`. Glass comes in three strengths (62%, 84% and 90% fill) with `backdrop-filter: blur(18px) saturate(170%)`, an inset 1px white rim, a faint diagonal specular sheen, and a 1.5px lit conic rim drawn on `::after` with a mask so only the border shows; the rim's bright arc rotates to face the pointer. Store the theme in `localStorage` inside try/catch.

The hero opens with a small glass status chip (`New` badge and a line about the pattern library), a mono eyebrow, then the headline ending in the gradient-ink phrase `what I learn.` A strong glass card under it holds the lede and buttons: a gradient primary button, a glass secondary and a text link. On the right, the portrait sits in a 28px-radius frame with a slowly rotating conic halo glowing behind it, and a glass stat strip (`20+`, `600+`, `2012` with mono captions) overlaps its lower edge. Start here is a row of three glass cards with an image, a large serif italic numeral, meta and a title. The AI and Garden panels are tall glass lists of rows with tiny thumbnails and right-aligned dates, and the experiments are four small tiles with a gradient orb icon.

Angled bands carry the calls to action. Each band breaks out of the wrap to full width with `margin-inline: calc(50% - 50vw)`, is clipped by `clip-path: polygon(0 9%, 100% 0, 100% 91%, 0 100%)`, and fills with several moving radial and conic gradients over deep navy `#1a1f4a` with a dark left-weighted scrim so white text holds AA. The first band features the UI Pattern Library: a section heading with a gradient-ink word and one wide glass card split between copy with chips and buttons and a blueprint image with a glass stat strip (`40 Patterns`, `5 Categories`, `0 Dependencies`). The second band is Work with me with three engagement rows in a glass card. Finish with two glass link lists and a strong-glass footer with a newsletter form.

Motion is slow and ambient: blob drift, ribbon sway, the halo turn, the band mesh and the ink sweep, all over 20 seconds or more, plus 200ms hover lifts. Under `prefers-reduced-motion` stop every animation and leave the aurora still; under `prefers-reduced-transparency` make panels near-solid and hide the ribbons, and fall back to the strong fill when `backdrop-filter` is unsupported. At 400px every grid becomes one column, the dock collapses to logo, theme and a menu button that opens a glass sheet, and the band's slant flattens a little. Do not let the aurora compete with text: keep it behind glass, and never put body copy straight onto the bright field.