ChatShimmer

サイトマップ
テキストシマーアニメーション効果を表示します。

使用法

ChatShimmerコンポーネントは、チャットインターフェイスでストリーミングまたはロード状態を示すために一般的に使用される、テキスト上にアニメーションの輝くグラデーションで要素をレンダリングします。

このコンポーネントはストリーミング時にChatToolおよびChatReasoningコンポーネントで自動的に使用されます。
アニメーションは、ユーザーが縮小された動きを好む場合に自動的に無効になり、テキストは代わりに静的なミュートテキストとして表示されます。

Text

textプロパティを使用して、シマーテキストを設定します。

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

Duration

durationプロパティを使用して、アニメーション速度を秒単位で制御します。

Thinking...
<template>
  <UChatShimmer text="Thinking..." :duration="4" />
</template>

Spread

spreadプロパティを使用して、シマーハイライトの幅を制御します。実際のスプレッドはtext.length * spreadとしてピクセル単位で計算されます。

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

例

インストール手順、サーバーのセットアップ、使用例については、Chatの概要ページをご覧ください。

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.

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: '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))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted'
    }
  }
})
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))] motion-safe:animate-[shimmer_var(--duration)_linear_infinite] motion-safe:rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] motion-reduce:bg-none motion-reduce:text-muted'
        }
      }
    })
  ]
})

Changelog

No recent changes

ChatReasoning

Display a collapsible AI reasoning or thinking process.

ChatTool

Display a collapsible AI tool invocation status.