Testimonial Quotes is a polished social proof component that displays large, centered quotes with gradient-highlighted keywords, fractional star ratings, and an interactive avatar row for cycling between testimonials. Each quote transitions with a smooth blur-and-slide animation, while a subtle wave hover effect lifts individual characters as the cursor passes over the text. Fully responsive and ideal for SaaS landing pages, agency portfolios, product pages, and startup sites that need testimonials to feel dynamic rather than static.
Gradient keyword highlighting using a simple double asterisk syntax — wrap any word to apply a flowing gradient
Fractional star ratings per testimonial — supports precise values like 4.35, with theme-matched colors that adapt automatically
Interactive avatar selector with gradient ring, glow effects, hover tooltips, and smooth spring animations
Per-character wave hover animation that subtly lifts letters near the cursor for a premium, tactile feel
Four curated theme presets (Pearl, Obsidian, Midnight, Ember) plus a fully custom colour mode
Fully responsive layout
Optional auto-play with configurable interval and automatic pause-on-hover
Testimonials — add up to 12 quotes with name, role, rating value, and gradient keyword markup
Avatars — upload custom avatar images per testimonial, or use built-in defaults
Avatar Size — adjust from 40px to 96px
Star Rating — show or hide the star display
Star Size — adjust from 12px to 32px
Star Color — automatically matched to each theme preset, or set manually in Custom mode
Auto Play — toggle automatic cycling with a 2–15 second interval
Pause on hover — auto-play pauses when the user interacts
Theme — choose Pearl, Obsidian, Midnight, Ember, or Custom
Custom Colors — background, primary text, secondary text, gradient start, gradient end, quote mark colour, star colour
Font Size — 18px to 48px
Line Height — fine-tune from 1.1 to 2.0
Quote Marks — toggle decorative marks on or off, with adjustable size
Transition Speed — Slow, Medium, or Fast
Avatar Hover Scale — control the hover magnification of inactive avatars
Font — connect any Framer font with weight control
SaaS and product landing pages where social proof needs to convert, not just exist
Agency and studio portfolios showcasing client feedback with visual polish
Startup homepages that need a dynamic, trust-building testimonial section above the fold
Brand websites where design quality signals credibility at first glance
Ship a testimonial section that feels as refined as the product it represents.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
