Remotion Rule: Transparent Videos

What it is

This is an official Remotion agent skill rule that provides guidance for rendering transparent videos in Remotion projects. It covers two methods: ProRes (for importing into video editing software) and WebM VP9 (for web playback). The rule ensures AI coding agents apply the correct codec settings, pixel formats, and configuration options.

The rule is designed for developers creating motion graphics, overlays, lower thirds, and animated elements that need alpha channel transparency.

How it saves time or tokens

Transparent video rendering requires specific codec and pixel format combinations that are easy to get wrong. Without this rule, AI agents may generate configurations that produce opaque videos or use incompatible format combinations. The rule provides exact CLI flags and config settings for both ProRes 4444 (video editing) and WebM VP9 (web), eliminating trial-and-error debugging of codec settings.

How to use

1. Install the Remotion skills collection:

npx skills add remotion-dev/skills

1. The transparent video rule activates automatically when your AI agent detects a task involving transparent video output in a Remotion project.

1. Use one of the two rendering methods based on your target workflow.

Example

Rendering transparent ProRes for video editing:

# CLI command for transparent ProRes 4444
npx remotion render \
  --image-format=png \
  --pixel-format=yuva444p10le \
  --codec=prores \
  --prores-profile=4444 \
  MyComp out.mov

Rendering transparent WebM for web playback:

# CLI command for transparent WebM VP9
npx remotion render \
  --image-format=png \
  --codec=vp9 \
  MyComp out.webm

Setting defaults in remotion.config.ts:

import { Config } from '@remotion/cli/config';

// ProRes 4444 transparent defaults
Config.setVideoImageFormat('png');
Config.setPixelFormat('yuva444p10le');
Config.setCodec('prores');
Config.setProResProfile('4444');

Using calculateMetadata for per-composition defaults:

import { CalculateMetadataFunction } from 'remotion';

const calculateMetadata: CalculateMetadataFunction<Props> = async () => {
  return {
    defaultCodec: 'prores',
    defaultVideoImageFormat: 'png',
    defaultPixelFormat: 'yuva444p10le',
    defaultProResProfile: '4444',
  };
};

Related on TokRepo

• Featured workflows — Discover more AI skills and developer tools.
• Coding tools — Browse developer tools for video creation.

Common pitfalls

• Using JPEG image format instead of PNG. PNG supports alpha channels; JPEG does not. Always set --image-format=png for transparent videos.
• Forgetting to set the pixel format to yuva444p10le for ProRes results in opaque output. The 'a' in yuva indicates alpha channel support.
• WebM VP9 transparent videos are not supported in all browsers. Safari has limited VP9 support. Use ProRes for editing workflows and WebM for Chrome/Firefox web playback.