Remotion Template

A template for crafting programmatic videos, tailored to personal preferences.

What's included

• Remotion 4
• TypeScript
• TailwindCSS
• ESLint configuration with lots of good rules based on XO
• Prettier
• GitHub Actions for testing and rendering videos

Where it's used

🔷 Remotion Audio Visualizer - programmatic minimalistic audio visualizations.

How to use this template

1. Create a new repository

Click on the "Use this template" button on the top of the page to create a new repository based on this template. Also you can download it as a ZIP or clone it.

2. After checking out your clone of the repository

Set the required Node.js version specified in .nvmrc file:

nvm use

Install dependencies:

npm ci

(Optional, but recommended) Upgrade dependencies to the latest versions:

npm run upgrade

(Optional, but recommended) Reset the version of your clone to the initial 0.1.0 version:

npm version 0.1.0

Lastly, you can update your new project name / details in package.json, README.md, LICENSE, etc.

And finally run the local development of it:

npm run dev

3. Enjoy!

Start making your video 🎥

Development

Install dependencies

nvm use
npm ci

Start video preview in development

npm run dev

Render video

# Available video ID's can be found in src/Root.tsx file
npm run render:mp4 --video=ID
npm run render:gif --video=ID

Test

npm run test:lint
npm run test:types

Upgrade dependencies

npm run upgrade