Creating a Bulge Distortion Effect with WebGL
In Tutorials by Robin Payot
Learn how to create a fun bulge effect in WebGL using the OGL library and shaders.
In Tutorials by Robin Payot
Learn how to create a fun bulge effect in WebGL using the OGL library and shaders.
In Playground by Manoela Ilic
A simple layout switch example where we go from a typography row view with inline images to a large image preview with more content.
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 Playground by Manoela Ilic
A simple thumbnail hover effect with an SVG filter distortion.
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 Yuri Artiukh
Some rubber-like 3D shape rotations that are perfect for loading animations.
In Tutorials by Mario Carrillo
Learn how to deform and color spheres to create an interesting animation with Three.js.
In Tutorials by Luis Henrique Bizarro
A tutorial explaining how to build an infinite auto-scrolling gallery using WebGL with OGL and GLSL Shaders.
In Tutorials by Yuri Artiukh
A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.
In Playground by Manoela Ilic
Some ideas for interactive custom cursor animations using SVG filters.
In Playground by Manoela Ilic
Some examples of how to use decorative distortion effects on big typography menu links.
In Tutorials by Mario Carrillo
Learn how to make a wave motion effect on an image with Three.js.
In Playground by Manoela Ilic
A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
In Playground by Manoela Ilic
A demo that shows how to animate SVG text on a path on scroll using the Intersection Observer API and SVG filters.
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 Articles by Jeremy Franzese
In this creative breakdown you will learn how the signature WebGL oil effect of the new Akaru website was created.
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.
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.