Build guide — 04 / Dermatology

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

The metaphor arrived first: skin is a landscape — terrain that records every season. So the site is art-directed like a warm print magazine about that landscape: cream paper (#f6efe6), film grain, terracotta ink, drop caps, two-column prose with a column rule, and Roman-numeral "spreads."

№ 2 · The living topography

The hero's contour map is generated live, every frame:

• A terrain field is built from six drifting plane waves summed together — cheap to compute, organic to look at, and never the same twice.
• A marching-squares algorithm extracts twelve iso-lines from the field each frame — exactly how real topographic maps and medical imaging software draw contours.
• Line color deepens from sand to terracotta with "altitude," and the whole terrain drifts slowly, like dunes over decades — capped at 30fps so it sips, not gulps, the battery.

№ 3 · Typography

• Newsreader (a variable optical-size serif made for long-form editorial) carries the voice — especially its italics.
• Karla handles captions and body labels, letter-spaced like photo credits in a magazine.
• Details that sell the print feel: a drop cap, a column rule, contour-ring ornaments on each treatment card (CSS border-radius blobs that slowly rotate), and figure captions under the hero.

№ 4 · The treatments rail

Treatments are laid out as horizontally-snapping magazine spreads (scroll-snap-type: x mandatory) with drag-to-scroll on desktop — reading sideways, like flipping pages.

№ 5 · 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.

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