TextShimmer
Text with a looping gradient shimmer sweeping across it via background-clip: text. Token-driven colors keep AA contrast; reduced motion renders static text.
Installation
npx dafink-ui add text-shimmerDemo
Generating your report…Thinking…
Props
| Name | Type | Default | Description |
|---|---|---|---|
| duration | number | calc(var(--duration-slow) * 8) | Duration of one shimmer sweep in milliseconds. Defaults to a token-derived 2400ms. |
| children | ReactNode | - | Required. The text to shimmer. |
| className | string | "" | Additional Tailwind classes merged onto the text element. |
Accessibility
TextShimmer's sweep is a pure CSS @keyframes animation, explicitly disabled by its own @media (prefers-reduced-motion: reduce) block (beyond the global rule) that also removes the gradient and restores static --color-text. The shimmering text is real, readable DOM content — not aria-hidden, since it is the actual content rather than a decorative overlay — and TextShimmer adds no keyboard or focus behavior of its own.