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"> </picture> </a> </p>

[](https://remotion.dev/discord) [](https://www.npmjs.org/package/remotion) [](https://npmcharts.com/compare/remotion?minimal=true) <a href="https://twitter.com/remotion"></a>

Remotion is a framework for creating videos programmatically using 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

<table> <tr> <td align="center"> <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"> <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"> <e