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.
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>
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] 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] will-change-[background-position]'
}
}
})
]
})
Changelog
No recent changes