TestimonialSpotlight

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