Color Sweep Heading React component
A dimmed heading that fills with a colour gradient from left to right as it comes into view, and follows the pointer back and forth.
About the Color Sweep Heading component
Color Sweep Heading starts as a quiet grey line and fills with colour from left to right as it comes into view. Move the pointer over it and the edge of the colour follows you.
The edge is soft, so the gradient feels poured in rather than wiped on, and the real text stays underneath for screen readers.
When to use it
Use it for section titles that deserve a moment of colour on an otherwise neutral page.
One per screen is enough. Several sweeps at once compete with each other.
Installation
Add the Color Sweep Heading component to your project with the shadcn CLI. It lands in components/color-sweep-heading.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/color-sweep-headingProps
<ColorSweepHeading /> accepts 4 props, all optional.
| Prop | Type | Default |
|---|---|---|
| text | string | "Colour follows your hand" |
| as | "h1" | "h2" | "h3" | "p" | "h2" |
| colors Colours of the sweep, from left to right. | string[] | COLORS |
| duration Milliseconds the first sweep takes. | number | 1600 |
- textstringDefault: "Colour follows your hand"
- as"h1" | "h2" | "h3" | "p"Default: "h2"
- colors
Colours of the sweep, from left to right.
string[]Default: COLORS - duration
Milliseconds the first sweep takes.
numberDefault: 1600
Color Sweep Heading FAQ
- Can I use my own colours?
- Yes. colors takes any number of stops, from left to right.
- How fast is the first sweep?
- duration sets it, in milliseconds. The default is 1600.
- What does it do on phones?
- It sweeps across once on view and stays filled.
- What about reduced motion?
- It appears fully coloured with no sweep.
