DEV Community

Dor
Dor

Posted on

I built a tool that races you against the marathon world record

#javascript #webdev #showdev #css

A quick fun one. I took the running app I work on, pulled out the Daniels-Gilbert VDOT model, and wired it to a question every runner secretly wonders: if you and the world-record holder started together, where would you be when they finish?

You put in one race result. It predicts your equivalent time at 5K, 10K, half, and marathon, then animates a little race for each: your runner and the pro both set off down the track, the pro reaches the finish line, and a green bar fills up to wherever you are when they cross it. The marathon one is brutal. For a 22:00 5K runner, Sabastian Sawe finishes his 1:59:30 marathon while you are still about 18 km from the line.

Try it: https://runnerapp.pro/tools/vs-the-pros

A few build notes for anyone doing similar:

The math is tiny. VDOT is two equations (an oxygen-cost curve and a percent-of-max-you-can-hold curve) plus a bisection to invert it. I open-sourced that part: https://github.com/dortaldt/vdot-runner

The animation is just CSS custom properties + transitions. Each lane sets --up (your position) and --p (the pro at 100). The runner markers transition left, and a fill div transitions width, both driven by the same variable:

.track-fill { width: min(calc(var(--up,0) * 1%), 100%); transition: width 1.9s cubic-bezier(.22,.61,.18,1); }
.runner.you { left: min(calc(var(--up,0) * 1%), calc(100% - 26px)); transition: left 1.9s; }
Enter fullscreen mode Exit fullscreen mode

Set the variable to 0 in markup, then to the target in a double requestAnimationFrame so the transition actually fires:

requestAnimationFrame(() => requestAnimationFrame(() => {
  fill.style.setProperty('--up', pct);
  you.style.setProperty('--up', pct);
  pro.style.setProperty('--p', 100);
}));
Enter fullscreen mode Exit fullscreen mode

No signup, no tracking, all client-side. The whole thing is one HTML file. Runner figures are inline SVG (SF Symbols are licensed to Apple platforms only, so they are not legal on the web, which trips people up).

It is a toy, but it is the kind of toy runners screenshot and argue about. Curious what percentage you land at.

Top comments (0)