Remotion

<p align="center"> <a href="https://github.com/remotion-dev/logo"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://github.com/remotion-dev/logo/raw/main/animated-logo-banner-dark.apng"> <img alt="Animated Remotion Logo" src="https://github.com/remotion-dev/logo/raw/main/animated-logo-banner-light.gif"> </picture> </a> </p>

<a href="https://twitter.com/remotion"><img src="https://img.shields.io/twitter/follow/remotion?label=Twitter&color=black" alt="Twitter"></a>

Remotion is a framework for creating videos programmatically using React.

Why create videos in React?

• Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc.
• Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects
• Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem

Created with Remotion

<table> <tr> <td align="center"> <img style="width: 290px" src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/fireship-quick.gif" /> <p>"This video was made with code" <em>- Fireship</em> <a href="https://youtu.be/deg8bOoziaE">Watch</a> • <a href="https://github.com/wcandillon/remotion-fireship">Source</a></p> </td> <td align="center"> <img style="width: 240px" src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/unwrapped-2023.gif" /> <p>GitHub Unwrapped - Personalized Year in Review <a href="https://www.githubunwrapped.com">Try</a> • <a href="https://github.com/remotion-dev/github-unwrapped">Source</a></p> </td> <td align="center"> <em>View more in the <a href="https://remotion.dev/showcase">Remotion Showcase</a>!</em> </td> </tr> </table>

Get started

If you already have Node.JS installed, type

npx create-video@latest

to get started. Otherwise, read the installation page in the documentation.

Documentation

Documentation: remotion.dev/docs
API Reference: remotion.dev/api

License

Be aware of that Remotion has a special license and requires obtaining a company license in some cases. Read the LICENSE page for more information.

Contributing

Please read CONTRIBUTING.md to learn about contributing to this project.