Marketing Sections
v1.0.0Added in 1.7.0
A product video block with no video file: a drawn poster whose play button opens an animated, chaptered walkthrough.
The poster is a browser window drawn in code with a small Acme board inside, a round play button and a "Watch the tour" pill with the length; the ring around the play button breathes (off with reduced motion or pulse off). Click or tap the poster (Enter or Space on the keyboard) to open the tour in a dialog, a bottom sheet below 768px; clicking a chapter opens it at that chapter. With no media the dialog plays a drawn walkthrough: each chapter animates its own scene (cards move on the board, a spec writes itself, an automation runs step by step, a chart grows), a segmented bar fills and the clock counts through the chapter's real timestamps, then it moves to the next chapter and offers Replay at the end. Previous, play / pause and next buttons sit under the stage, the chapter list beside it (under it on phones) jumps to any chapter, and the arrow keys skip chapters while K plays or pauses. Chapter changes are announced to screen readers. With reduced motion the tour starts paused and scenes appear without movement. Escape, the close button or a drag down on the sheet close it and focus returns to what opened it. Layouts: centered puts chapter cards under the player; split keeps the heading and a chapter list beside the player; chapters places a chapter panel with descriptions next to the player (under it on phones).
npx wingo-ui@latest add video-sectionPro item: the CLI needs a Pro account. See plans