Webflow sync, pageviews & more.
NEW

The Top 31 Three.js Webflow cloneables

Three.js allows you to take your Webflow site to the next level. These are the best Three.js Webflow clonables.

Filters
Sort by
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Reset all
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Here's a demonstration of a spinning 3D sphere in Webflow via Three.js and wEBGL

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.

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.

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.

Add interactive 3D particles and a 3D spinning object to 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.

Here's a fun way of adding a unique fire style mouse following technique. Using three.js you can add this dynamic interactive animation to your 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.

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

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

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

An example of implementing Three.js via scroll interactions in Webflow. In order for this to work properly you'll need to add the custom code found in the page settings to your Webflow project. Please note that this is a rather advanced example and will require editing the code to make modifications for this to work properly on your site. This does do a good job of providing an example of how you can add dynamic, and interactive Three.js elements to your Webflow site.

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.

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

Here's a way to add a interactive star system to Webflow via Three.js. A great way of creating and interactive background on your Webflow site.

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.

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.

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

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.

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.

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.

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

Add an interactive 3D background that follows your mouse using this Three.js effect. Adapted from Webflow via this URL: https://codepen.io/billimarie

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.

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 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