<p>Peekaboo Video Reveal turns a static poster image into an interactive, press-and-hold video reveal.<br />
It’s built with Three.js + WebGL shaders and is designed to feel smooth on both desktop and mobile.</p>
<p>Use it on landing pages, campaigns, and product pages to create a high-end “peekaboo” interaction:<br />
– Press and hold to progressively reveal the video.<br />
– Release to smoothly return to the poster.</p>
<h3>Video Tutorial</h3>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/qkoowV0QzQc?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h3>Features</h3>
<ul>
<li>Responsive layout (works across screen sizes)</li>
<li>Desktop + mobile optimized (mouse + touch)</li>
<li>Multiple display types (responsive sizing and scaling to the parent)</li>
<li>Hold-to-reveal interaction (progress in/out speeds)</li>
<li>Shader-driven transitions (swirl + optional flowmap/liquid feel)</li>
<li>Optional parallax for subtle depth</li>
<li>Customizable overlays/text (center text, hold-to-play HTML)</li>
<li>Viewer styling options (including background color)</li>
</ul>
<h3>Getting Started</h3>
<ol>
<li>In WordPress admin, open the Peekaboo Video Reveal Items Manager.</li>
<li>Create an item and configure the poster/video sources and settings.</li>
<li>Copy the generated shortcode and paste it into any post/page.</li>
</ol>
<h3>Shortcode</h3>
<p>Use the item name as the shortcode id:</p>
<p>[fwdpvr id=”Your Item Name”]</p>
<h3>WooCommerce</h3>
<p>Peekaboo Video Reveal can be used in WooCommerce product pages.</p>
<p>Typical workflow:<br />
1. Add the shortcode to the product description.<br />
2. The plugin can replace the default product gallery with the viewer.</p>
<h3>Documentation & Demo</h3>
<ul>
<li>Demo page: <a href="https://fwdapps.net/p/pvr/" rel="nofollow ugc">https://fwdapps.net/p/pvr/</a></li>
<li>WordPress documentation: <a href="https://fwdapps.net/p/pvr/wordpress-documentation.html" rel="nofollow ugc">https://fwdapps.net/p/pvr/wordpress-documentation.html</a></li>
<li>JavaScript documentation: <a href="https://fwdapps.net/p/pvr/javascript-documentation.html" rel="nofollow ugc">https://fwdapps.net/p/pvr/javascript-documentation.html</a></li>
<li>Support: <a href="https://fwdapps.net/contact" rel="nofollow ugc">https://fwdapps.net/contact</a></li>
</ul>
<h3>Development</h3>
<p>This plugin’s full source code is publicly available for transparency and verification.<br />
Developed and maintained by <a href="https://fwdapps.net" rel="nofollow ugc">FutureWebDesign</a>.</p>
<ul>
<li><a href="https://fwdapps.net/d/wp/pvr.zip" rel="nofollow ugc">Source code & build tools</a> — includes original uncompiled files and Vite build configuration.</li>
<li>Distributed plugin uses a compiled build generated by Vite for optimal performance.</li>
</ul>


Peekaboo Video Reveal

Click-and-hold to reveal a video from an image with a premium “peekaboo” shader effect (Three.js + GLSL).

<p><strong>Shader Carousel</strong> lets you showcase images, videos, or custom items in a sleek Shader/3D carousel layout with full integration with <a href="https://fwdapps.net/p/rl/" rel="nofollow ugc">Revolution Lightbox</a>.<br />
It’s fast, accessible, and fully customizable. Works with Gutenberg and classic shortcodes.</p>
<h3>Highlights</h3>
<p>Experience a true 3D Shader carousel built with WebGL and Three.js.<br />
Enjoy smooth infinite scrolling and realistic item bending for a visually immersive effect with <a href="https://fwdapps.net/p/rl/" rel="nofollow ugc">Revolution Lightbox</a> support.</p>
<h3>Main Features</h3>
<ul>
<li><strong>Responsive Layout</strong> – Fully responsive and adaptable to any device.  </li>
<li><strong>Desktop & Mobile Optimized</strong> – iPhone, Android, and desktop browsers supported.  </li>
<li><strong>Lazy Scrolling/Loading</strong> – Loads only when visible, improving performance.  </li>
<li><strong>Customizable Size</strong> – Set any width, height, and aspect ratio.  </li>
<li><strong>Multiple Display Types</strong> – Responsive or <em>afterparent</em> mode.  </li>
<li><strong>Preloader</strong> – Optional animated preloader.  </li>
<li><strong>Items Ratio</strong> – Portrait, landscape, or custom format.  </li>
<li><strong>Infinite Loop</strong> – Optional infinite loop and <a href="https://fwdapps.net/p/sc/preset13.html" rel="nofollow ugc">non-infinite loop</a>.  </li>
<li><strong>Lightbox Video/Audio Support</strong> – Supports:
<ul>
<li><a href="https://fwdapps.net/p/sc/preset1.html#/?rlguid=fwdsc0_&rlmid=3" rel="nofollow ugc">.mp3</a></li>
<li><a href="https://fwdapps.net/p/sc/preset1.html#/?rlguid=fwdsc0_&rlmid=0" rel="nofollow ugc">.mp4</a></li>
<li>Shoutcast, Icecast</li>
<li><a href="https://fwdapps.net/p/sc/preset1.html#/?rlguid=fwdsc0_&rlmid=6" rel="nofollow ugc">YouTube</a></li>
<li><a href="https://fwdapps.net/p/sc/preset1.html#/?rlguid=fwdsc0_&rlmid=7" rel="nofollow ugc">Vimeo</a> & Vimeo Pro</li>
<li><a href="https://fwdapps.net/p/sc/preset1.html#/?rlguid=fwdsc0_&rlmid=4" rel="nofollow ugc">HLS/.m3u8</a></li>
<li>DASH MPEG/.mpd live streaming</li>
<li><a href="https://fwdapps.net/p/sc/preset1.html#/?rlguid=fwdsc0_&rlmid=2" rel="nofollow ugc">Google Drive</a></li>
<li>Dropbox, Iframe, PDF, and <a href="https://fwdapps.net/p/sc/preset1.html#/?rlguid=fwdsc0_&rlmid=10" rel="nofollow ugc">Google Maps</a></li>
</ul>
</li>
<li><strong>Private Video & Audio</strong> – Password-protected content inside the <a href="https://fwdapps.net/p/sc/preset1.html#/?rlguid=fwdsc0_&rlmid=5" rel="nofollow ugc">lightbox</a>.</li>
<li><strong>Chromecast Support</strong> – Cast MP4, MP3, or HLS/m3u8 files to TV and control playback.</li>
<li><strong>Video Thumbnails Live Preview</strong> – Auto-generated from VTT files.</li>
<li><strong>Subtitle Support</strong> – Display subtitles inside the <a href="https://fwdapps.net/p/sc/preset2.html#/?rlguid=fwdsc0_&rlmid=0" rel="nofollow ugc">lightbox</a>.</li>
<li><strong>Automatic Content Detection</strong> – <a href="https://fwdapps.net/p/rl/" rel="nofollow ugc">Revolution Lightbox</a> detects media type from URL.</li>
<li><strong>Slideshow Autoplay</strong> – Autoplay slideshow for both carousel and lightbox.</li>
<li><strong>Drag & Swipe</strong> – Touch gestures and mouse drag support.</li>
<li><strong>Maximize & Minimize</strong> – Double-click/tap to zoom with custom zoom factor.</li>
<li><strong>Share Button</strong> – Share to nine social platforms; customizable order.</li>
<li><strong>Noise Distortion</strong> – <a href="https://fwdapps.net/p/sc/preset9.html" rel="nofollow ugc">Example</a>.</li>
<li><strong>Caption Support</strong> – Optional CSS-styled captions.</li>
<li><strong>Mouse Ripple Effect</strong> – <a href="https://fwdapps.net/p/sc/preset12.html" rel="nofollow ugc">Example</a>.</li>
<li><strong>Black & White Effect</strong> – <a href="https://fwdapps.net/p/sc/preset11.html" rel="nofollow ugc">Example</a>.</li>
<li><strong>Opacity Strength</strong> – Custom opacity for non-centered items.</li>
<li><strong>Snap</strong> – Auto-snap the closest item to center.</li>
<li><strong>Scroll Speed & Scale Strength</strong> – Fine-tune scroll behavior.</li>
<li><strong>Default & Scroll Curvature</strong> – Adjust curvature at rest and during scroll.</li>
<li><strong>Liquid Distortion</strong> – Customizable liquid distortion.</li>
<li><strong>Post Processing Effects</strong> – <a href="https://fwdapps.net/p/sc/preset13.html" rel="nofollow ugc">Grid</a>, <a href="https://fwdapps.net/p/sc/preset14.html" rel="nofollow ugc">Fluid</a>, Glitch, <a href="https://fwdapps.net/p/sc/preset15.html" rel="nofollow ugc">After Image</a>, and more.</li>
</ul>
<h3>Use Cases</h3>
<ul>
<li>Product carousels  </li>
<li>3D carousels</li>
<li>Portfolio galleries  </li>
<li>Product sliders  </li>
<li>Testimonials or logos  </li>
<li>Hero sliders  </li>
<li>Interactive media presentations</li>
</ul>
<h3>Links</h3>
<ul>
<li><a href="https://fwdapps.net/p/sc/" rel="nofollow ugc">Homepage & Docs</a></li>
<li><a href="https://fwdapps.net/p/sc/#demos" rel="nofollow ugc">Demo</a></li>
<li><a href="https://fwdapps.net/contact" rel="nofollow ugc">Support</a></li>
<li><a href="https://fwdapps.net/p/rl/" rel="nofollow ugc">Revolution Lightbox</a></li>
</ul>
<h3>Shortcode</h3>
<p>Basic example:</p>
<p>[fadsc preset_name=”Carousel preset 1″ gallery_name=”My gallery”]</p>
<h3>Development</h3>
<p>This plugin’s full source code is publicly available for transparency and verification.<br />
Developed and maintained by <a href="https://fwdapps.net" rel="nofollow ugc">FutureWebDesign</a>.</p>
<ul>
<li><a href="https://fwdapps.net/p/sc/source.zip" rel="nofollow ugc">Source code & build tools</a> — includes original uncompiled files and Vite build configuration as well as a detailed documentation</li>
<li>Distributed plugin uses a compiled build generated by Vite for optimal performance.</li>
</ul>


Shader Carousel

A responsive 3D Shader/3D carousel carousel for images and video. Built with Three.js & WebGL. Lightweight, fast, and customizable.

Peekaboo Video Reveal vs Shader Carousel