Гаджет и хардвер
Лендинг умной лампы-будильника «Луч» уровня продуктовых сайтов 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