VibeUI
РусEng
Войти

Промо-сцены

Рабочий стол XP

Портфолио как рабочий стол в духе Windows XP: экран загрузки с бегущими блоками, вход по клику на пользователя с «Добро пожаловать», значки программ, окна-проводники с меню, панелью кнопок, адресной строкой, синей боковой панелью и статусом — перетаскивание, растягивание за угол, сворачивание и разворачивание; таскбар с «Пуском», двухколоночное меню и трей с часами; поверх — плёнка ЭЛТ; по желанию — синтезированные звуки без файлов. Обои — свободное фото холмов (CC BY) из public/demo/xp, значки и аватар — свои SVG; содержимое окон — ваше.

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

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

  • name и role — имя и подпись: в знаке, на входе, в меню «Пуск» и в призраке «Обо мне»
  • apps — программы: title (значок и заголовок окна), kind (призрак и запасной значок: about, projects, resume, contact, folder), hint — подпись в «Пуске», icon — своя картинка значка, content — своё содержимое окна
  • avatar — картинка пользователя на входе, в «Пуске» и в призраке (демо — /demo/xp/avatar.svg); без неё — инициалы

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

Превью

1440pxТема страницы
Рабочий стол XP — Портфолио как рабочий стол в духе Windows XP: экран загрузки с бегущими блоками, вход по клику на пользователя с «Добро пожаловать», значки программ, окна-проводники с меню, панелью кнопок, адресной строкой, синей боковой панелью и статусом — перетаскивание, растягивание за угол, сворачивание и разворачивание; таскбар с «Пуском», двухколоночное меню и трей с часами; поверх — плёнка ЭЛТ; по желанию — синтезированные звуки без файлов. Обои — свободное фото холмов (CC BY) из public/demo/xp, значки и аватар — свои SVG; содержимое окон — ваше.

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

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

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

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

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

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

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

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

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

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

<Folio001
  name="Иван Петров"
  role="Дизайнер интерфейсов"
  avatar="/demo/xp/avatar.svg"
  logo="/demo/xp/logo.svg"
  wallpaper="/demo/xp/hills.svg"
  apps={[
    { title: "Обо мне", kind: "about", icon: "/demo/xp/icon-about.svg", content: <About /> },
    { title: "Проекты", kind: "projects", icon: "/demo/xp/icon-projects.svg", content: <Projects /> },
    { title: "Резюме", kind: "resume", icon: "/demo/xp/icon-resume.svg" },
    { title: "Контакты", kind: "contact", icon: "/demo/xp/icon-contact.svg", content: <ContactForm /> },
  ]}
/>

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

Настройки

Старт
start · по умолчанию: boot
Обои
wallpaper · по умолчанию: /demo/xp/hills.jpg
Имя
name · по умолчанию: Иван Петров
Подпись
role · по умолчанию: Дизайнер интерфейсов
Плёнка ЭЛТ
crt · по умолчанию: включено
Звуки
sounds · по умолчанию: выключено

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

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

Как установить компонент «Рабочий стол XP» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Рабочий стол XP»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Рабочий стол XP»?
Можно менять: name и role — имя и подпись: в знаке, на входе, в меню «Пуск» и в призраке «Обо мне»; apps — программы: title (значок и заголовок окна), kind (призрак и запасной значок: about, projects, resume, contact, folder), hint — подпись в «Пуске», icon — своя картинка значка, content — своё содержимое окна; avatar — картинка пользователя на входе, в «Пуске» и в призраке (демо — /demo/xp/avatar.svg); без неё — инициалы. Сохранить как есть: локальную палитру --vibeui-folio-001-* и не подменять её токенами вашей темы — XP светлый по определению; последовательность сцен boot → login → «Добро пожаловать» → desktop и автопереходы: без них первый экран — чёрный; окна как абсолютные блоки со state x/y/w/h/z и pointer capture на заголовке и углу — не заменять на библиотеку окон или iframe.
Компонент «Рабочий стол XP» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

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

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

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

Один файл, ноль зависимостей, «use client». Три сцены в useState: boot (знак, три бегущих блока steps(17) как в оригинале, подсказка про F11 внизу, 3 с) → login (тёмно-синие полосы, голубое поле с линиями сверху/снизу, знак слева, карточка пользователя справа с градиентом на hover, «Перезагрузить» и заметка внизу; клик или 6 с) → «Добро пожаловать» 1.6 с → desktop. Стол: обои — свой файл по адресу в wallpaper (демо — /demo/xp/hills.jpg, фото «Curves» Nicholas A. Tonelli, CC BY 2.0, см. public/demo/xp/CREDITS.txt; запасной вариант — /demo/xp/hills.svg, векторные холмы с травяной фактурой feTurbulence) либо CSS-градиенты hills/graphite как фолбэк; значки — сетка 104px (dblclick, Enter, на touch — одно касание). Окно — абсолютный section с x/y/w/h/z в state: рамка 2px #284ffd, заголовок 30px с градиентом XP и кнопками 21px, меню (Файл/Вид/Справка), панель 48px (Назад/Вперёд и ярлыки других программ — открывают их), адресная строка 34px, содержимое, статус 23px; перетаскивание за заголовок и растягивание за правый нижний угол через pointer capture, свернуть с анимацией в таскбар, развернуть, закрыть. Призрак содержимого — проводник: левая панель 190px с карточками (Ссылки/Навыки/Программы) и синее поле; резюме — лист на сером, контакты — форма. Таскбар 30px: «Пуск» зелёный с курсивом, кнопки окон по метрикам XP, трей с тремя значками и часами (Intl.DateTimeFormat). Меню «Пуск» 335px: шапка с аватаром, белая колонка программ (первые две — с подписью hint), голубая колонка мест, подвал «Выйти»/«Выключение». Плёнка ЭЛТ (crt) — сетка пикселей и виньетка с mix-blend-mode: multiply. Ниже 40rem окна во весь стол, значки в строку, вход столбиком; окно уже 520px прячет боковую панель. Палитра фиксированная светлая --vibeui-folio-001-* (XP без тёмной темы), reduced-motion гасит анимации. Звуки (sounds, по умолчанию выключены): Web Audio без файлов — осцилляторы с экспоненциальной огибающей; свой чайм на вход, тики на открытие/закрытие, глиссандо вниз на сворачивание, щелчок «Пуска», нисходящая тройка на выход; контекст создаётся в первом клике, автопереходы беззвучны; динамик в трее включает и выключает.

Теги

  • portfolio
  • desktop
  • windows
  • xp
  • retro
  • os
  • windows-manager
  • personal site
  • interactive
Исходник компонента

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

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