Search
Building a Mouse-Following Square Lens Effect with Three.js and GLSL
25.8.2026
A step-by-step tutorial on using Three.js and GLSL to create a mouse-following square lens effect with image distortion, RGB shifting, and animated shader effects
Run Rob Run: Building a Music-Reactive Goo with Three.js and WebGPU
20.8.2026
Exploring the techniques behind an audio-reactive 3D scene, from custom geometry deformation and music analysis to scroll-driven morphing, damping, and performance optimization
A Beginner's Guide To Mastering Gustave In Clair Obscur: Expedition 33
24.4.2025
Gustave’s having a rough time of it at the start of Clair Obscur. His lover vanishes into ash; his friends get party wiped before they even finish saying “where are we?”, and everybody else he comes across who lands in the Paintress’ domain seems to have taken up getting horribly impaled as a...
How to Create an Organic Text Distortion Effect with Infinite Scrolling
6.11.2024
Learn how to create an organic distortion effect for text using JavaScript and CSS for a unique, fluid animation
Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders
27.8.2024
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
22.8.2024
A small set of scroll-based SVG filter animations on HTML text
Creating a Bulge Distortion Effect with WebGL
28.6.2023
Learn how to create a fun bulge effect in WebGL using the OGL library and shaders
Lines to Content Layout Animation
5.4.2022
A simple layout switch example where we go from a typography row view with inline images to a large image preview with more content.
The post Lines to Content Layout Animation appeared first on Codrops
Pixel Distortion Effect with Three.js
12.1.2022
An interactive WebGL pixel distortion effect with lots of possibilities based on the effect seen on the website for "Infinite Bad Guy".
The post Pixel Distortion Effect with Three.js appeared first on Codrops
Pixelated Distortion Effect with Three.js
13.12.2021
In this coding tutorial, you'll learn how to recreate an interactive pixel distortion effect using Three.js.
The post Pixelated Distortion Effect with Three.js appeared first on Codrops
Deconstructing the homunculus.jp Distortion with Three.js
4.10.2021
Learn how to replicate the pixel river distortion effect seen on homunculus.js using Three.js.
The post Deconstructing the homunculus.jp Distortion with Three.js appeared first on Codrops
Thumbnail Hover Effect with SVG Filters
9.6.2021
A simple thumbnail hover effect with an SVG filter distortion.
The post Thumbnail Hover Effect with SVG Filters appeared first on Codrops
How to Code a Crosshair Mouse Cursor with Distortion Hover Effect
26.5.2021
A quick tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion hover effect.
The post How to Code a Crosshair Mouse Cursor with Distortion Hover Effect appeared first on Codrops
Rotating Loading Animation of 3D Shapes with Three.js
3.2.2021
Some rubber-like 3D shape rotations that are perfect for loading animations.
The post Rotating Loading Animation of 3D Shapes with Three.js appeared first on Codrops
Twisted Colorful Spheres with Three.js
26.1.2021
Learn how to deform and color spheres to create an interesting animation with Three.js.
The post Twisted Colorful Spheres with Three.js appeared first on Codrops
Creating an Infinite Auto-Scrolling Gallery using WebGL with OGL and GLSL Shaders
5.1.2021
A tutorial explaining how to build an infinite auto-scrolling gallery using WebGL with OGL and GLSL Shaders.
The post Creating an Infinite Auto-Scrolling Gallery using WebGL with OGL and GLSL Shaders appeared first on Codrops
Distorted Infinite WebGL Slider with Pixi.js
2.11.2020
In this video you'll learn how to code the infinite scrollable image slider from Lamadone Studio using Pixi.js.
The post Distorted Infinite WebGL Slider with Pixi.js appeared first on Codrops
Exploring Animations for Menu Hover Effects
8.7.2020
A couple of ideas for creative menu hover animations with images.
The post Exploring Animations for Menu Hover Effects appeared first on Codrops
Interactive WebGL Hover Effects
14.4.2020
A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.
Interactive WebGL Hover Effects was written by Yuriy Artyukh and published on Codrops
Animated Custom Cursor Effects
24.3.2020
Some ideas for interactive custom cursor animations using SVG filters.
Animated Custom Cursor Effects was written by Mary Lou and published on Codrops