---
title: "ChatShimmer"
description: "Display a text shimmer animation effect."
canonical_url: "https://vinicunca.dev/pohon/components/chat-shimmer"
---
# ChatShimmer

> Display a text shimmer animation effect.

## Usage

The ChatShimmer component renders an element with an animated shimmer gradient over text, commonly used to indicate streaming or loading states in chat interfaces.

> [!NOTE]
> 
> This component is automatically used by the [`ChatTool`](https://vinicunca.dev/pohon/components/chat-tool) and [`ChatReasoning`](https://vinicunca.dev/pohon/components/chat-reasoning) components when streaming.

> [!TIP]
> 
> The animation is automatically disabled when the user prefers reduced motion, the text is displayed as static muted text instead.

### Text

Use the `text` prop to set the shimmer text.

```vue
<template>
  <PChatShimmer text="Thinking..." />
</template>
```

### Duration

Use the `duration` prop to control the animation speed in seconds.

```vue
<template>
  <PChatShimmer text="Thinking..." :duration="4" />
</template>
```

### Spread

Use the `spread` prop to control the width of the shimmer highlight. The actual spread is computed as `text.length * spread` in pixels.

```vue
<template>
  <PChatShimmer text="Thinking..." :spread="5" />
</template>
```

## Examples

> [!TIP]
> See: /pohon/components/chat
> 
> Check the **Chat** overview page for installation instructions, server setup and usage examples.

## API

### Props

```ts
/**
 * Props for the ChatShimmer component
 */
interface ChatShimmerProps {
  /**
   * The text to display with the shimmer effect.
   */
  text: string;
  /**
   * The element or component this component should render as.
   * @default 'span'
   */
  as?: any;
  class?: any;
  /**
   * The duration of the shimmer animation in seconds.
   * @default 2
   */
  duration?: number | undefined;
  /**
   * The spread multiplier for the shimmer highlight. The actual spread is computed as `text.length * spread` in pixels.
   * @default 2
   */
  spread?: number | undefined;
  ui?: {} | undefined;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    chatShimmer: {
      base: 'motion-reduce:color-text-muted text-transparent will-change-[background-position] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-color-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-color-text-muted),var(--ui-color-text-muted))] bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-clip-text bg-no-repeat motion-safe:animate-shimmer motion-reduce:bg-none motion-safe:rtl:animate-shimmer-rtl'
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/vinicunca/pohon/commits/main/src/runtime/components/ChatShimmer.vue) and [theme](https://github.com/vinicunca/pohon/commits/main/src/theme/chat-shimmer.ts).

---

- [GitHub](https://github.com/vinicunca/pohon/blob/main/src/runtime/components/ChatShimmer.vue)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.