Centered Noise Texture Hero Block for React

Use Paper's props. density sets how many ink fibres there are (0.6 here; 0 for none, up to 3 for heavy recycled stock), and fiberColor their ink, your foreground colour by default. paperColor="var(--card)" keeps the sheet your theme's card colour; remove it for Paper's own warm tint of the background, or pass any colour, such as a cream. ageSpots adds a few soft, darker blotches for an old-book look.

A single noise filter at low opacity reads as a dirty screen in some themes and vanishes in others. Paper is a sheet: the noise is a tooth lit from one side, with a soft mottle, a faint vignette and a few fibres, and it takes the theme's colours, so it looks like paper in light and dark mode and in every preset. For moving film grain instead, put Grain in its place, with bg-card on it, since Grain lays its speckle over the element's own background.

The sheet's wrapper is relative and starts with <Guides extend="sm" marks="corners" />, which draws four hairlines around it that run a little past each corner, with a + mark on each. The sheet itself is square and has only a faint shadow, so the hairlines are its edge. Delete that one line and the sheet stands on its own; the page's rails and top rule come from the Guides at the top of the column and stay either way.

Barely. The fibres fade by a fifth and back over twenty seconds, on opacity only, so nothing repaints and no script runs; the tooth and the mottle hold still. With reduced motion the sheet is still, and the copy's entrance, a short CSS fade and rise in sequence, is skipped. The Shine Button's light only runs when the pointer arrives, the button takes keyboard focus or it's pressed, and with reduced motion it fades in where it stands.

The texture sits under the content, is hidden from assistive technology and never takes the pointer, and it's faint enough that the headline, the promise and the features keep their contrast in light and dark mode. In forced colors mode it's hidden. The headline is the page's one h1, the check marks and the status dot are decorative, and the pill and both actions are links named by their text, all pointing at # for you to replace. On Base UI each button renders its link with render={<a href="#" />} and nativeButton={false}.

Below the sm breakpoint the sheet sits one gutter in from the rails, the headline drops its forced line break and wraps, balanced, at text-4xl, and the three features wrap onto two centered lines. The two actions stack, and the Shine Button ends about 460 px down the first screen. The texture's tiles keep their size at any width, so it never stretches or blurs. From lg the sheet is 48 rem wide and centered between the rails.