Dark Spotlight
Premium dark spotlight testimonial cards with hover effects.
Main Features of Dark Spotlight
How to Use Dark Spotlight in Next.js
Installation Guide for Dark Spotlight
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image. |
backgroundColor | string | #050505 | Background color of the component (hex, rgb, or hsl). |
badgeText | string | Excellence | Text displayed in the badge. |
badgeTextColor | string | #D4AF37 | Text color of the badge (hex, rgb, or hsl). |
title | string | Client Success Stories | Main title text. |
titleColor | string | #ffffff | Color of the title text (hex, rgb, or hsl). |
cardBgColor | string | rgba(23, 23, 23, 0.5) | Background color of the testimonial cards (hex, rgb, or hsl). |
cardBorderColor | string | #262626 | Border color of the testimonial cards (hex, rgb, or hsl). |
cardHoverBorderColor | string | rgba(212, 175, 55, 0.5) | Border color of cards on hover (hex, rgb, or hsl). |
spotlightColor | string | rgba(212, 175, 55, 0.1) | Color of the spotlight effect (hex, rgb, or hsl). |
spotlightSize | number | 600 | Size of the spotlight effect in pixels. |
quoteIconColor | string | #404040 | Color of the quote icon (hex, rgb, or hsl). |
quoteTextColor | string | #d4d4d4 | Color of the quote text (hex, rgb, or hsl). |
avatarGrayscale | boolean | true | Whether to apply grayscale filter to avatars. |
avatarOpacity | number | 0.7 | Opacity of avatar images (0-1). |
authorNameColor | string | #ffffff | Color of the author name text (hex, rgb, or hsl). |
authorRoleColor | string | #D4AF37 | Color of the author role text (hex, rgb, or hsl). |
dividerColor | string | #262626 | Color of dividers (hex, rgb, or hsl). |
Related Components
When to Use
Ideal for enterprise service providers, high-end consulting firms, and Next.js applications that want a luxury 'Pro' aesthetic. Use this React component for a premium dark-mode testimonial section with gold accents and a dynamic spotlight effect.
Best Practices
Maintain consistent spacing within your design system by using it on pure black or deep navy backgrounds. Follow React best practices by using light, airy typography. Optimize for performance by using hardware-accelerated transforms for the mouse-tracking spotlight.
Why This Component Matters in Modern UI Development
Luxury aesthetics communicate exclusivity and trust. This production-ready component provides a refined version of social proof, adding a layer of architectural depth and perceived value to your client stories.
Frequently Asked Questions
QHow does the spotlight work?
The spotlight effect follows the user's cursor across the cards, highlighting the specific testimonial they are currently reading.
QCan I remove the grayscale filter?
Yes, the `avatarGrayscale` prop can be set to `false` if you prefer to show author photos in their original colors.
QIs the gold color required?
While designed for gold (`#D4AF37`), the `badgeTextColor` and `authorRoleColor` props allow you to use any accent color that fits your brand.