Vinicunca

ChatShimmer

GitHub
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.

This component is automatically used by the ChatTool and ChatReasoning components when streaming.
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.

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

Duration

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

Thinking...
<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.

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

Examples

Check the Chat overview page for installation instructions, server setup and usage examples.

API

Props

Prop Default Type
as
'span'
any

The element or component this component should render as.

text
string

The text to display with the shimmer effect.

class
any
duration
2
number

The duration of the shimmer animation in seconds.

spread
2
number

The spread multiplier for the shimmer highlight. The actual spread is computed as text.length * spread in pixels.

ui
{}

Theme

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'
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      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

No recent changes

ChatReasoning

Display a collapsible AI reasoning or thinking process.

ChatTool

Display a collapsible AI tool invocation status.