shadcn.io is not affiliated with official shadcn/ui
Mixed Media Stage Gallery Block for Ark UI
One stage that changes its controls with the file: a zoom slider for an image, a storyboard with Play and a scrub slider for a video, a waveform for audio, and page buttons for a document.
Installation
Overview
One stage, four kinds of controls, for React with Ark UI, for Postroom, a press-kit host. A split puts a header and a framed stage at the start and, past the divider, a ruled column of six files; on a phone the files are a snap row under the stage. Choose a file and the stage swaps its drawing and its own controls: an image gets a Zoom slider and Reset; a video a storyboard strip, a Play toggle and a scrub slider; an audio clip a waveform with a playhead, Play and a scrub slider; a document Previous, Next and a page count. Nothing plays for real: Play steps through the drawn frames and bars once every second and a half, can be paused, and stops at the end. The stage never changes size. Pictures are drawn, never photographed. It's built from Slider, Toggle, Button and Guides.
FAQ
What are the four kinds of controls?
Image: a Zoom slider (100 to 300 per cent in steps of ten) and Reset, with the picture scaling from its centre. Video: a storyboard of eight drawn frames with the current one ringed, a Play toggle, a Position slider and the time. Audio: a waveform of 48 bars, the ones before the playhead solid, with Play, the Position slider and the time. Document: Previous and Next, disabled at the ends, and "Page 2 of 5".
Does Play really play something?
No. There is no media, only drawings. Play moves the position one step every 1.5 seconds (a bounded interval that starts when you press it, so it also runs under reduced motion), pressing it again pauses, and it stops by itself at the end; pressing Play at the end starts over. Each file remembers its own position when you move to another and back.
How do the sliders work for a keyboard?
Does the stage change size between files?
No. The picture area is always 16:9, the strip row and the controls row always have the same height, and a document is drawn as a page inside the same box. Choosing a file only changes what is drawn and which controls show.
How do I use my own pictures?
The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the picture's own so the layout doesn't change. Replace the stage's Drawing and each entry's Scene; a real video or audio element can sit in the same stage box.