Revideo: Craft Stunning Videos with TypeScript Code

Revideo is an open-source library that allows you to create stunning videos by coding with TypeScript! You don’t need to be a pro at filmmaking or editing; a few lines of code are enough to get an impressive result!

Inspired by the best features of Motion Canvas (a library for creating animations and interactive graphics), Revideo adds everything you need to produce professional videos: audio support, advanced rendering settings, sound/image synchronization, MP4 export… In short, it’s powerful!

To start using this open-source alternative to proprietary tools like Remotion, it’s easy. Open your terminal and run the command:

npm init @revideo@latest

Choose a folder for your project and let the magic happen! You should see a sample project with the following code:

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'}
        play={true}
        size={['100%', '100%']}
      />
      <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)
  );
});

To compile the video, navigate to your project folder and first run:

npm install

Then:

npm start

This will launch the interface accessible via http://localhost:9000. From there, you just need to click the render button. And all of this, including the rendering process, can be automated through Revideo’s API.

This is your basic scene, with a background video, a rotating and enlarging logo, and background music. Not bad for a start, right?

Revideo offers an infinite universe of creativity for your videos, all driven by TypeScript code. It’s up to you to explore the possibilities! The comprehensive documentation will guide you step by step.

Mohamed SAKHRI
Mohamed SAKHRI

I'm the creator and editor-in-chief of Tech To Geek. Through this little blog, I share with you my passion for technology. I specialize in various operating systems such as Windows, Linux, macOS, and Android, focusing on providing practical and valuable guides.

Articles: 1753

Newsletter Updates

Enter your email address below and subscribe to our newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *