Design notes — 01 / Cardiothoracic

Design
decisions.

This is one of six fictional demonstration practices created by MedPresence. It shows how deliberate design, patient-centred communication and compliance-focused quality assurance can strengthen patient trust. This page explains the decisions behind the experience.

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 to Netlify, whose pretty-URL resolution serves this page at /guide. The whole site is smaller than a single photograph.

Why this works for patients

Every choice above serves the same goals: a committed art direction that signals care and craft, procedural visuals that stay light and fast on mobile, honest fictional-practice disclosures, reduced-motion support, and a clear path from curiosity to consultation. The same discipline — patient trust, clinical positioning, mobile clarity, accessibility, PDPA-aware consent and MMC/KKLIU-ready copy — is what MedPresence brings to real practices.

Fictional demonstration site · Produced for MedPresence · 2026