tw-shimmer
Zero-dependency CSS-only shimmer. Simple, beautiful, and lightweight.
Installation
npm install tw-shimmerText Shimmer
Add shimmer effects to text elements.
💡 Important
You won't see the shimmer if your text color is blackwhite. Set a lighterdarker or semi-transparent text color.
shimmer
Base utility for shimmer effect. Requires text color to be visible.
shimmer-invert
Fades text lighterdarker instead. Allows you to use darkerbrighter text colors and still get a stark shimmer effect.
Automatic Color
Shimmer automatically picks a color based on your text color.
shimmer-color-{color}
Override the automatic color with a custom shimmer color.
shimmer-spread-{value}
Width of the shimmer highlight in pixels. Default: 120px.
shimmer-angle-{value}
Angle of the shimmer sweep in degrees. Default: 15deg (resulting in a 105deg gradient). Higher values create a more diagonal sweep.
Animation Timing
Control how long the shimmer animation takes.
Total animation cycle
Option A
shimmer-duration-{ms}
Fixed duration in milliseconds. Larger elements will appear to move faster since they cover more distance in the same time.
Same duration, different perceived speeds
Option B
shimmer-speed-{px/s}
Speed in pixels per second. All elements sweep at the same visual speed regardless of width. Default: 200px/s.
Same speed, different durations
Width Required for shimmer-speed
CSS can't read text width, so you need to measure it with JavaScript and pass it in. Without it, defaults to 200px.
style={{ "--shimmer-track-width": width }}shimmer-repeat-delay-{value}
Delay between animation cycles in milliseconds. Default: 1000ms. Use 0 for continuous shimmer without pause.
Background Shimmer
Add shimmer to skeleton components and non-text elements.
shimmer shimmer-bg
Background shimmer for skeleton loaders. Apply both shimmer and shimmer-bg classes.
Skeleton Card Example
Wrap skeleton elements in shimmer-container for automatic width detection. Use --shimmer-x and --shimmer-y to coordinate timing across the diagonal sweep.
Uncoordinated
Synchronized with x/y coordinates
Color Customization
Override the shimmer highlight color with shimmer-color-{color}. Default: text color at 20% alpha.
With custom background color