Pixel Sort In
Displaced rows of pixels slide back into register until the image is whole.
The canvas in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef } from "react";
/**
* Vibary · Pixel Sort In
*
* A block of image resolves out of displaced rows of pixels.
*
* The technique: each row's displacement wraps modulo the width. A rowAbout this effect
A glitch-art entrance, not a loading state. Pixel sorting comes from the datamosh tradition — landscapes shredded into displaced rows — and it reads as an aesthetic statement wherever it appears, so it belongs only in interfaces that already carry that aesthetic: a creative portfolio, a game promo page, an album visual. Ordinary image loading is Image Blur Up's job, and a generating picture is Progressive Image Generation's — reach for this only when the glitch itself is the point. Each row is displaced along its own axis and the displacement wraps modulo the block width, so a row that has slid most of the way across is drawn twice and still covers the block completely. That wrap is the whole difference between an image sorting itself into place and an image sliding in from the side: with it, the block is whole from the first frame and only its rows are wrong. Rows resolve in a scattered order taken from a hash of the row index, which keeps the order stable through a resize.