packages/docs/docs/videos/prores.mdx
ProRes is the most popular format for exchanging transparent videos.
Marketplaces such as VideoHive and Motion Array sell animated elements like overlays, transitions and lower thirds, often as ProRes .mov files with alpha channels.
Use these assets in Remotion with <Video> from @remotion/media.
ProRes is not enabled by default, because WebCodecs does not natively support it.
Install the ProRes decoder:
npx remotion add @mediabunny/prores
Register it before rendering a composition that uses ProRes media:
// @filename: ./Root.tsx
export const RemotionRoot = () => <></>;
// @filename: index.ts
// ---cut---
import {registerRoot} from 'remotion';
import {registerProresDecoder} from '@mediabunny/prores';
import {RemotionRoot} from './Root';
registerProresDecoder();
registerRoot(RemotionRoot);
Put the .mov file in your public folder and reference it with staticFile():
import {staticFile} from 'remotion';
import {Video} from '@remotion/media';
export const MyComposition = () => {
return <Video src={staticFile('overlay.mov')} />;
};
For maximum performance, @mediabunny/prores uses shared-memory multithreading when the page is cross-origin isolated.
If cross-origin isolation is not enabled, ProRes decoding still works, but falls back to a slower algorithm.
If you want to export a ProRes file from Remotion, see Rendering ProRes.