V3 Redesign: the whole site as a graph

The shape of it

A central paul-explore root, an Apps hub for the features, and one hub per write-up category. Edges wire the trunk (root to hubs), the leaves (hub to its items), and the bridges: a dashed line from each feature to its own write-up, built from the thoughtsHref that already lived in the feature data. The graph is derived, not hand-authored — add a feature or a thought and it just appears, wired up.

Two views, one data model

The same nodes and edges render two ways. The force view is the playground: draggable nodes, a physics settle, hover to highlight a node and its neighbours. The flat view is the reference: a tidy grouped-column layout (each hub/category a column, its items stacked below) that fits on a screen and is easy to scan. A switch in the header flips between them; the data layer (graphData.ts) is shared, only the layout and rendering differ.

The physics, and why it’s hand-rolled

No graph library. The force simulation is ~150 lines of pure functions: pairwise repulsion, spring forces along edges, a pull to the origin, and a collision pass, all scaled by an alpha that decays so the graph cools and settles. Keeping it pure means it’s testable and framework-free; the only new dependency is GSAP, for the intro reveal and click sparks.

The nicest decision: the simulation runs in its own abstract coordinate space, and the renderer fits that space to the viewport every frame. So “use the available space” and “lay out the graph” are decoupled — the physics never has to know the screen size, and resizing just re-fits.

Performance

• The rAF loop sleeps. Ticking stops once the graph settles (alpha hits its floor) and restarts on interaction — no idle CPU burning a battery.
• React renders once. Positions are written straight to the DOM each frame (node transforms and SVG line coordinates via refs), not through React state. 57 nodes moving at 60fps would be a re-render storm otherwise.
• No per-frame allocation. The force and radius buffers are allocated once and reused each tick instead of a fresh Float64Array per frame, so the collector isn’t chasing garbage mid-drag.

The interaction bugs nobody warns you about

Most of the work was in the last 10%. A tour of the gotchas:

• Dragging a link does nothing. The nodes are anchors, so press-drag triggered the browser’s native link drag and swallowed the pointer gesture. One draggable={false} and it works.
• The graph slides out from under the cursor. When you hover a node its neighbours push away, which grows the bounding box, which re-fits the whole graph — moving the node you were pointing at. Fix: freeze the fit while dragging or focusing, and pin the focused node.
• Labels overlap even when dots don’t. Collision only knew about the circles. Now a labelled node claims its (estimated) label width, so label boxes clear each other too.
• Push first, or highlight first? Highlighting a node and immediately shoving its neighbours felt jumpy, so the push waits about half a second — the selection locks in, then the space opens up.

Accessibility

An interactive canvas is easy to get wrong for keyboard and screen reader users, so the audit leaned here:

• Nodes are real links with real text, so they’re in the tab order, have accessible names, and open on Enter — dragging is a pointer-only enhancement on top. Every node has a visible focus ring.
• Proper landmarks (main, header, nav) and a single h1; decorative layers (background, legend, sparks) are aria-hidden.
• prefers-reduced-motion gets a static layout with no drift, no physics, and no intro animation.
• The landing passes the automated axe scan at WCAG 2.1 AA with zero violations, and axe’s stricter best-practice rules too. Flipping best-practice on globally flagged a few older routes that predate landmark discipline, so that became its own follow-up sweep — the shared test now enforces best-practice, and the routes it caught (a couple of /tcg pages, /calendar) got their missing landmarks.

Flat, and mobile

The flat view started life as one enormous horizontal row — technically a graph, practically unreadable and mostly off-screen. Grouped columns fixed that on the desktop. On a phone even eight columns don’t fit, so under 768px the flat view becomes a stacked, grouped list — the same data, laid out for a thumb. Since a feature and its write-up often share a name (there’s a Calendar feature and a Calendar write-up), the write-ups wear a notes tag so they don’t read as duplicates.

What I’d do next

Give the force view a mobile fallback of its own, and animate the cross-fade when toggling views. The best-practice a11y sweep across the older routes already landed as a follow-up, so the whole site holds the higher bar now, not just this page.