Description
Peekaboo Video Reveal
Peekaboo Video Reveal: A premium WebGL/Three.js “press-and-hold” video reveal effect. It displays an image first, then smoothly reveals the video underneath while the user holds (mouse or touch). The effect includes a customizable swirl shader, interactive flowmap distortion, optional chromatic aberration (RGB shift) and subtle video grading controls for a cinematic look.
Main features
Press & Hold Reveal – Reveal the video by holding down (mouse or touch) for an intuitive, premium interaction.
GPU-Accelerated WebGL – Runs the effect fully on the GPU for smooth animation and high-quality visuals.
Responsive Layout – Fully responsive sizing with responsive and afterparent display modes.
Custom Aspect Ratios – Easily support portrait/landscape players by sizing the parent element and using displayType: ‘afterparent’.
Desktop & Mobile Optimized – Touch-friendly and optimized for modern mobile/desktop browsers.
Lazy Scrolling/Loading – Optional initializeWhenVisible mode to initialize only when the component is visible, improving page load performance.
Auto Scale – Optional autoScale behavior to keep the player looking great on smaller viewports.
Scroll Parallax – Optional paralax mode for subtle scroll-based motion.
Swirl Shader Controls – Tune swirl intensity, speed and noise for the exact look you want.
Flowmap Distortion – Interactive pointer-driven flowmap distortion (strength, radius, sensitivity, force, falloff).
RGB Shift (Chromatic Aberration) – Optional post-processing RGB shift for a premium “lens” feel.
Video Grading – Built-in video boost, saturation and contrast controls for a more pronounced reveal.
Custom Overlay Text – Optional centerText plus a customizable holdToPlayHTML overlay.
Tutorial Hand Cursor – Optional showHandCursor helper animation to guide the user.
