Create a modern, clean testimonial section with interactive avatars, smooth quote transitions, and dynamic author details. Perfect for landing pages, portfolios, or SaaS websites where client feedback or user testimonials need to be showcased elegantly.
The component automatically animates quote text, author info, and avatars when switching between testimonials, giving a premium, polished feel without any code.
Before using this component:
You should be working inside a Framer project
Have an array of testimonial data ready (quotes, author names, roles, avatars)
Optional: Custom fonts for quotes, names, and roles
Quote Display
Only one testimonial quote is visible at a time
Active quote animates into place with fade and vertical motion
Inactive quotes fade out and blur slightly
Avatar Interaction
Clicking an avatar switches to the corresponding testimonial
Active avatar scales up and removes grayscale
Inactive avatars remain muted for clarity
Author Info
Displays author name and role
Animates with fade and subtle horizontal motion
Gap between name and role is customizable
Dynamic Styling
Supports custom fonts for quotes, names, and roles
Background and text colors are fully customizable
Layout adjusts automatically to container width