How To Transform ReactJS Animation into Video: the Lightweight Version of Remotion

We will create a lightweight version of Remotion, which allows the creation of MP4 videos from animations made with ReactJS.

The final result of the article — is a generated video in MP4 format from JS animation:

Remotion is a framework that allows the creation of MP4 videos from the animation that is built using ReactJS. The idea under the hood is pretty simple. Video may be considered as a set of frames that spread across time. What Remotion is required from developers is to describe the position of the scene’s objects for each frame. Remotion provides access to the video timeline via a special hook useCurrentFrame:

Picture 1 — Approach of creation of animated scenes with Remotion

Remotion provides multiple options for playing animated scenes. One can either play them directly in a special Remotion player (without converting animated scenes into MP4 format) or convert them to MP4 format and play them in…