Pixel Sort Shader for React

Pixel Sort Shader draws a dusk landscape, an indigo sky with drifting cloud bands, a low orange sun and two ridges of dark hills, and melts it the way pixel-sorting artists do. In each thin column, every run of pixels brighter than a threshold is sorted by brightness, so it becomes a streak that runs dark at the top to bright at the bottom, piling the sun's glow onto the hills. The threshold slowly breathes, so the streaks reach up into the sky and draw back again. A WGSL fragment shader on WebGPU computes every pixel each frame, sorting nothing: it finds each run's ends and fills it with the ramp a sort would make.

Use it behind an album release, a photography portfolio, a music or editorial hero, or as a banner strip, wherever glitch art should feel calm rather than broken. For datamosh-style tearing and flashes of static, use Glitch Shader; for the same kind of dusk drawn in CRT phosphor, CRT Phosphor Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a striped gradient of the same dusk in browsers without WebGPU.

Installation

Usage

import { PixelSortShader } from "@/components/ui/pixel-sort-shader";

<PixelSortShader className="flex min-h-[32rem] items-start justify-center pt-20">
  <h1 className="text-5xl font-semibold text-white">Night Drive</h1>
</PixelSortShader>

Pixel Sort Shader is a container: your content sits on top of the scene, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". The scene is dark in both color schemes, so use white or light text, in the indigo sky at the top or on the hills at the bottom; keep it off the bright band in between.

Demos

Banner

direction="right" sorts rows instead of columns, so the glow smears sideways into long horizontal streaks, which suits a short, wide strip. intensity={1.3} lowers the threshold, so more of the sky joins the sort.

In a card

columnWidth={4} makes each sorted column 4 CSS pixels wide, chunkier streaks that still read on a small surface.

Performance

About 2 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. Pixels outside a streak just draw the scene; pixels inside one sample their column every 4 CSS pixels or more, at most 48 times, to find the streak's ends. It keeps full quality: the columns are a couple of pixels wide, and half resolution would blur them. To spend less, lower streak, which shortens the runs each pixel walks. The animation stops when the shader scrolls out of view, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu (about 50 KB gzipped) loads only when the first one mounts.

Browser support

The shader needs WebGPU: Chrome and Edge, Safari 26 and later, and Firefox on Windows and macOS. Elsewhere, and until the first frame, the box shows a pinstriped CSS gradient of the same dusk over dark hills, in your colors, so the layout never jumps. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The scene is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame of the sorted dusk and stops. Nothing flashes: the threshold rises and falls over about 18 seconds, so the streaks grow and shrink a few pixels at a time. White text reads above 8:1 in the top 40% of the box and above 19:1 on the hills; over the glow it drops to nothing.

FAQ

API Reference