Scanline Displacement Glitch Lab

Slice a photo into horizontal strips, shift each strip by noise plus a depth-like ramp, split the RGB channels and layer passes. Pick an intensity level 1-5, or tune every parameter. Runs entirely in your browser. How it works

Drop an image onto the preview, or use Upload below.

Source

No image? Generate a procedural source and glitch that.

Intensity level

Moving any slider below switches to custom settings.

3D reveal

0 = the flat image as you would post it. 1.00 = the tilt where the original reappears. Either side of 1.00 it falls apart again. This is a simulation of depth parallax, not Facebook itself.

If the reveal shows up when you tilt the other way on your phone, flip this and re-export. Reveal mode uses one layer and normal blending; the layer and blend sliders are ignored. Set RGB offset to 0 for a perfectly clean reveal.

Slicing

Diagonal depth ramp

RGB split

Layering

Seed

Export

The depth map is saved as <name>_depth.png next to <name>.png, same dimensions. In reveal mode each gray band encodes one strip's exact shift. In reveal mode the GIF is a tilt sweep that shows the reveal.

How this works

  1. Levels 1-5 are purely intensity levels. Level 1 is subtle (wide strips, tiny shifts, about 1 px of colour fringing at 1080 px wide, one layer). Level 5 is heavy (thin strips, large shifts, about 10 px fringing, four layered passes). In between, strips narrow, shifts grow, fringing scales linearly and more layers blend in. Any slider you touch switches to custom settings.
  2. Slice and displace. The image is cut into horizontal strips. Each strip is shifted sideways by smooth noise of its row, wrapping around so there are no gaps.
  3. RGB offsets. Red and blue are shifted in opposite directions while green stays put, giving the colour fringing. Offsets scale with image width.
  4. Reveal mode. A depth-parallax viewer shifts pixels sideways by their depth value as you tilt. Reveal mode pre-shifts every strip the opposite way and writes a depth map where each strip's gray level encodes its exact shift. At one tilt angle the viewer shifts every strip back and the original reappears. At the flat angle and on either side it stays displaced, and it gets worse the further you go. In the preview this reconstructs exactly when RGB offset is 0; the colour fringe is not depth-driven so it stays at every angle.
  5. Layer (normal mode only). Outside reveal mode, one to four passes are rendered at increasing scale and blended, which adds the woven interference texture. Scaled layers cannot be undone by parallax, so reveal mode uses a single layer.

The Facebook 3D photo idea (experimental, unconfirmed)

The goal is an image that looks "off" as a flat picture and resolves once it is viewed as a 3D photo at one tilt angle. This is an experiment. The preview slider simulates depth parallax; it does not prove what Facebook will do. How Facebook handles depth comes from third-party tutorials and is unconfirmed: on the facebook.com composer you drag in <name>.png plus <name>_depth.png; on iPhone the Facebook app reads depth embedded in the photo, which a 2019 walkthrough did with an app called DepthCam. Polarity (white = near or black = near), how far Facebook tilts, and whether it uses your map at all are unknown. If Facebook estimates depth itself, the reveal will not line up. Test one upload and use the polarity switch if the reveal appears on the wrong side.

GIF and micro.blog

The GIF export loops seamlessly and uses one shared palette. micro.blog's actual size and dimension limits are unconfirmed, so the micro.blog preset is deliberately conservative (smaller width, few frames, modest file size). The size readout warns when the estimate is large. The PNG is exported at the working size, capped at 1080 px wide.

Privacy

All processing is client-side. Your image never leaves your device and nothing is uploaded.

Source on GitHub · MIT licensed