Spotlight Grid
Spotlight grid testimonial section with dynamic lighting.
Main Features of Spotlight Grid
How to Use Spotlight Grid in Next.js
Installation Guide for Spotlight Grid
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 | #0a0a0a | Background color of the component (hex, rgb, or hsl). |
badgeBgColor | string | #171717 | Background color of the badge (hex, rgb, or hsl). |
badgeBorderColor | string | #262626 | Border color of the badge (hex, rgb, or hsl). |
badgeTextColor | string | #a3a3a3 | Text color of the badge (hex, rgb, or hsl). |
badgeIconColor | string | #eab308 | Icon color of the badge (hex, rgb, or hsl). |
badgeText | string | Wall of Love | Badge text content. |
title | string | Trusted by the best. | Main title text. |
titleGradientFrom | string | #ffffff | Start color of the title gradient (hex, rgb, or hsl). |
titleGradientTo | string | #737373 | End color of the title gradient (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). |
spotlightColor | string | rgba(255,255,255,0.06) | Color of the spotlight effect (hex, rgb, or hsl). |
spotlightSize | number | 600 | Size of the spotlight effect in pixels. |
avatarGrayscale | boolean | true | Whether to apply grayscale filter to avatars. |
avatarOpacity | number | 0.7 | Opacity of avatar images (0-1). |
iconColor | string | #404040 | Color of icons (hex, rgb, or hsl). |
quoteColor | string | #d4d4d4 | Color of the quote text (hex, rgb, or hsl). |
authorNameColor | string | #e5e5e5 | Color of the author name text (hex, rgb, or hsl). |
authorCompanyColor | string | #737373 | Color of the author company text (hex, rgb, or hsl). |
dividerColor | string | #404040 | Color of dividers (hex, rgb, or hsl). |
dividerDotColor | string | #404040 | Color of divider dots (hex, rgb, or hsl). |
Related Components
When to Use
Perfect for high-end SaaS, dark-mode dashboards, and Next.js applications that want a high-fidelity 'Wall of Love'. Use this React component for a spotlight grid where each card illuminates as the mouse moves over it.
Best Practices
Maintain consistent spacing within your design system by using it on pure black or deep gray backgrounds. Follow React best practices by using light, airy typography. Optimize for performance by using hardware-accelerated transforms for the spotlight overlay.
Why This Component Matters in Modern UI Development
Dynamic lighting creates a sense of discovery and premium quality. This production-ready UI component helpsคุณ build an interface that feels alive and responsive, improving user engagement with your customer stories.
Frequently Asked Questions
QHow does the spotlight work?
The spotlight effect follows the user's cursor across the entire grid, subtly highlighting the specific card and borders near the mouse.
QCan I change the spotlight color?
Yes, the `spotlightColor` prop allows you to change the glow from white to brand-specific colors like purple or gold.
QIs it mobile responsive?
On mobile, the mouse-tracking spotlight is typically disabled in favor of static hover states to ensure consistent performance.