Text Shimmer
A highlight that sweeps across a label while the work it describes is in progress.
Default
The text renders in the tertiary text color with a primary-colored highlight moving across it. It inherits its size from the parent, so set typography with className. children must be a string.
In a row
Use Text Shimmer for the step that is running and plain text once it finishes. It has 4px of vertical padding by default; pass py-0 when it takes the place of text in a row, so the row keeps its height. It also truncates like normal text when you add truncate and a max width.
Duration and spread
duration is the length of one sweep in seconds. spread sets the width of the highlight, in pixels per character, so longer labels get a wider highlight.
Properties
The label to animate
Length of one sweep, in seconds
Default: 1
Width of the highlight, in pixels per character of the label
Default: 2
Additional CSS classes, such as typography or py-0