VibeUI
РусEng
Войти

Мокап устройства

Стопка окон

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

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

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

  • src и alt — кадр переднего окна
  • backSrc и farSrc — кадры задних окон
  • children — живая страница в переднем окне

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

Превью

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

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

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

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

https://vibeui.ru/c/mockup-009?theme=dark

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

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

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

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

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

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

<Mockup009 src="/screens/one.png" alt="Главный экран" backSrc="/screens/two.png" farSrc="/screens/three.png" spread="normal" />

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

Настройки

Разлёт
spread · по умолчанию: normal
Хром
theme · по умолчанию: light
Тень
shadow · по умолчанию: включено
Подпись
caption

Ещё в разделе «Мокап устройства»

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

Как установить компонент «Стопка окон» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Стопка окон»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Стопка окон»?
Можно менять: src и alt — кадр переднего окна; backSrc и farSrc — кадры задних окон; children — живая страница в переднем окне. Сохранить как есть: локальную палитру --vibeui-mockup-009-* и не подменять её токенами вашей темы; вывод сдвига, ширины и отступов из одной переменной spread — разведённые вручную значения ломают каскад; приглушение задних окон opacity и brightness — без него стопка читается тремя равными окнами.
Компонент «Стопка окон» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

npx shadcn@latest add https://vibeui.ru/r/pro/mockup-009.json

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

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

Серверный компонент, хуков нет. Стопка — переднее окно в потоке и два абсолютных за ним со сдвигом вверх-влево; сдвиг, ширина и отступы сцены считаются от одной переменной --vibeui-mockup-009-spread, которую задаёт data-spread. Задние окна приглушены opacity и brightness, чтобы глубина читалась без перспективы. Хром окон минимальный: светофор и поле адреса. Область 16/10: src (object-fit: cover по верху), иначе children, иначе заглушка; у задних окон свои кадры backSrc и farSrc и заглушки с другой раскладкой. Тема хрома — data-chrome, тень — data-shadow.

Теги

  • browser
  • windows
  • stack
  • cascade
  • screens
  • mockup
  • frame
  • screenshot
Исходник компонента

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

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