remotion-dev/remotion

Remotion is a framework that lets developers create videos by writing React code rather than using traditional video editing software. Instead of clicking and dragging clips on a timeline, you describe your video as React components, the same building blocks used to build websites, and Remotion renders them into a real video file. The way it works is that each frame of the video is essentially a React component rendered at a specific point in time. You use a special hook called useCurrentFrame to get the current frame number, and from there you can animate anything: move text across the screen, fade images in and out, draw with CSS, use SVG graphics, or even render WebGL-powered 3D visuals. Because your video is just code, you can use variables, pull data from APIs, run mathematical calculations, and apply any programming logic to generate visual effects. Remotion comes with a visual preview player in the browser that lets you scrub through your video during development, so you get fast feedback just like building a web page. Someone would use Remotion when they need to generate large numbers of personalized videos automatically, for example, creating a unique year-in-review video for every user on a platform, producing data-driven motion graphics from a spreadsheet, or automating the creation of social media clips that update with live data. It is popular among developers who already know React and want to avoid learning dedicated animation or video production tools. The tech stack is TypeScript and React running on Node.js. Videos are rendered by capturing each frame headlessly using a Chromium-based renderer, then combining the frames into a video file using FFmpeg behind the scenes. It is available as an npm package.