Сайт подкаста
Сайт подкаста в тёмной теме с кислотным индикатором записи: шапка с чипом «сейчас играет», плеер эпизода недели с живой волной и главами, лента эпизодов, где длительность — длина полосы, цитаты бегущими строками навстречу друг другу, гости бесконечной лентой, статистика count-up и платформы с наклоном, уровни поддержки на фоне студии, письмо после выпуска с переворотом конверта, подвал с огромной словомаркой и мини-плеер, который выезжает снизу и связывает всё событиями. Sofia Sans Extra Condensed, Inter Tight и IBM Plex Mono.
Сайт шоу, где главное — слушать: плеер эпизода недели с главами, лента выпусков, где длительность видна по полосе, цитаты и гости бегущими лентами, подписка на новые эпизоды. Подкаст в демо придуман для примера.
Из чего собрано
10 блоков из каталога, в порядке появления на странице. Каждый ставится своей командой; ничего не пересоздаётся.
1. Шапка
Шапка подкаста с чипом «сейчас играет»navbar-029
Словомарка, разделы, чип «сейчас играет» от мини-плеера, стекло при прокрутке.
2. Эпизод недели
Первый экран подкаста с плеером и живой волнойhero-029
Обложка, плакатный заголовок, play, волна из полосок, таймер и главы.
3. Эпизоды
Лента эпизодов, где длительность — длина полосыpodcast-004
Длительность — длина полосы, hover раскрывает описание, play шлёт событие плееру.
4. Цитаты
Цитаты бегущими строками в разные стороныpodcast-005
Две бегущие строки навстречу друг другу, пауза по наведению.
5. Гости
Гости бесконечной лентой с остановкой по наведениюpeople-013
Бесконечная лента портретов с номером эпизода, остановка под курсором.
6. Где слушать
Где слушать: статистика count-up и платформы с наклономpodcast-006
Статистика считает вверх, плитки платформ наклоняются к курсору.
7. Поддержать
Уровни поддержки подкаста с переключателем месяц/годpricing-023
Три уровня на фоне студии, переключатель месяц/год.
8. Письмо
Письмо после каждого выпуска с «конвертом»subscribe-008
Одно поле, «что внутри» и переворот в «записали».
9. Подвал
Подвал подкаста с огромной словомаркойfooter-028
Карточка ведущей, платформы, RSS и словомарка на всю ширину.
10. Мини-плеер
Мини-плеер у нижнего края по событиюpodcast-007
Полоса у нижнего края: появляется по событию из ленты, рассылает состояние.
Pro
Точный состав, код страницы и ссылка для агента — в PRO
Демо и список блоков открыты всем. Подписчику показываются пропсы каждого блока как в демо, общие правила темы, промпты картинок и одна ссылка, по которой ИИ-агент собирает такую же страницу.
Открыть PROЧастые вопросы
- Из чего собрана страница «Сайт подкаста»?
- Из 10 секций каталога по порядку: Шапка подкаста с чипом «сейчас играет», Первый экран подкаста с плеером и живой волной, Лента эпизодов, где длительность — длина полосы, Цитаты бегущими строками в разные стороны, Гости бесконечной лентой с остановкой по наведению, Где слушать, Уровни поддержки подкаста с переключателем месяц/год, Письмо после каждого выпуска с «конвертом», Подвал подкаста с огромной словомаркой, Мини-плеер у нижнего края по событию. Каждая — отдельный item VibeUI.
- Как собрать такую страницу через ИИ-агента?
- Нажмите «Копировать сценарий для ИИ» и вставьте в Cursor или Claude Code: агент получит исходник страницы, общие правила темы и промпты картинок и поставит каждую секцию из реестра через shadcn CLI.
- Сценарий бесплатный?
- Живое демо и список секций открыты всем. Исходник страницы и инструкция для агента — в подписке PRO.