Overview ImageExpandTestimonial displays a set of testimonials with a portrait gallery where the active reviewer’s photo expands to full height while inactive photos collapse to thumbnails. On desktop, the active photo is anchored to the right; on mobile it is centered. Transitions are driven by Framer Motion spring physics.Installation npx rareui@latest add image-expand-testimonial
Requires framer-motion, lucide-react, and next/image (Next.js). Install peer dependencies: npm install framer-motion lucide-react
import { ImageExpandTestimonial } from "@/components/rareui/Sections/imageExpandTestimonial" ; const testimonials = [ { id: "1" , name: "Sarah Chen" , role: "VP of Engineering" , company: "TechCorp Inc." , quote: "This component library has transformed our development workflow. The attention to detail is remarkable." , image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=600&fit=crop" , rating: 5 , }, { id: "2" , name: "Marcus Johnson" , role: "Lead Developer" , company: "StartupXYZ" , quote: "Clean, performant, and beautiful. Everything we needed for our product launch." , image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=600&fit=crop" , rating: 4.5 , }, ]; export default function TestimonialsSection () { return ( < ImageExpandTestimonial testimonials = { testimonials } autoPlayInterval = { 5000 } /> ); }
Array of testimonial objects. Each object must have the following shape: interface Testimonial { id : string ; // Unique identifier (used as React key) name : string ; // Reviewer full name role : string ; // Job title company : string ; // Company name quote : string ; // Testimonial text image : string ; // Portrait image URL rating ?: number ; // Optional star rating (supports half stars, e.g. 4.5) }
Interval in milliseconds between automatic testimonial advances. The timer resets when the user manually navigates.
Additional CSS classes applied to the outermost container. The container defaults to max-w-7xl mx-auto.
Examples Faster autoplay < ImageExpandTestimonial testimonials = { testimonials } autoPlayInterval = { 3000 } />
Disabled autoplay (set a very large interval) < ImageExpandTestimonial testimonials = { testimonials } autoPlayInterval = { 999999999 } />
Full-height section < section className = "min-h-screen flex items-center" > < ImageExpandTestimonial testimonials = { testimonials } className = "py-24" /> </ section >
Features
Expanding Photo Gallery The active portrait animates from a small thumbnail to a tall hero image using Framer Motion layout animations with spring physics.
Responsive Layout On mobile (<1024px) the active photo is centered; on desktop it’s anchored to the right, with a sidebar index counter.
Half-Star Ratings Star ratings support decimal values (e.g. 4.5) with a pixel-perfect half-star clip mask implementation.
Auto-Play with Reset Auto-advance timer resets on manual navigation, preventing jarring transitions right after user interaction.
