X-Ray Scanner
Horizontal scan line reveals content from grayscale to full color.
Main Features of X-Ray Scanner
How to Use X-Ray Scanner in Next.js
Installation Guide for X-Ray Scanner
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
image | string | https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=1000&auto=format&fit=crop | Image URL |
backgroundColor | string | bg-black | Background color of the component |
containerHeight | string | h-[300vh] | Height of the container |
imageWidth | string | w-[80vw] | Width of the image |
imageHeight | string | h-[80vh] | Height of the image |
gridCols | number | 12 | Number of grid columns |
gridRows | number | 12 | Number of grid rows |
gridColor | string | border-green-500/30 | Color of grid lines |
gridOpacity | number | 0.3 | Opacity of grid lines |
scanLineColor | string | bg-red-500 | Color of the scan line |
scanLineShadow | string | shadow-[0_0_50px_4px_rgba(255,0,0,0.8)] | Shadow of the scan line |
scanText | string | SCANNING STRUCTURE... | Scanning text displayed |
scanTextColor | string | text-green-500 | Color of scanning text |
scanTextSize | string | text-xl | Size of scanning text |
renderedText | string | RENDERED | Rendered text displayed |
renderedTextColor | string | text-white | Color of rendered text |
renderedTextSize | string | text-6xl | Size of rendered text |
scanXRange | [string, string] | ["0%", "100%"] | Scan X position range |
scrollOffset | [string, string] | ["start start", "end end"] | Scroll offset configuration |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for security-themed sites, technical products, and modern web applications that want to showcase internal structures or 'behind the scenes' content. This React component is perfect for a storytelling reveal that transitions from abstract grid lines to realistic imagery.
Best Practices
Maintain scalable component architecture by keeping the `scanLineColor` consistent with your site's alert or focus colors. Follow React best practices by ensuring the `scanText` is descriptive and engaging. Optimize for performance in large-scale applications by using hardware-accelerated shadows for the scan line.
Why This Component Matters in Modern UI Development
Visualizing a 'scanning' process adds a layer of interactivity and narrative depth. This reusable React component gives you a production-level tool for building immersive, tech-forward real-world application architecture that captivates users.
Frequently Asked Questions
QCan I use it for vertical scanning?
The current implementation is horizontal, but it can be easily rotated for a top-to-bottom scan effect.
QHow do I change the grid density?
The `gridCols` and `gridRows` props allow you to define exactly how many grid lines appear over the image.
QIs the grayscale reveal automatic?
Yes, the component handles the transition from a grayscale grid-view to a full-color image based on the scan line's progress.