Centered Gradient Text Hero Block for React

Edit the FADE array, which goes to GradientText's colors prop, start to end. It runs from var(--foreground) to color-mix(in oklab, var(--foreground) 60%, var(--background)), the text color mixed into the page, so it fades the same way in light and dark mode. For a colored accent, use tokens such as var(--primary) and var(--chart-2). Keep the faded end at 60% or more: the words are large text, which needs at least 3:1 contrast, and at 50% the end drops below it in light themes.

Yes: remove animate={false}, and the gradient slides through the letters on a seamless loop (duration sets one pass, 3000ms by default). It's held still here so the headline reads calmly; a moving phrase draws the eye every second the page is open. With reduced motion the gradient holds still either way.

Move the GradientText to the words you want to stress and pass them as text. It renders an inline block, so the phrase stays on one line: keep it to a word or two, or a long phrase can't wrap on a phone. Keep the {" "} before it so a space separates it from the words before.

Yes. The gradient is a background clipped to the letters, so the phrase is real text in the h1, and screen readers read "Finally finish the first draft" as one heading. In forced-colors (high contrast) mode the gradient is dropped and the phrase takes the system's text color. The announcement and both calls to action are links named by their text, and the avatars are hidden from screen readers, since the count beside them carries the claim. The band is a description list, so each figure is read with its label. On Base UI, each button renders its link with render={<a href="#" />} and nativeButton={false}.

Each cell is a term and a value in a description list, set with divide-x on sm and up and divide-y on a phone, so the dividers follow right-to-left layouts. Edit the figures and labels in place, keep each value in its bdi, and edit the MEMBERS array for the avatars (an image src and the initials shown while it loads). Only show photos of people who agreed to it, and keep the count true. The band draws its rule with Guides rather than a border, so the marks land on the side rails.

Use it when the headline is the page's strongest asset and one phrase carries the promise, such as "first draft", "faster" or "together". The fade gives it weight without an image. Use a plain headline for a strictly minimal brand, and a showcase hero when the product itself should be the first thing visitors see.