Первый экран
Первый экран ресторана с бегущей строкой
Первый экран ресторана: фото зала во весь экран с медленным наездом и тёплым затемнением, гигантский серифный заголовок появляется построчно снизу, слово в звёздочках — курсивом акцентным свечением, две кнопки и бегущая строка с сезонными анонсами внизу.
Что можно поменять
- image, eyebrow, lines (слово в *звёздочках* — акцентом), lede
- primaryLabel/Href, secondaryLabel/Href, ticker
- accent и background, tone
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/hero-021?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, серверный компонент. Секция min-height:100svh, <img> absolute с анимацией drift (scale 1.02→1.12 за 28s, alternate) и градиентное затемнение снизу. Заголовок — строки в overflow:hidden, внутренний span поднимается translateY(110%)→0 с задержкой .3s + n×.14s; *слово* в строке превращается в <em> функцией emphasize без innerHTML. Подпись и кнопки — fade с задержками. Бегущая строка — лента, продублированная дважды, translateX(-50%) за 40s, края замаскированы mask-image. reduced-motion выключает всё. Палитра --vibeui-hero-021-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Playfair Display и Manrope подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.
Теги
- restaurant
- cafe
- bar
- food
- menu
- dining
- hero
- ticker
- marquee
- fullscreen
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…