Centered Gradient Orbs Hero Block for React

The orbs are our Bokeh background, used as the panel itself. Edit the ORBS array for their colors: each orb takes one of them, and it holds the theme's foreground tones, so the orbs are monochrome in every theme. For a colored glow use tokens such as var(--primary). Use a token as it is: the theme's colors are oklch values, so hsl(var(--primary)) would be an invalid color. count sets how many orbs (4 here), and minSize and maxSize their diameters in pixels.

Not one by one: Bokeh spreads the orbs evenly over the panel from their index, so the same count always gives the same layout, on the server and in the browser, and a different count gives a different one. Try a few counts and sizes until the orbs sit behind the numbers the way you like. For blobs that wander over a whole surface, use our Gradient or MeshGradient background.

intensity sets their strength, and the panel sets [--bokeh-alpha:0.18], below the default, so the stat labels keep at least 4.5:1 contrast over the orbs in light and dark themes. Raise it for a bolder glow and measure the small muted labels when you do. speed scales their drift (0.6 here, slower than the default 1).

Each orb drifts on its own slow CSS loop and gently grows and dims, using transforms only, so nothing repaints. The announcement, headline, subtitle, actions and panel fade up once on load through Tailwind's starting: variant. With reduced motion the orbs hold their place and size, and motion-reduce:transition-none renders the content in place. The block has no state and runs no script.

Yes. The headline is the page's one h1, and the orbs are decorative and hidden from assistive technology. The announcement and both calls to action are links named by their text, and the stats are a description list, so each figure is read with its label, with each value in a bdi so units stay in place in right-to-left languages. On Base UI, each button renders its link with render={<a href="#" />} and nativeButton={false}.

Use orbs when you want separate pools of light with empty panel between them, held to a frame beside the copy. Use a gradient mesh when you want one continuous wash of tone across a whole section behind a showcase, and a plain split hero when the visual should be the product itself.