Shimmer Text
Shine sweeping across text. Pro · Effects › Borders, text and numbers
A band of light sweeping across text, easing in and out, optionally resting between sweeps. The text stays one real text node — screen readers, selection and translation see it unchanged — and the light is a gradient clipped to the glyphs. Pauses off screen; with reduced motion it is plain text in the resting colour.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add shimmer-textnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ShimmerText } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
duration | number | 2.4 | Seconds per sweep of the light. |
delay | number | 0 | Seconds the text rests between sweeps (default 0 — one sweep straight after another). |
angle | number | 100 | Tilt of the band of light, degrees: 90 is upright, more leans it forward (default 100). |
spread | number | Width of the band of light, as a share of the text's width: 1 is as wide as the text (default: the tone's, about 0.85 subtle and 1.1 strong). | |
tone | 'subtle' | 'strong' | 'subtle' | subtle — muted text with a bright sweep, for status lines like "Thinking…"; strong — full-contrast text with a soft sweep, for headings. |
Related components
- Animated Border — Light beam running around a border
- Text Reveal — Word-by-word reveal and typewriter text
- Number Ticker — Animated counter with Intl formatting
- Marquee — Endless scrolling row of logos and testimonials
- Glass Lens — Glass lens with real refraction
- Morphing Capsule — Capsule that flows between states
- Floating Tab Bar — Floating glass tab bar
- Aurora Background — Slow aurora behind your content
- Gradient Background — Slowly shifting gradient
- Bubble Background — Soft colored bubbles, one follows the cursor
- Stars Background — Starry sky with cursor parallax
- Hexagon Background — Hexagon grid with a glowing trail
Previous: Animated Border · Next: Text Reveal · All Effects