Case Study: Akaru 2019
In Articles, by Jeremy Franzese
In this creative breakdown you will learn how the signature WebGL oil effect of the new Akaru website was created.
distortion
Case Study: Portfolio of Bruno Arizio
In Articles, 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.
Scroll, Refraction and Shader Effects in Three.js and React
In Tutorials, by Paul Henschel
Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects.
Creating a Distorted Mask Effect on an Image with Babylon.js and GLSL
In Tutorials, by Francesco Michelini
Learn the basics of GLSL while creating a distorted mask effect on images using Babylon.js.
Creative WebGL Image Transitions
In Playground, by Yuri Artiukh
A set of interesting looking image transitions including distortion and warp effects made with WebGL.
Making Gooey Image Hover Effects with Three.js
In Tutorials, by Arno Di Nunzio
Learn how to create gooey reveal hover effects on images with Three.js using noise within a shader.
How to Create Motion Hover Effects with Image Distortions using Three.js
In Tutorials, by Niccolò Miranda
In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js.
Creating a Water-like Distortion Effect with Three.js
In Tutorials, by Daniel Velasquez
Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.
Mouse Flowmap Deformation with OGL
In Playground, by Robin Delaporte
A set of WebGL demos using OGL that show an interactive fluid distortion hover effect.
A Configurator for Creating Custom WebGL Distortion Effects
In Playground, by Daniel Velasquez
A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js.
Creating Grid-to-Fullscreen Animations with Three.js
In Tutorials, by Daniel Velasquez
Learn how to create thumbnail to fullscreen animations for image grids using Three.js.
How to Build an Underwater-Style Navigation Using PixiJS
A tutorial on how to create a visually distinct and accessible WebGL menu that builds from any given HTML navigation.
How to Create a Sticky Image Effect with Three.js
In Tutorials, by Daniel Velasquez
A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.
Image Distortion Effects with SVG Filters
In Playground, by Manoela Ilic
Three distortion effects powered by SVG filters that are applied to an image when hovering a link.
Text Distortion Effects using Blotter.js
In Playground, 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.
WebGL Distortion Hover Effects
In Playground, by Robin Delaporte
A little library that can be used for creating WebGL powered distortion hover effects using displacement images.
Liquid Distortion Effects
In Playground, by Yannis Yannakopoulos
A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP.
Distorted Button Effects with SVG Filters
In Playground, by Adrien Denat
A set of inspirational, highly experimental distortion effects for buttons using SVG filters.
