llms.txt

AiShimmer

AiShimmer — декоративный shimmer-лоадер из набора AI Components. Shimmer-проход ограничен формой текста через background-clip: text на дублирующем текстовом слое; ширина контейнера и размер шрифта задают layout автоматически.

Демо

Preview
Officia cillum labore enim eiusmod exercitation ullamco occaecat utminim consequat labore occaecat est.
Prop
Type
Value
data-test-id
text
iconMask
text
iconSize
number
size
s | m | l
text
text
variant
display | headline | title | label | body
weight
regular | thin | mono
Code
<AiShimmer data-test-id="ai-shimmer" iconSize={16} size="m" variant="body" weight="regular" text="Officia cillum labore enim eiusmod exercitation ullamco occaecat utminim consequat labore occaecat est." />

Когда использовать

  • При загрузке AI-ответа, где нужен акцентный движущийся shimmer по тексту.
  • В placeholder-сценариях, когда обычного Skeleton визуально недостаточно.

Когда не нужен

  • Для нейтральной индикации загрузки без текста — используйте @cloud-ru/ds-skeleton.
  • Для спиннера поверх модального окна — используйте @cloud-ru/ds-loader.

Анатомия

Animation

AiShimmer всегда рендерится в анимированном режиме, повторяя shimmer-проход из Figma. Градиентный слой анимируется горизонтально и обрезается по контуру текста через background-clip: text.

Text

Текст shimmer задаётся через проп text. Переносы строк поддерживаются символом \n. Многострочный текст автоматически переносится по ширине контейнера. Высота shimmer-слоя синхронизируется с layout через ResizeObserver и document.fonts.ready.

Typography

Типографика задаётся пропами variant, size и weight — те же значения, что и в @cloud-ru/ds-typography. По умолчанию body / m / regular. Константы VARIANT, SIZE, WEIGHT и дефолты экспортируются из пакета.

import { AiShimmer, DEFAULT_SIZE, DEFAULT_VARIANT, DEFAULT_WEIGHT } from '@cloud-ru/ds-ai-shimmer'

<AiShimmer
  text='Generating...'
  variant={DEFAULT_VARIANT}
  size={DEFAULT_SIZE}
  weight={DEFAULT_WEIGHT}
/>

Установка

pnpm add @cloud-ru/ds-ai-shimmer
import { AiShimmer, DEFAULT_SIZE } from '@cloud-ru/ds-ai-shimmer'

Примеры использования

Базовый

БазовыйОднострочный shimmer с текстом по умолчанию
Generating AI response...
tsx
import { AiShimmer } from '@cloud-ru/ds-ai-shimmer';

export function Basic() {
  return <AiShimmer text='Generating AI response...' />;
}

Многострочный текст

Многострочный текстПереносы через `\n` и автоматический wrap по ширине контейнера
Generating AI response for your request... Please wait a few seconds.
tsx
import { AiShimmer } from '@cloud-ru/ds-ai-shimmer';

export function Multiline() {
  return <AiShimmer text={'Generating AI response for your request...\nPlease wait a few seconds.'} />;
}

Размер шрифта

Размер шрифтаПроп `size` принимает `s`, `m` или `l` — те же размеры, что и в `@cloud-ru/ds-typography`
Size S (body regular)
Size M (body regular)
Size L (body regular)
tsx
import { AiShimmer, SIZE } from '@cloud-ru/ds-ai-shimmer';

export function CustomSize() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <AiShimmer text='Size S (body regular)' size={SIZE.s} />
      <AiShimmer text='Size M (body regular)' size={SIZE.m} />
      <AiShimmer text='Size L (body regular)' size={SIZE.l} />
    </div>
  );
}

Props

Types

PropsAiShimmerProps
PropTypeDefaultRequiredDescription
classNamestring—noДополнительный класс корневого контейнера.
data-test-idstringai-shimmerno
iconMaskstring—noСилуэт ведущей иконки как CSS `mask-image` (обычно `url("data:image/svg+xml,…")`). Если задан — перед текстом рисуется иконка, залитая тем же бегущим градиентом, что и текст: блеск проходит сплошной полосой «иконка → конец строки», как будто иконка — часть текста. Иконка не несёт собственного цвета, она наследует shimmer-покрытие (приглушённая база + блик).
iconSizenumber16noРазмер ведущей иконки в px (квадрат). Действует только с `iconMask`. По умолчанию `16`.
size"l" | "m" | "s"SIZE.mnoРазмер типографики (`s`, `m`, `l`), как в `@cloud-ru/ds-typography`. Задаёт `data-size` и шкалу шрифта для текста shimmer.
textstring—yesТекст, по которому рендерится shimmer. Поддерживает переносы строк через `\n`.
variant"body" | "display" | "headline" | "label" | "title"VARIANT.bodynoВариант типографики, как в `@cloud-ru/ds-typography`. Задаёт `data-variant` и шкалу шрифта.
weight"mono" | "regular" | "thin"WEIGHT.regularnoНачертание шрифта, как в `@cloud-ru/ds-typography`. Задаёт `data-weight`.

Unions

AiShimmerSizeunion

"l" | "m" | "s"

AiShimmerVariantunion

"body" | "display" | "headline" | "label" | "title"

AiShimmerWeightunion

"mono" | "regular" | "thin"

Types

AiShimmerProps

Unions

Storybook

Открыть в Storybook →

Figma

Открыть в Figma →