JavaScript Documentation

Documentation for the JavaScript version, API and overall JavaScript implementation.

Getting Started

Peekaboo Video Reveal is a responsive Three.js/WebGL component that turns any image into a press-and-hold video reveal with a premium GLSL “peekaboo” shader effect.

It’s built with modern JavaScript and CSS standards and runs fully on the GPU, so it stays smooth and touch-friendly on desktop and mobile.

Peekaboo Video Reveal must run over HTTP or HTTPS; it will not work when opened directly from the local file system.

Installation

Choose one of the preset HTML files from the build folder and open it in a text editor as a refference.

In the download files inside the build folder you will find the src folder that contains the JavaScript code and content folder that contains the CSS file and other important files like the ripple brush texture, the content folder has to be uploaded on the server where The grid is used.

Use the any HTML file from the build folder as refference.

Include the Peekaboo Video Reveal CSS file and JavaScript in the header:

<head>

<!-- ... -->
<link rel="stylesheet" href="content/global.css">
<script type="text/javascript" src="js/FWDPVR.js"></script>
<!-- ... -->	

</head>

The next step is to add the initialize code in the page header or footer after the inclusion of the Peekaboo Video Reveal JavaScript and CSS files.

<script type="text/javascript">
	if(document.readyState === 'complete'){
		setupPeekabooVideoReveal();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			setupPeekabooVideoReveal();
		});
	}

	function setupPeekabooVideoReveal(){
		new FWDPVR({
			// Main settings.
			instance: 'fwdpvr0',
			parentId: 'myDiv',
			displayType: 'afterparent',
			contentPath: 'content',
			imagePath: 'media/images/lg.png',
			videoPath: 'media/videos/lg.mp4',
			centerText: 'Explore MicroLED',
			holdToPlayHTML: 'Click and hold<br><span>For the full MicroLED experience</span>',
			initializeWhenVisible: false,
			maxWidth: 1920,
			maxHeight: 1080,
			autoScaleStartWidth: 1200,
			showHandCursor: true,
			autoScale: true,
			paralax: true,
			backgroundColor: '#000000',
			stats: false,
			gui: true,

			// Hold-to-progress tuning.
			holdProgressInSpeed: 3,
			holdProgressOutSpeed: 8,

			// Swirl effect (main shader).
			swirlStrength: 1.0,
			swirlSpeed: 1.0,
			swirlNoiseFrequency: 4.0,
			swirlNoiseAmplitude: 4.0,

			// Flowmap / post processing.
			flowmapRGBShift: true,
			flowmapRGBShiftAmount: 0.01,
			flowmapRGBShiftStrength: 1,
			flowmapStrength: 1,
			flowmapRadius: 0.12,
			flowmapSensitivity: 1,
			flowmapForce: 2.5,
			flowmapFalloff: 1.8,

	
		});
	}
		
</script>

The last step is to create a div with a unique ID that will act as the parent/holder for Peekaboo Video Reveal and set the parentId option to point to the div ID (ex: parentId: 'myDiv'). This div can be added anywhere in your page.

<!-- Peekaboo Video Reveal holder. --> 
<div id="myDiv"></div>

To add multiple instances just redo the steps above and make sure to change the instance to fwdpvr1, fwdpvr2, fwdpvr3, etc. Also change the parentId to a different holder ID.

Please read the settings section to understand the Peekaboo Video Reveal configuration options.

Modify code

The demo uses Vite to build the final JavaScript files.

Settings

Peekaboo Video Reveal options are passed into the FWDPVR constructor.

Use displayType: 'afterparent' to size the component from the parent element (recommended for custom aspect ratios), or displayType: 'responsive' to size it using maxWidth and maxHeight.

Example

if(document.readyState === 'complete'){
	setupPeekabooVideoReveal();
}else{
	document.addEventListener('DOMContentLoaded', setupPeekabooVideoReveal);
}

function setupPeekabooVideoReveal(){
	new FWDPVR({
		instance: 'fwdpvr0',
		parentId: 'myDiv',
		displayType: 'afterparent',
		contentPath: 'content',
		imagePath: 'media/images/lg.png',
		videoPath: 'media/videos/lg.mp4',
		centerText: 'Explore MicroLED',
		holdToPlayHTML: 'Click and hold<br><span>For the full MicroLED experience</span>',
		initializeWhenVisible: false,
		maxWidth: 1920,
		maxHeight: 1080,
		autoScaleStartWidth: 1200,
		showHandCursor: true,
		autoScale: true,
		paralax: true,
		backgroundColor: '#000000',
		stats: false,
		gui: true,
		holdProgressInSpeed: 3,
		holdProgressOutSpeed: 8,
		swirlStrength: 1.0,
		swirlSpeed: 1.0,
		swirlNoiseFrequency: 4.0,
		swirlNoiseAmplitude: 4.0,
		flowmapStrength: 1,
		flowmapRadius: 0.12,
		flowmapSensitivity: 1,
		flowmapForce: 2.5,
		flowmapFalloff: 1.8,
		flowmapRGBShift: true,
		flowmapRGBShiftAmount: 0.01,
		flowmapRGBShiftStrength: 1,
	
	});
}

Main

instance

Type: (String) - default: unset

Required. The instance name used for the API (ex: fwdpvr0, fwdpvr1, etc.).

parentId

Type: (String) - default: unset

Required. The holder div ID where the component will be created.

displayType

Type: (String) - default: responsive

Required. Supported values: responsive, afterparent.

carouselDataId

Type: (String) - default: unset

Optional. Present in some templates; the core component ignores unknown properties.

contentPath

Type: (String) - default: content

Base folder used to load internal assets (ex: tutorial sprite).

imagePath

Type: (String) - default: unset

Required. The image shown before holding.

videoPath

Type: (String) - default: unset

Required. The video revealed while holding.

centerText

Type: (String) - default: empty

Optional text shown in the center of the component.

holdToPlayHTML

Type: (String) - default: Hold to play video

Optional HTML string for the “hold to play” overlay.

initializeWhenVisible

Type: (Boolean) - default: false

When set to true, the component initializes only after it becomes visible in the page.

maxWidth

Type: (Number) - default: 1000

Maximum width used in responsive mode.

maxHeight

Type: (Number) - default: 700

Maximum height used in responsive mode.

autoScaleStartWidth

Type: (Number) - default: 1400

The viewport width below which auto-scale starts shrinking the component.

showHandCursor

Type: (Boolean) - default: false

Show or hide the tutorial “hand cursor”.

autoScale

Type: (Boolean) - default: false

When set to true, the component scales down on smaller viewports.

paralax

Type: (Boolean) - default: false

Enable scroll-based parallax on the component.

backgroundColor

Type: (String) - default: #1a1a1a

Background color for the canvas/holder area.

stats

Type: (Boolean) - default: false

Show FPS stats overlay.

gui

Type: (Boolean) - default: false

Show the debug GUI (dat.GUI) with live shader controls.

holdProgressInSpeed

Type: (Number) - default: 3

How fast the hold progress fills while holding (higher = faster).

holdProgressOutSpeed

Type: (Number) - default: 8

How fast the hold progress empties when the user releases (higher = faster).

swirlStrength

Type: (Number) - default: 1.0

Overall intensity of the swirl distortion.

swirlSpeed

Type: (Number) - default: 1.0

Animation speed of the swirl noise.

swirlNoiseFrequency

Type: (Number) - default: 4.0

Noise frequency (higher = smaller details).

swirlNoiseAmplitude

Type: (Number) - default: 4.0

Noise amplitude used by the swirl shader.

flowmapStrength

Type: (Number) - default: 1

Overall strength of the flowmap distortion.

flowmapRadius

Type: (Number) - default: 0.12

Brush radius used to write into the flowmap.

flowmapSensitivity

Type: (Number) - default: 1

Pointer sensitivity for flowmap interaction.

flowmapForce

Type: (Number) - default: 2.5

How strong the flowmap impulse is when dragging.

flowmapFalloff

Type: (Number) - default: 1.8

How quickly the flowmap dissipates (higher = faster decay).

flowmapRGBShift

Type: (Boolean) - default: false

Enable RGB shift/chromatic aberration.

flowmapRGBShiftAmount

Type: (Number) - default: 0.008

RGB shift amount (subtle values recommended).

flowmapRGBShiftStrength

Type: (Number) - default: 1

RGB shift multiplier.

Video Grading

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 Peekaboo Video Reveal instance name, if you are using multiple instances don't forget to set the instance unique for each instance like this fwdpvr1, fwdpvr2, fwdpvr3, etc...

destroy

.destroy():Void

Destroy the Peekaboo Video Reveal instance and remove it from 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

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

FWDPVR.ITEM_UPDATE

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

Notes

Peekaboo Video Reveal is a customizable WebGL shader effect that lets you reveal a video under an image by pressing and holding (touch or mouse), with optional swirl, flowmap distortion and subtle post-processing.

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.

© Copyright FWDesign