Contents rail
A table of contents whose line is also the scroll bar: the stretch that lights up is the part of the page on screen, mapped section by section onto the contents.
Leaving the village
Mougins sits on its hill like a snail shell, the lanes winding round and down from the church. Early on, before the restaurants set their tables out, the only sound is the swifts and a delivery van somewhere below, reversing.
The way out is the way the water goes: downhill, through the gate at the bottom of the old town, past the wash house and onto the road that follows the ridge south.
The old road
Before the motorway and the bypasses there was one road from the hills to the coast, and most of it is still there if you look for it, a lane between walls that the cars long ago gave up on.
Olive terraces
The slopes either side were terraced for olives centuries ago, and some still are: dry stone walls holding up strips of red earth, the trees silver when the wind turns their leaves.
Nobody seems to harvest the ones by the road. In November the fruit falls and stains the tarmac purple, and the blackbirds get drunk on it.
Higher up the terraces have gone back to scrub, broom and rosemary and the odd cork oak, and the walls are slowly coming down, a stone at a time.
The chapel
Notre-Dame-de-Vie stands at the end of an avenue of cypresses, on its own above the valley. Picasso spent his last years in the house next door; the chapel was there three centuries before him and looks set for three more.
Through the valley
From the chapel the path drops steeply into the valley, and the temperature drops with it. Down here there are oaks and a stream you hear long before you see, and the light comes through green.
This is the longest stretch, and the quietest. The path follows the stream for a while, crosses it on stepping stones that are under water after rain, and climbs out the other side through a wood that smells of pine resin in summer and mushrooms in autumn.
Halfway along there's a bench someone carried down here, with a plaque too weathered to read. It's a good place to stop. The traffic on the main road is a murmur, a long way off, like the sea.
Then the path widens into a track, the track becomes a road with a name, and there are letterboxes, and a dog behind a gate who has opinions about walkers.
Le Cannet
Le Cannet runs down its own hill towards Cannes, steeper than Mougins and busier. Bonnard painted here for twenty years, the same garden and the same bay over and over, in colours nobody else saw in them.
Lunch
Find a square with plane trees and a café with the plat du jour chalked on a board outside. It will change tomorrow, or it won't.
Order the pissaladière if it's on. Sit outside, under the trees, and watch the schoolchildren go home for lunch and come back again.
The sea
The last part is all downhill, through streets that get grander and closer together until suddenly they stop, and there's the bay, too bright to look at for a moment.
Eight kilometres, give or take, and most of the day. The bus back up takes twenty minutes. Nobody would blame you for taking it.
// Each section of the page maps onto its own entry of the contents: a point
// halfway through a section sits halfway down its entry, however long the
// section is. Before the first heading counts as the first.
export function toRail(y: number, page: Page, entries: Entry[]) {
if (y <= page.sections[0]) return entries[0].top;
const index = sectionAt(y, page);
const start = page.sections[index];
const end = page.sections[index + 1] ?? page.height;
const through = clamp((y - start) / Math.max(1, end - start), 0, 1);
return entries[index].top + through * (entryEnd(entries, index) - entries[index].top);
}
// The line bends in beside nested entries, so a height on the rail becomes a
// distance along the line, and the lit stretch is a dash of that length.
const from = lengthAt(points, toRail(view.top, page, entries));
const to = lengthAt(points, toRail(view.top + view.height, page, entries));
highlight.style.strokeDasharray = `${to - from} ${total}`;
highlight.style.strokeDashoffset = `${-from}`;One section, one entry
A scroll bar maps the page onto its track in proportion: a section twice as long gets twice the track. A table of contents gives every section the same room, however long it is. The rail does both at once. The page is cut at its headings and the line at its entries, and each section maps onto its own entry, so a point halfway through a section lights the line halfway down its entry. Through a long section the lit stretch creeps, through a short one it hurries, and it always says which section you're in, which a scroll bar never does.
There are three ways to show it. What's on screen lights the stretch the screen covers, from its top edge to its bottom edge, so it grows across a boundary and shrinks again. How far fills the line up to where you're reading, and Where is a single dot. For those two, the reading point is a line a fifth of the way down the screen, where a heading you jump to lands, and it slides to the bottom edge over the last screenful, so the closing sections can be reached even though they never scroll that high.
Bending with the contents
Nested entries step in, and the line steps in with them, on a short diagonal either side of the boundary. A height on the rail then becomes a distance along a path rather than down a straight line, so the lit stretch is drawn as a dash of the path's stroke, its length and offset worked out from the path's own geometry, with round ends that follow the bends. The line only ever goes down, so each height has exactly one point on it.
Positions are measured once, and again when the text reflows; scrolling then only maps numbers and writes a dash, once a frame. On a phone the titles give way to a tick for each section, and the line still shows where you are.