Dock-style navigation with scrollspy and a sliding pill highlight. Vanilla JS + CSS, zero dependencies. Scroll down — the active item in the dock follows the section in the center of the screen.
Scrollspy, a sliding pill that follows hover and rests on the active
link, an entrance animation, full keyboard and
prefers-reduced-motion support, and CSS-variable theming —
all in about 2 KB.
An IntersectionObserver with a center-band
rootMargin highlights the section actually in the middle of
the viewport, not the one that merely touched an edge.
Reload the page to watch the capsule rise from the bottom and expand, with the items staggering in. The pill waits until the layout settles, so it never flashes out of place.
Hover the links to see the pill follow your cursor. The whole look is
driven by CSS variables on .ftoc — swap colors, radius,
spacing, and stagger timing without touching the JS.
The active link carries aria-current, focus moves the pill,
and every animation is disabled when the user prefers reduced motion. On
mobile the dock becomes a horizontal scroller that auto-centers the
active item.