component
Testimonial Flip
By Sarbojit
Details
- SarbojitAuthor
- componentType
- 2026-06-10Published
- 2026-06-10Updated
- 2026-06-10Added
- SectionsCategories
Summary
Testimonial Flip Card is a premium, hover-animated component that displays a clean avatar card by default and smoothly reveals the full quote on hover — creating an engaging…
Description
Turn static testimonials into interactive social proof. Stop building testimonial sections from scratch. Testimonial Flip Card is a premium, hover-animated component that displays a clean avatar card by default and smoothly reveals the full quote on hover — creating an engaging experience that keeps visitors curious and clicking. ✦ Key Features Smooth Hover Animation — Front face (avatar + name) crossfades into the back face (quote + rating) with a satisfying card tilt and scale effect. Fully Customizable — Control every visual detail directly from the Properties panel: gradient colors & angle, card background, text colors, font size, padding, border radius, and avatar size. Star Ratings — Built-in 1–5 star rating with toggle visibility and custom star color. Responsive Image Support — Uses Framer's native ResponsiveImage control for the avatar, supporting srcSet for optimized loading. Auto-Sizing Height — Card height automatically adapts to your quote length. No manual resizing needed. Clean Fallback — Displays a styled placeholder avatar when no image is provided. Zero Dependencies — Built with Framer Motion (included in Framer) and React. Nothing extra to install.
Introduction
Testimonial Flip Card
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #2395