Pixel Sort Drag

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

The inline script is not optional. The photograph in the markup is the fallback for no JavaScript, no WebGL and reduced motion, and without this it paints for the half second it takes three.js to arrive, then gets swapped for the canvas. The probe runs before first paint, stamps html.gl when a canvas is coming, and the stylesheet hides the fallback under that class. No JavaScript, no class, photograph shows; the effect removes the class again if it cannot build a renderer after all. It probes WebGL2 because that is what current three.js requires.

2. Add to your <body>:

Code snippet omitted: it ships with the download.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

The script reads the <img>, drops a canvas in front of it, and hides the figure once the canvas is actually there.

Why the import map rather than a plain <script src> for three.js: three ships as ES modules only, and its old UMD build logs a deprecation warning on every page load. The shim above imports it as a module, puts it on window, and then loads assets/script.js as an ordinary script, so the effect itself stays a plain file you can drop into any build (or none).

Already using three.js as a module? Then skip the shim, and just make sure window.THREE is set before assets/script.js runs:

Code snippet omitted: it ships with the download.

---

Choosing Your Images

This effect has a real content requirement, and ignoring it is the main way to make it look broken. A pixel sort re-orders the pixels along a row by brightness, so it only shows where brightness changes along that row. A flat sky sorted is the same flat sky. So:

• Tonal variety across the frame, not just contrast. A subject with dark masses (hair, silhouettes, clothing) against mid-tone gradients (gel light, a sunset, skin, painted walls) gives the sort something to drag through. Large uniform areas stay untouched no matter how fast you flick.
• Strong structure perpendicular to the stroke. Horizontal drags smear across vertical edges (a face in profile, trees, architecture) most visibly; vertical drags do the same to horizons and shelves.
• Ungraded, or lightly graded. The shader measures the photograph's own darkest and brightest tones and works inside that range, so a low-key image sorts fully, but a heavily crushed grade leaves little in the middle to re-order.

Test with a fast flick through the subject, not at rest. The fallback and the canvas cover-fit the image, so any aspect ratio fills the frame.

The demo photograph is a derivative of Pexels photo 4985860 (Pexels licence), resized and encoded from assets/img-src/ by assets/img-manifest.json.

---

Using It With Your Own Design

What the effect needs from your markup: an element with data-pixel-sort, containing an element with data-pixel-sort-source that holds one <img>. The script reads that image as its texture (no second download) and uses its alt text as the canvas's accessible name. Every data-pixel-sort on the page becomes its own instance.

What is only the demo's styling: the floating prompt pill, the dark page ground, the crosshair cursor and the Mona Sans font. Delete them freely; the effect draws nothing outside its own root.

CSS the effect depends on:

• The container must have a real size. The canvas is sized from the container's clientWidth/clientHeight, so .pixel-sort needs a height from somewhere: it is position: absolute; inset: 0 in the demo. Give it a height of 0 and you get a canvas of 0. It tracks later size changes on its own.
• The .pixel-sort__source figure must stay in the document. It is the fallback for no JavaScript, no WebGL and reduced motion, and it is hidden only by html.gl (the head probe) and .pixel-sort.is-live, a class the script adds after a canvas exists. Style it as the photograph it is.
• touch-action: pan-y on .pixel-sort. Sideways drags sort; vertical swipes keep scrolling the page on touch. If the effect is a full-screen hero that should own the whole gesture (so vertical drags sort columns on phones too), change it to none.
• overflow: hidden and position: relative or absolute on the root, so the canvas (position: absolute; inset: 0) sits inside it.

---

Options

All options are data attributes on the data-pixel-sort element.

Attribute	Values	Default	Description
data-threshold	0 to 1	0.2	Darkest tone that sorts on a slow move, as a fraction of the photograph's own range. Lower sorts more of the image even on gentle strokes.
data-threshold-fast	0 to 1	0.02	Darkest tone that sorts on a full-speed flick.
data-band	0.02 to 0.3	0.075	Radius of the band on a slow move, as a fraction of the height.
data-spread	1 to 4	2.2	How much a full-speed flick widens the band. 1 keeps it constant.
data-reach	4 to 40	22	Pixels between run samples at full speed. The longest streak is about 21 times this.
data-speed-scale	px per second	1400	Pointer speed that counts as a hard flick on a 1200px-wide effect (scaled with the width, so a phone needs a proportionally shorter flick). Raise it to make the band harder to blow open.
data-split	0 to 3	1	Red and blue channel delay along the streak at speed. 0 keeps colours registered.
data-decay	0.9 to 0.995	0.972	How much of the band survives each 60th of a second after release. Higher settles more slowly.
data-hold	0.9 to 1	0.997	The same while the pointer is held down. 1 keeps the whole stroke sorted until release.
data-linger	0.9 to 0.999	0.99	Decay of the residual highlight streak.
data-highlight	0 to 1	0.72	Tone above which the residual streak shows.
data-residual	0 to 1	0.8	Strength of the residual streak. 0 turns it off.
data-intro	1, 0	1	One played stroke across the image when it loads.
data-auto	1, 0	1	On touch devices, a slow autonomous stroke between touches.
data-max-dpr	number	2	Pixel ratio cap on fine pointers (touch is always capped at 1.5).

Example: a calmer sort that needs real speed to open

Code snippet omitted: it ships with the download.

Example: long, wild streaks that settle slowly

Code snippet omitted: it ships with the download.

---

Accessibility

• Reduced motion: the WebGL scene never starts. The photograph stays exactly as it is, full-bleed and still, with its alt text. Switching the preference while the page is open tears the canvas down and shows it.
• Without JavaScript, or without WebGL: the same photograph, for the same reason. One fallback, three failure modes, and it is never hidden until a canvas has actually been created.
• Keyboard: while the canvas is live the root is focusable, with a visible focus ring. The arrow keys play a sweep across the middle of the image in that direction, so the keyboard reaches both the row and the column sort.
• Touch: dragging a finger drives the same band a mouse does; between touches on phones a slow autonomous stroke keeps the image alive (data-auto="0" turns it off).
• Screen readers: the canvas carries role="img" and the photograph's alt text.

---

Dependencies

Dependency	Version	Required
three.js	0.180.0	Yes, as an ES module (see Quick Start)
GSAP core	3.15.0 (3.12+ works)	Yes: matchMedia branching, teardown, the load fade and the played strokes (intro and keyboard sweeps)

No GSAP plugins. The sort itself, the trail and its decay run on the renderer's own frame loop, not on GSAP; GSAP moves a virtual pointer for the played strokes, which the loop reads exactly like a real one.

Everything the effect uses (WebGLRenderer, WebGLRenderTarget, ShaderMaterial, PlaneGeometry, OrthographicCamera, Texture) is long-stable three.js API, so pinning to a different version is a one-line change in the import map.

---

Browser Support

Anything with WebGL2, which is every current browser. Support is probed before three.js is asked for a renderer, deliberately: three logs its own failure to the console, as errors, several times over, before it throws, so catching the exception would hide nothing and a visitor with WebGL disabled would get a console full of red on a page that had quietly fallen back. Probed first, that visitor simply gets the photograph and a clean console.

Import maps are supported everywhere current. In a browser old enough to lack them the module never runs, window.THREE is never set, and the photograph is again what shows.

Performance

Two draw calls a frame: the trail update at a quarter of the resolution, and the image plane. At rest the plane is a single texture read per pixel, and once the image has settled back to clean the loop stops drawing entirely until the next input. The expensive part is the sort, which only runs inside the band: each sorted pixel reads a fixed window of 21 samples along its row and ranks them. The loop is gated on an IntersectionObserver and does not run at all while the effect is off screen.

To buy back frames on low-end hardware, lower data-max-dpr first (to 1.5, or 1): the sort costs per device pixel, so that is the largest saving. After that, a smaller data-band and data-spread shrink the area being sorted.