I want to “flood the site with water”, can you advise how to implement it?

Question

JavaScript

Let's say there is a bottom of the site (some kind of texture) water is poured over it (ankle-deep irl, the water is clear) The site elements float in the water, and some can swim deeper than others, when interacting with the site elements (for example, a click), it sinks a little and get waves.
Personally, I present only one implementation option - webgl. I found only one suitable water, the rest are not transparent Water . But there is not a very convenient api.
Perhaps someone knows the best option? Perhaps you can somehow manage without webgl at all, because I will only need water in 2d space? For example, position Dom Elements using css in 3d space, and put a 2dcanvas canvas on top. Maybe there is even an option with svg , so browser support will be more, but lags are possible due to the fact that this is DOM. The last option is to write and compile in wasm on the pluses (here the support is really bad).

Answer 1

Not that?

Answer 2

1. In general, you need a video with such water: https://www.shutterstock.com/video/clip-3570359
2. And then make this water with a transparent layer: www.sciencelifeny.com/transparency/transparency.html
UPD: video flooding/filling