Quote Carousel Testimonials Block for React

The fill is a CSS animation of six seconds: change duration-[6000ms] in the FILL class at the top of the file. The next quote starts when that animation ends, so the bar and the change are always in step, and there's no timer to keep in sync. Add a quote by adding an object to QUOTES; the segments, the counter and the slides all follow the list.

It holds while the pointer is over the panel and while a control inside it has keyboard focus, and it picks up where it left off. It stops for good, until the visitor presses play, as soon as they choose a quote with the segments, the arrows or a swipe, and it never starts for visitors who prefer reduced motion. The pause button comes right after the segments and ahead of the arrows, so a keyboard user can stop it quickly.

The section is named by its h2, and the carousel is a region named "Customer quotes". Each quote is a figure with a blockquote and a figcaption, and only the quote on show is exposed: the others are inert. The segments are buttons named "Quote 2 of 4, from Marcus Williams" and mark the current one with aria-current. While the carousel turns by itself nothing is announced; once the visitor moves it, a polite status line says which quote is now showing.

Yes. The panel is a bg-card card with shadow-lg and a thin ring inside a bg-muted/50 shell with hairline corner marks, so the emphasis comes from structure, not from a black panel. The name is historical. The text, the segments and the buttons all use your theme's tokens, and nothing sets a dark scope.

Yes. The bar fills from the inline start, the arrows mirror, the segments run in reading order and each quote sits in a bdi so its quotation marks stay at the ends. The slide direction follows the page direction on every target.

QUOTES is a plain typed array at the top of the file, so you can replace it with data fetched in a parent and passed down. Keep the quotes to about two sentences: the slides are all as tall as the longest one, which keeps the page from jumping, so one very long quote leaves empty space under the others.