Animations & Motion
Pixel Sort
Vertical bar stretch effect that reconstructs the image on scroll.
scrollrevealpixelsortstretch
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
image | string | https://images.unsplash.com/photo-1634152962476-4b8a00e1915c?q=80&w=1000&auto=format&fit=crop | Image URL |
backgroundColor | string | bg-black | Background color of the component |
containerHeight | string | h-[120vh] | Height of the container |
imageWidth | string | w-[80vw] | Width of the image |
imageHeight | string | h-[60vh] | Height of the image |
scaleYRange | [number, number] | [50, 1] | Y scale range |
scaleXRange | [number, number] | [0.1, 1] | X scale range |
filterStart | string | blur(10px) contrast(200%) | Initial filter value |
filterEnd | string | blur(0px) contrast(100%) | Final filter value |
gradientFrom | string | from-black | Gradient start color class |
gradientTo | string | to-transparent | Gradient end color class |
gradientOpacity | number | 0.5 | Opacity of gradient overlay |
statusText | string | RECONSTRUCTING_DATA_STREAM... | Status text displayed |
statusTextColor | string | text-white | Color of status text |
statusTextSize | string | text-sm | Size of status text |
scrollOffset | [string, string] | ["start end", "center center"] | Scroll offset configuration |
className | string | Additional CSS classes |