shadcn.io is not affiliated with official shadcn/ui
Video Poster Features Block for Ark UI
A features section built around one screen-recording poster drawn in UI, with a caption bar and chapter ticks, over three cells tagged with the timestamps of its chapters.
Installation
Overview
A features section for React with Ark UI, built around one video poster. A framed figure shows a still from a screen recording of an expense tool: a receipt held over a drop zone with scan corners and a cursor, the report beside it with a new row waiting, a caption bar that reads "Drop receipts to start" and a control bar with a play pill, the time and three chapter ticks. Under it, three cells carry the timestamps of those chapters (0:12, 0:41 and 1:20), each with a title and a sentence. Nothing plays and nothing is state: the poster is a drawing with a text alternative, so the block is a server component. It's built from Timecode Text, Badge and the Guides line kit, with your theme's tokens for every colour and no primary button.
FAQ
How do I put a real video behind the poster?
Replace the drawing inside the figure with your own video element and poster image, and keep the three cells as the chapter list. The control bar here is part of the drawing, so remove it if your player draws its own. Keep a text alternative or a caption track for the recording.
How do I change the chapters?
Edit CHAPTERS at the top of the file: each has a time in seconds, a title and a sentence, and LENGTH is the recording's length. The ticks on the control bar, the timestamps on the cells and the small marker on each cell's ruler are all placed from those numbers, so they can't drift apart.
What is the time on the control bar?
It is the Timecode Text component, paused on the frame the poster shows (twelve seconds in), without frames. It's decoration, so it doesn't run and doesn't change.
What does a screen reader get from the poster?
The poster is one image with a text alternative that describes the scene and the caption, so the drawing's small text isn't read out piece by piece. The chapters are written out in the three cells, which are a real list with a heading each.
Why is the receipt not in colour?
Everything in the poster is drawn in greyscale from your theme's tokens, with only the caption bar, the play pill and the toolbar chip filled dark, so the block follows light and dark themes and every preset. The receipt is a mono-spaced card with a torn foot and four scan corners.