Онлайн-курс
Результаты выпускников горизонтальной лентой
Результаты выпускников горизонтальной лентой: крупные карточки со скрином проекта на 16:10, scroll-snap, тянутся мышью и колесом, стрелки по краям. Над лентой счётчики, набегающие при появлении. У карточки курсорный блик и стрелка «было → стало», которая дорисовывается, когда карточка в кадре.
Что можно поменять
- cases: имена, портреты, скрины, было/стало, выгода, цитата, ссылка
- stats: значения, суффиксы, подписи; eyebrow, title, lede, beforeLabel, afterLabel, linkLabel
- accent и background, tone
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/course-003?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «use client» ради drag, счётчиков и блика. Лента — <ul> с overflow-x:auto, scroll-snap-type:x mandatory, скрытым скроллбаром и отрицательными полями до края шелла. Drag — pointer capture для мыши: движение >4px переводит в data-drag (snap выключен, user-select:none), клик после драга гасится onClickCapture. Стрелки — scrollBy на ширину карточки. Счётчики — IntersectionObserver на секции и requestAnimationFrame 1,4 с с easeOut. Блик — ::after с radial-gradient в --mx/--my из pointermove. Стрелка — SVG path со stroke-dasharray, dashoffset→0 при data-seen (IO с root=лента, threshold .6). От 64rem (container query) карточка 56 % ширины. Палитра --vibeui-course-003-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Unbounded и Inter подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.
Теги
- course
- education
- edtech
- landing
- results
- carousel
- scroll-snap
- counter
- before-after
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…