How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js
In Tutorials by Jan Kohlbach
Learn how to create distortion and grain effects on scroll using Three.js shaders, syncing HTML images with WebGL.
In Tutorials by Jan Kohlbach
Learn how to create distortion and grain effects on scroll using Three.js shaders, syncing HTML images with WebGL.
In Tutorials by Robin Payot
Learn how to create a fun bulge effect in WebGL using the OGL library and shaders.
In Videos by Yuri Artiukh
A coding session where you’ll learn how to create the interactive liquid-like effect from the PixiJS website using Three.js.
In Playground by Yuri Artiukh
An interactive WebGL pixel distortion effect with lots of possibilities based on the effect seen on the website for “Infinite Bad Guy”.
In Videos by Yuri Artiukh
In this coding tutorial, you’ll learn how to recreate an interactive pixel distortion effect using Three.js.
In Videos by Yuri Artiukh
Learn how to replicate the pixel river distortion effect seen on homunculus.js using Three.js.
In Tutorials by Manoela Ilic
A quick tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion hover effect.
In Playground by Yannis Yannakopoulos
Some experiments that show how to make audio-based distortion effects on images with p5.js and its sound library.
In Tutorials by Niccolò Miranda
In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js.
In Tutorials by Daniel Velasquez
Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.
In Playground by Daniel Velasquez
A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js.
In Playground by Manoela Ilic
Three distortion effects powered by SVG filters that are applied to an image when hovering a link.
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.
In Playground by Robin Delaporte
A little library that can be used for creating WebGL powered distortion hover effects using displacement images.
In Playground by Yannis Yannakopoulos
A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP.
In Tutorials by Lucas Bebber
A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text.