Effects
Effect - Text shimmer
A bright band sweeps across a headline - a moving gradient clipped to the text for a metallic sheen.
- background-clip text
- Gradient sweep
- Sheen presets
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
The headline uses background-clip on the text so a gradient is painted only inside the letterforms, and a bright band within that gradient sweeps across on a loop, producing a metallic sheen that travels through the type. Several sheen presets change the colour and intensity of the sweep without altering the animation.
When to use it
- A headline or label that should catch the eye with a subtle premium glint
- A small accent like a badge or eyebrow text that needs a touch of shine
- Any heading where a flat colour feels too plain but motion should stay restrained
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 3 options
sheenSheen - 1.5-7s
speedSweep duration
Related components
Using this block
Buy it, then copy components/blocks/text-shimmer/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.