Chaptered Origin Story About Block for React

The chapters are CHAPTERS at the top of the file: each has an anchor (the id the index links to, so keep it unique on the page), a title and an array of paragraphs. The chapter numbers come from the order. The index is built from the same list, so adding or removing a chapter updates both.

It is the Toc component: its items are the chapters' headings, a bar slides to the one in view as you scroll, and each entry is a normal anchor, so it works with a keyboard and without script. On wide screens the index is sticky and stays beside the chapters. On phones it is replaced by a row of plain anchor chips, which jump to the same headings.

The title is the only h2 and each chapter is a section labelled by its h3, which carries its number as text ("Chapter 1: The spare room"). The index is a navigation landmark with a list of links; the phone chips are a second navigation landmark with its own name, shown only on small screens. The bands and the divider are decorative.

The title and a one-line summary come first, then the chips, then the chapters one under another with a rule between them. The chips scroll sideways inside their own row, and the page does not. Nothing overflows at 320 pixels, and in a right-to-left layout the divider, the bar and the link's arrow all follow the direction.

Calendar years go stale and make the story sound dated. The chapters count from the start ("that first winter", "two summers later"), so the story stays true as time passes. Add a date in the prose if one matters to your story.

The title and the chapters fade up once on load with CSS transitions, and not at all with reduced motion. The index's bar moves between chapters as you scroll, and with reduced motion it jumps instead of sliding.