How this site was made

The page keeps
your time.

PULSE is a fictional museum exhibition about the heartbeat. Its centrepiece is a working ECG synthesizer: a mathematically composed cardiac cycle drawn as a sweeping monitor trace — with a slider that re-paces the trace and the page's own pulse together.

Concept

A heartbeat is a signal with famous anatomy — P, Q, R, S, T — so the design treats the waveform as the brand. One synthesizer function generates every trace on the site: the hero monitor and all four arrhythmias, each pathology just a parameter broken on purpose. Clinical whites and a hard drop-shadow monitor chassis keep it exhibition-didactic rather than hospital-grim.

Palette

Typography

Techniques

Element	How it works
ECG synthesis	The cardiac cycle is five Gaussians summed over beat phase — small P, sharp Q/R/S spikes, broad T — matching textbook Lead II morphology. BPM only rescales the phase clock.
Sweep rendering	Like a real monitor, the trace doesn't scroll: a sweep cursor erases a 26px column ahead of itself and redraws the red-graph-paper grid as it passes, wrapping at the right edge.
Whole-page pacing	The BPM slider writes a --beat custom property; the wordmark's dot animates on that duration, so the masthead literally beats at the rate you chose.
Arrhythmia variants	One sampler, four pathologies: A-fib removes the P wave and adds fibrillatory noise; VT swaps in wide fast complexes; bradycardia stretches the diastolic silence. The healthy control renders in green, the pathologies in warning pink.
Accessibility	Reduced motion replaces the sweep with a complete static trace and stops the beating dot. The slider is a native range input; every canvas carries a description.

Interaction map

You do	The page does
Drag Re-pace	The trace, BPM readout, training zone, and the masthead's pulse all follow
Push to 180	ZONE — SPRINT; the little dot works hard
Visit the gallery	Four rhythms draw themselves, one healthy, three instructive

← Back to the exhibition