satelllte/remotion-template

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

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

remotion-template's Issues

README: "After clone" guide

Same as satelllte/nextjs-template#68

Tailwind/Prettier: scan for "clsx" usages outside of "className"

Same as satelllte/nextjs-template#66

actions/checkout v4

same as satelllte/nextjs-template#92

CI: take node version from ".nvmrc" file

Same as satelllte/nextjs-template#70

Dependencies test

See satelllte/nextjs-template#82

ESLint: remove overrides: "arrow-body-style", "react/function-component-definition"

XO rules require React components to be functions so arrow-body-style won't be relevant anymore for minimizing git diffs, because function always require return keyword for return value

Adopt Prettier

based on satelllte/remotion-audio-visualizer#26

Dependabot: group NPM updates

Apply satelllte/adsr#71 here