Animated Testimonials
A testimonial carousel with a shuffling image stack and crossfading quotes.
GodUI shipped the smoothest interactions I've put in production this year.
Ada Lovelace
Design Engineer, Analytical
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/animated-testimonials.json"AnimatedTestimonials shuffles a stack of portraits while the quote reveals
word-by-word and the name crossfades. It autoplays and exposes manual controls.
Usage
tsx
import { AnimatedTestimonials } from "@/components/godui/animated-testimonials";tsx
const testimonials = [
{ quote: "…", name: "Ada Lovelace", role: "Design Engineer", src: "/ada.jpg" },
{ quote: "…", name: "Grace Hopper", role: "Staff Engineer", src: "/grace.jpg" },
];
<AnimatedTestimonials testimonials={testimonials} interval={6000} />;Props
| Prop | Type | Default | Description |
|---|---|---|---|
testimonials | Testimonial[] | — | Testimonials to cycle through. |
autoplay | boolean | true | Advance automatically. |
interval | number | 5000 | Autoplay interval in milliseconds. |
Each Testimonial is { quote, name, role, src }. The component also forwards every
standard <div> attribute to the root element.