Centered CTA Dotted Background Hero Block for React

The frame's fill is a DotPattern. Its gap is the space between dots, in pixels (22 here), and dotSize each dot's diameter (2.5). dotColor takes any CSS color: here it's 15% of the theme's --muted-foreground, faint enough that the sentence over it stays above the 4.5:1 contrast. Raise it for stronger dots if your copy is larger or darker. fade decides where they fade out: radial (toward every edge, as here), top, bottom or none.

Dots within 120 px of a mouse or pen pointer brighten, grow a little and get a soft halo, and the light fades out where the pointer leaves. The glow color is set to the theme's --foreground, so the primary color stays on the one button. Touch doesn't light the dots. Pass interactive={false} to turn it off, glowColor for another color, proximity for its reach, and intensity (subtle, medium or strong) for how bright it gets.

DotPattern can also send a slow diagonal wave across the dots. A hero's background should stay still behind the headline, so this block passes speed={0}, which turns the wave off and leaves only the pointer light. Pass speed={1} for a pass every 12 seconds. Under reduced motion the wave stops anyway, and the light follows the pointer without gliding.

The dots are decoration: hidden from screen readers and from the pointer's hit testing, so every click lands on the copy. They're faint behind the text, the pill blurs what's under it, and the headline, sentence and buttons keep their contrast in both themes. The headline is the block's one h1, and the pill and both calls to action are links named by their text.

The pill, Get started and See how it works are links to #: point them at your changelog, your sign-up page and your product tour. On Base UI, each button renders its link with render={<a href="/signup" />} and nativeButton={false}.

The frame keeps its margin from the rails and its padding steps down. The headline steps down from text-6xl to text-4xl and drops its forced line break below the sm breakpoint, wrapping balanced instead. The two buttons wrap onto two centered rows when they run out of room, the pill shortens its message with an ellipsis, and the dots keep their spacing at every width.

Use the dots for a subtle, precise texture that reads as technical and developer-friendly, without pulling attention from the copy. Use a full-bleed gradient when the launch itself is the message and you want visual drama more than detail.