Skip to main content

Basic Code Example

For now, we can ignore all files in our revideo project except for src/scenes/example.tsx, as this is where the visuals and audio of our video are defined. Let's walk through all the parts of the code that might confuse you, and provide explanations and references.

Defining a generator function

Our animation is defined within a generator function that is passed to makeScene2D - this function describes the sequence of events happening in our video:

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

export default makeScene2D(function* (view) {
// your animation flow here
}

Generator functions can return multiple values - when they are called, they will execute until they first encounter a yield statement, and return the yielded value. Revideo renders animations by continually calling the generator function, which will yield frames that we can export. It is not neccessary to understand how this works exactly, but if you are interested, you can read about the animation flow in revideo here.

Adding Video and Audio elements

At the start of our generator function, we add Video and Audio tags to our view, which will display them on the canvas. Other components you could add include Txt or Img tags, or basic shapes like Rect or Circle. You can find the API for all components here.

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}
/>
</>,
);

A few points about input arguments:

  • In both cases, src refers to the file, which points to a remote url on the bucket. Alternatively, you can use local files by passing their path.
  • Passing size={["100%", "100%"]} makes the video stretch to the full width and height of its canvas.
  • Adding play={true} makes both media elements play immediately, instead of being in a paused state.

Play media for one second

After adding our background video and audio, we execute

yield * waitFor(1);

The function waitFor does - as the name suggests - nothing. It is particularly useful when waiting for media (like videos and audio) to play or when we want to have a still-standing image.

Lastly, we let the revideo logo spin into our video:

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),
);

A few things happen here: First, we add the revideo logo as an Img to our canvas. We set its initial width to only 1% of the screen, as we want it to grow as the video plays. We also pass a reference through ref={logoRef}, which we had initialized before. Like React refs, references allow us to access and modify the behavior of elements after they've been initialized.

In our code, we use a reference to the revideo logo to later animate it. Particularly, we run the following commands:

  • scale(x, s): scales the size of the logo to x times its original size, within n seconds.
  • rotation(d, s): rotates the image by d degrees within s seconds

The flow of these animations is determined by the keywords chain and all. The former instructs revideo to play its input animations after one another, while the latter instructs revideo to play them simultaneously. As a result, we first see the revideo logo rotating around 360 degrees while growing to 40x its original size. After this is done, the logo still grows to 60x its original size. You can learn more about the animation flow in revideo here.