Loading…
Live component · try it
Premiumtext · idle · dark
Gradient Sweep Text
Headline letters filled with a gradient that keeps moving: a bright accent band sweeps through the text every few seconds like light across brushed metal, and hovering speeds it up. The fill is clipped to the glyphs so the sweep has the exact shape of the type.
The mechanic
Gradient `linear-gradient(100deg, fg 0 40%, accent 48%, #fff 50%, accent 52%, fg 60% 100%)` at `background-size: 250% 100%`, animated from `background-position: 150% 0` to `-150% 0` over 4 s with a 1.2 s hold expressed inside the keyframes (0–30 % sweep, 30–100 % still). Hover sets the duration to 1.2 s.
How to use it
From prompt to a block in your page.
- 01Try the component
The preview is the shipped element inside a neutral demo page. Hover, click, focus: the one interaction it is about is live.
- 02Pick a palette
Token sets re-tint it live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Mount it in your layout
It inherits your page's font and width; the tokens live on :root; several instances share one script.
