Testimonial Popout is an interactive social proof component that displays a row of circular avatars. Clicking an avatar expands a polished speech bubble beneath it, revealing the full testimonial quote, star rating, and author details. Smooth crossfade transitions, a sliding caret arrow, and subtle micro-interactions create a premium, engaging experience. Ideal for landing pages, SaaS homepages, agency portfolios, and product pages where trust-building matters.
Interactive avatar row with hover tooltips, lift animations, and active glow rings
Animated speech bubble with sliding caret that tracks the selected avatar
Staggered star rating entrance with fractional star support (e.g. 4.5)
Crossfade transitions with motion blur between testimonials
Four curated dark theme presets — Obsidian, Midnight, Charcoal, and Ember — plus full custom colour control
Subtle card hover micro-interactions including shimmer line, divider animation, and quote mark breathing
Name, role, quote text, and star rating per testimonial (up to 10)
Responsive image upload per testimonial
Avatar size (48–120px)
Gap between avatars (8–48px)
Theme preset selector (Obsidian, Midnight, Charcoal, Ember, Custom)
Card background
Text primary and secondary
Star colour
Accent colour (divider, ring, highlights)
Avatar ring colour override
Border radius
Padding
Show/hide border
Shadow intensity
Transition speed (Slow, Medium, Fast)
Avatar hover scale
Font family selector
SaaS landing pages — let visitors browse testimonials interactively instead of scrolling
Agency and freelancer portfolios — showcase client feedback with a premium, editorial feel
Product and e-commerce pages — build trust with animated star ratings and real faces
Startup homepages — combine social proof with visual storytelling in a compact, above-the-fold section
One component. Four premium themes. Polished transitions that turn testimonials into a reason to convert.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
