ChatShimmer Soon
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.Text
Use the text prop to set the shimmer text.
Thinking...
<template>
<UChatShimmer text="Thinking..." />
</template>
Duration
Use the duration prop to control the animation speed in seconds.
Thinking...
<template>
<UChatShimmer 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>
<UChatShimmer text="Thinking..." :spread="5" />
</template>
Examples
API
Props
| Prop | Default | Type |
|---|---|---|
as | 'span' | anyThe element or component this component should render as. |
text | stringThe text to display with the shimmer effect. | |
duration | 2 | numberThe duration of the shimmer animation in seconds. |
spread | 2 | numberThe spread multiplier for the shimmer highlight. The actual spread is computed as |
ui | {} |
Theme
app.config.ts
export default defineAppConfig({
ui: {
chatShimmer: {
base: 'text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]'
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
chatShimmer: {
base: 'text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position]'
}
}
})
]
})
Changelog
No recent changes