6 VFX JS Examples

A mesmerizing WebGL background effect rendering a glowing, undulating sine wave. Built with Three.js and custom GLSL shaders, the script calculates pixel coordinates to generate a continuous mathematical wave. The fragment shader applies a radial distortion multiplier to separate the red, green, and blue color channels, resulting in a dynamic chromatic aberration effect that shifts over time. (Requires: three.js)

This is a Twisted Wave GLSL Image Gallery. It’s a high-performance, full-screen WebGL experience that uses custom shaders to create sophisticated visual effects. Its function is to transform a standard image carousel into a cinematic journey with two distinct interactions: a localized sine-wave distortion on mouse hover and a global radial blur that intensifies with the speed of the scroll. (Requires: Three.js, GSAP, Locomotive Scroll, Maku.js, imagesLoaded)

This is a Cinematic Zoom Blur Image Gallery. It utilizes custom GLSL fragment shaders and Three.js to create a high-fidelity transition between image textures. Its function is to provide an immersive navigational layer for visual portfolios, where spatial depth and radial blur replace standard linear crossfades. (Requires: Three.js, GSAP)