Scroll Reveal Testimonial Block for React

Edit QUOTE and AUTHOR at the top of the file. The quote is split into words at module level, so a longer or shorter quote needs no other change. Aim for fifty to seventy words: at the large type size that fills the screen once, which is what the effect is made for. The column keeps extra room under the card, so the last words can rise far enough to finish sharpening.

Every word has a second, full-strength copy lying over it. That copy runs Tailwind's fade-in animation, but instead of time, the animation follows the word's own position as it travels through the viewport (animation-timeline: view()), starting as the word enters at the bottom and finishing about a third of the way up. Because the muted word is underneath, the colour moves between two theme colours and never fades into the background.

Those with scroll-driven animations: current Chrome and Edge, and Safari 26 and later. Everywhere else the full-strength copies are simply visible, so the quote reads at full contrast and nothing is half-faded at rest. The block never depends on the effect to be readable.

With a reduced-motion preference the scroll animation isn't applied at all, and the quote shows at full strength from the start.

The quote is a figure with a blockquote and a figcaption, and the words are real text in one paragraph, so it reads as a single quote. The full-strength copies are hidden from assistive technology so no word is read twice.

Yes. The quote sits in a bdi, each overlay copy starts at the word's reading start edge, and the caption and the button swap sides.