Testimonials pill presents one testimonial at a time, centered and framed with optional quotation marks for an editorial feel. Transitions between quotes use smooth blur, opacity, and scale animations to keep the experience soft and intentional.
Navigation is handled through avatar pills below the quote. When hovered or selected, each avatar expands to reveal the author’s name, while the active state is highlighted using a customizable background color and subtle shadow. This creates an intuitive interaction pattern that feels tactile and premium.
The component is fully customizable from Framer’s property panel, allowing you to control typography, colors, spacing, animation speed, avatar sizing, and visual emphasis — all without writing additional code.
• Smooth animated transitions between testimonials• Interactive avatar-based navigation• Hover-to-reveal author names• Active state highlighting with pill expansion• Optional decorative quotation marks• Customizable typography and colors• Adjustable animation speed and spacing• Responsive and layout-friendly• Lightweight and performance-optimized
Drag the component onto your canvas.
Add testimonials using the Testimonials array.
Customize quote text, author name, role, and avatar image.
Adjust quote typography, colors, and spacing.
Toggle quotation marks and set their opacity.
Fine-tune animation speed for your preferred motion feel.
Match avatar size and active colors to your brand style.
No additional setup required.
• Landing page testimonials• Product social proof sections• Startup and SaaS websites• Portfolio and personal sites• Design-focused marketing pages• Minimal and motion-driven layouts
• Testimonials (array)• Quote font• Quote color• Background color• Active pill color• Hover color• Role text color• Show / hide quotation marks• Quotation mark opacity• Animation speed• Vertical spacing (gap)• Avatar size
Launchly
