Make a Reel-ready animated intro with code
Build one vertical title card in React, then turn a simple list into a folder of finished Reel intros with one command. Remotion films the code into real MP4s on your own laptop. Free for individuals and small teams.
- The same code as a still PNG thumbnail and a small GIF
- Windows, Mac or Linux, with about 1.1GB of free disk space (about 600MB for the project and about 430MB for npm's download cache)
- Node.js 16 or newer (step 1 shows how to check and install it)
- Optional: a short MP3 (music or a whoosh) for step 5
- Notepad or any code editor. You'll paste code, not write it from scratch
- Helpful but not required: Level 0's terminal survival kit
Create a Remotion project
One official command makes a ready-to-run video project, with everything it needs installed.
Remotion makes videos out of code. You describe what each frame looks like in React (the same code many websites are built with), and Remotion films it frame by frame in a hidden Chrome browser, then joins the frames into an MP4. There's no timeline to drag, so changing the text, or making 50 versions, is quick.
TipRemotion or HyperFrames? HyperFrames uses one plain HTML file, so it's the quicker route when an AI chatbot writes the whole video for you. Remotion uses React components with typed inputs (props), which pays off when you want one reusable template that you feed with data, like the batch in step 6.First check you have Node.js:
Terminalnode --versionOutputv26.7.0Remotion's own check asks for Node 16 or newer. If you get an error instead, install Node.js from nodejs.org ↗ (pick the LTS version), or with one command. Then open a new terminal.
Windows (if you don't have Node)winget install --id OpenJS.NodeJS.LTS -eMac (if you don't have Node)brew install nodeNow open a terminal in the folder where you want the project (Documents is fine) and run Remotion's official create command:
Terminalnpx create-video@latest --yes --blank my-reel--yesskips the questions and--blankstarts from an empty template. It makes a folder called my-reel and installs everything into it. Expect it to take around 3 minutes:OutputWelcome to Remotion! Installing dependencies... added 356 packages, and audited 357 packages in 3m ... 10 high severity vulnerabilities ... Copied to my-reel. Get started by running: cd my-reel npm run dev ... Remotion is free for teams of up to 3. Adopting Remotion in your company? Visit https://www.remotion.pro/licenseCarefulRemotion is not standard open source. Its licence (LICENSE.md in the repo) makes it free, including for commercial videos, if you are an individual, a for-profit company with up to 3 employees, a non-profit, or still evaluating it (not yet using it commercially). A for-profit company with more than 3 employees needs a paid Company License from remotion.pro ↗. You also can't sell your own modified copy of Remotion itself. The terms change slightly in Remotion 5.0, so read the file again if you upgrade.
my-reel folder with src\Root.tsx and src\Composition.tsx inside.If it breaksError creating git repository: Error: Command failed with exit code 128: git commit + 2 more
Error creating git repository: Error: Command failed with exit code 128: git commit
git config --global user.name "Your Name" and git config --global user.email "you@example.com".npm says '10 high severity vulnerabilities'
braces, used by the code-checking tools that come with the template, and npm audit reports "No fix available". Rendering still works. Don't run npm audit fix --force: it swaps in other versions and can break the project.'npx' is not recognised
node --version again.