Auto-Playing Testimonials Carousel

Auto-Playing Testimonials Carousel

A beautiful, responsive testimonials section with an auto-playing carousel, star ratings, and smooth scroll animations.

Features

• Auto-play carousel using Embla Carousel with autoplay plugin
• Smooth animations with Framer Motion (staggered entrance)
• Responsive design - 1 column on mobile, 2 on tablet, 3 on desktop
• Hover effects - cards lift and shadow increases on hover
• Star ratings - visual representation of ratings
• Navigation controls - previous/next buttons for manual control
• Professional design - gradient background, clean typography

Installation

npm install framer-motion lucide-react embla-carousel-autoplay

Dependencies

This component requires the following shadcn/ui components:

• Card
• Carousel

Make sure you have them installed in your project:

npx shadcn-ui@latest add card carousel

Usage

import ReviewSection from '@/components/review-section'

export default function Page() {
  return <ReviewSection />
}

Customization Options

• Autoplay delay: Modify the delay value (currently 3000ms)
• Stop on hover: Set stopOnMouseEnter: true to pause on hover
• Review data: Update the reviews array with your own testimonials
• Colors: Adjust gradient classes and card styles
• Animation timings: Modify transition values in motion components