shimmer

Utility untuk memberi efek kilat berjalan pada teks.

Generating response…

<template>
  <div class="flex items-center justify-center h-full w-full">
    <p class="shimmer text-sm text-muted-foreground">
      Generating response&hellip;
    </p>
  </div>
</template>

Instalasi

Kalau project Anda disiapkan lewat npx shadcn-vue@latest init, shimmer sudah tersedia. Utility ini ikut dalam paket shadcn-vue, yang di-import CLI ke file CSS global Anda.

Kalau belum, pasang paket shadcn-vue:

npm install shadcn-vue

Lalu import utility bersamanya di file CSS global Anda:

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

Penggunaan

Class	Style
shimmer	background-clip: text; animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
shimmer-once	animation-iteration-count: 1;
shimmer-reverse	animation-direction: reverse;
shimmer-none	--shimmer-image: none; --shimmer-text-fill: currentColor;
shimmer-color-<color>	--shimmer-color: <color>;
shimmer-color-[<value>]	--shimmer-color: <value>;
shimmer-color-<color>/<pct>	--shimmer-color: color-mix(in oklch, <color> <pct>, transparent);
shimmer-duration-<number>	--shimmer-duration: calc(<number> * 1ms);
shimmer-spread-<number>	--shimmer-spread: calc(var(--spacing) * <number>);
shimmer-spread-[<value>]	--shimmer-spread: <value>;
shimmer-angle-<number>	--shimmer-angle: calc(<number> * 1deg);

Tambahkan shimmer pada sebuah elemen teks.

<p class="shimmer text-muted-foreground">Generating response&hellip;</p>

Efek shimmer dibangun di atas currentColor, jadi ia menyesuaikan elemennya:

• Warna kilatnya diturunkan dari warna teks, tanpa perlu diatur.
• Berfungsi pada warna apa pun, dari text-muted-foreground sampai warna brand Anda.
• Di mode gelap, kilatnya otomatis dicerahkan supaya tetap terlihat.

Efeknya murni CSS. Teksnya digambar memakai background-clip: text, lalu kilatnya menyapu melintasi teks dalam putaran yang mulus.

Warna

Pakai shimmer-color-<warna> untuk menentukan warna kilatnya secara langsung. Ia menerima warna tema, boleh disertai modifier opasitas, atau nilai warna bebas.

Generating response…

Generating response…

<template>
  <div class="flex flex-col items-center gap-2 text-sm text-muted-foreground">
    <p class="shimmer shimmer-color-blue-500/60">
      Generating response&hellip;
    </p>
    <p class="shimmer shimmer-color-[#378ADD]">
      Generating response&hellip;
    </p>
  </div>
</template>

Durasi

Pakai shimmer-duration-<angka> untuk menentukan lama satu sapuan dalam milidetik. Bawaannya 2000, alias 2s.

Generating response…

shimmer

Generating response…

shimmer-duration-1000

<template>
  <div class="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">
    <div class="flex flex-col gap-3">
      <p class="shimmer">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        shimmer
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <p class="shimmer shimmer-duration-1000">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        shimmer-duration-1000
      </p>
    </div>
  </div>
</template>

Lebar Kilat

Pakai shimmer-spread-<angka> untuk menentukan lebar pita kilatnya memakai skala spacing. Bawaannya calc(3ch + 40px) — nilai dasar tetap ditambah bagian 3ch yang ikut membesar bersama ukuran font.

Generating response…

shimmer-spread-4

Generating response…

shimmer-spread-24

<template>
  <div class="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">
    <div class="flex flex-col gap-3">
      <p class="shimmer shimmer-spread-4">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        shimmer-spread-4
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <p class="shimmer shimmer-spread-24">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        shimmer-spread-24
      </p>
    </div>
  </div>
</template>

Untuk nilai sekali pakai, gunakan panjang atau persentase bebas:

<p class="shimmer shimmer-spread-[5rem]">Generating response&hellip;</p>

Kemiringan

Pakai shimmer-angle-<angka> untuk menentukan kemiringan pita kilatnya dalam derajat. Bawaannya 20.

Generating response…

shimmer

Generating response…

shimmer-angle-45

<template>
  <div class="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">
    <div class="flex flex-col gap-3">
      <p class="shimmer">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        shimmer
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <p class="shimmer shimmer-angle-45">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        shimmer-angle-45
      </p>
    </div>
  </div>
</template>

Arah Berlawanan

Pakai shimmer-reverse untuk menyapukan kilatnya ke arah sebaliknya. Pada tata letak RTL, sapuannya memang sudah mengikuti arah baca. Lihat RTL.

Sekali Jalan

Pakai shimmer-once supaya kilatnya menyapu sekali saja, bukan berulang — berguna sebagai penanda saat proses streaming selesai. Padukan dengan shimmer-duration-<angka> untuk mengatur lama sapuannya.

Generating response…

<script setup lang="ts">
import { ref } from 'vue'
import { Button } from '@/components/ui/button'

const key = ref(0)
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <p
      :key="key"
      class="shimmer text-sm text-muted-foreground shimmer-duration-1100 shimmer-once"
    >
      Generating response&hellip;
    </p>
    <Button
      variant="outline"
      size="sm"
      @click="key++"
    >
      Replay
    </Button>
  </div>
</template>

Mematikan Efek Shimmer

Pakai shimmer-none untuk mematikan efeknya dan menampilkan teks seperti biasa. Urutan class-nya tidak berpengaruh, jadi biasanya dipakai secara responsif atau bergantung state:

Generating response…

shimmer md:shimmer-none

<template>
  <div class="flex flex-col items-center gap-3 text-sm text-muted-foreground">
    <p class="shimmer md:shimmer-none">
      Generating response&hellip;
    </p>
    <p class="font-mono text-xs">
      shimmer md:shimmer-none
    </p>
  </div>
</template>

Kalau Browser Belum Mendukung

Efek shimmer dibangun di atas fitur warna modern — relative color syntax dan color-mix() — yang sudah tersedia di semua browser terkini. Di browser lama yang belum mendukungnya, gradasi kilatnya dilepas dan teksnya bisa tampil transparan. Kalau Anda menyasar browser lama, pasang shimmer secara bersyarat lewat varian supports-*:

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

Saat Pengguna Membatasi Animasi

Kalau pengguna memilih membatasi animasi, efeknya otomatis dimatikan dan teksnya tampil seperti biasa. Tidak ada yang perlu Anda atur.

RTL

Sapuannya mengikuti arah baca — kiri ke kanan pada LTR, kanan ke kiri pada RTL — tanpa class tambahan. Pakai shimmer-reverse kalau ingin membalik arahnya secara manual.

Generating response…

dir="ltr"

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

dir="rtl"

<template>
  <div class="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">
    <div class="flex flex-col gap-3">
      <p dir="ltr" class="shimmer">
        Generating response&hellip;
      </p>
      <p class="font-mono text-xs">
        dir=&quot;ltr&quot;
      </p>
    </div>
    <div class="flex flex-col gap-3">
      <p dir="rtl" class="shimmer">
        جارٍ إنشاء الرد&hellip;
      </p>
      <p class="font-mono text-xs">
        dir=&quot;rtl&quot;
      </p>
    </div>
  </div>
</template>