react-stereogram demo
Show HN: React stereogram component (the technique popularized by Magic Eye)
Last checked:
What is react-stereogram demo?
A React component and interactive web demo that converts images or text into 3D stereograms. Users upload images, adjust depth mapping and visual styling, and generate stereograms that reveal hidden 3D shapes when viewed with a defocused gaze. All processing runs entirely in-browser.
react-stereogram demo pricing
Pricing model: Freemium
react-stereogram demo pros
- Interactive demo with multiple customization options (depth inversion, normalization, smoothing, adjustable layers)
- Five color palette options (black & white, two colors, rainbow, neon, pastel) for different visual styles
- Open source (GitHub available) and entirely browser-based—no data sent to server
- Supports both text and image inputs with adjustable depth mapping for different image types
react-stereogram demo cons
- Cannot load remote images due to CORS restrictions—requires file upload
- Requires viewers to master the stereogram viewing technique (defocusing eyes), which has a learning curve
- Works best with grayscale depth maps; color photos need manual configuration and multiple layer adjustments
- Lacks embedded guidance for users unfamiliar with stereogram viewing mechanics
Frequently asked questions about react-stereogram demo
Can I use images from other websites?
No, remote images fail due to CORS headers. The demo requires file uploads, which are processed entirely in your browser and never sent anywhere.
How do I view a stereogram?
Defocus your eyes and look 'through' the screen until adjacent pattern repeats overlap—the hidden shape will pop out in 3D.
Why does my photo show the background in 3D instead of my subject?
If your subject is darker than the background, enable 'invert depth' to reverse the depth mapping and make the subject pop out instead.