Первый экран
Хиро с полкой обложек в 3D, которая по прокрутке разъезжается в сетку
Sticky-сцена в два экрана: на старте восемь обложек товаров стоят полкой в перспективе — внахлёст, повёрнутые на 32°. Прогресс прокрутки пишется в CSS-переменную, и карточки разъезжаются в ровную сетку 4×2 (2×2 на узком), подписи с ценой проявляются. Строки заголовка въезжают из-под маски по очереди, под ними две кнопки и подсказка «листайте».
Что можно поменять
- eyebrow (со *звёздочками* для акцента), lines (строки заголовка, *слово* — акцент), lede, hint
- primaryLabel, primaryHref, secondaryLabel, secondaryHref
- cards: name, price, image, kind
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/hero-041?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Теги
- hero
- marketplace
- shop
- 3d
- scroll
- sticky
- perspective
- grid
- products
- kinetic
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…