Motion
Shimmer
One soft highlight sweeping across a surface. It is the loading language of Luc UI — a skeleton that carries shape, not a spinner that only says “wait”.
Playground
A single band, moving on the standard curve. Nothing else on the surface animates.
Controls
Speed
Active
Rendered as
<Shimmer speed={1.9} active={true} />Writing artifacts
62%The sweep is a transform on one pseudo-layer, so it costs a compositor frame, not a repaint.
<Shimmer speed={1.9} active={true} />ShimmerText
Text whose fill carries the highlight, drawn with background-clip so nothing is layered over the glyphs.
Rebuilding factor library…
Steady gradient without movement
Use it for in-progress titles and values. Never for body copy you need to read while it moves.
Composed loading states
Skeleton, Shimmer and Spinner cover three different waits.
When not to shimmer
If the wait is under ~200ms, show nothing. A flash of a placeholder is worse than a still frame.
API
| Prop | Type | Default | Notes |
|---|---|---|---|
Shimmer speed | number | 1.9 | Seconds per sweep. |
Shimmer active | boolean | true | Hide the band without unmounting. |
ShimmerText animate | boolean | true | Steady gradient when false. |
Skeleton shimmer | boolean | true | The skeleton uses the same band as its built-in sweep. |
Rules
Do
- Keep the band at hairline contrast — it should be felt, not watched.
- Place the Shimmer over a surface that has
overflow-hidden. - Stop it as soon as the data arrives.
Don't
- Run two shimmer speeds on the same surface.
- Use shimmer as a hover effect on interactive content.
- Animate a shimmer behind text you must read.
Related