BlocksSocial ProofTestimonial 01

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.