Making an image ripple like water

In this tutorial, you’re going to learn how to add flowing water effect to a background image like shown below.

Check out the demo here.

Implementation

This effect is possible through this brilliant library called pixi.js. There’s an article on how to make this effect in plain javascript but here, I’ll be showing you how to do the same in a react application. The below code shows a simplified idea on how to make this happen.

The program uses a displacement sprite to run the effect on an image. You can find this as an image asset from this github link.

NPM package

I’ve made an npm package of this component so that you can quickly get this effect, just an npm install away.