Peekaboo Video Reveal

About 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.

Performance Friendly – Stops rendering when offscreen and handles tab visibility changes to reduce CPU/GPU usage.

Developer friendly

Multiple Instances – Add multiple players on the same page using unique instance and parentId values.

Events – Listen for FWDPVR.ERROR and FWDPVR.ITEM_UPDATE via addEventListener.

Debug Tools – Optional stats overlay and gui controls for development and tuning.

Documentation – Full docs available for all options and API: JavaScript Documentation and WordPress & WooCommerce Documentation.

Awesome Support – Direct support from the developer (Tibi @ FWD).