Перейти к содержимому

CoreTextShimmer

Примеры использования и документация.

«Живой» акцентный текст для важных надписей: приветствий, промо-заголовков, статусов загрузки. Переливающийся градиент притягивает взгляд к ключевому сообщению и показывает, что интерфейс активен, пока данные готовятся. Берите, когда обычного цвета недостаточно и нужен лёгкий эмоциональный акцент в цветах темы.

Технические детали: градиент по тексту через background-clip: text с прозрачным цветом; анимация сдвигом background-position (тройной стоп from → to → from при background-size: 200% даёт бесшовный цикл «туда-обратно»). Корневой тег — проп as (по умолчанию span); длительность цикла — duration (сек), цвета — from/to (любые CSS-цвета), попадают в CSS-переменные --core-shimmer-from/-to/-duration и перекрываются извне. Цвета по умолчанию завязаны на тему (--ui-secondary/--ui-primary), поэтому работают в светлой и тёмной темах. Вертикальный padding-bottom: 0.25em расширяет область покраски под дескендеры («g», «у», «р») при line-height: 1, не меняя раскладку inline-элемента. При prefers-reduced-motion: reduce анимация отключается — остаётся статичный градиент. Содержимое — слот default.

Загружаем содержимое…

span · дефолт: secondary → primary, 6s

Быстрый перелив

span · duration="2"

Медленный перелив

p · duration="12"

Крупный акцент

div · text-2xl font-bold

Заголовок секции

h2 · text-3xl font-bold

Пара info → warning

span · from/to семантическими токенами

Пара danger → success

span · from/to явными токенами

Мелкая подпись

small · text-xs

Первая строка абзаца
Вторая строка покороче
Хвост абзаца

div ×3 · скелетон абзаца

Загружаем содержимое…

перелив → контент по клику

Обработка платежа: статус уточняется — обновится автоматически.

span · инлайн внутри абзаца