Аватар

Команда со шторкой-досье

Пять тёмных портретов в ряд, где карточка открывает досье в шторке справа: страница затемняется и замирает, панель въезжает сбоку, и только когда она встала, проявляется текст — фото, имя, роль, биография и ссылка. Закрытие в обратном порядке. На наведении фото не гаснет, а разогревается: тёплая засветка в цвет акцента снизу, лёгкий зум, оранжевая рамка, снизу всплывает подпись со стрелкой.

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

  • members — свои люди: id, name, role, photo, bio (массив абзацев), linkedin
  • title и description — заголовок и подводка над сеткой
  • duration — ход шторки в мс; panelWidth — её ширина в % окна; overlay — затемнение в %

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

Превью

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

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

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

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

https://vibeui.ru/c/avatar-anim-004?theme=dark

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

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

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

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

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

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

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

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

Один файл, ноль зависимостей, «use client», палитра в локальных --vibeui-avatar-anim-004-*. Тему берёт из окружения через light-dark() плюс правило для класса .dark; цвета шторки можно задать пропами panelBackground и panelColor. Хореография открытия целиком на CSS-переходах с задержками: слой [data-part=layer] переключает data-open, затемнение и панель едут duration мс по cubic-bezier(0.45,0,0.55,1), текст внутри ([data-part=sheet]) проявляется за 240 мс с задержкой duration — то есть после того, как шторка доехала. При закрытии задержки меняются местами: текст гаснет первым, панель и затемнение ждут его 240 мс и уходят следом; visibility слоя выключается по окончании всей цепочки. JS отвечает за состояние, блокировку прокрутки body на время открытия, Escape и возврат фокуса на карточку. Сетка считается от собственной ширины блока: уже 48rem — лента в один ряд с горизонтальной прокруткой и snap (с мышью видна тонкая полоса прокрутки), от 48rem — сетка, все пять в ряд. Карточка — 3:4, на устройствах с наведением подпись спрятана и всплывает на hover, фото насыщается и чуть растёт, поверх проявляется тёплая засветка [data-part=glow] в цвет акцента (mix-blend-mode: screen) и внутренняя рамка 2px, стрелка в углу подписи подменяется второй такой же; без наведения подпись видна всегда, а в углу карточки — плюс. Шторка — fixed-слой поверх страницы: panelWidth % ширины окна, уже 48rem — во всё окно; внутри собственный container-type, размеры шрифтов через cqi. Биография — массив абзацев bio, не HTML. Без фото карточка показывает инициалы на плашке. prefers-reduced-motion обнуляет длительности и задержки.

Теги

  • team
  • people
  • drawer
  • sidebar
  • panel
  • slide-in
  • overlay
  • bio
  • portrait
  • row
  • hover
  • glow
  • about
Исходник компонента

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

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