Shimmer

Une bande de lumière qui balaie le texte pour les états en cours, teintée à partir de la couleur du texte et immobile avec la réduction des animations.

Thinking about your question…

export function ShimmerDemo() {
  return (
    <p className="shimmer text-base text-muted-foreground">
      Thinking about your question…
    </p>
  )
}

Installation

Shimmer est un utilitaire Tailwind issu du tailwind.css de shadcn. Le thème HextaUI l'importe déjà : si vous avez ajouté le thème ou un composant, vous l'avez.

pnpm dlx shadcn@latest add https://hextaui.com/r/theme.json

Sans le thème, installez shadcn et importez son CSS après Tailwind.

pnpm add shadcn

app/globals.css

@import "tailwindcss";
@import "shadcn/tailwind.css";

Utilisation

<p className="shimmer text-muted-foreground">Generating response…</p>

Utilisez-le sur un texte court qui décrit un travail en cours, comme un assistant qui réfléchit, un fichier en cours de traitement ou une étape qui s'exécute. La surbrillance mobile dit « toujours en cours » sans qu'un spinner occupe de la place à côté des mots.

Fonctionnement

Le texte est peint avec un dégradé via background-clip: text, et une bande plus claire glisse dessus. La bande est dérivée de la couleur propre du texte : elle convient donc au texte atténué, au premier plan ou coloré sans configuration, et elle s'éclaircit en mode sombre, où une bande plus claire se lit mieux.

Avec la réduction des animations, le dégradé est entièrement retiré et le texte s'affiche dans sa couleur normale.
Dans les mises en page de droite à gauche, le balayage s'inverse et suit donc toujours le sens de lecture.
Le texte reste du vrai texte : sélectionnable, recherchable et lu normalement par les lecteurs d'écran.

Exemples

Options

La vitesse, la largeur de la bande, la couleur et l'angle tiennent chacun en une classe.

export function ShimmerOptions() {
  return (
    <div className="flex flex-col items-start gap-4 text-sm">
      <p className="shimmer text-muted-foreground shimmer-duration-1000">
        Faster: shimmer-duration-1000
      </p>
      <p className="shimmer text-muted-foreground shimmer-spread-24">
        Wider band: shimmer-spread-24
      </p>
      <p className="shimmer text-foreground shimmer-color-info">
        Tinted: shimmer-color-info
      </p>
      <p className="shimmer text-muted-foreground shimmer-angle-45">
        Steeper: shimmer-angle-45
      </p>
    </div>
  )
}

Mises à jour de statut

Faites scintiller pendant qu'une tâche s'exécute, puis balayez une fois avec shimmer-once à la fin. Changer la key relance le balayage à chaque nouvelle étape.

"use client"

import * as React from "react"
import { cn } from "cn"

import { Button } from "@/components/ui/button"

const steps = ["Reading files…", "Planning changes…", "Writing code…"]

export function ShimmerStatus() {
  const [step, setStep] = React.useState<number | null>(null)

  React.useEffect(() => {
    if (step === null || step >= steps.length) {
      return
    }
    const timer = setTimeout(() => setStep(step + 1), 1600)
    return () => clearTimeout(timer)
  }, [step])

  const done = step !== null && step >= steps.length

  return (
    <div className="flex flex-col items-center gap-4">
      <p
        key={step ?? "idle"}
        role="status"
        className={cn(
          "h-5 text-sm text-muted-foreground",
          step !== null && "shimmer",
          done && "shimmer-duration-1200 shimmer-once"
        )}
      >
        {step === null ? "Ready" : done ? "Done." : steps[step]}
      </p>
      <Button variant="outline" size="sm" onClick={() => setStep(0)}>
        Run task
      </Button>
    </div>
  )
}

Direction et points de rupture

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

Bon à savoir

Limitez-le à une ou deux lignes. Un paragraphe scintillant fatigue à lire.
Placez le texte dans une région role="status" quand il change, pour que la nouvelle étape soit annoncée. Le scintillement lui-même est décoratif.
Pour des blocs de remplissage plutôt que du texte, utilisez Skeleton, qui fait scintiller les surfaces avec le animate-shimmer du thème.

Référence de l’API

Classe	Description
`shimmer`	Balaie le texte d'une surbrillance, toutes les 2s.
`shimmer-once`	Balaie une seule fois au lieu de se répéter.
`shimmer-reverse`	Balaie dans le sens opposé.
`shimmer-none`	Le désactive, par exemple à un point de rupture.
`shimmer-color-<color>`	Couleur de la surbrillance, issue du thème ou arbitraire. Accepte un modificateur d'opacité.
`shimmer-duration-<ms>`	Durée d'un balayage en millisecondes.
`shimmer-spread-<number>`	Largeur de la bande sur l'échelle d'espacement, ou n'importe quelle longueur. 3ch + 40px par défaut.
`shimmer-angle-<deg>`	Inclinaison de la bande. 20° par défaut.