Shimmer Component
Text glow / shimmer effect using CSS gradient clip and keyframe animations. The light sweep passes across the text in a configurable direction, color, and speed.
Notes
- Base:
.shimmer. Default direction is left-to-right (LTR) with a 2s duration.
- Uses
background-clip: text with transparent fill — the shimmer color is derived from currentColor.
- Direction modifiers:
shimmer-start (RTL), shimmer-bottom (TTB), shimmer-top (BTT).
- Color:
shimmer-* (e.g. shimmer-red-500, shimmer-primary).
- Duration:
animate-shimmer-ltr-1000 (1000ms), animate-shimmer-rtl-[3s] (arbitrary).
Basic usage
Default shimmer (LTR, 2s)
Shimmer Text
Different font sizes
Small text
Medium text
Large text
Chinese text
流光文字效果
Direction
LTR (default)
Left to Right
RTL (shimmer-start)
Right to Left
TTB (shimmer-bottom)
Top to Bottom
BTT (shimmer-top)
Bottom to Top
Theme colors
Primary
Primary
Secondary
Secondary
Tertiary
Tertiary
Success
Success
Error
Error
Info
Info
Highlight
Highlight
Warning
Warning
Caution
Caution
Ink
Ink
Title
Title
Description
Description
Caption
Caption
Placeholder
Placeholder
White
White
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
Tailwind colors
Red
Green
Blue
Purple
Raw / named colors
Coral
Sky
Gold
Animation duration
Fast (1s) — animate-shimmer-ltr-1000
Fast
Default (2s) — no class needed
Normal
Slow (4s) — animate-shimmer-ltr-4000
Slow
Very slow (8s) — animate-shimmer-ltr-8000
Very Slow
Direction + duration combinations
RTL + fast
RTL Fast
TTB + slow
TTB Slow
BTT + medium
BTT Medium
Color + direction + duration
Red RTL 3s
Use cases
Brand title
Brand Title
Loading indicator
Loading...
Multi-line tagline
Beautify
Make Your UI Beautiful
Extra large text
SHIMMER