Scrolling Screenshot Gallery Block for React

It moves to the next section at once and then every couple of seconds, with a slow CSS glide, and stops at the footer. Pressing it again pauses; it is a toggle button, so its pressed state tells you whether it is playing. Using the slider or the index stops it. Pressed at the end, it plays from the top again.

Nothing plays by itself: each press of Scroll preview moves to the next section at once, with no glide, and stops. The slider and the index work as before.

Replace the five band components with your own sections (or one tall screenshot), and set HEIGHTS, NAMES and the window's h-[22rem] and [--range:…] classes to match: the range is the page's height minus the window's, in rem. The slider's stops and the index are computed from those lists.

It is a labelled slider from 0 to 100 whose spoken value is the section on show, for instance "Pricing", not the number. Arrow keys move one step, Page Up and Page Down move more, and Home and End go to the top and the foot.

Yes. The split mirrors and the index follows the reading direction. The window shows a drawn page, which is left to right like a screenshot, and the counter text is isolated so its digits keep their order.

Yes. Every colour is a token of your theme, so the drawn page is light in a light theme and dark in a dark one. The block ends on the controls with no closing line.