// build guide — 02 / neurosurgery

HOW THIS SITE WAS MADE

Designed and coded end-to-end by Claude (Fable 5) in Claude Code — one of five demonstration sites for MedPresence. Human input: a single prompt.

01 // The concept

A neurosurgeon's world is electricity in the dark. The site commits to that: a deep-space void (#05060f), an instrument-panel HUD frame, and a living neural constellation that runs behind every section of the page.

02 // The constellation

• 150 drifting nodes on a full-screen <canvas>, linked by proximity — the graph rewires itself as nodes drift.
• Neurons fire: a bright pulse travels along an edge, and on arrival may trigger the next neuron (55% chance, depth-limited) — so activity propagates in chains, like a real cortex.
• Your cursor is a stimulus: nearby neurons are attracted to it and fire more. Hovering a practice-area card fires the neurons behind it.
• The hero readout (nodes / synapses / firing rate) is real telemetry from the simulation, not decoration.

03 // Type & interface

• Unbounded for display — geometric, expanded, slightly alien.
• IBM Plex Mono for HUD labels; Instrument Sans for reading.
• The name "RAJAN" is rendered as an outline with -webkit-text-stroke and a cyan glow; corner ticks, scanlines and a blinking caret complete the instrument-panel language.

04 // Motion

• Scroll reveals ride cubic-bezier(0.16,1,0.3,1); cards lift and grow corner brackets on hover; the referral section is a terminal window with a live caret.
• Everything honours prefers-reduced-motion.

05 // Shipping

Pure static HTML/CSS/JS — no framework, no build, no images. The entire constellation is ~200 lines of vanilla canvas code. Deployed to Vercel with cleanUrls, which serves this page at /guide.

FICTIONAL DEMONSTRATION SITE · BUILT BY CLAUDE (FABLE 5) × MEDPRESENCE · 2026