Starfield Backdrop Hero Block for React

Set them on Starfield. count is how many stars fly at once in a large box (120 here, up to 300); a smaller box, such as this stage on a phone, flies a share of them, so the field looks as dense at every size. speed is a multiplier: 0.5 is the slow drift here, 1 a calm cruise and 3 warp speed. fade sets where the stars fade out (radial, top, bottom or none), and starColor takes any CSS colour, your theme's foreground by default.

A starfield that flies reads as speed, which is what the headline promises, and it does it with CSS alone: every star is a small element placed when the page renders and moved by keyframes, with no canvas and no script running in the browser. With reduced motion turned on in the system the stars stop where they are and the stage shows a still star map. To slow them further, lower speed; for a stage without stars, swap Starfield for a div with the same classes and the content stays as it is.

Yes. The block follows the page theme and never forces dark: the stage has no fill of its own, the stars take text-foreground (they fade in as soft dark specks on a light page and as bright ones on a dark page), and the subtitle, pill and buttons use their stock styles. The hairline frame sets the stage off in both themes. For a different star colour, pass starColor.

Yes. The stars are a decoration: their layer is hidden from screen readers and never takes a click. The headline is the page's one h1, the pill is a single link that reads Launching soon, Join the waitlist (its pulsing dot is hidden, and the words carry the status), and both calls to action are links named by their text. The avatars are decoration, and the line beside them says the number in words. Every text meets WCAG AA contrast on the stage, in light and dark, and with reduced motion nothing fades in, rises or pulses.

The headline steps down from text-5xl to text-4xl and balances its lines, so the second line breaks evenly instead of leaving one word alone. The calls to action sit side by side when they fit and wrap onto two lines when they don't, centred either way, and the Shine Button is inside the first screen. The stars are spread round the stage's edges in proportion, so the field covers a narrow stage as evenly as a wide one.

Change the two parts of the announcement: the status (text on StatusPulseText, here Launching soon, with variant for its colour) and the muted text after the dot. Point its href at your waitlist, and edit the number beside the avatars with it. For a date, write it as text the server and the browser agree on, such as "Opens in June", or a relative label you update, so the pill never shows a launch that has already passed.