Pixel Sort
Vertical bar stretch effect that reconstructs the image on scroll.
Main Features of Pixel Sort
How to Use Pixel Sort in Next.js
Installation Guide for Pixel Sort
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 |
Related Components
When to Use
Excellent for glitch-themed sites, technical products, and modern web applications that want to emphasize a digital 'reconstruction' feel. Use this React component when building intro sequences where an image appears to be stream-loaded and processed in real-time.
Best Practices
Optimize for performance by adjusting the `scaleYRange` to avoid excessive stretching on low-end GPUs. Follow React best practices by using high-contrast colors for the `statusText`. Maintain scalable component architecture by keeping the `filterStart` blur level consistent with other glitch effects on your site.
Why This Component Matters in Modern UI Development
Pixel sorting and data-bending are major trends in tech-forward modern frontend development. This customizable UI component gives you a production-level implementation of complex CSS and motion mapping, helping you build a real-world application architecture that feels cutting-edge.
Frequently Asked Questions
QCan I use it for horizontal sorting?
The current implementation is focused on vertical bar stretching, but the scale axis can be swapped for horizontal motion with minor adjustments.
QDoes it work with transparent PNGs?
Yes, but for the best 'pixel sort' effect, it is recommended to use high-contrast images with well-defined color regions.
QIs the reconstruction speed adjustable?
The speed is tied to the user's scroll position, allowing for a perfectly synchronized 'data reveal' as they move down the page.