Dot Grid Backdrop CTA Block for React

Set them on Halftone: dotSize is the grid's spacing in pixels (16 here; 10 is fine print, 20 a graphic look), intensity how big the largest dots get, and dotColor any CSS colour. Here the ink is var(--muted-foreground), so it follows your theme.

A radial gradient from --background lies over the dots: solid in the middle, fading out toward the edges. It's wider on a phone, where the copy fills the width. The badge and the ghost link carry a bg-background backing so a dot never sits under their text. Edit the gradient's ellipse and stops to clear more or less.

FACTS holds one entry per cell. The cells are a three-column dl with divide-x, and the band's rule is a Guides with the top rule and plus marks, so the lines meet the rails exactly. The value shows above its label through order-*, while the markup keeps the label first, so a screen reader hears the label then the value. Because the band ends the section, the column has no bottom padding.

Slowly: the field of light and shade that sizes them drifts, at half the default speed here, using CSS transforms only. With reduced motion turned on the field holds still. Lower speed for less drift.

The block never forces a scheme. The halftone prints dark dots on a light page and light dots on a dark one (it switches its blend with the theme), and every colour comes from your theme's tokens.

The dot field and its clearing are decoration, hidden from assistive technology. The page gets one h2, the badge is plain text, both calls to action are links named by their text and the facts are a description list. Text is measured against the rendered pixels in every preset. Values such as the first-byte time are wrapped in bdi so they keep their order in right-to-left layouts.