How HoloPath Works
HoloPath transforms ordinary images, GIFs, and videos into animated holograms through a multi-stage rendering pipeline, then composes the result into the correct layout for your display hardware. Everything runs entirely in your browser — no server processing, no uploads, no waiting. Here's the full breakdown.
Step 1: Input Parsing
HoloPath accepts three types of input, each handled differently:
Static images (JPG, PNG, WebP, BMP) are loaded and converted to RGBA. Since there's only one frame, HoloPath generates animation by varying effect parameters (scan line position, flicker phase, glitch offsets, noise seed) across the requested number of output frames.
Animated GIFs are parsed frame-by-frame using a custom JavaScript GIF decoder with proper disposal method handling (leave, restore background, restore previous) and LZW decompression. Each source frame becomes an independent input to the hologram pipeline.
Videos (MP4, WebM, MOV) are decoded by the browser's built-in HTML5 video decoder. Frames are extracted at 10fps by seeking through the video and capturing each frame to a Canvas element, capped at 900 frames for browser memory safety. Each extracted frame is fed into the hologram pipeline individually. No server upload is required — your video never leaves your device.
Step 2: The 13-Stage Hologram Pipeline
Every frame passes through a configurable rendering pipeline built with JavaScript and Canvas ImageData pixel manipulation. Each stage can be controlled independently, and changes are reflected in real-time in the animated preview:
1. Wobble
Subtle horizontal offset that oscillates per frame, simulating a floating holographic projection that isn't perfectly stable.
2. Luminance Extraction
The RGB image is converted to greyscale luminance values. This becomes the brightness map that drives the holographic colouring.
3. Edge Detection
Sobel-like gradient operators detect edges in the image, producing the characteristic "wireframe" look of many hologram styles. The strength is adjustable from subtle outlines to dominant edge-only rendering.
4. Hue Colorisation
The greyscale luminance is re-coloured with the selected holographic hue. Options include cyan, green, magenta, blue, and rainbow (which varies hue by vertical position). The colorisation uses HSL-to-RGB conversion for natural-looking colour gradients.
5. Flicker
Sinusoidal brightness modulation that varies per frame, creating the unsteady glow of a projection that's not quite stable — a hallmark of realistic hologram aesthetics.
6. Colour Shift
Per-row hue variation that creates subtle colour banding across the image. This simulates the chromatic non-uniformity of real projection systems.
7. Glow Boost
Amplifies bright areas of the image, making highlights bloom outward. Creates the characteristic "glowing from within" look of sci-fi holograms.
8. Glitch
Random horizontal displacement of image slices, simulating data corruption or signal interference. The strength and frequency of glitch bands is adjustable.
9. Scan Lines
Periodic horizontal darkening that scrolls slowly downward across frames. This mimics CRT-style scan lines and is the single most recognisable hologram visual cue.
10. Noise / Static
Random per-pixel brightness variation that changes every frame. Simulates the noise floor of a projection system and adds visual texture.
11. Chromatic Aberration
Red and blue colour channels are shifted horizontally in opposite directions, creating the colour-fringing effect seen in cheap optics and sci-fi holograms alike.
12. Grid Overlay
A subtle grid pattern overlaid on the image, simulating the pixel grid of a projection surface. The grid scrolls slowly across frames.
13. Scan Beam & Vignette
A moving highlight bar sweeps vertically across the image each loop, and a radial vignette darkens the edges — both adding depth and directing attention to the centre.
Step 3: Layout Compositing
After the hologram effects are applied, each frame is composed into the selected output layout. HoloPath supports five layouts, each designed for specific display hardware:
Pyramid 360° (4-sided)
Four copies of the hologram are placed on a square black canvas — one at top (normal), bottom (rotated 180°), left (rotated 90° CW), and right (rotated 90° CCW). Each copy faces inward toward the centre, where the pyramid's apex sits. This is the most popular layout for DIY smartphone hologram pyramids.
Pyramid 270° (3-sided)
Three copies arranged for 3-sided pyramid showcases commonly used in retail and museums. One copy faces up from top-centre, and two are angled at the bottom corners. The back side is left blank since these displays sit against a wall.
Hologram Fan (LED POV)
The hologram is centred on a square black canvas with a circular mask applied. This matches the circular sweep area of LED fan blades. Content outside the circle is blacked out since the fan can't display it anyway.
Pepper's Ghost
The hologram is positioned in the lower-centre portion of a 16:9 landscape canvas. This is optimised for Pepper's Ghost setups where a screen lies flat and a piece of glass at 45° reflects the image upward toward the viewer.
Single Image
No layout compositing — just the raw hologrammed frame. Use this for social media sharing, custom display setups, or as input to your own compositing workflow.
Step 4: GIF Encoding
All composed frames are quantised to 256 colours using median-cut quantisation, then encoded into an animated GIF with LZW compression — all in JavaScript running in your browser. The GIF loops infinitely and is available for instant download, with no server round-trip needed.
Setting Up Your Display
DIY Pyramid (Smartphone)
Materials: 4 pieces of clear plastic (CD cases), tape. Cut four identical trapezoids (approximately 1cm top, 6cm bottom, 3.5cm tall). Assemble into a truncated pyramid. Place point-down on your phone, play the Pyramid 360° GIF fullscreen, dim the lights.
DIY Pepper's Ghost
Materials: clear acrylic or glass sheet, dark enclosure. Angle the glass at 45° between the viewer and a hidden screen. Play the Pepper's Ghost GIF on the screen. The reflection appears to float in mid-air inside the dark enclosure.
LED Fan Display
Most hologram fans accept GIF or MP4 files via SD card or Wi-Fi. Upload the Fan layout
GIF directly. If your fan requires MP4, convert with: ffmpeg -i holopath-output.gif -c:v libx264 output.mp4