Rotating 3D Wheel Testimonials Block for React

Edit the TESTIMONIALS array at the top of the file: each entry has an author, role, company, two-letter initials and the quote. Every face works out its distance from the front, so any number of quotes from three up works, though the wheel reads best with four to eight. The size of a face is the --h variable on the wheel (15rem on phones, 13rem from sm up): make it taller if your quotes are longer.

All the faces share one grid cell. Each one is pushed out to the rim of an imaginary drum, tilted by 24 degrees for every step it is from the front and pulled back so the front face lands flat on the screen, with CSS perspective on the wheel giving it depth. Pressing a button changes which face is in front, and one CSS transition on transform turns the drum. Only the front face and the two beside it are visible; the others wait out of sight, and a mask fades the tilted ones at the edges. There are no timers and no scripts running a frame loop.

Yes. The wheel is a focusable region named "Customer quotes", and the up and down arrow keys turn it from there or from either button. Only the front quote is exposed: the faces that tilt away are inert and hidden from assistive technology, so Tab never reaches them and they aren't read out. After a visitor turns the wheel, a polite live region says "Quote 3 of 5" and the author's name; nothing is announced on load.

The header appears without fading in, and the wheel stops spinning: pressing a button puts the next quote in front at once, with no turn. The faces keep their resting tilt, which is a pose rather than motion. Nothing on the page moves by itself either way.

Yes. The wheel turns about a horizontal axis, so it looks the same in both directions; the caption follows the reading direction, the count and the buttons swap sides in the footer strip, and each quote sits in a bdi so its quotation marks stay with the sentence.

Because a moving quote is one a visitor can't finish reading, and anything that moves on its own needs a pause control. Letting the visitor turn the wheel keeps the section calm and makes every quote readable. If you want a timed rotator instead, the Rotating Hero Testimonials block has one with a pause button and dots.