Gradient Shimmer
Zero-dependency React text shimmer driven by the Web Animations API
Tier B · UsefulAnimation LibraryComponent Librarygradient-shimmer.vercel.app
gradient-shimmer is a single React component that sweeps a multi-stop gradient highlight across a run of text while keeping the text selectable and readable by screen readers. It has no dependencies and needs no CSS import or Tailwind — the animation is built with the Web Animations API and it ships nine gradient presets (sunrise, bubble, sunset, peach, tonic, mint, spring, twilight, bay) plus controls for duration, spread, easing, idle pause, pause-on-scroll and reduced-motion. It is for loading and 'thinking' labels where a grey skeleton would feel dead. The URL in this entry is only a demo page; the real documentation is the GitHub README.
npm i gradient-shimmerFor an agent
Use it when you need a shimmering text label and the project has no Tailwind and no animation runtime — this is the rare shimmer that adds zero CSS and zero dependencies, so it beats pulling in framer-motion or a Tailwind animate plugin for one effect. If the project already runs Tailwind, a background-clip utility class is cheaper than a package. Watch the version: it is v0.1.1, the props are unlikely to be stable, and the landing page at gradient-shimmer.vercel.app is a client-rendered shell, so read the GitHub README rather than trying to scrape the demo.
Why it is here. A tightly scoped micro-library that gets the accessibility details right — selectable text, reduced-motion respect, and graceful fallbacks.
Facts
- License
- MIT
- Pricing
- Free, Open source
- Framework
- React
- Styling
- Inline styles
- Distribution
- npm package, GitHub repository
- Platform
- Web
- Content type
- Code
- Agent readiness
- Readable open source, Structured documentation, Client-rendered shell
- Accessibility
- Honors reduced motion, Semantic HTML
- Maturity
- Beta
- GitHub stars
- 128
- Package
- gradient-shimmer
Components it ships
1 totalNotable for
- zero dependencies
- no CSS import required
- Web Animations API driven
- 9 gradient presets
- respects prefers-reduced-motion by default
Provenance
Verified 2026-08-15. HTTP 200. https://gradient-shimmer.vercel.app/ (returns 200 but is a 560-byte client-rendered shell with no readable content), https://github.com/BIAsia/gradient-shimmer (README read: install, props, presets, fallbacks), registry.npmjs.org/gradient-shimmer (v0.1.1, MIT, peer react>=18, zero deps), GitHub API for stars/licence/last push
Also in Motion & Interaction
6- GSAP · JavaScript animation engine with 19 plugins, now free for commercial use
- Lenis · Smooth-scroll engine that keeps native scroll and honours reduced-motion
- Motion · Hybrid JS/React/Vue animation engine with springs, layout and scroll animation
- NumberFlow · Dependency-free animated number component for React, Vue, Svelte and JS
- React Bits · 234 copy-paste animated React components: text effects, cursors, WebGL backgrounds
- React Native Reanimated · UI-thread animation library for React Native, v4 on the New Architecture