The Long Way Round
A walker, a runner and a cyclist scroll one lap of the Earth
- Category
- Data Story
- Status
- Live
- Role
- Solo build
- Date
- 2026-09-18
- Built with
- Vite, React, React Three Fiber, three.js, zustand, Vitest
A scrollytelling piece in which a walker, a runner and a cyclist travel one lap of the Earth — 40,075 km — side by side. Scroll is distance, at 8 px per metre. All three are always at the same kilometre, so the question is never who is ahead but what the distance cost each of them: time, calories and pizza slices.
Problem: Walking, running and cycling are usually compared in a table, and a table cannot make anyone feel 40,075 km. Racing the three against each other only answers who is fastest, which everyone already knows.
Solution: Keep all three movers at the same distance for the whole lap and make scroll the distance, so the only thing that differs is the cost. One 285 kcal cheese pizza slice is the single food unit: it buys the runner 4.4 km, the walker 5.4 and the cyclist 10.2.
Outcome: Live at the-long-way-around.sankettambare.in. Five figures the sources disagree on are flagged on their own cards and in the sources drawer rather than quietly rounded, and 19 assertions check the model against the spec.
- A virtual scroll engine fits a ~320-million-pixel journey inside a 4,000,000 px page — native scroll, nothing scroll-jacked
- 18 milestones, from the first pizza slice to Comrades to a full lap, with card copy computed from one model so the text cannot drift from the numbers
- A canvas-2D tier paints first and a lazy-loaded three.js scene upgrades over it; with no WebGL or reduced motion the flat tier is the whole experience
- The model caught an error in the source spec: the cyclist takes 83 days, not 84
Tags: #data visualization, #running, #three.js, #claude code