Creating a Water-like Distortion Effect with Three.js
Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.
Tutorials
In this section, you will find a variety of in-depth articles written by skilled front-end developers that cover a range of web development and web design techniques.
Simulating Depth of Field with Particles using the Blurry Library
Learn how to create a geometrical scene with a depth effect using the Blurry library.
Crafting Stylised Mouse Trails With OGL
How to make a WebGL mouse trail, and other important life tips…
How to Build a Color Customizer App for a 3D Model with Three.js
by Kyle Wetton
Learn how to create a complete color customizer app for a 3D model of a chair using Three.js in this in-depth tutorial.
How to Create a Webcam Audio Visualizer with Three.js
A tutorial on how to create a Three.js powered audio visualizer that takes input from the user’s webcam.
How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG
by Kyle Wetton
Learn a simple technique for adding a color swap functionality to your product images by creating an SVG and applying a mix-blend-mode to the composition.
React Slider with Parallax Hover Effects
Walk through the build of a React slider and learn how to implement a parallax hover effect.
How to Add Smooth Scrolling with Inner Image Animations to a Web Page
by Manoela Ilic
A tutorial on how to add a smooth scrolling effect to a website and also animate the images that enter the viewport.
Creating Grid-to-Fullscreen Animations with Three.js
Learn how to create thumbnail to fullscreen animations for image grids using Three.js.
How to Build an Underwater-Style Navigation Using PixiJS
by Liam Egan
A tutorial on how to create a visually distinct and accessible WebGL menu that builds from any given HTML navigation.
How to Create and Animate Rotated Overlays
by Manoela Ilic
A tutorial on how to create and animate rotated overlays, or “reveal” elements, for interesting page transition effects.
Pulling Apart SVGs with Reusable WebGL Components Using React-three-fiber
Learn how to pull apart SVGs in 3D space with Three.js and React, using abstractions that allow us to break the scene graph into reusable components.
How to Create a Sticky Image Effect with Three.js
A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.
How to Create Smooth WebGL Transitions on Scroll using Phenomenon
A tutorial on how to transition WebGL instances in a smooth way based on the scroll position using three.js and Phenomenon.
How to Create a Fake 3D Image Effect with WebGL
by Yuri Artiukh
Learn how to create an interactive “fake” 3D effect for images with depth maps and plain WebGL.
Custom Cursor Effects
A collection of five demos and a tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels.
Buildings Wave Animation with Three.js
by Ion D. Filho
A tutorial on how to create a 3D building wave animation with three.js and TweenMax.
Interactive Particles with Three.js
A tutorial on how to draw a large number of particles with Three.js and make them interactive.
