TOC demo

This experiment is about editorial rhythm. A table of contents should help you navigate without pulling attention away from the article itself.

const headings = useHeadingsObserver();
 
return (
  <aside className="sticky top-20">
    {headings.map((heading) => (
      <a key={heading.id} href={heading.href}>
        {heading.label}
      </a>
    ))}
  </aside>
);

The interaction stays simple: as you scroll, the active section updates smoothly and gives the page a clearer sense of structure.