---
title: "Testimonial Popout — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Aidan Looker · Sections. What is Testimonial Popout?"
canonical: "https://framer.elliotli.dev/component/testimonial-popout"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Testimonial Popout

# Testimonial Popout

Interactive avatar-driven testimonials.

[View on Framer](https://framer.com/marketplace/components/testimonial-popout/?via=elliot-li)

![Testimonial Popout preview image 1](https://framer.elliotli.dev/og/component/testimonial-popout/98856404ae62e0b5/1600x1200.jpg)

## Summary

What is Testimonial Popout?

## Description

## What is Testimonial Popout?

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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   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
    

## Controls inside Framer

### Testimonials

-   Name, role, quote text, and star rating per testimonial (up to 10)
    

### Avatars

-   Responsive image upload per testimonial
    

### Layout

-   Avatar size (48–120px)
    
-   Gap between avatars (8–48px)
    

### Theme

-   Theme preset selector (Obsidian, Midnight, Charcoal, Ember, Custom)
    

### Colors (visible when Custom theme is selected)

-   Card background
    
-   Text primary and secondary
    
-   Star colour
    
-   Accent colour (divider, ring, highlights)
    
-   Avatar ring colour override
    

### Card Style

-   Border radius
    
-   Padding
    
-   Show/hide border
    
-   Shadow intensity
    

### Animation

-   Transition speed (Slow, Medium, Fast)
    
-   Avatar hover scale
    

### Typography

-   Font family selector
    

## Best use cases

-   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.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #8653

## Details

- **Author**: Aidan Looker
- **Price**: $9.00
- **Published**: 2026-05-06
- **Updated**: 2026-06-13
- **Added**: 2026-04-26
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes