TestimonialSpotlight

Spotlight carousel with peek previews

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. ✅ Features 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 🎛️ Property Controls Breakdown 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) ⚙️ Technical Details 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 💡 Use Cases 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 🔍 SEO Keywords (15) 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

Spotlight carousel with peek previews