Motion extraction with mostly CSS

I recently watched a video by Posy that introduced an interesting concept called motion extraction. The idea is simple: you can visualize the motion in a video better by taking two frames and having one subtracted from the other. This is easy enough to do in CSS since the filter is already available natively.

Here is a proof of concept

If the demo is working correctly, you should see something like this for the "difference", "highlight", and "normal" effects, respectively:

The trick involves using two videos (or more, as you'll see later). One video is placed on top of the other, playing slightly ahead. Then, by styling the top video with mix-blend-mode: difference in CSS, we make it so only the pixels that have changed between the two frames are shown.

Highlight Difference

In the video, Posy keeps building on this idea by overlapping the differences with the video to create more interesting effects.

This can also be achieved with CSS by applying the same trick twice. First, we build a layer with mix-blend-mode: difference, which is then put on top of the video again with mix-blend-mode: plus-lighter. I also added some blur and additional brightness and saturation to make it more visible.

No JS version

This is also possible by having the two videos autoplay and using the fact that display: none videos will not start. So we can delay the second video using CSS animations to have a fully working demo without using JS. Demo without JS.