Split Log Viewer Hero Block for React

Edit LOGS at the top of the file: one string per line, in the order they arrive. A line starts with its level in brackets ([INFO], [DEBUG], [WARN], [ERROR]), which picks its colour, then the service and the message; two spaces after the service keep it apart from the message. The times aren't in the strings: start on LogStreamText is the first line's time, and each line after it is interval milliseconds later. Give the stream more lines than the window shows (rows, twelve here) so the loop doesn't repeat too soon.

It can show any lines you give it, but it's built to tell a story on a marketing page, not to tail a production system: it plays its lines on a timer and starts over after the last. For real logs, render your stream in your product with its own list, filters and pause control. On this page, curated lines that show your best features (structured fields, clear errors, fast queries) sell better than a raw feed.

Yes. The stream pauses while the pointer is over it, and it's a focusable log region, so a keyboard user can tab to it and it holds still while it has focus, then picks up again when focus leaves. With reduced motion on, new lines still arrive, but they appear in place instead of gliding.

The stream is a log region named Sample log stream. Its lines can be read like any text, but new ones aren't announced as they arrive, so a screen reader isn't interrupted every second and a half. The window's header, the Live status, the filter and the time zone, is decoration: hidden from screen readers and inert. The headline is the block's one h1, and the announcement pill and both calls to action are links named by their text.

The rest of the hero follows your theme, including the frame and its + marks. Log viewers and terminals read as dark windows, so the window alone is a dark scope with its own surface: it takes your theme's dark colours in light and dark mode alike. Its error red is mixed a little toward the foreground on that scope (--log-error), because a dark theme's destructive red is too dim for small text on near-black. Remove the dark class to have the window follow the page instead.

The two halves of the header stack below the lg breakpoint, the headline first, then the sentence and the buttons, with the log window under them, so the Shine Button is on the first screen. The window's lines never wrap: each message shortens with an ellipsis, so the time and the level stay lined up at the start of every row. The log stays left to right in right-to-left layouts, as code and logs do. The headline steps down from text-6xl to text-4xl.