Revideo - Create Videos with Code

Revideo lets you create videos using Typescript. It is forked from the amazing Motion Canvas library and extended to provide features that are essential for video, such as:

• the ability to integrate and edit Audio
• an API for rendering parameterized videos

Revideo is meant to be an open-source alternative to Remotion, which has a restrictive license, making it unsuitable for many projects. While Remotion is built on top of React, Revideo uses the HTML Canvas API and uses generator functions.

Getting Started

To create an example project, run the following command:

npm init @revideo@latest

The example project will have the following code, which defines the video shown below.

import {Audio, Img, Video, makeScene2D} from '@revideo/2d';
import {all, chain, createRef, waitFor} from '@revideo/core';

export default makeScene2D(function* (view) {
  const logoRef = createRef<Img>();

  yield view.add(
    <>
      <Video
        src={'https://revideo-example-assets.s3.amazonaws.com/stars.mp4'}
        size={['100%', '100%']}
        play={true}
      />
      <Audio
        src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat.mp3'}
        play={true}
        time={17.0}
      />
    </>,
  );

  yield* waitFor(1);

  view.add(
    <Img
      width={'1%'}
      ref={logoRef}
      src={
        'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'
      }
    />,
  );

  yield* chain(
    all(logoRef().scale(40, 2), logoRef().rotation(360, 2)),
    logoRef().scale(60, 1),
  );
});

revideo-example.mp4

Telemetry

To understand how people use Revideo, we anonymously track how many videos are rendered using the open-source tool Posthog. You can find our code implementing Posthog here.

If you want to disable telemetry, just set the following environent variable:

DISABLE_TELEMETRY=true

Learn More

To learn more about Revideo, feel free to check out our documentation or join our Discord server.