Build guide — 03 / Ophthalmology

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.

1 · Concept

Ophthalmology is the medicine of light, so the site is built from light: a warm paper-white field (#fbfaf7), black high-contrast serif type, and one spectral gradient — violet to blue to teal to amber to rose — used as the only color voice on the page.

2 · The living iris

The hero iris is not a photograph. It is drawn from scratch in canvas, fiber by fiber, every frame:

• 460 stroma fibers — quadratic curves radiating from pupil to rim, colored in three zones (amber collarette, teal midfield, blue-slate periphery) with per-fiber jitter so no two page loads produce the same eye.
• 34 crypts (darker arcs), a glowing collarette ring, a dark limbal ring, and two specular highlights that make it read as wet and alive.
• The pupil physically responds to your cursor like light — approach and it constricts, retreat and it dilates, with a resting "breathing" oscillation.
• It blinks: a state machine closes paper-colored eyelids every few seconds — fast close, slower open, like a real blink.

3 · Typography & layout

• Gloock for display — a razor-contrast modern serif that feels like precision optics; Jost for body text.
• The "Why sight" section is typeset as a Snellen chart — the eye-test format itself becomes the layout, with acuity ratios (6/60 → 6/5) as the footer.
• Service cards get a spectral gradient border on hover via a masked gradient overlay (mask-composite: exclude).

4 · Shipping

Pure static HTML/CSS/JS — no framework, no build step, no image files. Deployed to Vercel with cleanUrls, which serves this page at /guide. All motion honours prefers-reduced-motion.

Reproduce it

In Claude Code, name the specialty, ask for one committed visual metaphor ("the medicine of light"), require procedural artwork instead of stock photography, and demand three fine-toothed iteration passes before sign-off.

Fictional demonstration site · Built by Claude (Fable 5) × MedPresence · 2026