A dark hero with a large headline filled with a brushed chrome gradient. Every four seconds a narrow band of warm and cool light crosses the letters from left to right, a matching streak of light travels along the line under the headline, and a glint passes over the main button. Between sweeps the headline rests as solid chrome, so it also holds up as a still. On phones the headline drops to a smaller size and the two buttons stack to full width.
import { useEffect, useRef, useState } from "react";
const content = {
badge: "Lacquer 2.0 is out",
lineOne: "Polished to",
lineTwo: "the last pixel.",
copy: "A component kit for teams who notice the half pixel. Forty primitives, one motion language, zero config.",
primary: "Get the kit",
secondary: "Read the changelog",
};
export default function ShimmeringChromeGradientHeadline() {
const ref = useRef<HTMLElement>(null);
const [paused, setPaused] = useState(false);
// Stop the loop while the section is off screen.
useEffect(() => {
const el = ref.current;
if (!el || typeof IntersectionObserver === "undefined") return;
const io = new IntersectionObserver(([entry]) => setPaused(!entry.isIntersecting), { threshold: 0.05 });
io.observe(el);
return () => io.disconnect();
}, []);
return (
<section ref={ref} data-paused={paused} className="shimmering-chrome-gradient-headline relative overflow-hidden bg-zinc-950 px-6 py-24 text-center text-zinc-100 sm:py-32">
<style>{`
@keyframes shimmering-chrome-gradient-headline-sweep {
0% { background-position: 84% 0, 0 0; }
68%, 100% { background-position: 16% 0, 0 0; }
}
@keyframes shimmering-chrome-gradient-headline-light {
0% { transform: translateX(-70%); opacity: 0; }
12% { opacity: 1; }
56% { opacity: 1; }
68%, 100% { transform: translateX(70%); opacity: 0; }
}
@keyframes shimmering-chrome-gradient-headline-glint {
0%, 30% { transform: translateX(-130%) skewX(-20deg); }
62%, 100% { transform: translateX(230%) skewX(-20deg); }
}
.shimmering-chrome-gradient-headline-text {
/* layer 1: the travelling glint. layer 2: the resting chrome. */
background-image:
linear-gradient(105deg, transparent 46.5%, rgba(251,191,36,0.55) 48.6%, #ffffff 49.6%, #ffffff 50.4%, rgba(125,211,252,0.55) 51.4%, transparent 53.5%),
linear-gradient(180deg, #ffffff 0%, #e4e4e7 34%, #85858f 54%, #c4c4cc 66%, #a1a1aa 100%);
background-size: 300% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: 16% 0, 0 0;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shimmering-chrome-gradient-headline-sweep 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.shimmering-chrome-gradient-headline-light { animation: shimmering-chrome-gradient-headline-light 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
.shimmering-chrome-gradient-headline-glint { animation: shimmering-chrome-gradient-headline-glint 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
.shimmering-chrome-gradient-headline[data-paused="true"] * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.shimmering-chrome-gradient-headline-text { animation: none; }
.shimmering-chrome-gradient-headline-light, .shimmering-chrome-gradient-headline-glint { animation: none; opacity: 0; }
}
`}</style>
{/* Studio backdrop: a soft overhead light and a floor line */}
<div aria-hidden="true" className="pointer-events-none absolute inset-0" style={{ backgroundImage: "radial-gradient(60% 55% at 50% 0%, rgba(161,161,170,0.22), transparent 70%)" }} />
<div aria-hidden="true" className="pointer-events-none absolute inset-0 opacity-40" style={{ backgroundImage: "linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px)", backgroundSize: "100% 44px", maskImage: "radial-gradient(70% 60% at 50% 45%, black, transparent)", WebkitMaskImage: "radial-gradient(70% 60% at 50% 45%, black, transparent)" }} />
<div className="relative mx-auto max-w-5xl">
<span className="inline-flex h-9 items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 text-xs font-medium tracking-wide text-zinc-300">
<span className="h-1.5 w-1.5 rounded-full bg-amber-200" />
{content.badge}
</span>
<h1 className="relative mt-8 text-5xl font-semibold leading-none tracking-tighter sm:text-7xl lg:text-9xl">
<span className="shimmering-chrome-gradient-headline-text block pb-[0.14em]">{content.lineOne}</span>
<span className="shimmering-chrome-gradient-headline-text -mt-[0.14em] block pb-[0.14em]">{content.lineTwo}</span>
</h1>
{/* The light that travels under the headline in step with the glint */}
<div aria-hidden="true" className="relative mx-auto mt-3 h-px max-w-3xl bg-gradient-to-r from-transparent via-white/15 to-transparent">
<div className="shimmering-chrome-gradient-headline-light absolute inset-x-0 -top-px mx-auto h-0.5 w-1/3 bg-gradient-to-r from-transparent via-white to-transparent opacity-0" />
<div className="shimmering-chrome-gradient-headline-light absolute inset-x-0 -top-6 mx-auto h-12 w-1/3 rounded-full bg-amber-100/20 opacity-0 blur-2xl" />
</div>
<p className="mx-auto mt-10 max-w-xl text-base leading-relaxed text-zinc-400 sm:text-lg">{content.copy}</p>
<div className="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row">
<a href="#" className="relative inline-flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-zinc-100 px-7 text-sm font-semibold text-zinc-950 transition hover:bg-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 sm:w-auto">
<span aria-hidden="true" className="shimmering-chrome-gradient-headline-glint absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-transparent via-amber-200/70 to-transparent" />
<span className="relative">{content.primary}</span>
</a>
<a href="#" className="inline-flex h-12 w-full items-center justify-center rounded-full border border-white/15 px-7 text-sm font-semibold text-zinc-200 transition hover:border-white/40 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 sm:w-auto">
{content.secondary}
</a>
</div>
</div>
</section>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/shimmering-chrome-gradient-headline.json
Each line of the heading has two background layers clipped to the shape of the letters. The lower layer is a vertical chrome gradient that never moves. The upper layer is three times wider than the text and transparent except for a thin diagonal band of light. A keyframe animation slides that layer by changing `background-position`, which carries the band across the letters.
So the band can start and finish completely outside the letters. The loop restarts while the band is out of sight, which hides the jump back to the beginning.
No. The animation is plain CSS keyframes in a style element inside the component. React is only used for a small observer that pauses the animation with `animation-play-state` while the section is off screen.
It repaints the heading on each frame, which is fine for one headline. Avoid putting the class on long paragraphs or on dozens of elements at once. The streak under the headline and the button glint use `transform` only.
Clipped text needs `color: transparent` together with both `-webkit-background-clip: text` and `background-clip: text`. If you move the class to another element, keep all three declarations and give both headline lines the same width (they are `block` here) so the band crosses them together.
Related: Typewriter Headline with Cycling Phrases, Word by Word Blur In Paragraph Reveal, Count Up Stats Row with Rolling Digits.
More text effects or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.