Ресторан
Галерея зала с параллаксом и лайтбоксом
Галерея зала: три колонки фото разной высоты, при скролле колонки едут с разной скоростью, по наведению всплывает подпись. Клик — кадр вылетает из своей коробки в центр экрана на тёмном фоне, Escape и клик по фону закрывают.
Что можно поменять
- photos: src, aspect, caption, alt
- eyebrow, title, lede, closeLabel
- accent и background, tone
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/restaurant-005?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, зависимость только react-dom (createPortal), «use client». Фото раскладываются по трём колонкам с балансом высот: по убыванию высоты (из aspect) каждое идёт в самую короткую колонку, внутри колонки — в исходном порядке; параллакс — одна переменная прогресса секции во вьюпорте (−1…1), пишется в rAF на scroll без ререндера, колонки сдвигаются translateY(p × k) со своим k. Кадр — <button> с aspect-ratio из photo.aspect. Лайтбокс: слой position:fixed в портале, летун стартует из getBoundingClientRect кадра, после reflow и requestAnimationFrame едет к центрированной коробке (top/left/width/height с transition .55s), оригинал прячется; закрытие — обратно, фокус возвращается на кадр; скролл заперт с компенсацией скроллбара. reduced-motion выключает параллакс и переходы. Палитра --vibeui-restaurant-005-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Playfair Display и Manrope подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.
Теги
- restaurant
- cafe
- bar
- food
- menu
- dining
- gallery
- parallax
- lightbox
- masonry
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…