VibeUI
РусEng
Войти

Первый экран

Хиро-интро с видео: загрузка, въезд машины, стоп-кадр и надпись за крышей

Первый экран-интро: страница открывается пустой, по центру тахометр: стрелка идёт за загрузкой ролика, обороты цифрами, на 100% — секунда в отсечке, и только потом старт. Затем видео играет один раз и останавливается на последнем кадре, где машина стоит боком. Только тогда поверх ложится та же машина без фона, огромная надпись бренда поднимается между ними — будто из-за крыши, — и плавно проявляются заголовок и главная кнопка — круглая «Engine start» в стеклянной капсуле: по наведению кольцо обегает её акцентом, по нажатию она вдавливается и вздрагивает, как стартер. На стоп-кадре машина живая целиком: над ней курсор становится кольцом, рядом плывёт ценник — ценник постоянного размера, текст плавно перетекает из зоны в зону, цена набегает, — у выбранной части (кузов, салон, капот, фары, диски); кнопки-чипы дублируют зоны для клавиатуры и телефона. Кнопка «Пропустить» / «Ещё раз», при reduced-motion — сразу стоп-кадр.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • videoSrc, videoWebmSrc, stillSrc, carSrc — свой ролик и кадры из него
  • wordmark, eyebrow, title (массив строк), lede
  • primaryLabel, primaryHint, primaryHref, startLabel — главная кнопка в виде кнопки запуска двигателя; secondaryLabel, secondaryHref — вторая кнопка, по умолчанию выключена

Собран из

Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Хиро-интро с видео: загрузка, въезд машины, стоп-кадр и надпись за крышей — Первый экран-интро: страница открывается пустой, по центру тахометр: стрелка идёт за загрузкой ролика, обороты цифрами, на 100% — секунда в отсечке, и только потом старт. Затем видео играет один раз и останавливается на последнем кадре, где машина стоит боком. Только тогда поверх ложится та же машина без фона, огромная надпись бренда поднимается между ними — будто из-за крыши, — и плавно проявляются заголовок и главная кнопка — круглая «Engine start» в стеклянной капсуле: по наведению кольцо обегает её акцентом, по нажатию она вдавливается и вздрагивает, как стартер. На стоп-кадре машина живая целиком: над ней курсор становится кольцом, рядом плывёт ценник — ценник постоянного размера, текст плавно перетекает из зоны в зону, цена набегает, — у выбранной части (кузов, салон, капот, фары, диски); кнопки-чипы дублируют зоны для клавиатуры и телефона. Кнопка «Пропустить» / «Ещё раз», при reduced-motion — сразу стоп-кадр.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/hero-046?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Hero046
  videoSrc="/media/intro.mp4"
  videoWebmSrc="/media/intro.webm"
  stillSrc="/media/intro-last.webp"
  carSrc="/media/intro-car.webp"
  wordmark="Гараж 42"
  title={["Керамика.", "Плёнка.", "Полировка."]}
  zones={[{ id: "wheels", label: "Диски", service: "Керамика на диски", price: "от 5 000 ₽", shapes: [{ cx: 940, cy: 620, r: 76 }], pin: { x: 940, y: 620 } }]}
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Надпись
wordmark · по умолчанию: Гараж 42
Подзаголовок
lede · по умолчанию: Керамика, антигравийная плёнка и полировка в закрытом боксе. Смета фиксируется после осмотра, каждый этап работ — с фотоотчётом.
Кнопка
primaryLabel · по умолчанию: Рассчитать стоимость
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Используется в сценариях

Похожие по стилю и содержимому

Варианты из той же категории с общими тегами или похожей формой контента.

  • Хиро ветклиники с фоновым роликом: кошка впрыгивает в кадр и замирает

    Первый экран ветклиники: сайт, заголовок, кнопка записи с бьющимся сердцем и набегающие показатели видны сразу, а фоном идёт ролик — кошка впрыгивает в кадр сверху, садится и замирает. Пока ролик грузится, фоном стоит его первый кадр; старт — когда браузер уверен, что доиграет без остановок, к концу ролик замедляется. На стоп-кадре за кошкой встаёт огромное название клиники. Кнопка «Пропустить» / «Смотреть ещё раз»; если ролик не готов за 5 секунд или включено reduced-motion — сразу стоп-кадр.

  • Хиро доставки еды с фоновым роликом: бургер собирается в слоу-мо, живой таймер

    Первый экран доставки еды или дарк-китчена: заголовок «Горячее привезём за» с живым обратным отсчётом 28:00, кнопки меню и конструктора, строка доверия и бегущая строка блюд видны сразу, а фоном идёт ролик — ингредиенты падают сверху и собираются в бургер в замедленной съёмке. Пока ролик грузится, фон тёмный; на старте блюдо проступает из темноты, к концу ролик замедляется. Кнопка «Пропустить» / «Смотреть ещё раз»; если ролик не готов за 5 секунд или включено reduced-motion — сразу стоп-кадр.

  • Хиро детейлинга: силуэт машины прорисовывается и подсвечивает услуги по зонам

    Первый экран автосервиса: строки заголовка въезжают из масок, магнитная кнопка тянется к курсору; справа силуэт купе из svg-контура прорисовывается через stroke-dashoffset. Зоны машины — капот, фары, диски, кузов, салон — по наведению или тапу заливаются акцентом, а под машиной крупно выводится услуга и цена. Чипы дублируют зоны для клавиатуры и телефона. Зерно — svg feTurbulence.

Ещё в разделе «Первый экран»

Частые вопросы

Как установить компонент «Хиро-интро с видео: загрузка, въезд машины, стоп-кадр и надпись за крышей» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Хиро-интро с видео: загрузка, въезд машины, стоп-кадр и надпись за крышей»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: button-016.
Что можно поменять в компоненте «Хиро-интро с видео: загрузка, въезд машины, стоп-кадр и надпись за крышей»?
Можно менять: videoSrc, videoWebmSrc, stillSrc, carSrc — свой ролик и кадры из него; wordmark, eyebrow, title (массив строк), lede; primaryLabel, primaryHint, primaryHref, startLabel — главная кнопка в виде кнопки запуска двигателя; secondaryLabel, secondaryHref — вторая кнопка, по умолчанию выключена. Сохранить как есть: импорт button-016 из @/components/vibeui/ — не встраивать его код в блок и не заменять своим; рамка [data-part=frame] 16:9 через cqw/cqh и порядок слоёв: видео → надпись → машина без фона → затемнение → текст; фазы loading → playing → parked: пока ролик не скачан целиком, на экране только тахометр; текст, надпись и машина без фона появляются только на ended.
Компонент «Хиро-интро с видео: загрузка, въезд машины, стоп-кадр и надпись за крышей» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/hero-046.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Составной блок: импортирует 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
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…