Wayfin: a menu that swims with you

What it does

Wayfin reads a page's headings and builds this menu by itself. Nobody typed it. Headings that already have an ID use it for their menu text (underscores turn into spaces, words get capitals); headings without one get an ID added and keep their own wording.

The highlighted item is the section you're in. The orange line down the rail fills like a water level as you read, and the underline under the current item shows how far through that section you are.

Headings without IDs

This heading had no ID, so Wayfin added headings_without_ids and kept its words as written. Hover it and a small hook appears: click it to copy a link straight to this spot.

Goats can and will eat a hat while you are still wearing it. That has nothing to do with menus, but this section needed a second paragraph so there's something to read.

This heading's text is ignored

This one had an ID, separators_and_groups, so the menu shows that instead. Because this <section> holds three headings and has an ID of its own, the menu groups them under a separator: Getting Started.

With Fold Groups on, only the group you're reading stays open. Everything else folds up to its separator, which still links straight to the group's first heading.

The swimmer

This section has no ID, so its first heading became the separator itself. That's the swimmer's whole job: ride the rail at your reading position, turn to face the way you're scrolling, and wag a little faster while it moves.

Pick a species

Fish, clownfish, pufferfish, shark, Hawke the goat, Tancho the horse, or your own image. Sea creatures swim along the rail; the land animals stay upright, face the way you're going and hop. Open Tune the tank to try them.

Bubbles trail the swimmers. The goat and horse kick up dust instead, which is only fair.

The school

Spend a little time in a section and scroll past it, and it earns a read marker: a check in the menu and a filled dot on the rail. Every section read also adds a tiny follower to the swimmer's school, so long reads end with a crowd.

Quick jumps through the menu don't count. A section has to be scrolled past and actually spent time in, about a third of its reading time.

The finish

Reach the very bottom of the page and the swimmer celebrates. The fish does a flip, the pufferfish puffs up (spikes and all), and the land animals do a happy hop. The timer under the menu tells you how far there is to go.

Sonar

Click any menu item or use the keys and you'll see rings pulse out from the heading you land on, so your eye knows exactly where to look. With Ping Sound on, you'll hear a soft sonar blip too. Browsers only allow that after a click or keypress, so it never plays by itself.

Visitors who ask their device for reduced motion get a single soft glow instead of rings, instant jumps, and a swimmer who holds still.