Split Panel Video Player Preview CTA Block for React

Edit CHAPTERS at the top of the file. Each chapter has an id, the tab's label, its length in seconds, a title, a summary and a list of what you will see. The lengths are shown as minutes and seconds, and the total next to the button is their sum, so the numbers never disagree. Keep the list to about three chapters: the tabs share the card's width and fit down to 320px.

No. The poster is a picture of one: a small drawing of the product's window under a play mark, and nothing in it is clickable. It is hidden from screen readers, since the tabs hold the same information, and it never takes focus. The Shine Button is the link that opens your video, so point its href at your demo page or player. To show a real thumbnail, put an img with object-cover inside the AspectRatio, in place of the GridPattern and the drawn window. On Base UI, the Shine Button renders its link with render={<a href="…" />} and nativeButton={false}.

They are our Tabs, controlled by the block so the poster can follow them: the arrow keys move between chapters, Home and End jump to the first and last, and the panel below is a tab stop of its own. Each tab opens its own panel, rather than a button that only changes a caption.

No. Only the open panel is in the page, so each panel carries an invisible, screen-reader-hidden copy of every chapter's detail stacked in the same grid cell. The panel is always as tall as the tallest chapter, and the poster and the buttons around it stay where they are.

The tab list is named Demo chapters, with each tab named by its label. The open panel reads its title as a heading, its sentence, and its list of what you will see, with the chapter's length. The play mark, the poster's caption and the length chip are decoration, and so are the checklist ticks.

The columns fade and rise in once, and the tab underline slides between chapters. It's all CSS, with no animation library and no autoplay. With reduced motion on, the entrance is off and the underline jumps.