Shimmer

Devam eden durumlar için metin boyunca süpüren, metin renginden tonlanan ve azaltılmış harekette duran bir ışık bandı.

Thinking about your question…

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

Kurulum

Shimmer, shadcn'in tailwind.css dosyasından gelen bir Tailwind yardımcısıdır. HextaUI teması bunu zaten içe aktarır; bu yüzden temayı veya herhangi bir bileşeni eklediyseniz elinizde vardır.

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

Tema olmadan shadcn'i kurun ve CSS'ini Tailwind'den sonra içe aktarın.

pnpm add shadcn

app/globals.css

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

Kullanım

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

Düşünen bir asistan, işlenen bir dosya veya çalışan bir adım gibi süren işi anlatan kısa metinlerde kullanın. Hareket eden vurgu, sözcüklerin yanında yer kaplayan bir spinner olmadan "hâlâ çalışıyor" der.

Nasıl çalışır

Metin background-clip: text ile bir gradyanla boyanır ve üzerinde daha açık bir bant kayar. Bant metnin kendi renginden türetilir; bu yüzden yapılandırma gerektirmeden soluk, ön plan veya renkli metne uyar ve daha açık bandın daha iyi okunduğu karanlık modda parlaklaşır.

Azaltılmış harekette gradyan tamamen kaldırılır ve metin normal rengiyle işlenir.
Sağdan sola düzenlerde süpürme tersine döner, böylece yine okuma yönünde ilerler.
Metin gerçek metin olarak kalır: seçilebilir, aranabilir ve ekran okuyucular tarafından normal okunur.

Örnekler

Seçenekler

Hız, bant genişliği, renk ve açı her biri tek bir sınıftır.

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>
  )
}

Durum güncellemeleri

Bir görev çalışırken shimmer uygulayın, bittiğinde shimmer-once ile bir kez süpürün. Anahtarı değiştirmek her yeni adım için süpürmeyi yeniden başlatır.

"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>
  )
}

Yön ve breakpoint'ler

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

Bilmekte fayda var

Bir veya iki satırla sınırlı tutun. Parlayan bir paragrafı okumak yorucudur.
Yeni adımın duyurulması için metin değiştiğinde onu bir role="status" bölgesine koyun. Shimmer'ın kendisi dekorasyondur.
Metin yerine yer tutucu bloklar için, yüzeyleri temanın animate-shimmer değeriyle parlatan Skeleton kullanın.

API referansı

Sınıf	Açıklama
`shimmer`	Her 2sn'de metin boyunca bir vurgu süpürür.
`shimmer-once`	Tekrarlamak yerine bir kez süpürür.
`shimmer-reverse`	Ters yönde süpürür.
`shimmer-none`	Kapatır, örneğin bir breakpoint'te.
`shimmer-color-<color>`	Vurgunun rengi; temadan veya keyfi. Bir opaklık değiştiricisi alır.
`shimmer-duration-<ms>`	Bir süpürmenin milisaniye cinsinden süresi.
`shimmer-spread-<number>`	Bandın boşluk ölçeğindeki veya herhangi bir uzunluktaki genişliği. Varsayılan 3ch + 40px.
`shimmer-angle-<deg>`	Bandın eğimi. Varsayılan 20°.