Bookshelf

A bookshelf is one of the few interfaces everyone already knows how to use. You scan the spines, you pull one out, you open it. That whole sequence is spatial — it works because books are objects, and the web is very bad at objects.

This plate tries to get some of that back. Twenty-five books stand on rails, each leaning a degree or two off true. Move the cursor across them and one lifts out of the row toward you. Click, and it flies to the middle of the screen and swings open onto its page.

Every book on it is one this site already cites: the fifteen from /reading/, plus ten lifted out of the Sources at the bottom of individual mental model pages. Opening a book links through to wherever it is actually discussed.

Teardown

No images. There is not a single raster asset in this plate. Each cover is live text — title in Inter at display weight with the contract’s tight tracking, author in uppercase IBM Plex Mono, an index number, and one blue rule — laid out over one of four bindings drawn from the palette. That is why the type stays sharp when a book scales to fill a third of the viewport, why the whole set reads as one designed object, and why it costs nothing to load. A cover field on any entry swaps in real art later without touching the markup.

The shelf is data. The twenty-five entries live in this page’s front matter, not in the template. The shortcode iterates them; the rails, the lean, and the stagger all fall out of position in that list. Adding a book is one TOML block.

Lean without layout cost. Each book is absolutely positioned inside a slot that holds the grid space, so the resting tilt (rotateY alternating a couple of degrees, rotateZ a fraction) and the hover lift never reflow anything. Neighbours stay put; only the lifted book moves, and it moves on the compositor. The rails are drawn on the slot itself rather than on a row wrapper, which is why they stay continuous as the column count changes from five down to two.

Opening is FLIP plus one fold. On click the book’s rect is measured, the element moves out of its slot into the open panel and is placed on an empty seat cell whose size the stylesheet owns, then it is transformed back onto its starting rect and released. Because the slot still holds its space, nothing below jumps and the script never has to know how big the open cover should be. The page unfolds beside it from rotateY(-95deg) around its left edge, delayed just enough that it starts opening as the book lands. On a narrow screen the fold rotates around its top edge instead and the page stacks underneath.

It works without JavaScript. Every book is an anchor pointing at its real destination. The script intercepts the click and opens the panel instead; with scripting off, the shelf still renders, still leans, and clicking a book navigates to the reading list or the model page that cites it.

A cover is a picture of text, not text. The title and author on each cover are the same strings as the link’s own description, so the cover is marked aria-hidden and the accessible name comes from one sentence: title, author, note. Otherwise all twenty-five links would announce as “title, author, title, author, note”. The name still opens with the visible title and author, so the link keeps its label. Once a book is open the cover is decoration — the panel beside it carries the same words and the real link — so in flight it leaves the tab order entirely and Tab cycles the panel’s two controls.

The panel scrolls; the shelf does not. Opening locks document scrolling, which on a landscape phone or a split window used to put the close button above the top edge with no way to reach it. The dialog is its own scroll container, and it centres with safe center so an over-tall panel falls back to the top rather than centring itself half off-screen. The book in flight lives inside that scroller, so it stays with its seat instead of detaching from it.

Reduced motion is a different plate, not a slower one. Under prefers-reduced-motion: reduce the lean, the lift, the flight and the fold are all gone. Clicking still opens the panel — it simply appears, already open, and closes the same way. The information is identical; only the theatre is removed. The preference is read at each open and close rather than once at load, so turning it on mid-session takes effect on the very next interaction instead of leaving the script waiting for a transition CSS has already cancelled.