10.2k
New

shimmer

Previous

Utilities for adding a shimmer effect to text elements.

Generating response… 

<template>
  <div class="flex items-center justify-center h-full w-full">
    <p class="shimmer text-sm text-muted-foreground">
      Generating response&hellip;
    </p>
  </div>
</template>

Installation

If your project was set up with npx shadcn-vue@latest init, you already have shimmer. It ships with the shadcn-vue package, which the CLI imports in your global CSS file.

Usage

ClassStyles
shimmerbackground-clip: text;
animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
shimmer-onceanimation-iteration-count: 1;
shimmer-reverseanimation-direction: reverse;
shimmer-none--shimmer-image: none;
--shimmer-text-fill: currentColor;
shimmer-color-<color>--shimmer-color: <color>;
shimmer-color-[<value>]--shimmer-color: <value>;
shimmer-color-<color>/<pct>--shimmer-color: color-mix(in oklch, <color> <pct>, transparent);
shimmer-duration-<number>--shimmer-duration: calc(<number> * 1ms);
shimmer-spread-<number>--shimmer-spread: calc(var(--spacing) * <number>);
shimmer-spread-[<value>]--shimmer-spread: <value>;
shimmer-angle-<number>--shimmer-angle: calc(<number> * 1deg);

Add shimmer to a text element.

<p class="shimmer text-muted-foreground">Generating response&hellip;</p>

The shimmer is built on currentColor, so it adapts to the element:

  • The highlight is derived from the text color, with no configuration needed.
  • It works on any color, from text-muted-foreground to brand colors.
  • In dark mode, the highlight automatically brightens to stay visible.

The effect is pure CSS. The text is painted with background-clip: text, and the highlight sweeps across it in a seamless loop.

Color

Use shimmer-color-<color> to set the highlight color explicitly. It accepts theme colors with an optional opacity modifier, or any arbitrary color value.

Generating response…

Generating response… 

<template>
  <div class="flex flex-col items-center gap-2 text-sm text-muted-foreground">
    <p class="shimmer shimmer-color-blue-500/60">
      Generating response&hellip;
    </p>
    <p class="shimmer shimmer-color-[#378ADD]">
      Generating response&hellip;
    </p>
  </div>
</template>

Duration

Use shimmer-duration-<number> to set the duration of one sweep in milliseconds. The default is 2000, i.e. 2s.

Generating response…

shimmer

Generating response…

shimmer-duration-1000 

<template>
  <div class="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">
    <div class="flex flex-col gap-3">
      <p class="shimmer">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        shimmer
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <p class="shimmer shimmer-duration-1000">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        shimmer-duration-1000
      </p>
    </div>
  </div>
</template>

Spread

Use shimmer-spread-<number> to set the width of the highlight band using the spacing scale. The default is calc(3ch + 40px): a fixed base plus a 3ch term that scales with the font size.

Generating response…

shimmer-spread-4

Generating response…

shimmer-spread-24 

<template>
  <div class="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">
    <div class="flex flex-col gap-3">
      <p class="shimmer shimmer-spread-4">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        shimmer-spread-4
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <p class="shimmer shimmer-spread-24">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        shimmer-spread-24
      </p>
    </div>
  </div>
</template>

For one-off values, use an arbitrary length or percentage:

<p class="shimmer shimmer-spread-[5rem]">Generating response&hellip;</p>

Angle

Use shimmer-angle-<number> to set the tilt of the highlight band in degrees. The default is 20.

Generating response…

shimmer

Generating response…

shimmer-angle-45 

<template>
  <div class="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">
    <div class="flex flex-col gap-3">
      <p class="shimmer">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        shimmer
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <p class="shimmer shimmer-angle-45">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        shimmer-angle-45
      </p>
    </div>
  </div>
</template>

Reverse

Use shimmer-reverse to sweep the highlight in the opposite direction. In RTL layouts the sweep already follows the reading direction. See RTL.

Play Once

Use shimmer-once to play a single sweep instead of looping, useful as a reveal when streaming completes. Pair it with shimmer-duration-<number> to control how long the sweep takes.

Generating response… 

<script setup lang="ts">
import { ref } from 'vue'
import { Button } from '@/components/ui/button'

const key = ref(0)
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <p
      :key="key"
      class="shimmer text-sm text-muted-foreground shimmer-duration-1100 shimmer-once"
    >
      Generating response&hellip;
    </p>
    <Button
      variant="outline"
      size="sm"
      @click="key++"
    >
      Replay
    </Button>
  </div>
</template>

Disabling the Shimmer

Use shimmer-none to turn the effect off and render the text normally. It works in any class order, so the typical use is responsive or stateful:

Generating response…

shimmer md:shimmer-none 

<template>
  <div class="flex flex-col items-center gap-3 text-sm text-muted-foreground">
    <p class="shimmer md:shimmer-none">
      Generating response&hellip;
    </p>
    <p class="font-mono text-xs">
      shimmer md:shimmer-none
    </p>
  </div>
</template>

Fallback

The shimmer is built on modern color features, relative color syntax and color-mix(), which are available in all current browsers. In older browsers without support, the highlight gradient is dropped and the text can render transparent. If you target older browsers, apply shimmer conditionally with a supports-* variant:

<p class="supports-[color:oklch(from_white_l_c_h)]:shimmer">
  Generating response&hellip;
</p>

Reduced Motion

When the user prefers reduced motion, the animation is disabled automatically and the text renders normally. There is nothing to configure.

RTL

The sweep follows the reading direction, left to right in LTR and right to left in RTL, with no extra classes. Use shimmer-reverse to flip the direction manually.

Generating response…

dir="ltr"

جارٍ إنشاء الرد…

dir="rtl" 

<template>
  <div class="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">
    <div class="flex flex-col gap-3">
      <p dir="ltr" class="shimmer">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        dir=&quot;ltr&quot;
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <p dir="rtl" class="shimmer">
        جارٍ إنشاء الرد&hellip;
      </p>
      <p class="font-mono text-xs">
        dir=&quot;rtl&quot;
      </p>
    </div>
  </div>
</template>
Skills