Avatar testimonial

Testimonials driven by a row of avatars: each quote rises in word by word out of a blur, and a ring fills around the active avatar until the next one.

Cards, press, Motion

Install

npm i clsx lucide-react motion tailwind-merge && curl -o components/avatar-testimonial.tsx https://motion-brew.com/r/avatar-testimonial.tsx

One self contained file for React and Tailwind CSS: avatar-testimonial.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { AvatarTestimonial } from "@/components/avatar-testimonial";

export default function Page() {
  return (
    <AvatarTestimonial
      interval={7000}
      items={[
        { quote: "It made our product feel alive.", name: "Ana Silva", role: "Head of design, Acme", avatar: "/ana.jpg" },
        { quote: "Shipped in an afternoon.", name: "Leo Park", role: "Engineer, Acme", rating: 4 },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
items	{ quote; name; role; avatar?; color?; rating? }[]	three testimonials	One testimonial per avatar
interval	number	6500	Milliseconds each one stays; 0 turns autoplay off
stars	boolean	true	Show the star rating
onChange	(index: number) => void		Called when the testimonial changes
className	string		Classes on the card

More cards

Rolling card stack: A deck of metric cards that rolls forward like a rolodex: the front card tips away, the next glides in and counts up.
Particle card: A product feature card whose hero visual is a particle field: it morphs like ripples on water and parts around the cursor.
Wallet card: A balance card that counts up on odometer wheels like the chart cards.
Tilt card: A card that tips in 3D toward your cursor, lifts a little, and catches a glare that slides the other way.

All animated react card components