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 and we already have the filter 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 is 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 the mix-blend-mode: difference
, which is in turn put on top
of the video again now with the 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 using js.