shadcn.io is not affiliated with official shadcn/ui
Podcast Episodes Testimonials Block for Ark UI
Three podcast episodes as ruled rows, each with a play button that sweeps a darker wave across its waveform, a guest's pull quote and the episode's length.
Installation
Overview
Turn long customer conversations into social proof people can sample. A compact header names the show (The Cutover Hour, a fictional customer podcast) and holds the block's one Shine Button, "Subscribe to the show". Below it the three episodes are rows of one band, each ruled with a solid hairline and a + mark on both ends, split by a divider that lines up from row to row. On one side of the divider sit the episode number, title and length with a round outline play button; on the other, a waveform, the one line from the guest that the show keeps quoting, and their name and role. Pressing play sweeps a darker wave across the waveform in eight seconds and then resets; pressing it again stops it, and starting another episode stops the first. It's a demo player, and a line under the band says so: no audio plays. It's built from Button, Avatar, Badge, Guides and Shine Button, with Lucide icons, one CSS transition for the sweep and your theme's tokens. For landing pages, podcast sites and "customers on the record" sections.
FAQ
How do I play real audio?
Add an audio field to each episode in EPISODES and render an <audio> element for the one that is playing, or hold one Audio object in a ref. In toggle, call play() or pause() next to setPlaying, and call finish from the audio's ended event instead of letting the transition end it. For the sweep to match the real length, change duration-[8000ms] in SWEEP to the episode's running time, or drive the layer's clip-path from timeupdate.
How is the waveform drawn, and how do I use my own?
Each episode has a wave list of bar heights in percent, wrapped by bars() so every bar has a stable key. The same bars are drawn twice: a muted layer, and a layer in the foreground colour above it. The top layer is clipped away at rest, and playing transitions its clip-path open from the start of the line, so in right-to-left languages the sweep runs from the right. Export your own peaks from your audio tool as 48 numbers between 0 and 100 per episode.
Can people pause or stop it?
Yes. The play button is a toggle: it shows a pause mark while its episode is playing and stops and resets the waveform when pressed again. Only one episode plays at a time. Nothing starts on its own, so there is no autoplay to stop.
What happens with reduced motion?
The sweep does not animate: pressing play shows the waveform at the halfway point and holds it until the button is pressed again, since there is no moving playhead to run to the end.
How do screen readers and keyboards use it?
Each play button is named "Demo player: episode 14, The migration that took one weekend" and announces whether it is pressed, and Space or Enter toggles it. A hidden polite status line says "Playing a silent demo of episode 14", "Stopped the demo" or "The demo ended" after a press, and says nothing on load. The waveform is decorative and hidden. Each pull quote is a figure with a blockquote and a figcaption; the episodes are an ordered list.
How does it fit a phone, and a right-to-left page?
On phones each row stacks (the episode, then the waveform and quote), the waveform's bars shrink to fit the row, and nothing scrolls sideways at 320 px. In right-to-left languages the layout and the sweep mirror, while the play mark keeps pointing forward and each episode number, length and quote keeps its own order through bdi.