Centered Browser Frame Hero Block for React

A fixed-height box (h-80, sm:h-[32rem], lg:h-[38rem]) holding an icon rail, a search bar, a histogram built from 60 bars and a log of sixteen requests. It uses container queries, so it drops its rail and columns as the window narrows. Replace the arrays at the top with your product's data, or swap the whole box for your own screenshot.

It is decoration, so it is aria-hidden and inert: none of it takes focus, and the headline and the two links carry the content. The level chips use a fill or a border as well as their label, so errors and warnings don't depend on colour.

A mask on the window fades it to nothing at its foot, and the frame's side lines fade the same way, so the product seems to continue below the fold and the next section starts clean. The mask is a CSS mask-image, with no script.

The ShineButton is the only primary control, a link on every framework: asChild with an a on Ark and Radix, render with nativeButton={false} on Base UI, and href on React Aria. The second action is an outline Button. Both sit above the window, within the first screen.

Yes. The announcement arrow mirrors, the log's times and routes and the histogram stay left-to-right, as code and time axes should, and the rest of the window follows the page direction.

The headline steps down to text-4xl, the buttons wrap, and the window becomes a shorter h-80 box, with its rail, the time column and the millisecond column dropped by the container queries, so what stays is readable: the search, the histogram and the route list.