## Chapter Features (S—477)

Feature chapters that play themselves: the active one expands while its rail fills, and a stage wipes to a live scene for it.

- URL: https://sundaeui.dev/components/chapter-features
- Category: Page sections · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/chapter-features.json`
- Tags: tabs, saas, autoplay, section, animated, react, landing-page, features

Each feature is a chapter. The active one opens to its full description while a thin rail fills in time with the autoplay clock; when the rail is full the next chapter begins. Hover, keyboard focus or scrolling the section out of view pauses it, and any chapter can be opened directly.
Beside the list, a stage wipes upward to that chapter’s scene. The built-in scenes are small product moments rather than icons: a search that types itself and returns results, permissions switching on one by one, a chart whose bars grow into place, and a deploy log that ticks through its steps to Ready.
Pass a visual per chapter to show your own screenshots or UI. Light and dark (.dark), one CSS file, no animation library; under prefers-reduced-motion it stops autoplaying and shows each scene in its finished state.

### Usage

```tsx
import { ChapterFeatures } from '@/components/sundae/chapter-features'

<ChapterFeatures
  title="Everything in its place, the moment you need it."
  chapters={[
    { title: 'Find anything in a keystroke', body: 'One search across…', visual: <img src="/search.png" alt="" /> },
    { title: 'Access that matches the org chart', body: 'Roles with plain-language permissions.' },
  ]}
/>
```

### Props

- `title` (`string`, required): Section heading.
- `chapters` (`{ title: string; body: string; visual?: ReactNode }[]`, required): Three to five chapters read best.
- `eyebrow` (`string`, default `'Features'`): Label above the heading.
- `intro` (`string`): Supporting paragraph.
- `interval` (`number`, default `5200`): Milliseconds each chapter plays.

### Accessibility

- Chapters are buttons with aria-expanded and aria-controls pointing at their scene.
- Autoplay pauses on hover, on keyboard focus and when the section is off screen.
- Inactive scenes are aria-hidden; reduced motion turns autoplay off.