shimmer

Utilities for adding a shimmer effect to text elements.

Generating response…

Thinking…

Oliver is typing…

tsx

shimmer — reflet lumineux qui balaie horizontalement du texte. Pattern typique : indiquer qu'un modèle IA est en train de générer une réponse, ou qu'un job attend un résultat.

Construit sur background-clip: text et un gradient animé — pur CSS, zéro JS. Le reflet dérive de currentColor, donc s'adapte à toutes les couleurs sans configuration.

Auto-désactivé quand l'utilisateur préfère un mouvement réduit (prefers-reduced-motion: reduce).

Usage

Class	Styles
shimmer	`background-clip: text` + `animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite`
shimmer-once	`animation-iteration-count: 1` — un seul sweep (bon pour un reveal après streaming).
shimmer-reverse	`animation-direction: reverse`.
shimmer-none	Désactive le shimmer (variante responsive : `md:shimmer-none`).
--shimmer-color	Couleur du highlight (défaut : dérivé de `currentColor`). Set inline : `style="--shimmer-color: #60a5fa"`.
--shimmer-duration	Durée d'un sweep. Défaut `2s`. Ex : `style="--shimmer-duration: 1000ms"`.
--shimmer-spread	Largeur de la bande. Défaut `calc(3ch + 40px)`.
--shimmer-angle	Inclinaison. Défaut `20deg`.

With Marker

Le shimmer compose avec n'importe quel composant qui rend du texte. Un pattern typique : un Marker qui affiche un statut live pendant que l'assistant travaille.

Thinking…

tsx

1
2
3
4<Marker role="status">
  <MarkerIcon><Spinner /></MarkerIcon>
  <MarkerContent className="shimmer">Thinking…</MarkerContent>
</Marker>

Color

Set le highlight via --shimmer-color (accepte n'importe quelle couleur CSS).

Generating response…

tsx

<p className="shimmer text-blue-500" style={{ "--shimmer-color": "#60a5fa" } as any}>Generating response…</p>

Duration

Set --shimmer-duration pour la durée d'un sweep. Défaut 2000ms.

Generating response… (defaut 2000ms)

Generating response… (1000ms) < /p>

Generating response… (4000ms) < /p>

tsx

<p className="shimmer" style={{ "--shimmer-duration": "1000ms" } as any}>Generating response…</p>

Spread

Set --shimmer-spread pour la largeur de la bande de highlight.

Generating response… (defaut)

Generating response… (spread 8rem) < /p>

tsx

<p className="shimmer" style={{ "--shimmer-spread": "8rem" } as any}>Generating response…</p>

Angle

Set --shimmer-angle pour l'inclinaison. Défaut 20deg.

angle 0°

angle 45°

angle 90°

tsx

<p className="shimmer" style={{ "--shimmer-angle": "45deg" } as any}>Generating response…</p>

Reverse

shimmer-reverse inverse la direction du balayage.

Generating response…

tsx

<p className="shimmer shimmer-reverse">Generating response…</p>

Play Once

shimmer-once joue un seul sweep au lieu de looper — bon pour un reveal en fin de streaming. Combine avec --shimmer-duration pour contrôler la durée du reveal.

Response generated.

tsx

<p className="shimmer shimmer-once" style={{ "--shimmer-duration": "1100ms" } as any}>Response generated.</p>

Disabling the Shimmer

shimmer-none désactive l'effet et rend le texte normalement. Utile en variante responsive.

tsx

<p className="shimmer md:shimmer-none">Generating response…</p>

Reduced Motion

Quand l'utilisateur préfère un mouvement réduit, l'animation est désactivée automatiquement et le texte rend normalement. Rien à configurer.

RTL

Le sweep suit la direction de lecture — LTR gauche→droite, RTL droite→gauche — sans classe supplémentaire. Utilise shimmer-reverse pour flipper manuellement.

جاري إنشاء الرد…

On This Page