Text Effects · How the words move
Shine sweep文字光泽
- premium
- material
- cyclical
A band of light travels across the text like a reflection on metal. Only the gradient position changes, so the words stay the same words — the cheapest way to make a headline look expensive.
When to use it
For a headline, a member benefit or a price — a line that should look more expensive than it is. One or two per screen is enough, and it should not run alongside another blinking effect: two things flashing at once just read as a page that flickers. Keep it off body copy and small type; the smaller the text, the more the highlight looks like a rendering bug.
Parameters
gradient sweep 160%→−60% · 1100ms cubic-bezier(0.4, 0, 0.2, 1) · every 2.6s · accent head #ffd479 · button band 38px skewed 18°
Recipe
Shine sweep → sweep 160% → −60% @ 1100ms cubic-bezier(0.4, 0, 0.2, 1)
One sentence for your AI
Add a sweeping highlight to this headline: give the text a 100° linear gradient running from the base colour to a warm highlight and back, set background-size to 260%, and clip it into the glyphs with background-clip: text. Move background-position from 160% to −60% over 1100ms and repeat every 2.6 seconds. It only sweeps across — it never changes the colour of the words. On the same screen, sweep a 38px wide white band skewed 18° across the button from left to right with a 140ms delay, so the light on the surface and on the text do not arrive together.