Getting Started

Peekaboo Video Reveal turns any image into a press-and-hold video reveal powered by Three.js + WebGL shaders. It is fully responsive, touch-friendly, and works across modern desktop and mobile browsers.

It is built using EcmaScript6 with modern JavaScript and CSS standards. The reveal transition is rendered on the GPU using WebGL shaders for smooth performance.

The WordPress plugin lets you create and manage items from the admin area and embed them anywhere using a shortcode. WooCommerce integration is included for product pages.

Installation

After purchasing the plugin, inside the main zip file you will find installable plugin fwdpvr.zip.

Installation steps

1. In your WordPress & WooCommerce Admin Dashboard, go to Plugins > Add New.
2. Upload the fwdpvr.zip plugin file that you downloaded.
3. Click on install now.
4. If successful, click Activate Plugin to activate it, or Return to Plugin Installer.

Update

Uninstall and delete the current installed version, doing this will not remove any of the settings, install the new version by following the steps from the installation section above, and if you are using a cache plugin clear the browser cache with it to make sure the old files are not used.

Usage

Using the plugin is straightforward: create a new item in the admin Items Manager, configure it (poster image, video source, layout and post processing), then embed it via shortcode.

Admin UI overview

1. Items manager: create, duplicate, delete and edit items.
2. General settings: sizing, display type, sources, overlay text, background color, and interaction options.
3. Post processing: swirl and flowmap settings for the reveal distortion.

Shortcode

After the item is created and configured, use the shortcode generator to add Peekaboo Video Reveal to your page, post, or custom post type.

WooCommerce

Please look into the WordPress & WooCommerce section to understand how to configure Peekaboo Video Reveal.

Grab the shortcode and add it in the product description.

API - Application Programming Interface

This section is for developers that want to use the plugin API. The following lists represent all the public API methods and event listeners that can be used from Peekaboo Video Reveal externally.

You can access the instances by their order in the page with the fwdpvr name and its order after it, starting from 0. For example if you have 2 instances their names are fwdpvr0 and fwdpvr1. Here is an example of how to use the API in the WordPress editor or in a custom code section:

let fwdpvrAPI = setInterval(() =>{
if(window['fwdpvr0']){
	console.log('FWDPVR API ready')
	clearInterval(fwdpvrAPI);

	// Register events.
	fwdpvr0.addEventListener(FWDPVR.ERROR, onError);
	fwdpvr0.addEventListener(FWDPVR.ITEM_UPDATE, onItemUpdate);
}
}, 100);


function onError(e){
	// e.text contains the error message.
	console.log(e);
}

function onItemUpdate(e){
	// e.id is the updated item id.
	console.log(e);
}

<!-- Add a button -->
<button onclick="destroy()">Destroy</button>

Methods

Methods are functions that can be called via the API to execute certain actions.

JavaScript methods look like fwdpvr0.methodName( /* arguments */ ). Please note that fwdpvr0 is the instance name. If you are using multiple instances, they will be available as fwdpvr1, fwdpvr2, fwdpvr3, etc.

destroy

.destroy():Void

Destroy the Peekaboo Video Reveal instance and remove it from the DOM.

Events

Peekaboo Video Reveal has events, they are added via the addEventListener method and accessed via the instance name.

The events must be registered when the API is ready.

// API.
let fwdpvrAPI = setInterval(() =>{
if(window['fwdpvr0']){
	console.log('FWDPVR API ready')
	clearInterval(fwdpvrAPI);

	// Register events.
	fwdpvr0.addEventListener(FWDPVR.ERROR, onError);
	fwdpvr0.addEventListener(FWDPVR.ITEM_UPDATE, onItemUpdate);
}
}, 100);


function onError(e){
	// e.text contains the error message.
	console.log(e);
}

function onItemUpdate(e){
	// e.id is the updated item id.
	console.log(e);
}

FWDPVR.ERROR

Dispatched when an error occurs (for example when required assets are missing). The event object contains a text property with the error message.

FWDPVR.ITEM_UPDATE

Dispatched when the active item is updated. The event object contains an id property.

Notes

Peekaboo Video Reveal is a customizable Three.js and WebGL shader component that turns any image into a press-and-hold video reveal. Available as a JavaScript component and WordPress / WooCommerce plugin, it’s fully responsive, mobile-friendly and easy to integrate into any modern website.

For me this is more than a job, it is my passion, I love to create innovative tools that my clients can benefit from. @Tibi - FWD.

For support and customizations please write to me directly at this email.

WordPress & WooCommerce Documentation

Documentation for the WordPress & WooCommerce version, API and overall implementation.