Shimmer

export function ShimmerDemo() {
  return (
    <p className="shimmer text-sm text-muted-foreground">

インストール#

npx shadcn@latest init でプロジェクトを設定している場合は、すでに shimmer を利用できます。shadcn パッケージに含まれており、CLI がグローバル CSS ファイルにインポートします。

それ以外の場合は、shadcn パッケージをインストールします。

pnpmnpmyarnbun
pnpm add shadcn
コピー

次に、共有ユーティリティをグローバル CSS ファイルにインポートします。

コピー@import "tailwindcss";
@import "shadcn/tailwind.css";

使い方#

shimmer をテキスト要素に追加します。

コピー<p className="shimmer text-muted-foreground">Generating response&hellip;</p>

シマーは currentColor に基づいて構築されるため、次の要素に適応します。

• ハイライトはテキストの色から派生し、構成は必要ありません。
• text-muted-foreground からブランドカラーまで、あらゆる色に対応します。
• ダーク モードでは、ハイライトが自動的に明るくなり、視認性が維持されます。

効果は純粋な CSS で実現されています。テキストは background-clip: text で描画され、ハイライトが継ぎ目なくループして横切ります。

マーカー付き#

シマーはテキストを描画する任意のコンポーネントと組み合わせられます。よくあるパターンは、アシスタントの処理中にライブ状態を表示する Marker です。

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/base/marker"
import { Spinner } from "@/components/ui/base/spinner"

コピー<Marker role="status">
  <MarkerIcon>
    <Spinner />
  </MarkerIcon>
  <MarkerContent className="shimmer">Thinking&hellip;</MarkerContent>
</Marker>

カラー#

shimmer-color-<color> を使うとハイライト色を明示的に設定できます。任意の不透明度修飾子付きテーマ色や、任意の色の値を受け取ります。

export function ShimmerColor() {
  return (
    <div className="flex flex-col items-center gap-2 text-sm text-muted-foreground">

コピー<p className="shimmer shimmer-color-blue-500/60">Generating response&hellip;</p>
<p className="shimmer shimmer-color-[#378ADD]">Generating response&hellip;</p>

期間#

shimmer-duration-<number> を使用して、1 回のスイープにかかる時間をミリ秒単位で設定します。デフォルトは 2000（つまり 2s）です。

export function ShimmerDuration() {
  return (
    <div className="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">

コピー<p className="shimmer shimmer-duration-1000">Generating response&hellip;</p>

広がり#

shimmer-spread-<number> を使用して、間隔スケールに基づきハイライト バンドの幅を設定します。デフォルトは calc(3ch + 40px) で、固定のベース値に、フォント サイズに応じて拡大縮小する 3ch 分の項を加えたものです。

export function ShimmerSpread() {
  return (
    <div className="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">

コピー<p className="shimmer shimmer-spread-24">Generating response&hellip;</p>

一度だけ使う値には、任意の長さまたはパーセンテージを指定します。

コピー<p className="shimmer shimmer-spread-[5rem]">Generating response&hellip;</p>

角度#

shimmer-angle-<number> を使用して、ハイライト バンドの傾きを度単位で設定します。デフォルトは 20 です。

export function ShimmerAngle() {
  return (
    <div className="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">

コピー<p className="shimmer shimmer-angle-45">Generating response&hellip;</p>

反転#

shimmer-reverse を使用して、ハイライトを反対方向にスイープします。 RTL レイアウトでは、スイープはすでに読み取り方向に従います。 RTL を参照してください。

コピー<p className="shimmer shimmer-reverse">Generating response&hellip;</p>

1 回だけ再生する#

shimmer-once を使用すると、ループの代わりに単一のスイープを再生できます。これは、ストリーミング完了時のリビールとして役立ちます。 shimmer-duration-<number> と組み合わせて、スイープにかかる時間を制御します。

"use client"

import * as React from "react"

コピー<p className="shimmer shimmer-duration-1100 shimmer-once">
  Response generated.
</p>

シマーを無効にする#

shimmer-none を使うと効果を無効にし、テキストを通常どおり描画します。クラスの順序に関係なく動作するため、レスポンシブまたは状態に応じた使い方ができます。

export function ShimmerNone() {
  return (
    <div className="flex flex-col items-center gap-3 text-sm text-muted-foreground">

コピー<p className="shimmer md:shimmer-none">Generating response&hellip;</p>

フォールバック#

シマーは、現在のすべてのブラウザで利用できる最新のカラー機能、相対カラー構文 および color-mix() に基づいて構築されています。サポートされていない古いブラウザでは、ハイライトのグラデーションが削除され、テキストが透明になる可能性があります。古いブラウザを対象とする場合は、supports-* バリアントを使用して shimmer を条件付きで適用します。

コピー<p className="supports-[color:oklch(from_white_l_c_h)]:shimmer">
  Generating response&hellip;
</p>

視覚効果を減らす#

ユーザーが動きを減らしたい場合、アニメーションは自動的に無効になり、テキストは通常どおり表示されます。設定するものは何もありません。

RTL#

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

スイープは読み取り方向 (LTR では左から右、RTL では右から左) に従います。追加のクラスはありません。方向を手動で反転するには、shimmer-reverse を使用します。

export function ShimmerRtl() {
  return (
    <div className="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">