О компании

Маршрут пары: линия рейса с самолётиком и остановками

«Наш маршрут» как карта в бортовом журнале: пунктирная линия рейса через четыре остановки с пинами-кодами городов, самолётик едет по линии и прорисовывает пройденную часть, пока секцию прокручивают. Под линией — карточки остановок с круглым фото, датой и историей; клик по пину подсвечивает карточку.

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

  • eyebrow, title (часть в «кавычках» уходит в рукописный), lede
  • stops — ровно четыре: code, city, date, title, text, image
  • accent и background, tone

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

Превью

1440pxТема страницы

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

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

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

https://vibeui.ru/c/about-012?theme=dark

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

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

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

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

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

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

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

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

Один файл, ноль зависимостей, «use client» ради прогресса и пинов. Линия — SVG viewBox 1000×260 с path из T-сегментов: концы сегментов — ровно точки остановок, поэтому пины стоят на кривой. Самолётик — path с offset-path:path(...) и offset-distance из --vibeui-about-012-p; пройденная часть — второй path с pathLength=1 и stroke-dashoffset из --vibeui-about-012-k. Обе переменные пишет rAF-обработчик scroll по положению секции в окне (0 при входе снизу, 1 когда центр прошёл), без ререндеров. Пины — <g role=button tabIndex> с data-active, карточки [data-part=stop] подсвечиваются рамкой и подъёмом. Сетка карточек — 4 в ряд от 56rem. Ровно четыре остановки: лишние отбрасываются. Палитра --vibeui-about-012-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; тёмная тема — по .dark/[data-theme] или tone. Шрифты Oswald, Lobster и Manrope подключаются <link precedence> с Google Fonts, с fallback на системные. accent и background переопределяют цвета, prefers-reduced-motion гасит анимации.

Теги

  • wedding
  • travel
  • route
  • map
  • flight path
  • plane
  • scroll
  • offset-path
  • timeline
  • story
  • couple
  • retro
Исходник компонента

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

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