О компании
История пары гирляндой: лампочки зажигаются при прокрутке
История как гирлянда: провисающий провод через секцию, на нём четыре лампочки — пока секцию прокручивают, они зажигаются одна за другой, под каждой кадр с датой рукописным, заголовком и историей. Зажжённый кадр теплеет и подсвечивается, текущий — ярче всех.
Что можно поменять
- eyebrow, title (часть в «кавычках» уходит в курсив), lede
- frames — ровно четыре: date, title, text, image
- accent и background, tone
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/about-013?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «use client» ради прогресса. Провод — SVG viewBox 1000×120 с четырьмя дугами (Q-сегменты), лампочки в провисах: ножка, цоколь, колба-эллипс; data-lit красит колбу в свечу с drop-shadow, data-now — в тёплый белый с «дыханием» keyframes. Прогресс считает rAF-обработчик scroll по положению секции в окне (0 при входе снизу, 1 когда центр прошёл), в state попадает только число зажжённых (0–4). Кадры — сетка 4 в ряд от 56rem (2 от 40rem), каждый с фото 3:2 и инеем по углам; незажжённые — приглушены и чуть ниже; на узких экранах вместо провода — точка-лампочка над карточкой. Ровно четыре кадра, лишние отбрасываются. Палитра --vibeui-about-013-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; тёмная тема — по .dark/[data-theme] или tone. Шрифты Cormorant Garamond, Marck Script и Manrope подключаются <link precedence> с Google Fonts, с fallback на системные. accent и background переопределяют цвета, prefers-reduced-motion гасит анимации.
Теги
- wedding
- winter
- story
- timeline
- garland
- lights
- scroll
- couple
- frames
- christmas
- dark
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…