What it looks like
It looks like light gliding over a metal plate, or the slide to unlock text on old phones. The letters sit in a semi-transparent gray, and a 100-pixel band of shine crosses the text from left to right; in light mode it makes the letters much darker where it passes, and in dark mode much lighter. In the default 10-second cycle, the band takes 3 seconds to cross, waits, comes back from right to left and waits again. The rest of the time, the text stays still and quiet.
You may be looking for this if you asked for something like
- a shine passing over the letters of my text
- that old iPhone slide to unlock shimmer
- a new feature badge with light running across the text
- gray text with a glint that sweeps across now and then
- a light effect on the short announcement at the top of the page
- a launch label that draws attention without blinking
- shimmering text for a loading or thinking status
Also known as
- light sweep text
- shimmer text
- text shine effect
- glare text
- animated shiny text
- text sheen animation
When to use
- New feature badges and short announcements above the headline, like a launch or a new version
- Status labels such as loading or thinking in AI apps
- Subtle callouts on product pages that must not blink
- Plan or pricing labels that call for a quiet highlight
When to avoid
- Small or long text, since the default semi-transparent gray has low contrast for reading
- Screens with other shines and looping animations in the same view
How to ask your AI
Create a shine effect that sweeps across the new feature badge above the headline: a band of light runs over the letters every few seconds, in my brand colors, with enough contrast for reading and still text for people who prefer reduced motion.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Lustro
Can I change the speed and size of Lustro's shine?
Yes. In Lustro, the duration prop sets the full cycle in seconds, 10 by default, in which the band crosses, waits, comes back and waits again. The radiantWidth prop sets the band width in pixels, 100 by default. On larger text, a wider band makes the shine easier to see.
Does Lustro work in dark mode?
Yes. Lustro ships with both versions: in light mode the letters are a semi-transparent gray and the band darkens them as it passes; in dark mode the gray is lighter and the band brightens them. The THM Componentes prompt tells your AI to swap these tones for your project color tokens.
Can I use Lustro in an h1 headline?
Lustro renders a paragraph, the p tag, centered with a maximum width of 28rem, designed for badges and short lines. To apply the shine to a main headline, ask your AI to switch the tag to h1 and adjust the width; the text stays in the HTML, readable by search engines and screen readers.
