Промо-сцены
Карточка, раскрывающаяся в окно
Карточка с двумя фото: по клику едет из своей ячейки в центр экрана, растёт в 1,35 раза и переворачивается одним движением — на обороте второе фото и стеклянная панель с описанием и ссылкой. В окне карточку можно перевернуть обратно кликом. Закрытие — та же анимация назад, фокус заперт в окне, Escape закрывает.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- image, imageBack, eyebrow, title, hint, backTitle, text, linkLabel, linkHref или своё содержимое панели через children
- aspect, width, zoom, closeLabel
- accent, tone, радиус и длительность через переменные --vibeui-flip-002-radius и -duration (DURATION в коде должен совпадать)
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/flip-002?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<Flip002
image="/photos/house-front.webp"
imageBack="/photos/house-terrace.webp"
eyebrow="Частная коллекция"
title="Светлая комната"
hint="Нажмите, чтобы открыть историю"
backTitle="Спроектирована вокруг тишины"
text="Натуральные материалы и выверенные проёмы делают спокойное место для искусства и света."
linkLabel="Смотреть проект"
linkHref="/projects/house"
/>Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Тема
tone· по умолчанию: auto- Пропорции
aspect· по умолчанию: 4 / 5- Увеличение
zoom· по умолчанию: 1.35- Заголовок
title· по умолчанию: Дом у воды- Акцент
accent· по умолчанию: цвет темы
Ещё в разделе «Промо-сцены»
Частые вопросы
- Как установить компонент «Карточка, раскрывающаяся в окно» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Карточка, раскрывающаяся в окно»?
- npm-пакеты: react-dom.
- Что можно поменять в компоненте «Карточка, раскрывающаяся в окно»?
- Можно менять: image, imageBack, eyebrow, title, hint, backTitle, text, linkLabel, linkHref или своё содержимое панели через children; aspect, width, zoom, closeLabel; accent, tone, радиус и длительность через переменные --vibeui-flip-002-radius и -duration (DURATION в коде должен совпадать). Сохранить как есть: анимацию только через transform (translate, scale, rotateY) на одном элементе — окно уже свёрстано в конечном размере, поэтому перелёт не пересчитывает раскладку; портал в body и копию карточки в слое: position:fixed внутри transform у предков ломается; reflow и requestAnimationFrame перед стартом, обратную анимацию при закрытии, возврат фокуса на карточку и переворот окна кликом.
- Компонент «Карточка, раскрывающаяся в окно» бесплатный?
- Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/flip-002.jsonnpm-зависимости: react-dom
Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Один файл, зависимость только react-dom (createPortal), «use client». Карточка в потоке — div role=button с фото, значком переворота и стеклянной панелью (eyebrow, title, hint). По клику измеряется getBoundingClientRect, в body через портал рендерится слой position:fixed с perspective:1400px, подложкой (blur 12px) и летуном: absolute в размере и позиции окна (карточка ×zoom по центру, не больше экрана с отступом), transform-style:preserve-3d, стартовый transform translate/scale ставит его ровно на карточку; оригинал прячется visibility:hidden. После reflow и requestAnimationFrame transform становится translate(0) scale(1) rotateY(180deg) за .5s cubic-bezier(.2,.9,.25,1): перелёт, рост и переворот одним движением, анимируется только transform — композитный слой, без перерасчёта раскладки и перерисовки фото по кадрам. Стороны — absolute inset:0 с backface-visibility:hidden и translateZ(1px), обратная повёрнута на 180° и несёт второе фото и панель с backTitle, text и ссылкой; клик по стороне переворачивает окно, крестик на обеих сторонах, скрытая сторона inert. Закрытие — стартовый transform назад, через 500ms слой снимается и фокус возвращается на карточку. Пока открыто: body overflow:hidden с компенсацией скроллбара, Escape закрывает, Tab зациклен внутри окна, resize перецентрует. Палитра --vibeui-flip-002-* с light-dark, шрифт Manrope через <link precedence>.
Теги
- flip
- modal
- flip card
- 3d
- morph
- expand
- dialog
- lightbox
- two photos
- card
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…