Anatomy

The component has three visual zones. At the top, a centered header with a pill badge (Headphones icon + "Podcast" label), a podcast name heading and a short description. Below it, a featured-episode card with guest/date metadata, a title and description, then a horizontal row holding the play/pause button, the WaveformBars sub-component, and the episode duration. At the bottom, a scrollable vertical list of smaller episode rows, each with a circular play icon, an episode title, a duration and a date.

How it works

The WaveformBars sub-component receives a single `playing` boolean. On mount, useMemo generates an array of 40 random heights (between 20 and 100% of 48px) that never change between renders, so the bars look consistent. When `playing` is false each bar renders at its fixed height via a simple 0.3s transition. When `playing` flips to true, each bar's `animate` prop receives a three-keyframe height array and a random duration between 0.4s and 0.8s with `repeat: Infinity, repeatType: "reverse"`, creating the staggered, organic waveform pulse. The bars in the first 40% of the array use `--color-accent` to hint at "played" progress, the rest use `--color-border`.

How to build it in React

1. Build the WaveformBars sub-component

   Create a component that accepts `playing` and an optional `barCount` (default 40). Use useMemo to generate the random height array once. Map over it and render a motion.div per bar, giving each one a fixed `minWidth: 2` and `maxWidth: 6` so the bars pack tightly into the available space.

   const heights = useMemo(
     () => Array.from({ length: barCount }, () => 20 + Math.random() * 80),
     [barCount]
   );

2. Switch between static and animated states

   Pass different `animate` props depending on the `playing` flag. When false, animate to the fixed pixel height. When true, pass a three-value keyframe array so Framer Motion loops it automatically. Each bar gets a randomised duration to break visual synchrony.

   animate={playing
     ? { height: [h * 0.3, h * 0.01 * 48, h * 0.5 * 0.01 * 48] }
     : { height: h * 0.01 * 48 }
   }
   transition={playing
     ? { duration: 0.4 + Math.random() * 0.4, repeat: Infinity, repeatType: "reverse" }
     : { duration: 0.3 }
   }

3. Assemble the featured-episode card

   Render the guest name, date, episode title and description above the player row. The player row is a flex container: the circular accent play/pause button on the left, the WaveformBars with `flex: 1` in the middle, and the duration string on the right. Manage play state with a single useState boolean and toggle it on button click.

   const [playing, setPlaying] = useState(false);
   // ...
   <button onClick={() => setPlaying(!playing)} aria-label={playing ? "Pause" : "Lecture"}>
     {playing ? <Pause /> : <Play />}
   </button>
   <WaveformBars playing={playing} />
   <span>{feat.duration}</span>

4. Add the episode list with staggered entry animations

   Map over the episodes array and render each as a motion.button (for keyboard accessibility). Set `initial={{ opacity: 0, y: 10 }}` and `whileInView={{ opacity: 1, y: 0 }}` with a delay of `0.12 + index * 0.05` seconds so the rows cascade in as the user scrolls down to the section.

When to use it

Reach for it on blog or editorial sites that publish audio content: podcast landing pages, interview-driven newsletters, or media brands that want to showcase episodes without redirecting readers to Spotify. It fits between a featured article and a newsletter CTA. Skip it if your site has no audio content at all, and remember the waveform is decorative, connect a real audio source before shipping to production.

Used by

• Spotify, Waveform-style scrubbers and animated bars signal playback state across its web player and podcast pages.
• Transistor, Embeddable podcast players with animated waveform previews used by thousands of independent podcasters.
• Substack, In-post audio players with a minimal waveform UI let writers publish spoken editions of their newsletters.
• Overcast, Compact episode list cards with metadata (duration, date, guest) mirror the layout pattern of the component's episode list.

FAQ