Creating a Fluid Distortion Animation with Three.js

A coding session where you’ll learn how to create the interactive liquid-like effect from the PixiJS website using Three.js.

By Yuri Artiukh in Videos on

In this new ALL YOUR HTML coding session you’ll learn how to code a water-like distortion animation as seen on the PixiJS website using Three.js. We’ll use shaders and render target to achieve the fluid effects.

Original website: https://pixijs.com/

This coding session was streamed live on April 10, 2022.

Support: https://www.patreon.com/allyourhtml

Setup: https://gist.github.com/akella/a19954…

Yuri Artiukh

Yuriy is a developer from Kyiv, Ukraine. Leading a small frontend agency riverco.de, also speaking at conferences, and open for freelance projects. Curious about CSS and shaders. Loves to learn every day.

Conway’s Game Of Life – Cellular Automata and Renderbuffers in Three.js

Custom SVG Cursors with an Interactive Emitter Effect

Shaders on Scroll by Faboolea

Rock the Stage with a Smooth WebGL Shader Transformation on Scroll

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!