X-Ray Reveal
X-ray reveal FAQ with flashlight mask effect.
Main Features of X-Ray Reveal
How to Use X-Ray Reveal in Next.js
Installation Guide for X-Ray Reveal
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
faqs | Array<{id: number, q: string, a: string}> | [] | Array of FAQ items with id, question (q) and answer (a). |
backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
questionColor | string | #84cc16 | Question text color. |
answerColor | string | #ffffff | Answer text color. |
ringBorderColor | string | rgba(132, 204, 22, 0.5) | Flashlight ring border color. |
iconColor | string | #84cc16 | Scan icon color. |
spotlightSize | number | 300 | Size of the spotlight circle in pixels. |
Related Components
When to Use
Excellent for gaming dashboards, creative portfolios, and Next.js applications that want an interactive, 'discovery-based' aesthetic. Use this React component for an FAQ section where answers are revealed through a virtual flashlight or X-ray mask.
Best Practices
Follow React best practices by using high-contrast colors for the revealed text. Maintain scalable component architecture by keeping the `spotlightSize` large enough to cover the core answer text. Optimize for performance by using CSS masks instead of heavy canvas operations.
Why This Component Matters in Modern UI Development
Discovery-based interactions improve user curiosity and engagement. This production-ready UI component helpsคุณ build an interface that feels experimental and engaging, turning a standard FAQ into an interactive experience.
Frequently Asked Questions
QHow does the reveal work?
The component uses a CSS mask-image that follows the mouse cursor, revealing the 'hidden' answer layer only within the spotlight circle.
QIs it mobile friendly?
On touch devices, the spotlight can be controlled via touch-move events, providing a similarly tactile experience to the mouse hover.
QCan I adjust the flashlight ring?
Yes, the `ringBorderColor` prop allows you to customize the glowing edge of the virtual flashlight to match your UI's theme.