Overlay and Underlay let you add a custom image on top of or behind the visualizer engine. Use them to frame the animation with branded artwork, album covers, or stylised scene elements.
What are Overlay and Underlay?
The Underlay sits between the background and the engine canvas layers — it appears behind all animation. The Overlay sits above all engine canvases but behind text elements — it frames the animation from the front.
Both accept any image format (PNG, JPEG, WebP, GIF). PNG with transparency is recommended for overlays so the visualizer shows through where the image is cut out.
Blend Modes
Each asset has a blend mode dropdown: Normal, Screen, Multiply, Overlay, Hard Light, Soft Light, Color Dodge, or Color Burn. Screen is the most common choice for overlays — it makes black pixels transparent, perfect for light-leak textures and lens flare images.
Multiply darkens the visualizer by the image's tones — ideal for applying a textured paper or grunge underlay.
Tips
- →For a light-leak overlay, use a dark image with bright coloured streaks and set blend mode to Screen.
- →For an album art underlay, set blend mode to Normal and reduce opacity to 20–40% for a ghost image behind the animation.
Opacity
The Overlay Opacity and Underlay Opacity sliders (0–100%) control how strongly each asset blends. At 100% Normal blend, the image is fully opaque and will obscure the visualizer behind it.
Tips
- →Animate opacity is not available in real-time, but you can adjust it before exporting different versions.