| 1 | <p align="center">
|
| 2 | <a href="https://github.com/remotion-dev/logo">
|
| 3 | <img src="https://github.com/remotion-dev/logo/raw/main/withtitle/element-0.png">
|
| 4 | </a>
|
| 5 | </p>
|
| 6 |
|
| 7 | [](https://discord.gg/6VzzNDwUwV)
|
| 8 | [](https://www.npmjs.org/package/remotion)
|
| 9 | [](https://npmcharts.com/compare/remotion?minimal=true)
|
| 10 | [](https://packagephobia.now.sh/result?p=remotion)
|
| 11 |
|
| 12 | Remotion is a suite of libraries building a foundation for **creating videos programmatically using React.**
|
| 13 |
|
| 14 | ## Why create videos in React?
|
| 15 |
|
| 16 | - **Leverage web technologies**: Use all of CSS, Canvas, SVG, WebGL, etc.
|
| 17 | - **Leverage programming**: Use variables, functions, APIs, math and algorithms to create new effects
|
| 18 | - **Leverage React**: Reusable components, Powerful composition, Fast Refresh, Package ecosystem
|
| 19 |
|
| 20 | ## Example videos
|
| 21 |
|
| 22 | - **Remotion Trailer** [Watch](https://www.youtube.com/watch?v=gwlDorikqgY) • [Source code](https://github.com/remotion-dev/trailer) • The announcement video for Remotion was written in Remotion itself!
|
| 23 | - **AnySticker Welcome Video** [Watch](https://www.youtube.com/watch?v=Y0SNPeTz09w) • [Source code](https://github.com/JonnyBurger/anysticker-tutorials) • An in-app explainer video for my app AnySticker.
|
| 24 | - **Spotify Wrapped Recreated** [Watch](https://twitter.com/JNYBGR/status/1360269270526136320) • [Tutorial](https://www.youtube.com/watch?v=I-y_5H9-3gk) • [Source code](https://github.com/JonnyBurger/remotion-wrapped) • A recreation of Spotify Wrapped where you can override all text and images via command line.
|
| 25 | - **"Game changer or no game changer" intro** [Watch](https://youtu.be/ga_xAZo9m7k?t=61) • [Source code](https://github.com/JonnyBurger/gamechanger-or-no-gamechanger-intro) • An intro for a quiz show I did with William Candillon.
|
| 26 | - **"The X in MDX" talk** [Watch](https://twitter.com/pomber/status/1359556846688886789) • [Source code](https://github.com/pomber/record-talk-with-remotion) • A re-recording of [this talk](https://www.youtube.com/watch?v=xEu3t-KJVVg) using Remotion.
|
| 27 | - **Redesigning the Scatterplot** [Watch](https://twitter.com/BrooksLybrand/status/1371547875109445635) • [Source code](https://github.com/brookslybrand/redesigning-scatterplots) • An animated section of Edward R. Tufte's book [The Visual Display of Quantitative Information](https://www.amazon.com/Visual-Display-Quantitative-Information/dp/0961392142/ref=sr_1_1?crid=3HQZSBUUROV09&dchild=1&keywords=the+visual+display+of+quantitative+information&qid=1615907320&sprefix=the+visual+disp%2Caps%2C190&sr=8-1).
|
| 28 | - **News Podcast Maker** [Watch](https://www.youtube.com/watch?v=Mwo5iNlWryg) • [Source code](https://github.com/FelippeChemello/podcast-maker/) • A fully automated News Podcast Maker.
|
| 29 |
|
| 30 | Feel free to pull request your creations!
|
| 31 |
|
| 32 | ## Get started
|
| 33 |
|
| 34 | If you already have Yarn and FFMPEG installed, type
|
| 35 |
|
| 36 | ```console
|
| 37 | yarn create video
|
| 38 | ```
|
| 39 |
|
| 40 | to get started. Otherwise, read the [installation page](https://www.remotion.dev/docs/) in the documentation.
|
| 41 |
|
| 42 | ## Documentation
|
| 43 |
|
| 44 | Head to [**remotion.dev**](https://www.remotion.dev) to learn the in and outs of Remotion!
|
| 45 |
|
| 46 | ## License
|
| 47 |
|
| 48 | Be aware of that Remotion has a special license and requires obtaining a company license in some cases. Read the [LICENSE](LICENSE.md) documentation for more information.
|
| 49 |
|
| 50 | ## Contributing
|
| 51 |
|
| 52 | Please read [CONTRIBUTING.md](CONTRIBUTING.md) to learn about contributing to this project.
|