<Stereogram /> component demo →
Image URLs work with images served from your own project, but a remote
image whose server doesn't send an Access-Control-Allow-Origin
(CORS) header can't have its pixels read back from the canvas, so the
render fails. To keep the demo predictable we force upload for now —
the file is read entirely in your browser's memory and is never sent
anywhere.
Defocus your eyes (look "through" the screen) until two adjacent pattern repeats overlap — the hidden shape pops out in 3D. For images, brighter pixels come nearer — if your subject is darker than its background (most photos and logos), tick invert depth so the subject pops instead of the background. Grayscale depth maps work best; a few layers make photos much easier to fuse.