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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.