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
span · from/to семантическими токенами
span · from/to явными токенами
small · text-xs
div ×3 · скелетон абзаца
перелив → контент по клику
Обработка платежа: статус уточняется — обновится автоматически.
span · инлайн внутри абзаца