The Top 25 Three.js Webflow cloneables

A fun, interactive bubble blog for your Webflow site driven by Three.js. This interactive bubble blob follows the mouse around the page and moves and interacts based on it's location. A fun way of adding a dynamic and interactive background animation to your Webflow site.

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.

An exploding text particles animation using Three.js in Webflow. A good demonstration of how to add Three.js to your Webflow site. In this cloneable the text begins to morph and explode as you move the cursor over it. Please note that this uses custom code found in the head and closing body tags of the page settings.

Here's a demonstration of using three.js for the background of your Webflow site.

A two colored spiral galaxy animation for Webflow created with Three.js. This spiral galaxy spins in the background of your Webflow site and offers zoom in/zoom out functionality by the scroll wheel on your mouse.

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.

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

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 liquid 3D mesh net with gradients and transitions engulfs the background of your Webflow site. Inside there are shaders and code found in the page. You can adjust the values to customize the effects of this liquid 3D mesh design.

A stunning background animation that's interactive and provides a glassmorphism design via Three.js for Webflow. This interactive, twisting sphere can be dragged and rotated anywhere. Playing with the settings, especially phase, will produce colorful and unique results.

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.

An interactive background animation for Webflow created with Spline. There's also a custom loading animation with a background image.

An interactive sky background for your Webflow site using three.js and vanta.js. When a user interacts with the page it feels like you're flying through a set of clouds. A perfect way of adding depth and interactive nature to your Webflow site.

Add a flock of interactive flying birds to your Webflow site via three.js and vanta.js. A wonderful way of adding an interactive background of 3D birds flying to your Webflow site. You can edit the following sections of the custom code for further refinement. You can edit: backgroundColor: 0xffffff, color1: 0xf70707, color2: 0xff5a00, birdSize: 0.90, wingSpan: 29.00, speedLimit: 4.00, separation: 22.00, alignment: 21.00, cohesion: 21.00, backgroundAlpha: 0.93

A unique Webflow slider created with Three.js and GlslCanvas. While this is a good example of a slider it uses hand coded image URLs rather than Webflow sliders. A good demonstration of how to add Three.js slider effects to your Webflow site but will need some customization to make it work properly on a Webflow site.

A fun way of adding an interactive halo background effect to your Webflow site using the power of Three.js and Vanta.js.

Here's a way to add random stroke backgrounds to your Webflow site via three.js and vanta.js. Each time the page is loaded the strokes are loaded randomly.

A demonstration of a spiral galaxy via three.js in Webflow with a GUI control panel. In this example you're able to manipulate the spiral galaxy animation and customize the settings. A great way of testing/playing with this three.js technique to find the best settings for your spiral galaxy.

Here's a way of adding a unique, full screen image transition to your Webflow site via Three.js Each image loads a unique transition upon clicking them and turns the images full screen upon click.

A demonstration of a 3D glass objects using Three.js in Webflow. This demonstration requires the live site view in order to view the demonstration. This three.js features a 3D transparent objects, a circle a moving donut and a diamond with an image background. The image is distorted through the 3D images created by Three.js. In this demonstration there are also changeable parameters that allow you to further tweak and play with the demonstration. Further note that this is simply an embed of a Three.js file hosted on Netlify.

Here's a way of adding a colored fog background effect to your Webflow site using Three.js and Vanta.js. Please keep in mind that this has good browser compatibility however is CPU intensive and may have some minor issues on mobile. Be sure use only one Vanta.js animation per page.

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.

Here's an example of implementing three.js animated interactive road on your Webflow site. Three.js is a great way to add interactive, 3D effects to your Webflow site.

Here's a way to add an interactive, draggable 3D model to your Webflow site. Find the full video tutorial here: https://www.youtube.com/watch?v=M0Xd4wGfn_E

Interactive and inline 3D icons built with Spline and Three.js. A perfect way of creating interactive inline customized icons built with Spline and powered by Three.js