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
A drift of a few pixels, sideways and up and down, that repeats every loop, so the projection never sits perfectly still.
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 hue. Cyan, green, magenta and blue are each one fixed colour; rainbow turns the whole frame through the colour wheel once per loop. Colour in your source does not survive this step, only its brightness.
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
A slow tint drift: red, green and blue are nudged by different amounts on a cycle that repeats once per loop, so the colour breathes slightly over time.
7. Glow Boost
Pixels brighter than half brightness are pushed further toward the full hue colour. Nothing is blurred: highlights saturate where they are, so a high glow flattens the brightest parts of a subject into solid colour.
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
An on/off setting. Red is blended in from a few pixels to one side and blue from the other, 2 to 6 pixels apart depending on the Glitch setting, which fringes every edge with colour.
12. Grid Overlay
A faint 20-pixel grid in the hue colour. Its horizontal lines scroll with the loop.
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: top (upright), bottom (rotated 180°), left (rotated 90° counter-clockwise) and right (rotated 90° clockwise). Each copy's top points at the nearest edge of the screen and its base at the centre, where the pyramid's small end sits. Every copy is mirrored left to right, because the reflection in each face swaps left and right again. This is the most popular layout for DIY smartphone hologram pyramids.
Pyramid 270° (3-sided)
Three mirrored copies arranged for 3-sided pyramid showcases: one upright at top-centre and two turned 120° 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 mirrored and placed in the lower-centre portion of a 16:9 landscape canvas, for Pepper's Ghost setups where a screen lies flat under a sheet of glass at 45° that reflects it 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