View Transitions API

Build a personal blog home page that reads like a filmstrip. The navigation is a timeline scrubber of numbered frames on a tick-mark ruler with a rust playhead under the current frame, every card carries a frame number like `FR.04`, and motion is limited to objects that glide or morph into their new place rather than fading. Keep the page itself calm and editorial so the motion is the only thing that moves.

Use a wrap of about 1200px. The hero is a two-column grid (`minmax(0, 1.35fr) minmax(0, 1fr)`, gap up to 80px): eyebrow, headline, lede, a three-cell stat strip and three calls to action on the left; a tall arch-topped portrait on the right with a mono frame caption (`FR.00 · Boulder, CO`) in a dark pill at the bottom. Then numbered sections separated by hairline rules: Start here as one large card beside two stacked cards, AI writing as a four-column card row, Digital Garden as a ruled list with a mono date column and a collection label on the right, AI experiments as four bordered cards with small icon chips, a projects header with a halftone illustration card, project rows alternating image and text sides, a three-column grid of side projects, and a connect row. Each section head is a small rust mono number beside a serif title, with an underlined text link to the right.

Set titles in **Instrument Serif** at display sizes: the hero headline at `clamp(3.2rem, 7.4vw, 7.4rem)` with `line-height: .92` and `-0.025em` tracking, with one phrase in italic rust (`write about`, `built`). Set body in **Geist** at 18px and use **Geist Mono** in small uppercase for frame numbers, dates, stat labels and metadata.

The light ground is warm paper `#f4f1ea` with cards on `#fffdf8`, ink `#16181d` and accent rust `#b83c0b`. Primary buttons are near-black pills; secondary links get a rust underline. In dark mode the ground goes to `#0e1116`, cards to `#161a21`, text to `#f2ede4` and the accent brightens to `#ff8a5c` so it holds contrast. Card images that fail or have not loaded show a slate-to-rust diagonal gradient instead of a blank box.

Build the scrubber as an ordered list of links, each a 44px-tall cell with a 1px left border, a mono number over a label, at least 84px wide. Draw the ruler under the whole list with one `repeating-linear-gradient` (a 1px tick every 10px, 6px tall, at the bottom). The playhead is a 6px rust bar along the bottom of the current link with an 11px downward triangle (`clip-path: polygon(0 0, 100% 0, 50% 100%)`) at its left end. Put a search icon, a **Motion** control that cycles On, Slow-mo and Off, and a theme button on the right. Below 980px the scrubber drops to its own full-width row and scrolls horizontally with no visible scrollbar, keeping the current frame centred.

On a single page, move the playhead with the section in view: observe each section, move the playhead element into the matching link, and FLIP it from its old position with a 520ms `cubic-bezier(.34, 1.4, .5, 1)` so it overshoots slightly as it lands. Slow-mo stretches that to 1.8s, Off skips it. Swap the theme inside `document.startViewTransition` and animate `clip-path: circle()` on `::view-transition-new(root)` outward from the toggle over 560ms. Name cards with `view-transition-name` only while a transition is being captured, so filters and toggles can morph cards into their new positions.

Do not add scroll-linked fades or parallax; the design relies on stillness everywhere except the objects that move. Under `prefers-reduced-motion` skip every transition and move the playhead instantly. At 400px wide the hero stacks with the portrait below the stats, card grids drop to one column, and the page itself never scrolls sideways.