I was looking for a way to make videos with a few images, animations, and audio. I stumbled across Kdenlive, and RenPy, but those programs have a steep learning curve and they’re tedious to use. I wanted a simple method of creating videos.

I came up with a new method I refer as “multimedia puppeteering”. This program I wrote, called MotionJak, is a single HTML file. Vanilla JS, and CSS are responsible for creating the animations. simple-screen-recorder is used to capture a video of the puppeteering performance. FFmpeg can be used for video postprocessing to reduce file sizes, transcode, whatever.

There are some downsides to this approach. It can be difficult to puppet the exact sequence of steps you have in your mind, and sometimes you mess things up and have to start over. Sometimes mistakes can lead to funnier results, so it’s not that bad.

Here are some videos I’ve created with this program to demonstrate this concept.

This is what things look like behind-the-scenes.

With simple-screen-recorder, just select a sub-window you’re interested in capturing, and you’ll have your movie set background in view. Wa-la! Isn’t this simple?!

Another final cut.