Interactive Repulsion Effect with Three.js
In Tutorials, by Ion D. Filho
A tutorial on how to recreate the interactive repulsion effect of grid items seen in BestServedBold’s Dribbble shot “Holographic-Interactions”.
webgl
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.
3D Particle Explorations
In Playground, by Jack Rugile
An inspirational set of demos that explores particle animations in 3D space with three.js. This type of animations could be very suitable for page loaders.
Decorative WebGL Backgrounds
In Playground, by Louis Hoebregts
A collection of decorative shapes displayed as backgrounds using WebGL. The shapes are created with Three.js and animated with the TweenMax library.
Liquid Distortion Effects
In Playground, by Yannis Yannakopoulos
A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP.
Infinite Tubes with Three.js
In Playground, by Louis Hoebregts
Some WebGL experiments where the viewer seemingly travels through a textured tunnel. Powered by Three.js and inspired by the effect seen on fornasetti.com.
WebGL Scroll Spiral
In Playground, by Xoihazard
A couple of decorative and inspirational WebGL background scroll effects for websites powered by regl. The idea is to twist some images and hexagonal grid patterns on scroll, creating an interesting effect.
Animated Heat Distortion Effects with WebGL
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.
The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js
In Tutorials, by Karim Maaloul
A tutorial that explores the basics of creating animated 3D scenes using Three.js.
Rain & Water Effect Experiments
In Playground, by Lucas Bebber
Some experimental rain and water drop effects made with WebGL and shown in different demo scenarios.
