How to Create an Organic Text Distortion Effect with Infinite Scrolling
In Tutorials, by Jorge Toloza
Learn how to create an organic distortion effect for text using JavaScript and CSS for a unique, fluid animation.
distortion
Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders
In Tutorials, by Jean Mazouni
Learn how to apply a pixel/grid displacement to a texture in Three.js using shaders and GPGPU with a subtle RGB shift effect on cursor move.
Scroll-based SVG Filter Animations on Text
In Playground, by Manoela Ilic
A small set of scroll-based SVG filter animations on HTML text.
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.
Lines to Content Layout Animation
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.
Pixel Distortion Effect with 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”.
Thumbnail Hover Effect with SVG Filters
In Playground, by Manoela Ilic
A simple thumbnail hover effect with an SVG filter distortion.
How to Code a Crosshair Mouse Cursor with Distortion Hover Effect
In Tutorials, by Manoela Ilic
A quick tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion hover effect.
Rotating Loading Animation of 3D Shapes with Three.js
In Playground, by Yuri Artiukh
Some rubber-like 3D shape rotations that are perfect for loading animations.
Twisted Colorful Spheres with Three.js
In Tutorials, by Mario Carrillo
Learn how to deform and color spheres to create an interesting animation with Three.js.
Creating an Infinite Auto-Scrolling Gallery using WebGL with OGL and GLSL Shaders
In Tutorials, by Luis Henrique Bizarro
A tutorial explaining how to build an infinite auto-scrolling gallery using WebGL with OGL and GLSL Shaders.
Interactive WebGL Hover Effects
In Tutorials, by Yuri Artiukh
A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.
Animated Custom Cursor Effects
In Playground, by Manoela Ilic
Some ideas for interactive custom cursor animations using SVG filters.
Ideas for Distorted Link Effects on Menus
In Playground, by Manoela Ilic
Some examples of how to use decorative distortion effects on big typography menu links.
Create a Wave Motion Effect on an Image with Three.js
In Tutorials, by Mario Carrillo
Learn how to make a wave motion effect on an image with Three.js.
Distorted Link Effects with SVG Filters
In Playground, by Manoela Ilic
A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
Animating SVG Text on a Path
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.
Audio-based Image Distortion Effects with WebGL
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.
