React Video Hero with Chapters
Nobody watches a three-minute product video to find the forty seconds about their problem — they leave. Chapters turn the timeline from a blind bar into a menu: the visitor sees the section that names their use case and jumps straight to it.
The problem with blind yield data
Press play to run the simulated playhead, click a chapter to jump, or drag the scrubber. Each chapter shows its own frame.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| chapters | Chapter[] | { id, title, start, frame? } — start in seconds |
| duration | number | Total runtime in seconds |
| poster | React.ReactNode | Fallback frame when a chapter has none |
| onSeek | (seconds) => void | Wire to video.currentTime in real use |
The timeline is the feature
Chapter starts render as tick marks on the scrubber, so the structure of the video is visible before a single second plays — a reader can see there are four parts and roughly how long each runs. Clicking a chapter, clicking the bar, or focusing it and pressing ← → all seek, and the current chapter is derived from the playhead rather than tracked separately, so the highlight and the lower-third can never disagree with where you actually are.
The demo drives a simulated playhead — a requestAnimationFrame loop advancing a number — so the pattern is fully visible without shipping a video file, and each chapter shows its own synthetic frame so seeking visibly does something. In production you delete the simulation: render a real <video> as the stage, feed its timeupdate into time, and point onSeek at video.currentTime. Everything else — the ticks, the chapter list, the derived-active logic — stays exactly as is.
Write chapter titles as answers, not headings: "Live signal & spectrum", "Getting started in 5 minutes". The visitor is scanning for their own words.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.