События
Программа вечера с луной, которая ползёт по небу при прокрутке
Программа зимнего вечера от заката до полуночи: слева липкое небо — луна ползёт по дуге, пока список прокручивают, закатная полоса гаснет, небо синеет до полуночного и проступают звёзды; справа пункты вечера с временем антиквой, местом курсивом и парой слов, текущий подсвечен свечой, пройденные — зажжёнными точками на линии.
Что можно поменять
- eyebrow, title, lede, skyNote
- slots (time, title, place, text) — сколько угодно пунктов
- accent и background, tone
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/event-013?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «use client» ради прогресса. Небо — блок с закатным градиентом, поверх ::before ночной градиент с opacity из --vibeui-event-013-k, звёзды — radial-gradient-точки с той же opacity, силуэт елей — SVG path. Луна — точка в центре, повёрнутая на calc(-100deg + k·160deg), сама колба контрповорачивается, чтобы кратеры не крутились. Прогресс считает rAF-обработчик scroll по положению секции (0 при входе, 1 когда прошла), в CSS уходит переменная k, в state — только номер активного пункта. Линия слева от списка красится в свечу до k, пункты — data-active и data-done. От 56rem сетка .8fr/1.2fr, небо sticky top:6rem высотой 24rem. Палитра --vibeui-event-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
- schedule
- timeline
- evening
- moon
- sky
- scroll
- night
- program
- dark
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…