Утилита shimmer полностью состоит из CSS и основана на shadcn/shimmer. Никаких расширений для rxconfig.py не требуется, поскольку он использует синтаксис Tailwind v4.

Если ваш проект был настроен с использованием buridan init, мерцание у вас уже есть. Он поставляется с пакетом buridan, который CLI импортирует в ваш глобальный файл CSS.

В противном случае установите пакет buirdan:

uv run buridan init

Вы также можете скопировать и вставить источник shimmer непосредственно в файл globals.css. Убедитесь, что вы также включили правильный импорт, например @tailwind utilities; в верхней части CSS-файла.

@property --shimmer-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 20deg;
}
@property --shimmer-image {
    syntax: "*";
    inherits: false;
}
@property --shimmer-text-fill {
    syntax: "*";
    inherits: false;
}

@theme inline {
    @keyframes tw-shimmer {
        from {
            background-position: 100% 0;
        }
        to {
            background-position: 0 0;
        }
    }
}

@utility shimmer {
    --_spread: var(--shimmer-spread, calc(3ch + 40px));
    --_base: currentColor;
    --_highlight: var(
        --shimmer-color,
        oklch(from currentColor l c h / calc(alpha* 0.2))
    );

    background-image: var(
        --shimmer-image,
        linear-gradient(
            calc(90deg + var(--shimmer-angle)),
            var(--_base) calc(50% - var(--_spread)),
            color-mix(in oklch, var(--_highlight), var(--_base) 50%)
                calc(50% - var(--_spread) * 0.5),
            var(--_highlight) 50%,
            color-mix(in oklch, var(--_highlight), var(--_base) 50%)
                calc(50% + var(--_spread) * 0.5),
            var(--_base) calc(50% + var(--_spread))
        )
    );
    background-repeat: no-repeat;
    background-size: calc(200% + var(--_spread) * 2) 100%;
    background-position: 0 0;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
    animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;

    @variant dark {
        --_highlight: var(
            --shimmer-color,
            oklch(
                from currentColor max(0.8, calc(l + 0.4)) c h /
                    calc(alpha + 0.4)
            )
        );
    }

    &:where([dir="rtl"], [dir="rtl"] *) {
        animation-direction: reverse;
    }
}

@utility shimmer-once {
    animation-iteration-count: 1;
}

@utility shimmer-reverse {
    animation-direction: reverse;
}

@utility shimmer-none {
    --shimmer-image: none;
    --shimmer-text-fill: currentColor;
}

@utility shimmer-color-* {
    --shimmer-color: --value(--color, [color]);
    --shimmer-color: color-mix(
        in oklch,
        --value(--color, [color]) calc(--modifier(integer) * 1%),
        transparent
    );
}

@utility shimmer-duration-* {
    --shimmer-duration: calc(--value(integer) * 1ms);
}

@utility shimmer-spread-* {
    --shimmer-spread: calc(var(--spacing) * --value(integer));
    --shimmer-spread: --value([length], [percentage]);
}

@utility shimmer-angle-* {
    --shimmer-angle: calc(--value(integer) * 1deg);
}

@media (prefers-reduced-motion: reduce) {
    .shimmer {
        animation: none;
        background-image: none;
        -webkit-text-fill-color: currentColor;
    }
}

Использование

Добавьте мерцание к текстовому элементу.

rx.el.p("Generating response", class_name="shimmer text-muted-foreground w-fit")

Эффект — чистый CSS. Текст окрашен background-clip: text, и выделение плавно перемещается по нему.

Примечание. Если утилита shimmer не работает должным образом, попробуйте добавить w-fit к стилю текста, поскольку это гарантирует, что анимация не будет превышать ширину, наследующую текст.

Цвет

Используйте shimmer-color-<color>, чтобы явно установить цвет выделения. Он принимает цвета темы с дополнительным модификатором непрозрачности или любое произвольное значение цвета.

Продолжительность

Используйте shimmer-duration-<number>, чтобы установить продолжительность одной развертки в миллисекундах. По умолчанию используется 2000, т. е. 2s.

Распространение

Используйте shimmer-spread-<number>, чтобы установить ширину полосы выделения с помощью шкалы интервалов. По умолчанию используется calc(3ch + 40px): фиксированная база плюс термин 3ch, который масштабируется в зависимости от размера шрифта.

Угол

Используйте shimmer-angle-<number>, чтобы установить наклон полосы подсветки в градусах. По умолчанию — 20.

Реверс

Используйте shimmer-reverse, чтобы сдвинуть свет в противоположном направлении.

Играть один раз

Используйте shimmer-once для воспроизведения одной развертки вместо зацикливания, что полезно в качестве индикатора завершения потоковой передачи. Соедините его с shimmer-duration-<number>, чтобы контролировать продолжительность развертки.

rx.el.p("Response Generated", class_name="shimmer shimmer-duration-1100 shimmer-once")

Отключение мерцания

Используйте shimmer-none, чтобы отключить эффект и нормально отобразить текст. Он работает в любом порядке классов, поэтому типичное использование — адаптивное или с сохранением состояния.