Thin Sidebar Marquee Panel Features Block for React

Edit the six stream objects at the top of the file. Each has an icon (any Lucide icon), a name, a sentence, two figures and seven events with a name, a target and a time in milliseconds. The marquee loops its list, so seven events fill the card; add or remove events and it still loops.

Yes. The "Pause stream" button in the card's header stops the marquee and turns into a Play icon; it is a toggle button, so it reports whether it is pressed to assistive technology, and one choice applies to every stream. The marquee also holds while the pointer is over it or focus is inside it. Under reduced motion the marquee does not move at all and the events rest as a list you can scroll.

Each tab is named for assistive technology (its name is an accessible label), and the visible label that appears on hover or focus is drawn with CSS inside the tab. A tooltip component can't wrap a tab on every library (a React Aria tab must stay a direct child of its list), so this one block draws the label itself and behaves the same on all four.

Tab enters the rail on the open stream, the Up and Down arrows move between streams and open each as they go, and Tab again moves into the panel to the Pause button. Home and End jump to the first and last stream. Base UI tabs open on focus here as well, so the arrow keys behave the same as on the other libraries.

The rail turns into a row of six icon buttons above the panel (it scrolls sideways if the screen is narrower than the row), the labels don't show, and the panel's heading names the open stream. The name, the sentence and the figures stack above the event card, and nothing scrolls the page sideways at 320 pixels.

No. Each panel's text is also drawn once, unseen, in the same grid cell as the open one, and the event card has a fixed height, so the cell is as tall as the tallest panel. Those copies are hidden from assistive technology and can't be focused.