VibeUI
РусEng
Войти

Промо-сцены

Переворачивающаяся карточка

3D-карточка с двумя сторонами: спереди фото с подписью, сзади описание и ссылка. Переворачивается по клику, клавише или наведению вокруг вертикальной или горизонтальной оси. Своё содержимое обеих сторон можно передать children-пропсами.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • image, eyebrow, title, text, linkLabel, linkHref или полностью свои front и back
  • trigger (click | hover), axis (y | x), aspect, width, hint, flipped
  • accent, tone, радиус и длительность через переменные --vibeui-flip-001-radius и -duration

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Переворачивающаяся карточка — 3D-карточка с двумя сторонами: спереди фото с подписью, сзади описание и ссылка. Переворачивается по клику, клавише или наведению вокруг вертикальной или горизонтальной оси. Своё содержимое обеих сторон можно передать children-пропсами.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/flip-001?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Flip001
  image="/photos/house.webp"
  eyebrow="Проект"
  title="Дом у воды"
  text="Частный дом на берегу залива: дерево, стекло и терраса с видом на закат."
  linkLabel="Смотреть проект"
  linkHref="/projects/house"
  trigger="click"
  axis="y"
  aspect="4 / 5"
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Тема
tone · по умолчанию: auto
Триггер
trigger · по умолчанию: click
Ось
axis · по умолчанию: y
Пропорции
aspect · по умолчанию: 4 / 5
Заголовок
title · по умолчанию: Дом у воды
Подсказка
hint · по умолчанию: перевернуть
Акцент
accent · по умолчанию: цвет темы

Ещё в разделе «Промо-сцены»

Частые вопросы

Как установить компонент «Переворачивающаяся карточка» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Переворачивающаяся карточка»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Переворачивающаяся карточка»?
Можно менять: image, eyebrow, title, text, linkLabel, linkHref или полностью свои front и back; trigger (click | hover), axis (y | x), aspect, width, hint, flipped; accent, tone, радиус и длительность через переменные --vibeui-flip-001-radius и -duration. Сохранить как есть: perspective на обёртке и preserve-3d на карточке — без них переворот плоский; backface-visibility:hidden и translateZ(1px) у сторон — иначе грани мерцают на полпути; inert на скрытой стороне и stopPropagation на ссылке оборота: доступность и отсутствие обратного переворота по клику на ссылку.
Компонент «Переворачивающаяся карточка» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/flip-001.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Один файл, ноль зависимостей, «use client» ради состояния. Внешний блок держит perspective:1400px, карточка — transform-style:preserve-3d и transition transform .8s cubic-bezier(.2,.8,.2,1); при data-flipped карточка получает rotateY(180deg) (или rotateX для axis=x). Стороны — absolute inset:0 с backface-visibility:hidden и translateZ(1px), обратная заранее повёрнута на 180°. Скрытая сторона получает атрибут inert, чтобы Tab не попадал на невидимую ссылку. trigger=hover переворачивает через :hover без состояния. Ссылка на обороте гасит клик (stopPropagation), чтобы не переворачивать карточку обратно. Палитра --vibeui-flip-001-* с light-dark; шрифт Manrope через <link precedence>. Пропорции и ширина — переменные --vibeui-flip-001-aspect и -width из props aspect и width (по умолчанию 22rem, max-width:100%).

Теги

  • flip
  • flip card
  • 3d
  • card
  • rotate
  • two-sided
  • reveal
  • backface
  • hover
  • click
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…