Spotlight Matrix
Uilora Spotlight Matrix — cursor-lit gallery that illuminates images as you move.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [...16 image URLs] | Array of image URLs to display in grid. |
| backgroundColor | string | #000000 | #000000 Background color (hex, rgb, or hsl). |
| spotlightSize | number | 600 | Size of spotlight effect in pixels. |
| imageLabelPrefix | string | UIL | Prefix text for image labels. |
When to Use
Excellent for tech labs, high-fidelity portfolios, and Next.js platforms that want a dramatic Uilora Spotlight Matrix aesthetic. Use this gallery reveal for an immersive experience where images light up and 'activate' based on cursor movement.
Best Practices
Follow React best practices by pairing this with dark-themed hero backgrounds. Maintain scalable component architecture by keeping the light intensity balanced. Optimize for performance by managed the gradient coordinates.
Why This Component Matters
Spotlight-based aesthetics communicate technical depth, focus, and digital power. This Uilora-ready template helps you build an interface that feels advanced and high-end, adding a distinct matrix signature to your brand.
FAQ
QHow does the 'Spotlight' work?
The component tracks the cursor to localized mask coordinates, creating a physical light beam that follows the user across the image collection.
QCan I change the glow?
Yes, both the spotlight size and the primary background color can be adjusted to match your brand's specific environmental lighting.
QDoes it work on phone?
The light beam responds to touch-move events, though it's most impactful as a mouse-driven interactive element on desktop.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.