Animated Testimonials

What people say

Voices that
matter most

Real stories from teams who transformed their workflow with our platform.

01 / 05

“

The attention to detail and innovative features have completely transformed our workflow. This is exactly what we've been looking for.

Sarah Chen

Product Manager at TechFlow

Installation

Usage

import { AnimatedTestimonials } from "@/components/motionx/animated-testimonials";
 
const testimonials = [
  {
    quote:
      "The attention to detail and innovative features have completely transformed our workflow.",
    name: "Sarah Chen",
    designation: "Product Manager at TechFlow",
    src: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=3560",
  },
  // Add more testimonials...
];
 
export default function Example() {
  return <AnimatedTestimonials testimonials={testimonials} autoplay />;
}

Props

AnimatedTestimonials

Prop	Type	Default	Description
`testimonials`	`Testimonial[]`	-	Array of testimonial objects
`autoplay`	`boolean`	`false`	Enable automatic slideshow with progress bars

Testimonial Object

Property	Type	Description
`quote`	`string`	The testimonial quote text
`name`	`string`	Person's name
`designation`	`string`	Person's role/designation
`src`	`string`	URL to person's image

Features

🎨 Editorial Layout: Asymmetric two-column design inspired by magazine layouts
✨ Smooth Animations: Clip-path transitions with scale effects
🔤 Word-by-Word Animation: Quote text animates word by word with blur effect
🔄 Autoplay Option: Optional automatic slideshow with visual progress indicators
📱 Responsive: Mobile-first design that scales beautifully
⌨️ Accessible: Full keyboard navigation and ARIA labels
🎯 Interactive: Click or navigate with arrow buttons

Examples

With Autoplay

Enable automatic slideshow with progress bars.

<AnimatedTestimonials testimonials={testimonials} autoplay />

Disable autoplay for manual control with dot indicators.

<AnimatedTestimonials testimonials={testimonials} />

Animation Details

The component features several sophisticated animations:

Clip-path transitions: Images reveal from top/bottom based on direction
Word stagger: Quote text animates word-by-word with individual blur effects
Scale effects: Subtle scale transforms during transitions
Progress bars: Smooth width animations in autoplay mode
Editorial number: Large typographic number overlay on images

Credits

Inspired by editorial magazine layouts and modern web design patterns.