Skip to content
Track: A Scroll-Paced WebGL Run by Hiroto Sato

Track: A Scroll-Paced WebGL Run by Hiroto Sato

Scroll the page and an athlete runs forward. Stopwatch climbing, meters racking up, quotes from sports icons surfacing as you earn them. Hiroto Sato's TRACK pairs WebGL with GSAP and paces its reveals to distance instead of viewport position.

Details

Published

What it is

Hiroto Sato's TRACK is a WebGL scroll experience that ties an athlete's forward motion to your wheel, with a stopwatch climbing in the corner, meters racking up beside it, and quotes from sports icons surfacing as you earn them. The first one, Usain Bolt's "I don't think limits," lands when the page decides you've put in the work.

The stack is Three.js plus GSAP doing the choreography, and the interesting move is that the reveals feel paced to distance rather than viewport position, which gives the thing its metronome quality instead of the usual snap-on, snap-off you get from scroll triggers. Open DevTools and watch the GSAP timeline scrub as you drag.

How it’s made

Technology
WebGL
Framework & Tool
GSAPThree.js
Subject
Sports