Gradient Shimmer
Zero-dependency React text-shimmer component that sweeps a multi-stop gradient highlight across real DOM text, using the Web Animations API rather than a CSS import or Tailwind dependency.
gradient-shimmer is a narrow UI polish package: selectable, screen-readable text receives a moving highlight band, while the underlying text remains real DOM. The README calls out React 18+, current evergreen browsers, background-clip: text, color-mix(), Element.animate(), IntersectionObserver, off-screen pause behavior, scroll pause behavior, reduced-motion handling, and "use client" entry files for Next.js App Router projects. Source: GitHub README, 2026-07-03
The local X artifact shows the intended product surface: a dark/light preview app with preset gradient swatches, text input, easing controls (Smooth, Gentle, Snappy), and GitHub/X links. The linked demo page adds the practical knobs: speed 1.45s, spread 3px/char, angle 105deg, pause 700ms, plus a channel-sidebar example where shimmer marks agent/workspace activity without becoming a whole loading screen. Source: X/@mona_biasia, 2026-06-21; Source: local media review, 2026-07-03
Version Snapshot
Checked 2026-07-03:
| Surface | Current |
|---|---|
| npm | gradient-shimmer@0.1.1, MIT, latest=0.1.1, created and modified 2026-06-21 |
| GitHub | BIAsia/gradient-shimmer, MIT, 92 stars, 1 fork |
| Source revision | main HEAD 10393c24cb9553eebb2ba66961fbded5e07d2754; no public tags found |
| Demo | https://gradient-shimmer.vercel.app/ live with package install and prop examples |
Use Rules
- Use it for small state markers, headings, channel labels, and live-agent affordances where a static badge feels too dead.
- Do not use it as the only loading indicator for critical work; pair long work with explicit progress, cancel, and error states.
- Keep reduced-motion behavior enabled and verify text contrast in the static fallback.
- Prefer one shimmer family per viewport. Stacking multiple text shimmers makes the page feel like an ad banner escaped containment.
Timeline
- 2026-07-03 | Created from the X bookmark artifact audit after reviewing the local thumbnail, video contact sheet, npm package, GitHub source, demo site, and artifact reply showing the effect applied to a multi-agent workspace surface. Source: X/@mona_biasia, 2026-06-21; Source: npm/GitHub/demo, 2026-07-03