Лендинг гаджета
Лендинг умной лампы-будильника «Луч» уровня продуктовых сайтов Apple — почти чёрный, который по прокрутке светлеет к утру: первый экран с лампой из CSS, где ползунки температуры и яркости меняют свет по-настоящему, «рассвет за 30 минут» на липкой сцене, где комната светлеет от ночи к утру, возможности в bento, взрыв-схема с разъезжающимися деталями, характеристики как панель приборов с дугами и докручивающимися цифрами, сравнение с прошлой версией, предзаказ с выбором цвета и отсчётом до отгрузки, пресса бегущей строкой, вопросы и подвал с контурным «ЛУЧ». Unbounded, Inter Tight и JetBrains Mono.
Продуктовая страница устройства в духе больших брендов: свет лампы меняется ползунками прямо на первом экране, сценарий использования разворачивается по прокрутке, дальше — характеристики, сравнение с прошлой версией и предзаказ. Устройство в демо вымышленное.
Из чего собрано
11 блоков из каталога, в порядке появления на странице. Каждый ставится своей командой; ничего не пересоздаётся.
1. Шапка
Прозрачная шапка гаджета: стекло при прокрутке и кнопка предзаказаnavbar-043
Прозрачная → стекло при прокрутке, «Предзаказ», бургер.
2. Первый экран
Хиро гаджета: CSS-лампа, свет которой меняют ползункиhero-043
CSS-лампа, ползунки 2700–6500 K и яркости меняют свет, заголовок проявляется со светом.
3. Рассвет
Рассвет за 30 минут: sticky-сцена, где комната светлеет по прокруткеgadget-001
Липкая сцена: комната светлеет от ночи к утру, часы 05:30 → 06:00, лампа разгорается.
4. Возможности
Возможности гаджета bento: эквалайзер, кольца датчиков, CSS-телефонbento-012
Эквалайзер, кольца датчиков, CSS-телефон с тумблером, спектр.
5. Внутри
Взрыв-схема гаджета: детали разъезжаются по ползунку и в viewportgadget-002
Взрыв-схема: пять деталей разъезжаются по ползунку и при появлении.
6. Характеристики
Панель приборов: дуги SVG и цифры, которые докручиваются в viewportstats-012
Дуги SVG, цифры докручиваются, дельта к прошлой версии.
7. Сравнение
Сравнение с прошлой версией: полоски-отношения и метки «новое»comparison-016
Луч 2 vs Луч 1: полоски-отношения, чипы «новое».
8. Предзаказ
Предзаказ гаджета: свотчи меняют цвет лампы, отсчёт до отгрузки, магнитная кнопкаgadget-003
Свотчи меняют цвет лампы, комплекты, отсчёт до отгрузки, «осталось N из партии».
9. Пресса
Пресса и отзывы: три выноски и наклонная бегущая строкаtestimonials-035
Три цитаты-выноски и наклонная бегущая строка.
10. Вопросы
Вопросы аккордеоном с плюсом-крестикомfaq-023
Аккордеон: доставка и гарантия.
11. Подвал
Подвал гаджета с гигантским контурным знаком и статусом партииfooter-042
Гигантское контурное «ЛУЧ», статус партии, колонки.
Pro
Точный состав, код страницы и ссылка для агента — в PRO
Демо и список блоков открыты всем. Подписчику показываются пропсы каждого блока как в демо, общие правила темы, промпты картинок и одна ссылка, по которой ИИ-агент собирает такую же страницу.
Открыть PROЧастые вопросы
- Из чего собрана страница «Лендинг гаджета»?
- Из 11 секций каталога по порядку: Прозрачная шапка гаджета, Хиро гаджета, Рассвет за 30 минут, Возможности гаджета bento, Взрыв-схема гаджета, Панель приборов, Сравнение с прошлой версией, Предзаказ гаджета, Пресса и отзывы, Вопросы аккордеоном с плюсом-крестиком, Подвал гаджета с гигантским контурным знаком и статусом партии. Каждая — отдельный item VibeUI.
- Как собрать такую страницу через ИИ-агента?
- Нажмите «Копировать сценарий для ИИ» и вставьте в Cursor или Claude Code: агент получит исходник страницы, общие правила темы и промпты картинок и поставит каждую секцию из реестра через shadcn CLI.
- Сценарий бесплатный?
- Живое демо и список секций открыты всем. Исходник страницы и инструкция для агента — в подписке PRO.