Skip to content

crazyyf/revideo

This branch is 1 commit behind redotvideo/revideo:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

89e66d8 Â· Dec 16, 2024
Sep 26, 2024
Sep 25, 2024
Dec 16, 2024
Oct 24, 2024
Sep 24, 2024
May 22, 2024
Feb 4, 2023
Sep 24, 2024
Sep 25, 2024
Dec 10, 2023
Apr 15, 2024
Sep 25, 2024
Jun 7, 2022
Oct 22, 2024
Mar 19, 2024
May 17, 2024
Dec 16, 2024
Mar 19, 2024
Mar 19, 2024
May 2, 2024
Dec 16, 2024
Sep 25, 2024
Dec 19, 2023

Repository files navigation


Revideo logo

published with lerna powered by vite npm package version discord


Revideo - Create Videos with Code

Revideo is an open source framework for programmatic video editing. It is forked from the amazing Motion Canvas editor, with the goal of turning it from a standalone application into a library that developers can use to build entire video editing apps.

Revideo lets you create video templates in Typescript and deploy an API endpoint to render them with dynamic inputs. It also provides a React player component to preview changes in the browser in real-time. If you want to learn more, you can check out our docs, our examples repository, and join our Discord server.

News 🔥

  • [05/21/2024] We released an example on how to parallelize rendering jobs with Google Cloud Functions
  • [05/20/2024] We have a new website!

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('scene', 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

Differences between Revideo and Motion Canvas

Motion Canvas aims to be a standalone editor for animations. While it happens to be distributed as an npm package, the maintainers don't intend for it to be used as a library.

We started out as users of Motion Canvas ourselves but ran into these limitations when we wanted to build a video editing app on top of it. After building our initial version using Motion Canvas' plugin system, we realized that we wanted to make more fundamental changes to the codebase that would be difficult to implement while keeping compatibility with the existing Motion Canvas API.

That's why we decided to fork the project and turn it into Revideo. We wrote a bit more about it on our blog.

Concretely, some of the differences to Motion Canvas are the following ones:

  • Headless Rendering: Motion Canvas currently requires you to press a button in its UI to render a video. We have exposed this functionality as a function call and are making it possible to deploy a rendering API to services like Google Cloud Run (example, or to use our CLI to expose a rendering endpoint from your Revideo project (docs)
  • Faster Rendering: When building an app rather than creating videos for yourself, rendering speeds are quite important. We have sped up rendering speeds by enabling parallelized rendering and replacing the seek() operation for HTML video with our ffmpeg-based video frame extractor
  • Better Audio Support: We have enabled audio export from <Video/> tags during rendering, and have also added an <Audio/> tag that makes it easy to synchronize audio with your animations.

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 environment variable:

DISABLE_TELEMETRY=true

Learn More

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

About

Create Videos with Code

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 95.7%
  • SCSS 2.8%
  • Other 1.5%