Feedback and status
Text Shimmer
A restrained animated text treatment for transient loading states.
⠋
Install
npx shadcn@latest add https://4af.selfsimilar.dev/r/text-shimmer.jsonUsage
import { TextShimmer } from "@/components/ui/text-shimmer";
<TextShimmer duration={2.5}>Syncing changes…</TextShimmer>API
Main export: TextShimmer
A looping highlight across a label, for work in progress. as renders a different element, and
duration sets the cycle length.
The label appears once in the DOM and truncates with an ellipsis at its container's width. Under
reduced motion, and in browsers without text-mask support, the text is static. The overlay CSS
ships in the shared theme; animate-text-shimmer is its activation class, not a Tailwind
animation token.