I’m excited to share with you a side project I’ve been working on.
You may have seen those short informational videos on Facebook, such as this one by the World Economic Forum.
I find it to be a very engaging way of presenting information. The visual components that are in the video are basic and can be mimicked with HTML and CSS. They are then reused along the video with different text.
Most video editing software has a lot of features that are not needed to accomplish this type of video. They usually have a bit of a learning curve and it’s not always easy to reuse work between projects.
I decided to implement a way of coding videos using React by forking “Create React App”, a project that makes it easy to develop a web page using React. While in Create React App running
yarn start opens a browser tab that refreshes when you update your code, Create React Video opens a video player, built with Electron, that also reloads when you update the code.
Here’s a very raw example video:
And here’s the code to generate it:
While the animations are very basic, there’s a lot more you can do with CSS. You can also use canvas and do more advanced animations and transitions.
This is just the beginning. There are some bugs I want to tackle before open sourcing the code but hopefully I’ll be able to share a first version soon!