Velora UI

Animated Testimonials

Crossfades portraits behind a rotating quote.

  • 2.1 KB gzipped
  • Deps: motion/react
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Preview

DW

“Swapped three separate animation libraries for Velora and the bundle got smaller.”

Dana Whitfield — Staff engineer, Corvine

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/animated-testimonials.json

Adds components/velora/animated-testimonials.tsx, installs motion and merges the keyframes and tokens into your CSS.

Props

PropTypeDefault
testimonials*Testimonial[]—
interval

Seconds between slides; 0 disables autoplay

number6
classNamestring—

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.