Testimonial Spotlight is a premium testimonial carousel that puts your best reviews center stage. The active card sits in full focus while adjacent testimonials peek in from both sides with blur and reduced opacity — creating a cinematic depth effect that draws the eye. Navigation is handled via arrow buttons or dot indicators, with smooth directional transitions powered by Framer Motion. Every element — badge, heading, subheading, avatar, review text, name, job title, and Twitter/X link — is fully customizable through property controls with no code required.
Center-spotlight carousel with peek preview of previous and next cards
Blurred, reduced-opacity side cards for cinematic depth effect
Smooth directional slide animations via Framer Motion
Arrow navigation buttons — individually toggleable
Dot indicators with click-to-jump navigation
Individual testimonial cards with avatar image, name, job title, and review text
Clickable Twitter/X icon per testimonial with hover scale effect
Optional badge with custom text, icon upload, or default Zap icon
Optional heading and subheading sections — each individually toggleable
Full typography control — separate font settings for all 5 text elements
Color customization for background, text, borders, and accents
Adjustable padding around the entire component
Responsive image support with srcSet for sharp avatars at all resolutions
Static preview rendering on Framer canvas for easy editing
Accessibility-ready with alt text support and keyboard navigation
Badge
Show Badge — Toggle badge visibility
Badge Text — Label inside the badge
Badge Icon — Upload custom SVG/image or use default Zap icon
Header
Show Heading — Toggle heading section
Heading Text — Main section headline
Show Subheading — Toggle subheading section
Subheading Text — Supporting description line
Reviews
Reviews — Array of testimonial entries, each with:
Review Text — The testimonial quote
Avatar — Upload profile photo (responsive image)
Name — Reviewer's full name
Job Title — Role or company
Twitter URL — Link to Twitter/X profile
Navigation
Show Arrows — Toggle left/right arrow buttons
Show Dots — Toggle dot indicators
Layout
Padding — Outer spacing around the component (default: 10px)
Typography
Heading Font — Font settings for the heading (default: 32px Semibold)
Subheading Font — Font settings for subheading (default: 15px Medium)
Review Font — Font for testimonial quote text (default: 15px Medium)
Name Font — Font for reviewer name (default: 15px Medium)
Job Title Font — Font for job title (default: 15px Medium)
Colors
Background — Component background color (default: #000000)
Text Color — Primary text color (default: #FFFFFF)
Border Color — Card border color (default: rgba(255,255,255,0.2))
Accent Color — Buttons, icons, active dot (default: #FFFFFF)
Built with Framer Motion — AnimatePresence + motion.div for directional slide transitions
Peek previews rendered via CSS blur() filter and opacity on adjacent card slots
Static canvas mode — detects Framer editor environment and renders non-animated preview
ControlType.ResponsiveImage for avatar uploads with full srcSet support
Twitter/X icon rendered as inline SVG with onHoverStart / onHoverEnd scale interaction
Badge icon supports both uploaded image and default SVG fallback
Supports fit-content width and height sizing modes
No external dependencies beyond React and Framer Motion
Customer testimonial sections on SaaS landing pages
Product review showcases for e-commerce sites
Social proof blocks on marketing and agency sites
Team member quote carousels on about pages
Case study highlights on portfolio sites
Client feedback displays for freelancer and studio sites
App store review showcases on mobile app landing pages
Speaker or instructor testimonials on course and event pages
testimonial carousel framer · spotlight carousel framer · review slider framer component · framer testimonial component · social proof framer · customer review carousel · peek preview carousel framer · framer motion carousel · testimonial slider with avatars · review showcase framer · framer testimonial slider · animated testimonial framer · saas testimonial component · framer review component · testimonial spotlight effect
Hamim Reza
