shadcn.io is not affiliated with official shadcn/ui
Story Film Chapters About Block for React
A video host's story film as a split: a drawn player poster whose picture, title and playhead follow the chapter you pick, beside the chapters and their time stamps.
Installation
Overview
A story film for React with Base UI, written for Filmloft, a fictional video host, about its own first year. A split with a divider. At the start, a drawn player poster in a frame: the film's name, a still picture for the open chapter, its title, a paused timecode and a scale of the chapters with a playhead. At the end, the chapters are an ordered list of buttons, each with its timecode, its title and a line, and a Shine Button, "Watch the film", that is a link. Picking a chapter moves the playhead, swaps the picture and retitles the poster, and the page does not jump. The third chapter is selected on load. On a phone the poster sits above the list. It's built from Shine Button, Timecode Text and Guides, with a CSS entrance on the header and your theme's tokens for every colour. For an about page that wants a film without embedding a player. The chapters and the stills are example data, and nothing is played in the block.
FAQ
How do I change the film and the chapters?
CHAPTERS holds each chapter's id, its title, its line and where it starts, in seconds. FILM_SECONDS is the length of the whole film, and it must be longer than the last chapter's start. The playhead's place is that start divided by the length, and each chapter's width on the scale is the time until the next one. The stills are scene components, one per id. OPEN is the chapter selected on load.
Can someone watch the film here?
The poster is a drawing, and the chapter buttons only move that drawing. "Watch the film" is a link, so point href at the hosted film. The time stamps are a Timecode Text that holds still, with the frames turned off, so they read as hours, minutes and seconds. The scale is drawn left to right in every direction, so the playhead still runs from the start of the film toward the end.
How does the keyboard work?
Tab moves through the five chapter buttons and the link. Enter or Space selects a chapter. The selected button keeps a bar on its start edge and is marked as current, and a status line announces the chapter you picked.
Related
- Pro
Podcast Show Notes About
Press and recognitionShow notes for a podcast hosting company's own show: a scrolling vertical list of eight episodes at the start and the chosen episode's notes at the end, with a summary, chapters drawn to scale and listed with time stamps, and a Listen link.
- Pro
Image Overlay About
Company storyA photo editor's tagline over its own product shot: a heading, a greyscale drawing of the editor in a framed figure with a caption panel floating over its foot and one ghost link, and a strip of figures since the first customer.
- Pro
Chaptered Origin Story About
Company storyA company's origin story as four long chapters of prose beside a sticky chapter index that follows the reader, turning into a row of chips on phones.
- Pro
Centered Story About
Company storyA founding story told as one centred long read: a heading and byline, a first paragraph with a drop cap, a pull quote on a band ruled rail to rail, then the rest in a readable column ending on a closing line and a link.
- Pro
Alternating Chapters About
Company storyA company story in three alternating split rows, each with a time, a title, a paragraph, a one-line metric, a pull quote and a greyscale drawing of the product at that chapter, the sides swapping row to row.
- Pro
Two Column About
Company storyA freight forwarder's story in two columns on a solid divider: prose at the start, and six figures at the end as a description list with numbers that roll up once on view, one ruled row each.