Skip to main content

Embedding ProRes

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.

Enable ProRes decodingv4.0.487​

Install the ProRes decoder:

Terminal
npx remotion add @mediabunny/prores

Register it before rendering a composition that uses ProRes media:

src/index.ts
import {registerRoot} from 'remotion';
import {registerProresDecoder} from '@mediabunny/prores';
import {RemotionRoot} from './Root';

registerProresDecoder();
registerRoot(RemotionRoot);

Embed a ProRes asset​

Put the .mov file in your public folder and reference it with staticFile():

MyComposition.tsx
import {staticFile} from 'remotion';
import {Video} from '@remotion/media';

export const MyComposition = () => {
  return <Video src={staticFile('overlay.mov')} />;
};

Performance​

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.

Rendering ProRes​

If you want to export a ProRes file from Remotion, see Rendering ProRes.

See also​