OGL Background Manipulation

Add a liquid metal background animation to your Webflow site via WebGL. Please note that this example relies heavily on scripts and custom code so you'll need to add the custom code found within the page settings.

Here's a beautiful WebGL colorful background animation on page load. A great way to add extra color and a dynamic element to your Webflow site.

Three different link hover effects perfect for a menu on Webflow. These three effects create an image hover distortion using three.js.

A set of unique and interesting image slider transitions including distortion and warping effects made with WebGL. The code was modified to behave as bidrectional looping slider. This works on both desktop and on mobile.

A shooting stars effect for the background of your Webflow site. The stars come in from the top right to the bottom left on your Webflow site.

Turn your site into an interactive black hole with this unique Webflow cloneable. Please note that this entire example relies on scripts and code so you'll need to add the code found on the page and within the page settings for this to work properly.

A custom WebGL draggable slider with 3D effects in Webflow. This is a very unique and cool effect to achieve a 3D expand and collapse between transitions on your Webflow site. You can update the text, links, and images in footer via the page settings. Easily modify the effects speed, frequency and more in the footer via the page settings.

A demonstration of creating a reflecting WebGL three.js cube in Webflow. This creates a reflecting 3D cube that's interactive when clicked and dragged creating a 3D style effect. Moving the mouse on the site moves the cube to different areas of the page.

Add a liquid metal background animation to your Webflow site via WebGL. Please note that this example relies heavily on scripts and custom code so you'll need to add the custom code found within the page settings.

Background swirl animation via canvas backgrounds in Webflow. This method is created via a custom JS file found in the closing body tag of the page settings. This utilizes the unique javascript text "hack" allowing you to host JS files as text files in Webflow and calling that text file as a script.

Here's a beautiful WebGL colorful background animation on page load. A great way to add extra color and a dynamic element to your Webflow site.

A fun three.js background animation for your Webflow site. Flying butterflies will come from the bottom left hand corner of your page and fly up to the top right and off of the screen. A fun background animation effect powered by Three.js and Webflow.

Using three.js and vanta.js to accomplish a 3D interactive polygon water background effect for Webflow. This interactive background allows for a ripple and water effect to be added to your Webflow site. When a user interacts with the page the water changes views and dimensions. You can edit the following variables based on your requirements. You can edit: shininess: 150.00, waveHeight: 26.00, waveSpeed: 0.70, zoom: 0.65, color: 0x368bbe

A fluid, morphing SVG background for your Webflow site using Anime.js. Perfect for the background of your Webflow sections, or entire site.

Custom cursor particles effect for Webflow. When a user moves his mouse over the page custom particles are shown trailing the mouse. A fun, dynamic interaction that adds some animation and life to your Webflow site. This is accomplished via Sketch.js

A very cool three.js background animation featuring fly by hills that are black and white. A unique way to add 3D depth the background of your Webflow site.