Create Videos using ReactJs with Remotion
Reading time: 4 mins

Create Videos using ReactJs with Remotion

If you are a python dev, in python you can use code video generator 

Remotion is a video generation tool that enables you to programmatically create videos. It holds particular appeal for web developers, as it leverages React as a framework for video creation. This blog post is intentionally concise and focused, aiming to help you kickstart your first Remotion project efficiently. It provides you with essential insights into Remotion’s intricacies, ensuring you don’t waste time on avoidable pitfalls.

Getting started

You will require NodeJs and NPM. Make sure you have them installed.

Run the following command in your terminal to start installing a Remotion Project.

npm init video

You will get to choose from several templates to get started with various setups already done for you. Eg: one with TailwindCSS already set up or one using various different full-stack frameworks like Remix or NextJs.

You will just have to run as usual

npm start

to start Remotion Studio. Which will host a Remotion player in your port 3000.

open http://localhost:3000 on your browser and you will see the Remotion Player running.

Editing Videos

There are a few things to know before we start editing videos with Remotion.

  1. Root: Root component that consists of Compositions.
  2. Compositions: A section of video you can compose with sequences.
  3. Composition properties: A composition can have properties like its dimensions, fps, and duration.
  4. Video configs: The file remotion.config.js consists of all the video render configs, you can set them and the config will be used as defaults in Remotion Studio, note: if you are using SSR this won’t have any effect.
  5. <AbsoluteFill /> Component: A helper React Component that creates a div with absolute position and fills the frame.
  6. <Sequence /> Component: Adds a sequence to the composition which can have its own sub-section of frames in the timeline.
  7. Animating using useCurrentFrame() hook: Always use this hook in your components to animate its components. Read the Caveats below in this post.

Example Root Component

export const RemotionRoot: React.FC = () => {
  return (

You can add more Composition in the Root component, they will be shown on the left side of the Remotion player.


Remotion supports almost all the animations you can do on a webpage. Basic ones like opacity, CSS-Transform, height and width of an element, as well as more advanced forms of animations like border-radius, shadows, color, SVG path animations, dynamic fonts, linear-gradient as well as CSS filter(), can be animated.

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 60);
  return (
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white",
        fontSize: 80,
      <div style={{ opacity: opacity }}>Hello World!</div>


Using Images: You will have to use <Img /> a component provided by Remotion to add images and the source for the image will have to be either imported or has to be imported from /public the directory using staticFile() function. Do not use images as CSS backgrounds.

CSS Animations: Always prefer using frame from useCurrentFrame() hook to animate direct CSS animations may lead to choppy animation.

Fonts: Refer to their fonts documentation to understand how to use Google Fonts as well as local webfonts.

Additional Packages / Extensions

There are a number of additional extensions you can use with Remotion. The packages are available through NPM under the namespace @Remotion. To list a few there are extensions to support ThreeJs, Lottie, and Rave. There is an extension that provides support with basic shapes @remotion/shapes as well.

Safe and Unsafe pins in ESP32 and ESP32-S3
Discover the Standalone FreeTouchDeck Configurator
© 2023 Anil Maharjan