Podcast website
A dark-theme podcast site with an acid recording light: a header with a “now playing” chip, an episode-of-the-week player with a live waveform and chapters, an episode list where duration is bar length, quote marquees running towards each other, guests as an endless lane, count-up stats and tilting platforms, support tiers over the studio photo, a post-episode letter with an envelope flip, a footer with a giant wordmark and a bottom mini-player that ties everything together with events. Sofia Sans Extra Condensed, Inter Tight and IBM Plex Mono.
A show site built for listening: an episode-of-the-week player with chapters, an episode feed where length shows as a bar, quotes and guests in marquees and a subscription to new episodes. The podcast in the demo is made up.
What it is made of
10 catalog blocks in page order. Each one is installed with its own command; nothing is recreated.
1. Header
Podcast header with a “now playing” chipnavbar-029
Wordmark, sections, a “now playing” chip fed by the mini-player, glass on scroll.
2. Episode of the week
Podcast hero with a player and a live waveformhero-029
Cover, poster headline, play, a bar waveform, a timer and chapters.
3. Episodes
Episode list where duration is bar lengthpodcast-004
Duration as bar length, hover expands the description, play emits an event to the player.
4. Quotes
Quotes as marquees running opposite wayspodcast-005
Two marquees running towards each other, paused on hover.
5. Guests
Guests as an endless lane that pauses on hoverpeople-013
An endless lane of portraits with episode numbers, stopping under the cursor.
6. Where to listen
Where to listen: count-up stats and tilting platformspodcast-006
Stats count up, platform tiles tilt towards the cursor.
7. Support
Podcast support tiers with a monthly/yearly switchpricing-023
Three tiers over the studio photo, a monthly/yearly switch.
8. Letter
A letter after every episode, with an envelope flipsubscribe-008
One field, “what's inside” and a flip into “noted”.
9. Footer
Podcast footer with a giant wordmarkfooter-028
A host card, platforms, RSS and a full-width wordmark.
10. Mini-player
Bottom mini-player driven by eventspodcast-007
A bottom bar: appears on an event from the list, broadcasts state.
Pro
The exact composition, page source and agent link are in PRO
The demo and the block list are open to everyone. Subscribers see every block's props as in the demo, the theme rules, the image prompts and one link an AI agent uses to build the same page.
Get PROFAQ
- What is the “Podcast website” page made of?
- 10 catalog sections in order: Podcast header with a “now playing” chip, Podcast hero with a player and a live waveform, Episode list where duration is bar length, Quotes as marquees running opposite ways, Guests as an endless lane that pauses on hover, Where to listen, Podcast support tiers with a monthly/yearly switch, A letter after every episode, with an envelope flip, Podcast footer with a giant wordmark, Bottom mini-player driven by events. Each one is a separate VibeUI item.
- How do I build this page with an AI agent?
- Press “Copy the scenario for AI” and paste it into Cursor or Claude Code: the agent gets the page source, shared theme rules and image prompts, and installs every section from the registry with the shadcn CLI.
- Is the scenario free?
- The live demo and the list of sections are open to everyone. The page source and the instruction for the agent come with PRO.