Video Grid

This is an experiment that transforms HTML5 video into a pure CSS grid.

It works by drawing each video frame to a hidden HTML5 canvas, which we then use to extract color information for each pixel. An HTML5 canvas pixel is an array of four hexadecimal numbers that represents red, green, blue and alpha. Using the pixel data, we create a CSS grid and update the background color of each HTML element.

The coolest thing that we learned from this project was that requestAnimationFrame is insanely fast compared to setInterval. If you’re animating anything in the browser you should avoid setInterval like the plague and just use requestAnimationFrame.

This is just a proof-of-concept. We’re still trying to think of ways to make this project more fun and interactive.

Click here to view the project.