Case Study: Akaru 2019
In this creative breakdown you will learn how the signature WebGL oil effect of the new Akaru website was created.
+ more#distortion
Case Study: Portfolio of Bruno Arizio
by Bruno Arizio
A look behind the scenes of Bruno Arizio's portfolio with insight into the design process and an in-depth technical breakdown of the WebGL implementation.
+ more
Scroll, Refraction and Shader Effects in Three.js and React
Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects.
+ more
Creating a Distorted Mask Effect on an Image with Babylon.js and GLSL
Learn the basics of GLSL while creating a distorted mask effect on images using Babylon.js.
+ more
Creative WebGL Image Transitions
by Yuri Artiukh
A set of interesting looking image transitions including distortion and warp effects made with WebGL.
+ more
Making Gooey Image Hover Effects with Three.js
Learn how to create gooey reveal hover effects on images with Three.js using noise within a shader.
+ more
How to Create Motion Hover Effects with Image Distortions using Three.js
In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js.
+ more
Creating a Water-like Distortion Effect with Three.js
Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.
+ more
Mouse Flowmap Deformation with OGL
A set of WebGL demos using OGL that show an interactive fluid distortion hover effect.
+ more
A Configurator for Creating Custom WebGL Distortion Effects
A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js.
+ more
Creating Grid-to-Fullscreen Animations with Three.js
Learn how to create thumbnail to fullscreen animations for image grids using Three.js.
+ more
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.
+ more
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.
+ more
Image Distortion Effects with SVG Filters
by Manoela Ilic
Three distortion effects powered by SVG filters that are applied to an image when hovering a link.
+ more
Text Distortion Effects using Blotter.js
by Manoela Ilic
Some text distortion experiments using the Blotter.js library. The idea is to distort text as we scroll or move the mouse.
+ more
WebGL Distortion Hover Effects
A little library that can be used for creating WebGL powered distortion hover effects using displacement images.
+ more
Liquid Distortion Effects
A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP.
+ more
Distorted Button Effects with SVG Filters
by Adrien Denat
A set of inspirational, highly experimental distortion effects for buttons using SVG filters.
+ more