back to home

remotion-dev / remotion

🎥 Make videos programmatically with React

37,548 stars
2,298 forks
77 issues
TypeScriptPHPMDX
Chat with CodebaseArchitecture ScanSecurity AuditExplain Codebase

AI Architecture Analysis

This repository is indexed by RepoMind. By analyzing remotion-dev/remotion in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.

Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.

Click here to launch the interactive analysis workspace

Embed this Badge

Showcase RepoMind's analysis directly in your repository's README.

[![Analyzed by RepoMind](https://img.shields.io/badge/Analyzed%20by-RepoMind-4F46E5?style=for-the-badge)](https://repomind-ai.vercel.app/repo/remotion-dev/remotion)
Preview:Analyzed by RepoMind

Repository Summary (README)

Preview
<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>

Discord Shield NPM Version NPM Downloads Open Bounties <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.