Build guide — 01 / Cardiothoracic

How this site
was made.

This website was designed and coded end-to-end by Claude (Fable 5) inside Claude Code, as one of five demonstration sites for MedPresence showing what AI-built medical web design can look like. Total human input: a single prompt.

1 · Concept before code

The design direction was chosen first and committed to fully: the operating theatre at night. Near-black background warmed with red (#060304), a single crimson accent (#e0233f), ivory type, and a slow cinematic pace. Everything else — fonts, motion, layout — obeys that one idea.

2 · The particle heart

The hero's beating heart is not a video or a 3D model file. It is 16,000 particles generated by mathematics at page load:

• Points are rejection-sampled from the classic heart implicit surface (x²+9⁄4y²+z²−1)³ − x²z³ − 9⁄80·y²z³ = 0, keeping only samples within a thin shell of the surface.
• They are rendered with Three.js as additive-blended point sprites with a custom GLSL shader — deep oxblood to hot crimson to ember, with per-particle twinkle.
• The beat is a two-phase "lub-dub" scale curve — two exponential decays per cycle at 58 BPM — so it contracts like a heart, not a metronome.

3 · Typography & texture

• Fraunces (variable optical-size serif) for display — surgical elegance with old-soul warmth.
• Hanken Grotesk for body, Spline Sans Mono for data — coordinates, counters, BPM.
• An animated SVG-noise film grain overlay and hairline borders give the flat black screen physical texture.

4 · Motion design

• An SVG ECG trace draws itself across a section divider using stroke-dashoffset animation.
• Scroll reveals use IntersectionObserver with a long cubic-bezier(0.22,1,0.36,1) ease — slow, weighted, theatrical.
• Stat counters ease-out toward their values; the cursor is a custom crimson ring; the camera parallaxes gently with the mouse.
• All motion respects prefers-reduced-motion.

5 · Shipping

Pure static HTML/CSS/JS — no framework, no build step, no image assets at all. Deployed straight to Vercel with cleanUrls (which is why this page lives at /guide). The whole site is smaller than a single photograph.

Reproduce it

Open Claude Code, describe the specialist and the feeling you want the visitor to have, and ask for a committed art direction with procedural visuals instead of stock photos. Then ask for three fine-toothed iteration passes before sign-off. That is the entire workflow used here.

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