Недвижимость

Подборка объектов с фильтром

Сетка объектов недвижимости: цена серифом крупно, метры, комнаты, этаж, район и метро; метка «новостройка» или «срочно». Чипы типов фильтруют без перезагрузки, по наведению фото меняется на второе, по клику карточка едет в центр экрана, растёт и переворачивается в окно: второе фото во весь кадр, описание, плюсы и ссылка на объект.

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

  • listings: объекты, два фото (image и imageHover — второе идёт в окно), метки, text и features, ссылки
  • eyebrow, title, lede, allLabel, moreLabel, moreHref, flipHint, openLabel, closeLabel
  • accent и background, tone

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

Превью

1440pxТема страницы

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

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

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

https://vibeui.ru/c/realty-003?theme=dark

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

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

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

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

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

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

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

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

Один файл, зависимость только react-dom (createPortal), «use client». Типы выводятся из listings (уникальные kind), чип «все» — allLabel; активный чип залит цветом текста. Сетка 1/2/3 колонки по container query, li появляются @keyframes с задержкой --n×70ms. Карточка — div role=button: media с двумя <img> (imageHover поверх с opacity 0 → 1 по hover, оба scale 1.05), цена, параметры, чип-подсказка. По клику измеряется getBoundingClientRect, в body через портал рендерится слой position:fixed с perspective:1400px, подложкой и летуном: absolute в размере и позиции окна (карточка ×1.35 по центру, не больше экрана), transform-style:preserve-3d, стартовый transform translate/scale ставит его ровно на карточку; оригинал прячется. После reflow и requestAnimationFrame transform становится translate(0) scale(1) rotateY(180deg) за .5s cubic-bezier(.2,.9,.25,1) — перелёт, рост и переворот одним движением, анимируется только transform (композитный слой, без перерасчёта раскладки). Стороны — backface-visibility:hidden и translateZ(1px); лицевая — копия карточки, обратная несёт imageHover во весь кадр и стеклянную панель с ценой, названием, text, features и ссылкой openLabel; клик по стороне переворачивает окно, крестик есть на обеих сторонах, скрытая сторона inert. Закрытие — стартовый transform назад, фокус возвращается на карточку. Пока открыто: body overflow:hidden с компенсацией скроллбара, Escape закрывает, Tab зациклен в окне. При смене фильтра список пересобирается с новым key. Палитра --vibeui-realty-003-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Cormorant Garamond и Manrope подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.

Теги

  • real estate
  • realty
  • property
  • apartment
  • agency
  • listing
  • realty
  • modal
  • flip
  • lightbox
Исходник компонента

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

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