Testimonials Film Strip Block for React

Edit FRAMES at the top of the file: each entry has a quote, the person's name, role, company and initials, and a length of "short", "medium" or "long". The SIZES table next to it turns the length into a cell width (16, 20 or 26rem) and a quote size, so you can retune all three in one place. Pick the length by the quote: a line or two reads best large in a narrow cell, and a paragraph reads best small in a wide one. Give each frame a unique name, since it keys the cell. The frame counter ("03 / 08") follows the length of the list.

The strip is a focusable scroll area, so Tab moves focus into it and the left and right arrow keys scroll it, with a focus ring while it has focus. The cells hold no links or buttons, so there is nothing else to tab through. They snap with snap-proximity, which settles on a cell only when the scroll ends close to one, so it never fights the arrow keys or a drag. A screen reader hears a list named "Customer quotes, side by side"; each quote is a blockquote inside a figure with the author as the caption, and the frame number and the avatar are hidden as decoration. Every cell is on the page, so they are all read in order.

Below md a cell never grows past 85% of the screen, so the next one always peeks in from the edge, which is the cue to swipe. The header stacks with the button under the sentence, and the strip scrolls sideways with the same snapping. Nothing stacks into a long page, however many quotes you add.

It's a link (href="#"): point it at your reel, case studies or sign-up page. It's the block's only primary control, and it sits in the header row, so the strip below carries no buttons. The button renders the link it's given with render, with nativeButton={false}.

The header and the strip appear without their entrance, and the button's sweep of light becomes a fade. Scrolling is the browser's own, so it follows the visitor's settings. In a right-to-left page the strip starts at the right, the first cell is on the right, the fades swap sides and the frame numbers and quotes align to the right.