Running Head Folio

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<RunningHeadFolio />

Installation

npx shadcn@latest add https://webberui.com/r/running-head-folio.json

Usage

Wrap a number of RunningHeadFolioChapter elements in RunningHeadFolio; each chapter's title becomes the chapter name on the running-head bar. If the reading area is a nested scroll container, pass the container ref to container.

import {
  RunningHeadFolio,
  RunningHeadFolioChapter,
} from "@/components/ui/running-head-folio";

export function Reader() {
  const scrollerRef = React.useRef<HTMLDivElement>(null);

  return (
    <div ref={scrollerRef} className="h-[70vh] overflow-y-auto">
      <RunningHeadFolio container={scrollerRef} center="progress" startPage={1}>
        <RunningHeadFolioChapter title="Prologue">
          {/* chapter content */}
        </RunningHeadFolioChapter>
        <RunningHeadFolioChapter title="Chapter One">
          {/* chapter content */}
        </RunningHeadFolioChapter>
      </RunningHeadFolio>
    </div>
  );
}

center switches the middle field: "progress" shows a thin reading-progress line, "title" shows bookTitle, and "none" leaves it blank. The page number's presentation can be customized with format, for example as Roman numerals:

<RunningHeadFolio
  container={scrollerRef}
  center="title"
  bookTitle="Notes on Kinetic Typography"
  format={(p) => `p. ${p}`}
>
  {/* … */}
</RunningHeadFolio>

Props

RunningHeadFolio

RunningHeadFolioChapter

How it works

• Page number derivation: the useScroll progress is mapped onto [startPage, startPage + total pages − 1]; the total page count comes from the total content height divided by pageHeight, and when pageHeight is unspecified it takes one screen height of the scroll container, so "one screen is roughly one page".
• Current chapter detection: the bottom edge of the running-head bar is the baseline, and the last chapter whose top has crossed that baseline is the current one, so the chapter title switches exactly in step with the reading position.
• Flip direction: the flip direction recognizes the scroll direction — when incrementing downward the new value flips in from below, and when going back upward it flips away in reverse.
• Adaptivity: a ResizeObserver watches the content and container size, recomputing the total page count and the current chapter whenever the size changes.

Accessibility

• The running-head bar is marked role="status" with an aria-label, containing a plain-text summary (which chapter, which page) for assistive technology to announce; the visually duplicated flip content is marked aria-hidden so nothing is announced twice.
• Each chapter is a native section, and a string title becomes its aria-label.
• When "reduce motion" is enabled at the system level, the page-flip animation becomes a very short fade, and all other information and layout are fully preserved.