Animations & Motion
X-Ray Scanner
Horizontal scan line reveals content from grayscale to full color.
scrollrevealxrayscannermask
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 |