Sign InSign Up

Палитра

Временная страница для проверки токенов и компонентов. Разбита на табы, слаг таба — в пути: перезагрузка (в том числе HMR) оставляет на текущем. Таб-бар — наш жеFilterChips.

Slider + BestStarCard

Слайдер ничего не знает о содержимом — это просто рельса, на которую кладут что угодно. Прокрутка нативная, поэтому работает трекпадом, свайпом и с клавиатуры (рельса в табе); стрелки только вызывают scrollBy. Шторка и стрелка появляютсятолько с той стороны, где есть что показать, и не перехватывают клики — иначе первая и последняя карточка стали бы недоступны.

Затемнение уходит в --surface-current, а не в цвет страницы: слайдер внутри карточки должен растворяться в карточке. Ниже тот же слайдер на двух подложках — сравните края.

Внутри поднятой карточки

Состояния карточки

Наведите: аватар плавно наезжает внутри круга, имя уходит в --text-brand(бренд 500 — временно, по просьбе; как текст он даёт 2.9:1, ниже порога AA, поэтому под замену). Избранное — не размер, а transform: активное чуть крупнее, ховер только подсвечивает (рост под курсором убран — решение пользователя), рост отвечает на нажатие; строка при этом не дёргается. Кольцо шортсов нарисовано маской поверх залитого круга, а не бордером — градиентную рамку иначе не получить, а зазор должен оставаться прозрачным.

VerticalVideoCard — вертикальная карточка видео

Постер во всю карточку под градиентной вуалью — рампа прозрачное → чёрное 80% живёт только в нижней половине, под надписями (в макете она на всю высоту, но душила контраст картинки — решение пользователя), бейдж качества сверху, метаданные поверх нижней части. Карточка — контейнер, а не одна большая ссылка: избранное — настоящая кнопка, постер — aria-hidden-дубль ссылки заголовка. Нижний ряд — «Release date: …», строка приходит готовой (в той же формулировке, что заметка у крошек секции). Кегли макета 17/13/8 прижаты к шкале: 16/14/12 — восьмипиксельный текст ниже читаемого порога. Наведите: постер наезжает внутри скругления, заголовок уходит в--text-brand.

Warning: Adult Content

00:31:05Minimal CardRelease date: 1 year

Warning: Adult Content

4KVR
No Poster YetAgatha VegaRelease date: 5 days
0

HorizontalVideoCard — горизонтальная карточка видео

Та же логика, что у вертикальной (превью, SFW-щит, пары глифов, интерактивный подвал), но детали лежат под постером, а не поверх: скрима нет, щит накрывает только картинку, метаданные читаемы и в SFW. Бейдж качества и «Release date» — общие компоненты (QualityBadge, ReleaseDate), скрипт превью один на все карточки (preview-controller).

PopularCategoryCard — карточка популярной категории

Квадратное фото под маской-сквирклом («super shape»: углы — кубические кривые, border-radius так не умеет, поэтому маска). Маска висит на SFW-щите — одна форма стрижёт и фото, и наезд ховера, и вуаль. Строение как у звёздной карточки: щит не даёт сделать одну большую ссылку, поэтому фото —aria-hidden-дубль ссылки имени; ховер общий на карточку. «Popular» в имени — как «Best» у звёздной: обычная CategoryCard будет отдельным компонентом. Данные — живые категории текущего сайта (имена, счётчики и фото с CDN), последняя — с искусственно длинным именем под срез.

Stepper — степпер-пагинатор

Точки кликабельны: гнездо активной раскрывается шириной, а пилюля переезжает к нему отдельным слоем — её цель считается арифметикой (index × (точка + гэп): всё левее актива всегда по 8px), поэтому ширина и переезд не рассинхронизируются. Гнездо — чёрное намеренно, а не --surface-sunken (тот светлее карточки): канавка должна читаться и на плашке, и на фото баннера. Наружу компонент кидаетstepper:change, внутрь принимает stepper:set, stepper:count иstepper:progress — разными каналами, чтобы владелец и степпер не закольцевали друг друга.

Со второй активной и тремя точками:

Пилюля — ещё и прогресс текущего шага: тёмная полоса справа от неё — дорожка. Владелец шлётstepper:progress (доля 0..1), пилюля тянется по дорожке — левый край стоит, правый доезжает до края слота — и перелистывается. Где прогресса нет, нет и дорожки: без сигнала пилюля заполняет слот целиком (два демо выше). Здесь долю крутит демо-таймер (5с на шаг); в бою её шлют баннер (время воспроизведения слайда) и рельса девайсов (позиция скролла между страницами; последняя страница — без дорожки, ехать дальше некуда).