shadcn.io is not affiliated with official shadcn/ui
Video Intro Dialog Onboarding Block for Svelte
A sketch-to-slides tool's intro dialog that never plays a video: a poster drawn as the editor with a playhead, four chapters as buttons, a collapsible transcript and one link to the real video.
Installation
Overview
Point people at a short video without pretending to play it, with this intro dialog for Svelte with Ark UI. It opens from the first deck of Hollowby, a sketch-to-slides tool: the page header holds an outline Button, Watch intro, and the editor with its blank deck is drawn under a soft scrim inside a hairline frame. The Dialog shows a poster drawn as the editor's own UI, with a play mark, the words “No video in this demo”, and a scrubber with a playhead. Four chapters sit beside it as buttons: pressing one moves the playhead, redraws the poster and changes the line of what you'll see. A Collapsible holds the transcript, and Open the video, the only Shine Button, is a link to where the real video lives. For preview the dialog is drawn open in place; Watch intro opens the real Dialog with the same content. For product intros, tutorials and any first-run video.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the editor: a native dialog element that isn't modal, so nothing is trapped or focused. Watch intro opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show TourContent and share the block's state, so a chapter picked in the copy is selected in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element.
Why doesn't anything play, and how do I add the real video?
A demo that fakes a player is worse than an honest poster, so nothing here is media: the poster is a drawing, and the chip says so. In your app point Open the video at the page or file where it lives (change the href), or replace the poster box with your player or an embed and drive the playhead from it: CHAPTERS already holds each chapter's start in seconds and TOTAL the length. Use a photo or frame from your own video only if you hold the rights to it.
What do the chapters do?
Each chapter is a toggle button, pressed while it's showing. Pressing one moves the playhead to its start, redraws the poster with that chapter's scene and rewrites the line under it, and a polite status message says the chapter, where it starts and that no video plays. They're plain buttons in a list, so Tab reaches each one; on a phone the list scrolls sideways under the poster.
How does the transcript work?
It's a Collapsible with a text button: closed by default, it opens a short scroll region with each chapter's words and start time. The region takes a tab stop so a keyboard can scroll it, and whether it's open belongs to the block, so it stays as you left it between the copy and the real dialog.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus starts inside it and stays there until it closes, and Escape, Maybe later and the close button all return focus to Watch intro. The trigger is the Watch intro button wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Maybe later and its close button close it and put focus on Watch intro.
How does it look on a phone?
The copy shown on load docks to the foot of the page as a bottom sheet with the poster over the chapter list, the actions pinned at the bottom and the body scrolling above them. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.