Spotlight Reveal
Flashlight effect reveals text as you move your mouse over it.
Main Features of Spotlight Reveal
How to Use Spotlight Reveal in Next.js
Installation Guide for Spotlight Reveal
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | DARKNESS | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
dimTextColor | string | text-zinc-900 | Color of dimmed text |
brightTextColor | string | text-zinc-100 | Color of bright text |
textSize | string | text-8xl md:text-9xl | Size of the text |
spotlightSize | number | 200 | Size of the spotlight circle |
cursorSize | string | w-6 h-6 | Size of the cursor indicator |
cursorBorderColor | string | border-white | Border color of the cursor |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for 'dark mode' landing pages, security-themed sites, and creative portfolios. Use this React component to create a sense of mystery and discovery, revealing your message as the user 'searches' the dark area with their mouse.
Best Practices
Maintain consistent spacing within your design system by ensuring the hidden text has enough contrast when 'lit' by the spotlight. Follow React best practices by keeping the `spotlightSize` large enough for easy readability. Optimize for performance in large-scale applications by using hardware-accelerated masks.
Why This Component Matters in Modern UI Development
Interactive masking is a powerful way to engage users and encourage exploration. This production-ready component provides a robust implementation of complex CSS masks, adding a layer of polish and narrative interest to your real-world application architecture.
Frequently Asked Questions
QCan I use multiple spotlights?
The current implementation is optimized for a single high-impact spotlight, but it can be adapted for multiple focus points with custom CSS.
QHow do I change the spotlight color?
The 'light' is created by the `brightTextColor`, but you can also add a color gradient overlay to the `spotlightSize` mask itself.
QDoes it work with images?
Yes, while designed for text, this masking logic can be easily applied to images to create a 'flashlight' reveal effect.