Uilora Digital Sorting
Premium pixel-sorting effect with vertical streaks, digital jitter, and subtle scanline textures.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| baseColor | string | #050505 | The deep background color |
| accentColor | string | #1a1a25 | Color of the sorted blocks |
| blockSize | number | 1.0 | Width of vertical columns (0.5-2.0) |
| speed | number | 0.2 | Speed of vertical drift |
When to Use
Perfect for developer tools, futuristic dashboards, or tech portfolios that want a sophisticated, calculated 'glitch' aesthetic.
Best Practices
Use deep slate or black as the base color to make the accent 'sorted' pixels feel like they're emerging from the void.
Why This Component Matters
Pixel sorting is a hallmark of high-end digital art. This implementation brings that complexity to the web with real-time performance and interactivity.
FAQ
QWhat is pixel sorting?
It's a digital art technique where sections of an image are re-ordered based on their brightness or hue; here we simulate it procedurally.
QDoes it support RBG splitting?
Yes, the shader includes a built-in RGB split at the edges of the streaks for a more authentic digital look.
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.