v1.2
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
UI SURECART
BUTTONS
Noise Mask
Creates an interactive reveal effect with a mouse-following circular mask that exposes an image through animated voronoi noise distortion. Features dithering for a textured grain aesthetic, chromatic aberration for color fringing, and depth-based displacement. Built on UnicornStudio WebGL engine with custom GLSL shaders. Perfect for creative hero sections, portfolio reveals, or artistic product showcases.
Noise Mask
Move your mouse to reveal the image
Background
Red channel of the background color. Combined with G and B to create the solid color behind the mask effect. Use normalized values (0-1) not 0-255.
Default: 0.933 (light gray)
Green channel of the background color. Adjust all three RGB values equally for neutral grays, or vary them for tinted backgrounds.
Default: 0.933 (light gray)
Blue channel of the background color. Use 0,0,0 for black backgrounds or 1,1,1 for pure white.
Default: 0.933 (light gray)
Image
The image revealed through the mask. Must be a valid URL starting with http/https or a data URI. Use high-quality images for best results since they'll be displayed at full resolution within the mask area.
Default: Sand texture sample image
Dither Effect
Animation speed of the dithering grain pattern. Higher values create faster-moving noise grain, lower values are more subtle. Creates an organic film-grain texture.
Default: 0.25
Grain intensity threshold. Lower values create finer, more subtle grain. Higher values produce coarser, more visible dithering patterns. Controls the quantization level.
Default: 0.07
Blend amount between original image and dithered version. 0 shows no dithering, 1 shows full effect. Use values around 0.5-0.7 for subtle grain overlay.
Default: 1.0
Mask
How strongly the mask follows mouse movement. 0 keeps it centered, 1 follows exactly. Values around 0.8-0.9 create smooth, slightly delayed following motion.
Default: 0.87
Size of the circular reveal mask relative to container width. Larger values reveal more of the image at once. The mask animates from larger on load to this final size.
Default: 0.27
Chromatic aberration intensity at mask edges. Creates RGB color fringing effect like a prism. Higher values produce more dramatic color separation. Use 0 to disable.
Default: 1.0
Displacement strength based on the mask. Controls how much the background distorts around the mask edges. Higher values create more warping/lens-like distortion.
Default: 1.0
Noise
Animation speed of the voronoi noise distortion. Higher values create faster-moving organic patterns within the mask. Keep lower for subtle, calming motion.
Default: 0.5
How noise pattern responds to mouse position. Negative values create inverse/opposing movement. Zero centers the effect. Positive values follow mouse direction.
Default: -1.0
Overall scale of the noise pattern. Lower values create larger, smoother distortions. Higher values produce finer, more detailed noise texture.
Default: 1.166
Intensity of the noise displacement effect. Higher values create more visible warping and distortion. Use lower values for subtle organic movement.
Default: 0.15
Scale of voronoi cells in the noise algorithm. Controls the size of individual noise "cells". Lower values create larger, blobby patterns. Higher values create smaller, more intricate cells.
Default: 2.91
Performance
This element uses UnicornStudio WebGL engine with custom GLSL vertex and fragment shaders. Features multiple render passes including voronoi noise generation, dithering with PCG random functions, chromatic aberration, and depth-based displacement. Runs at 60fps with 1.5x DPI scaling. Very GPU-intensive - limit to 1 instance per page. Mouse interactivity uses momentum smoothing for fluid response. Not recommended for mobile devices or low-end hardware.