Bit-Shadow Machine uses CSS box shadows to render simulations and animation in a web browser. But what about video? As a web developer, it's easy to forget about video as a format. But there are plenty of contexts where video is better suited for the creative goal.

Fortunately, when creating the Bit-Shadow Machine, I ran across a blog post about automating Photoshop using NodeJS. CSS box-shadows have a limited number of properties, color, position, size, etc. I wrote a small app to capture all the box-shadow data for each frame. I then wrote a script to automate Photoshop and redraw each object in each frame. Once I had all the frames, I compiled them into 60fps, 1920x1080 video and added sound.

It felt good to render a final work from something that previously only existed in code. Please check them out.

You can find more on Vimeo.