Glass Filmstrip

Build a single-page personal site in frosted glass themed as a strip of film, where the signature is the navigation: a floating glass dock that works as a timeline reel. Six numbered frames sit on a tick-mark ruler, and a small rim-lit glass lens, the playhead, rests on the lit frame and glides to the next one as the reader scrolls to a new section. Everything else on the page borrows the film language lightly: sprocket holes, frame numbers, crop marks.

Fix the dock 14px from the top, centred, up to 1180px wide, as a glass pill with a 26px radius and padding `6px 8px 0 14px` so the reel can run flush to the bottom edge. It holds the Aj logomark on the left, the reel in the middle and the search and theme buttons on the right. Make the reel an ordered list in a flex row. Draw its ruler as a background on the list: `repeating-linear-gradient(90deg, tick 0 1px, transparent 1px 8px)` pinned to the bottom at 7px tall, a minor tick every 8px. Each frame is a link at least 84px wide and 60px tall with `padding: 6px 16px 15px`, a 1px major-tick border on its left (and on the right of the last one), a `14px 14px 0 0` radius, a mono number (`01` to `06`) at 0.8125rem over a 1rem label. The current frame's label goes to weight 650 and its number turns the accent colour. Give the AI frame's label a violet-to-cyan gradient text fill.

Make the playhead an absolutely positioned span inside the current link, inset `4px 3px 0`, behind the text, with a `12px 12px 3px 3px` radius, a fill of the chip colour under a 160-degree specular gradient and a 22% accent wash rising from the bottom, a glass border, and `box-shadow: inset 0 -3px 0 accent, 0 10px 22px -12px accent-glow`. Add a 9 by 7px accent triangle pointer at its bottom centre. The accent is a film-leader orange, `#ad3f17` in light and `#ffa574` in dark. When the section in view changes, move the span into the new link and animate it from its old position with a FLIP transform over 560ms on `cubic-bezier(.34, 1.4, .5, 1)` so it overshoots slightly and settles. The reel itself never moves; only the lens travels. That restraint is what makes it read as a playhead rather than a tab bar.

Use Geist at an 18px base, Instrument Serif italic for one accent word per headline, and Geist Mono for frame numbers, labels and the `FR 01` frame tags. The ground is `#e6ecf6` in light and `#060a13` in dark with ink `#0c1626` and `#eef3fb`, under four large drifting mesh blobs in blue, peach, violet and teal (`#6f98d8`, `#f2a077`, `#a58df0`, `#6fd0bd`) plus grain. Glass is about 60% white in light and deep navy in dark with `backdrop-filter: blur(18px) saturate(170%)`, a rim highlight, a long soft shadow and a pointer-following specular. Buttons use the brand slate `#364f6a`. Ticks are ink at 30% (minor) and 16% (major) in light and white at 26% and 12% in dark. Provide a light/dark toggle whose change wipes in as a circle growing from the button.

Below the dock, open with a two-column hero: the portrait inside a film frame, a strong glass slab with a row of sprocket holes along its top and bottom edges (a 24 by 12px SVG of a rounded rectangle at 22% ink, repeated with `round`), a 4:3 gate with a 12px radius, and a glass lens across the bottom of the photo holding three stats. Beside it, a mono frame tag (`FR 01` in accent, then the byline), the headline set directly on the mesh, and a strong glass card with the lede and three buttons. Follow with the Start-here shelf on a sprocketed glass band, a literal strip of film holding three image cards that show accent crop marks in their corners and a counter-printed `FR.01` number on hover, then two glass columns of latest writing, an AI experiments grid and a three-panel contact band. The footer carries a small `Page transitions: On / Slow-mo / Off` control that slows the playhead glide to 1.8s or turns it off.

Below 900px the reel drops to its own full-width row inside the dock, scrolls sideways with the scrollbar hidden, and auto-centres the lit frame whenever the playhead moves, so there is no hamburger menu; increase the page's top padding to 158px to clear the taller dock. With `prefers-reduced-motion` the playhead jumps without animating, the theme wipe and mesh drift stop, and with `prefers-reduced-transparency` panels go near-solid.