Gradient thumbnail with a circled play button and duration badge.
2:48Product tourRequires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Media2 } from "@/components/beste/piece/media2";
<Media2
src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&fit=crop"
alt="Sunlight through a forest canopy"
duration="2:48"
title="Product tour"
tone="ocean"
/>
Live1.2KLaunch Week · Day 3Video thumbnail with a pulsing LIVE pill, viewer count, and a title caption at the bottom.
Image frame with arrow controls, a slide counter, and position dots.
Artwork with a mic overlay, episode title, host and duration, plus a round play button on the right.
Compact player bar with artwork, track details, a progress line, and a play toggle.
Square artwork with a bold title and artist name below. Gradient tone fallback when no image.
Running a calmer front desk
The Sirius Podcast · Ep. 12
A compact audio player with a play button, an episode title and series line, a waveform progress bar, and elapsed and total times.