Animated Testimonials
Crossfades portraits behind a rotating quote.
- 2.1 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
DW
“Swapped three separate animation libraries for Velora and the bundle got smaller.”
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/animated-testimonials.jsonAdds components/velora/animated-testimonials.tsx, installs motion and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
testimonials* | Testimonial[] | — |
intervalSeconds between slides; 0 disables autoplay | number | 6 |
className | string | — |
Testimonial
interface Testimonial {
quote: string;
name: string;
role: string;
/** Optional image URL; falls back to the person's initials */
src?: string;
}Accessibility
- Reduced motion
- Autoplay is off and the pause button is hidden. Changing slides with the dots swaps the portrait and quote instantly, with no scale, rotate or slide.
- Keyboard
- The pause/play button and the dots are native buttons with visible focus rings and 24px hit areas. Autoplay also pauses while the pointer or focus is inside the component.
- Screen readers
- Each dot is named "Show testimonial from {name}" with aria-current on the shown one, the quote is a blockquote, and slide changes are not announced.