HomeSports Physics & BiomechanicsCardio Zone Trainer

Cardio Zone Trainer

Interactive heart-rate zone simulator: a runner circles a five-zone training ring while a pulsing heart model tracks live BPM. Tune effort, interval work/rest timing and age (max HR) to see how heart rate rises, recovers and burns calories in real time.

Sports Physics & Biomechanics3DEasy60 FPS
cardio-training ↗ Open standalone

This simulator models how heart rate actually behaves during cardiovascular exercise: it chases a target set by effort rather than snapping to it, rising faster than it recovers, exactly like a real cardiovascular response. A runner circles a five-zone training ring — colored from easy green through max-effort red — speeding up as simulated heart rate climbs, while a pulsing heart model beats in sync with the live BPM. Switch between steady-state pacing and interval (HIIT) mode, which swings effort between hard work and easy recovery on a repeating cycle, and watch how each strategy moves the runner through different zones and accumulates calories differently over the same session.

⚙ Under the hood

Interactive heart-rate zone simulator: a runner circles a five-zone training ring while a pulsing heart model tracks live BPM. Tune effort, interval work/rest timing and age (max HR) to see how heart rate rises, recovers and burns calories in real time.

Three.jscardioheart-ratefitnessinterval-trainingsports-science

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)