Centered Gradient Mesh Hero Block for React

Edit the MESH array, which goes to MeshGradient's colors prop: one color per corner, clockwise from the top start. It alternates var(--foreground) and var(--muted-foreground), so the mesh is monochrome and the primary color stays on the one button. For a colored wash use tokens such as var(--primary) and var(--chart-2). Use any CSS color or token as it is: the theme's colors are oklch values, so hsl(var(--primary)) would be an invalid color. Pass fewer than four and they repeat.

The layer sets [--mesh-gradient-strength:0.2], a multiplier of the orbs' alpha, quiet enough that the announcement, the subtitle and the window keep their contrast in every theme. Raise it for a bolder wash and check the small muted text when you do. speed scales the drift, and grain={false} removes the fine, still grain that hides banding on dark screens. The layer's mask ([mask-image:linear-gradient(...)]) fades it out toward the section's foot.

Each orb drifts and breathes on a long, slow CSS animation that only changes translate and scale, so nothing repaints. With reduced motion the orbs rest where they start, and the announcement, headline, actions and window, which otherwise fade up once through Tailwind's starting: variant, render in place. The block has no state and runs no script.

It's plain markup in BoardWindow: a toolbar, a layers list, a grid of tiles and an inspector, drawn in greyscale with the theme's tokens, so it follows light and dark mode. It's decorative and hidden from assistive technology, so keep real information in the copy. The tiles are a grid of spans: edit their classes to move or resize them. The window is taller than its box and masked, so it appears to run on below the fold; the box's height (h-64 on a phone, sm:h-[26rem]) decides how much shows.

Yes. The headline is the page's one h1, and the mesh and the window are decorative and hidden from assistive technology. The announcement and both calls to action are links named by their text. On Base UI, each button renders its link with render={<a href="#" />} and nativeButton={false}.

Use the mesh when you want an atmospheric, premium feel behind a showcase of the product. Use a plain or single radial gradient hero for a quieter, typography-first page, and a split hero when the copy needs a proof or a list beside it.