Top Image Card Sextet Features Block for React

Topography, Dot Pattern and Grid Pattern from the catalog. The contour maps are given speed={0} and the draw-in and drift animations are switched off, the dot fields get speed={0} and interactive={false}, and Grid Pattern is static by design. So nothing in the art moves, on any device, with or without reduced motion.

Each card's art is a small helper, Contours, Dots or Paper, with a few props: a seed and scale for the map, a gap, size and fade for the dots, a cell size, dashes and filled cells for the paper. Changing the seed draws a different map, and the same seed draws the same one on the server and in the browser. You can pass any other catalog background in its place.

By the foreground token, thinned: the contour lines use the component's default 18%, the dots are 32% and the filled cells 9%, over a bg-muted/40 well. So they follow your theme in light and dark and stay calm behind any copy.

It's absolutely positioned on the card with -top-3 and -start-3, above the art with z-10, so it overlaps the card's border by 12 pixels. The grid has room for it: md:gap-8 and md:px-8. It is decoration (aria-hidden); the title names the feature.

Below md the list is a horizontal snap scroller: cards are basis-[85%] so the next one peeks in, and each snaps to the centre. The scroller is a named, focusable region, so a keyboard can scroll it with the arrow keys. From md it is an ordinary grid.

Yes. The badge sits on the start corner (the top right in a right-to-left page), the scroller follows the page direction and the patterns are symmetric. Only the text changes.