Centered Shimmer Text Headline Hero Block for React

The second line is a ShimmeringText. duration is one pass of the light plus its short rest, in milliseconds: 3000 here, a calm glint, where its default of 2000 suits a loading label. baseColor is the text's colour at rest, var(--foreground) so the line reads as part of the headline, and shimmerColor the colour each letter takes as the light passes, var(--muted-foreground). Both take any CSS colour, so a theme token keeps the effect right in light and dark. Add wave and each letter also lifts a little as the light reaches it.

ShimmeringText splits the word into one span per letter, and each letter runs the same short colour keyframes, delayed by its place in the word, so the light travels from the first letter to the last and one pass takes the same time whatever the word's length. It animates color only: no gradient clipped to the text, no canvas and no JavaScript timer, so it works with any colour format your theme uses and renders the same from the server.

Yes. The page has one h1, read as "Build something extraordinary": ShimmeringText gives the word once as visually hidden text and hides the letter-by-letter spans from assistive technology, so the word is never spelled out. With reduced motion turned on in the system, the letters rest in their base colour and the entrance doesn't move. The stats are a description list, so each value is read with its label, and the pill is one link named by its whole sentence.

All three are links to #: point them at your release notes, your sign-up and your documentation. On Base UI, each button renders its link with render={<a href="/signup" />} and nativeButton={false}, so it stays a link with no button role.

The headline steps down from text-6xl to text-4xl and keeps "extraordinary" on a line of its own. The two actions stack on a phone, and the Shine Button ends about 350 px down the first screen. The four stats form a two-by-two grid on a phone and one row from the lg breakpoint; the cells keep a gap as wide as their overshoot, so their lines meet between them.

Use it for a launch, a rebrand or a creative tool, when the headline itself is the strongest thing you have to show and one word deserves the eye. Keep the light on a single word or a short phrase: running through a whole sentence, it becomes noise. Use a standard centered hero, or one with a product shot, when a screenshot explains the product better than the words do.