Shimmer Text
A bright glint sweeps continuously across bold text like light reflecting off metal.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| text | string | LUMINOUS | Text to display |
| color | string | #e879f9 | Base color of the text — the shimmer glint sweeps across this |
When to Use
Perfect for luxury brands, loading states, feature callouts, and any headline that needs to feel alive without being distracting.
Best Practices
Use uppercase, single bold words for the sharpest glint effect. Choose a color that contrasts well against the dark background.
Why This Component Matters
A perpetual shimmer communicates premium quality with zero user interaction — it works even on static pages and adds life to hero sections at no cognitive cost.
FAQ
QDoes this need Framer Motion?
No — it uses a pure CSS background-position animation, keeping the bundle size minimal.
QCan I slow down the sweep?
Yes, change the animation duration (3.5s default) in the injected style tag in the component source.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.