design-infraReport a problem or share feedback← Catalog
Shimmer text
curatedfreetransitions/shimmer-text
A loading / "thinking" label that shimmers — streaming status, "Generating…", any in-progress copy that should feel alive without a spinner. Pure CSS: duplicate the string into `data-text` on `.t-shimmer` and tune `--shimmer-base` / `--shimmer-highlight` per theme.
$
npx skills add Jakubantalik/transitions.dev # then ask: "apply the shimmer-text transition"Our notes
Shimmering label for in-progress states ('Generating…').- Source
- transitions.dev
- Kind
- transition
- Categories
- transition, text-effect
- Use as
- recipe — technique you apply to your own markup
- Applies to
- text-effectloaderagent-ui
- Motion
- on loop · subtle · css · low cost · respects reduced motion
- Tags
- css
- Licence
- Free for unlimited personal/commercial use in your products; no republishing the collection. Pro (React/TS variants) $9/mo or $149 lifetime.
- Live demo
- transitions.dev
- Docs
- transitions.dev
Similar
Compare all 4 →- Thinking statestransitions/thinking-statesRotating agent thinking labels.
- anime.js v4animejs/animejsReach for it over Motion when choreography is the point: long multi-element timelines (createTimeline), grid staggers from center, SVG morphTo / createDrawable line drawing / createMotionPath, createDraggable, onScroll, and a free splitText (Motion's is Motion+). Vanilla JS — no React components: run it in useEffect inside createScope({ root }) and call revert() on unmount. For presence, layout and gestures in React, Motion stays the default. See catalog/sources/motion.md.
- Agent statusoc/agent-statusInline or avatar-size agent activity indicator: libraries.dev thinking-orbs + shimmering verb + detail line.