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).
Reviews
There are no reviews yet.