Testimonial 01

About this block

Testimonial 01 is a social proof section with two rows of customer review cards that animate continuously in opposite horizontal directions using CSS marquee animations. Each card displays a customer avatar, name, role, and quoted review text. Built with Tailwind CSS animations and shadcn/ui Card components, the marquee runs on CSS transforms rather than JavaScript — making it lightweight and performant. The animation pauses on hover to let users read individual cards.

When to use it

• Landing pages where continuous motion keeps the testimonial section engaging as users scroll past
• Products with a large number of reviews where a static grid would require truncation
• B2C products where peer validation is a primary conversion driver
• Pages where you want social proof visible without requiring the user to interact with a carousel

Notes

Duplicate a few cards at the end of the array to prevent a visible gap when the marquee loops. The animation is paused via CSS on hover — no JavaScript event listeners needed.

Frequently asked questions

Does the marquee animation use JavaScript?

No. It runs on CSS transforms, which keeps it lightweight and performant compared to a JavaScript-driven carousel.

What happens when a user hovers over the testimonials?

The marquee pauses on hover so users can read a card without it scrolling away, then resumes when the cursor leaves.

Do I need a lot of real testimonials to use this block?

No, but duplicate a few cards at the end of your array — with too few unique cards the marquee loop shows a visible gap.