Text shimmer

Text shimmer sweeps a soft highlight across its text, a CSS-only loading shimmer for pending, streaming or "AI is thinking" states. The effect clips an animated gradient to the text itself, so it works on any font size or weight without extra markup.

Generating response...

TIP

The sweep respects prefers-reduced-motion: when reduced motion is requested the text falls back to a plain, solid color with no animation. The text lives in the default slot, so it stays fully readable to screen readers.

Props

color?: string
The resting text color the shimmer sweeps across. Accepts any CSS color.
Default: var(--gray-400)

duration?: number
How long one shimmer sweep takes, in seconds.
Default: 2

shimmer-color?: string
The color of the highlight band that sweeps across the text. Accepts any CSS color.
Default: var(--gray-950)

spread?: number
The width of the highlight band, as a percentage of the text width. Larger values give a softer, wider glow.
Default: 15

Slots

default
The text that the shimmer sweeps across.

Examples

Thinking

Show the shimmer while a task is running, then swap it for a solid result once it settles.

Preview

Analyzing your dashboard...

Code

<template>
    <FluxFlex
        align="start"
        direction="vertical"
        :gap="15">
        <FluxVisualTextShimmer
            v-if="thinking"
            style="font-size: 18px; font-weight: 600;">
            Analyzing your dashboard...
        </FluxVisualTextShimmer>

        <span
            v-else
            style="color: var(--success-600); font-size: 18px; font-weight: 600;">Analysis complete</span>

        <FluxSecondaryButton
            :label="thinking ? 'Finish' : 'Restart'"
            @click="thinking = !thinking"/>
    </FluxFlex>
</template>

<script
    lang="ts"
    setup>
    import { FluxFlex, FluxSecondaryButton } from '@flux-ui/components';
    import { FluxVisualTextShimmer } from '@flux-ui/visuals';
    import { ref } from 'vue';

    const thinking = ref(true);
</script>

Colors

Tint the resting text and the highlight with color and shimmer-color, and widen the band with spread.

Preview

Syncing data Deploying release

Code

<template>
    <FluxFlex
        align="start"
        direction="vertical"
        :gap="15">
        <FluxVisualTextShimmer
            color="var(--primary-300)"
            shimmer-color="var(--primary-600)"
            :duration="1.6"
            :spread="25"
            style="font-size: 21px; font-weight: 600;">
            Syncing data
        </FluxVisualTextShimmer>

        <FluxVisualTextShimmer
            color="var(--success-300)"
            shimmer-color="var(--success-600)"
            :duration="1.6"
            :spread="25"
            style="font-size: 21px; font-weight: 600;">
            Deploying release
        </FluxVisualTextShimmer>
    </FluxFlex>
</template>

<script
    lang="ts"
    setup>
    import { FluxFlex } from '@flux-ui/components';
    import { FluxVisualTextShimmer } from '@flux-ui/visuals';
</script>