5c:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2qsfz_74auu2_.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3yfgkb3cck8zt.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3kyaj4hrugjs0.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2ryuxt_mk774w.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js"],"PostDetailCard"] 5d:Td44,

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.

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.

59:[["$","$L5c",null,{"post":{"id":"019dff4c-7757-708c-8742-45d92d977e90","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"933880df-e4cb-4aa4-a707-3089c7ab1ac7","name":"Aidan Looker","slug":"aidan-looker","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1284783/avatar-F6tgyME9x2RFxZFIP129WTmVxbuxWg.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"9L667kseG6cuM3hGP8fZ","resolved":true,"title":"Testimonial Popout","body":"$5d","bodyJson":null,"introduction":"Interactive avatar-driven testimonials.","slug":"testimonial-popout","author":{"framerUserId":"933880df-e4cb-4aa4-a707-3089c7ab1ac7","name":"Aidan Looker","slug":"aidan-looker","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1284783/avatar-F6tgyME9x2RFxZFIP129WTmVxbuxWg.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/9L667kseG6cuM3hGP8fZ/testimonial-popout-D6Az4Y35IdM9CQ2VFCQa4p5dvxKsQK","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-26T05:24:14.740Z","updatedAt":"2026-06-13T05:31:20.906Z","publishedAt":"2026-05-06T21:58:14.615Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://testimonialpopout.framer.website/","price":"9","paymentUrl":"https://teampixelau.lemonsqueezy.com/checkout/buy/7f47e9b0-b3f6-4660-9c13-e449d36b3cff","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"dQvJ3J1Dw5vyMyVmB64v","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-06T21:58:14.615Z","updatedAt":"2026-05-06T21:58:14.615Z","reported":false}}],"$L5e"]

Suggested for you