Stack Overlap Scroll Testimonials Block for React

Edit the TESTIMONIALS array at the top of the file: each entry has an author, role, company, two-letter initials, a topic for its badge and the quote. The numbering ("01 / 04") follows the length of the array. Each band sticks at its own offset from the STICK list, one name strip lower than the band before it, so a fifth note needs a fifth entry there (top-52).

Every band is a list item with position: sticky, an opaque background and a top offset that grows by one name strip (3rem) per band. While you scroll, each band holds at its offset until the list ends, and the next band, which keeps moving, slides over it. A band's name strip is exactly one strip tall, which is why it stays visible when the next band covers the rest. Before you scroll, the bands simply read as a list. The section clips only sideways (overflow-x: clip), which doesn't break sticky.

Sticky positioning stops working when any ancestor scrolls its content, so the list and the sections above it must not have overflow: hidden, auto or scroll. The block's own section uses overflow-x: clip, which is safe. Put the block directly in the page, or in a container that doesn't scroll or clip.

Nothing is hidden: the list is an ordered list of four figures in reading order, each with its author in the figcaption and its quote in a blockquote, so every quote is read in full even while another band covers it. The band number and the + marks are decorative and hidden. The only control is the Shine Button in the header.

The header and the list appear without fading in, and the Shine Button's light fades in instead of sweeping. The stacking itself is the browser's own scrolling, so it follows the visitor's scroll position with no animation of its own to turn off.

The bands are one column at every width, and the quote steps down a size on phones. On a narrow screen the name strip truncates the role and company before it would wrap, so the strips always keep their height, and the quote text wraps inside its band. The stack has to fit in the viewport, so with more than four or five notes on a short phone screen, reduce the strip height first.