Concentric Rings Hero Block for React

They're a Ripple that fills the column above the stats band. count sets how many rings spread from the centre past the corners (6 here), size the innermost one's diameter in pixels (200), intensity how strongly they show (subtle) and speed how fast they breathe (half the default). They take the text colour by default, your theme's foreground, dark rings on a light page and light rings on a dark one; pass color="var(--primary)" for rings in your accent. Every breath is a CSS animation, so no script runs, and with reduced motion the rings rest at full size.

Yes. Nothing sets a dark scope or paints a background: the rings, the pill, the buttons and the lines all take your theme's tokens, so the hero is light on a light page and dark on a dark one. The Shine Button is the one control in your primary colour; the rest is neutral.

Start designing and Watch the demo are links (href="#"): point them at your sign-up page and your demo video. To play the video in place instead, make Watch the demo a button that opens a Dialog. Each button renders the link it's given with render, with nativeButton={false}.

The headline is the page's h1, and the rings are hidden from assistive tech. Every text keeps WCAG AA contrast over the rings, since they're faint and drawn in the text's own colour. The pill and both buttons are links with a visible focus ring, and the stats are a description list, each label read with its number. With reduced motion the rings stand still and nothing fades or rises on load.

The headline steps down from text-6xl to text-4xl over two lines, the buttons wrap onto a second line when the row is too narrow, and the rings stay centred behind the text at any width. Both buttons end on the first screen, and the three stats keep one row with their hairlines down to a 320 px screen.

Rings draw the eye to the middle, where the headline sits, and their slow breath feels calm: a good fit for creative and design products. A perspective grid reads more technical and retro, a starfield more atmospheric. Retro Grid and Starfield are backgrounds that wrap their content the way Ripple does, so either can replace it in the same place.