An animated testimonial carousel with cinematic quote transitions, stacked avatar navigation, autoplay, and keyboard controls.
Gojo Satoru · The Strongest, JJK
$ npx shadcn@latest add https://akshitr.com/r/testimonial.json
import Testimonial from "@/components/testimonial";
const TESTIMONIALS = [
{
name: "Sarah Chen",
role: "Product Designer",
company: "Linear",
quote:
"This component instantly elevated the perceived quality of our landing page.",
avatar: "https://images.unsplash.com/...",
},
{
name: "Marcus Rivera",
role: "Frontend Engineer",
company: "Vercel",
quote:
"The motion feels incredibly polished while still remaining lightweight.",
avatar: "https://images.unsplash.com/...",
},
];
export default function Demo() {
return <Testimonial testimonials={TESTIMONIALS} />;
}| Prop | Type | Default | Description |
|---|---|---|---|
| testimonials | Testimonial[] | — | Array of testimonials rendered in the carousel. |
| className? | string | — | Additional classes applied to the root section. |
| autoPlay? | boolean | true | Enable autoplay rotation. |
| interval? | number | 5000 | Autoplay interval in milliseconds. |
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | Name of the person giving the testimonial. |
| role | string | — | Role or job title displayed below the quote. |
| company | string | — | Company name shown alongside the role. |
| quote | string | — | Main testimonial content displayed prominently. |
| avatar | string | — | Avatar image rendered in the stacked selector. |
| Trigger | Behaviour |
|---|---|
| Autoplay | Automatically cycles through testimonials every 5 seconds. |
| Hover component | Pauses autoplay while the user is interacting with the section. |
| Click avatar | Activates the selected testimonial with animated transitions. |
ArrowLeft / ArrowRight | Navigates between testimonials using keyboard controls. |
| Active state | Active avatar scales forward while surrounding avatars fan out. |
| Quote transition | Quotes animate with blur, fade, and vertical motion transitions. |