shadcn.io is not affiliated with official shadcn/ui
Scroll Reveal Testimonial Block for React Aria
One long customer quote that sharpens as you scroll, set in a card in a card: every word starts in the muted text colour and turns full strength as it rises through the viewport, with a Shine Button beside the author.
Installation
Overview
A long quote you read by scrolling, from a fictional code-review tool, Lantern. A compact header holds the headline and a sentence, and the quote sits below in a card in a card: a tinted shell with + marks on its corners around a raised panel. It's set large in your theme's muted text colour, and each word turns to full strength as it rises through the viewport, so the story comes into focus line by line under the visitor's own scroll. There's no script: the browser's scroll timeline drives a CSS animation on every word. Where scroll timelines aren't supported, or when the visitor prefers reduced motion, the whole quote is simply at full strength from the first paint. The author's name sits under it with a Shine Button to the full case study, the block's one primary control. It's built from Avatar, Guides and Shine Button, with Tailwind's built-in enter animation and your theme's tokens. For long landing pages and brand stories where one personal, longer testimonial earns the room.
FAQ
How do I change the quote?
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.
How does the reveal work?
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.
Which browsers show the effect?
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.
What does reduced motion change?
With a reduced-motion preference the scroll animation isn't applied at all, and the quote shows at full strength from the start.