Scrubber
A scrollbar that knows where the sections are.
It ran at the bottom of every case study: a thumb for where you are, a tick for each section, and a card naming the one you are in. Drag it, click it, or scroll the page under it.
What it is
A 234px bar with a brand-blue thumb that tracks the scroll. Each section gets a darker tick placed where that section takes over, and hovering the bar previews the section a click would land on.
Why I needed it
A long case study needs a way to see how far you are and to jump ahead. A native scrollbar shows the first but not where anything is.
How I did it
The ticks are one SVG sized in device pixels, so every tick lands on a whole pixel at any screen scaling. It was replaced on the case studies by a side index that reads its sections from the page itself.