# Remotion AI Video template

<p align="center">
  <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://cdn.webmonch.dev/img/remotion-template-promo.png">
      <img alt="Animated Remotion Logo" src="https://cdn.webmonch.dev/img/remotion-template-promo.png">
    </picture>
</p>

Using this template you can create high quality **AI videos for TikTok or Instagram**.

It includes a CLI that will generate a story script, images and voiceover using OpenAI and ElevenLabs.

## Getting started

Set up the demo story:

**Install Dependencies**

```console
npm install
```

**Start Preview**

```console
npm run dev
```

**Render video**

```console
npx remotion render
```

Or check out the [Remotion docs](/docs/render/). There are lots of ways to render.

## Creating a new story

You can easily create your own videos using provided CLI.

It will generate a script, images, voiceover and timeline based on your story title and topic. Topics that work well: history, ELI5, fun facts, science.

**Configure environment variables**

Create .env file with following env vars (you can also find them in .env.example):

```
OPENAI_API_KEY=
ELEVENLABS_API_KEY=
```

If you don't create an env file, you will be prompted for these variables when using CLI.

**Select voice**

In [`generateVoice()`](cli/service.ts) replace the voice id from ElevenLabs with the one you like. You can use their API for this. Alternatively, you can open any voice on their website and extract the Voice ID from the url (id comes after `voiceId=`).

```console
https://elevenlabs.io/app/voice-library?voiceId=aTxZrSrp47xsP6Ot4Kgd
```

**Generate story timeline**

```console
npm run gen
```

You will be prompted to enter story title and topic.

Title can be a vague one or long and detailed. Short title on the first slide will be generated based on it.

Topic can be e.g. History, Interesting facts, ELI5 etc.

After you enter title and topic, CLI will generate text, images and audio with timestamps, and combine all those into a timeline that van be used by this template to render a video.

## Technical overview

Remotion is rendering videos based on Timeline (timeline.json in project folder). The timeline is generated by CLI.

It consists of three blocks - Elements, Text and Audio.

Elements define slide backgrounds and include enter/exit transitions (e.g. blur) and animations that are applied while slide is active (e.g. scale, rotate).

Text and audio are self explanatory. The only special thing about them is that they are synced.

You can customize the generation of the timeline in [`createTimeLineFromStoryWithDetails()`](cli/timeline.ts) function.

## Deploying on a remote server

Current project needs light modification if you want to deploy it as a remote service.

Remotion renderer with template bundle should be deployed as per usual.

Then you have to update [`Root.tsx`](src/Root.tsx) to use timeline url that you will pass as a prop (instead of project name).

The last thing - you have to upload generated resources (images and audio) to server and use urls to them instead of file names when generating a timeline.

## Issues

Found an issue with Remotion? Upgrade Remotion to receive fixes:

```
npx remotion upgrade
```

Didn't help? [File an issue here](https://github.com/remotion-dev/remotion/issues/new).

## Contributing

The source of this template is in the [Remotion Monorepo](https://github.com/remotion-dev/remotion/tree/main/packages/template-ai-video).  
Don't send pull requests here, this is only a mirror.

## License

Note that for some entities a company license is needed. [Read the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).

## Credits

Thanks to [@webmonch](https://github.com/webmonch) for contributing this template!