Spotlight Grid
Spotlight grid testimonial section with dynamic lighting.
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). |
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
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.
FAQ
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.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.