Первый экран
Хиро-интро с видео: загрузка, въезд машины, стоп-кадр и надпись за крышей
Первый экран-интро: страница открывается пустой, по центру тахометр: стрелка идёт за загрузкой ролика, обороты цифрами, на 100% — секунда в отсечке, и только потом старт. Затем видео играет один раз и останавливается на последнем кадре, где машина стоит боком. Только тогда поверх ложится та же машина без фона, огромная надпись бренда поднимается между ними — будто из-за крыши, — и плавно проявляются заголовок и главная кнопка — круглая «Engine start» в стеклянной капсуле: по наведению кольцо обегает её акцентом, по нажатию она вдавливается и вздрагивает, как стартер. На стоп-кадре машина живая целиком: над ней курсор становится кольцом, рядом плывёт ценник — ценник постоянного размера, текст плавно перетекает из зоны в зону, цена набегает, — у выбранной части (кузов, салон, капот, фары, диски); кнопки-чипы дублируют зоны для клавиатуры и телефона. Кнопка «Пропустить» / «Ещё раз», при reduced-motion — сразу стоп-кадр.
Что можно поменять
- videoSrc, videoWebmSrc, stillSrc, carSrc — свой ролик и кадры из него
- wordmark, eyebrow, title (массив строк), lede
- primaryLabel, primaryHint, primaryHref, startLabel — главная кнопка в виде кнопки запуска двигателя; secondaryLabel, secondaryHref — вторая кнопка, по умолчанию выключена
Собран из
Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/hero-046?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Составной блок: импортирует button-016 из @/components/vibeui/ — команда установки приносит его вместе с блоком. Блок владеет раскладкой и своим текстом, части получают только пропсы. Один файл, ноль npm-зависимостей, «use client» ради управления видео. Стоп-кадр вписан в рамку [data-part=frame] с пропорцией 16:9, повторяющей object-fit:cover через container query units (width:max(100cqw,177.778cqh)); видео, надпись и вырезанная машина позиционируются в процентах рамки и совпадают с кадром при любой ширине. На широком блоке (≥56rem) рамка занимает ~86 % ширины справа, левый и нижний края растворяются mask-image, текст ложится слева снизу. Фазы data-phase: loading (ролик качается fetch-ем с прогрессом по Content-Length в blob; SVG-тахометр 0–8 тыс. на дуге 240°, стрелка — rotate по прогрессу, затем LIMITER_MS отсечки) → playing → parked (ended). Фаза дублируется атрибутом data-vibeui-hero-046 на <html>: страница может прятать шапку, пока он не равен parked. Если сети нет, кодек не подошёл или автоплей запрещён — сразу parked и stillSrc. Медиа передаются пропсами: videoSrc (mp4/H.264), videoWebmSrc (VP9, берётся, если браузер не играет H.264), stillSrc (последний кадр), carSrc (машина из последнего кадра без фона, PNG/WebP с альфой того же размера, что кадр). Зоны: shapes в координатах кадра 1920×1080 — многоугольник points или круг cx/cy/r; на машине ли курсор, решает альфа carSrc (карта ужата в 4 раза), какая часть — фигуры зон; первая зона забирает всё остальное на силуэте, поэтому пустых щелей нет. Ценник и кольцо двигаются только transform (размеры кэширует ResizeObserver), ценник догоняет курсор с инерцией и плавно меняет сторону у края; pin — точка, где он встаёт, если зону выбрали кнопкой.
Теги
- hero
- video
- auto
- car
- detailing
- intro
- cinematic
- freeze frame
- wordmark
- cutout
- parallax
- composite
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…