X-Ray Scanner
Horizontal scan line reveals content from grayscale to full color.
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 |
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
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.
FAQ
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.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.