Remotion Transparent Background Export: ProRes 4444, PNG Sequences, and Compositing

One of the most powerful but least discussed capabilities in Remotion is its ability to export animations with a genuine alpha channel — full transparency that allows rendered graphics to be composited cleanly over live video, other footage, or any background in a professional NLE.

This opens a workflow that video professionals rely on daily: build your motion graphics in Remotion, export with transparency, then drop the result onto a live action timeline in Adobe Premiere Pro, DaVinci Resolve, or Final Cut Pro exactly as you would a professional broadcast graphic from any dedicated motion graphics system. No green screen. No manual masking. Just clean transparency from a React component.

---

How Remotion Handles Transparency

Transparency in Remotion works at the composition level. When you export with a codec that supports an alpha channel and configure the composition to have a transparent background, Remotion writes actual alpha values per pixel — exactly as a PNG image does, but frame by frame over time.

The critical constraint is this: the composition itself must not have an opaque background. If your root component renders an <AbsoluteFill> with a solid backgroundColor, that color will fill every pixel with full opacity and there will be nothing for the alpha channel to carry. The transparency lives in what you don’t render.

---

The Two Export Paths

Path 1: ProRes 4444 with Alpha

ProRes 4444 is Apple’s professional codec designed for visual effects and compositing workflows. It supports a full 16-bit alpha channel alongside 12-bit color depth, making it the standard interchange format for professional compositing pipelines.

To export ProRes 4444 from Remotion:

npx remotion render src/index.ts MyComposition out/overlay.mov \
  --codec prores \
  --prores-profile 4444

Or programmatically:

import { renderMedia, selectComposition } from '@remotion/renderer';

await renderMedia({
  composition: await selectComposition({
    serveUrl: BUNDLE_URL,
    id: 'MyComposition',
  }),
  serveUrl: BUNDLE_URL,
  codec: 'prores',
  proResProfile: '4444',
  outputLocation: './out/overlay.mov',
});

The output is a .mov file. ProRes 4444 is lossless for practical purposes and natively understood by Final Cut Pro, Adobe Premiere, and DaVinci Resolve without any codec installation required on macOS. On Windows, ProRes playback requires the Apple ProRes codec to be installed.

File size expectation: A 30-second, 1920×1080 ProRes 4444 composition typically produces a file between 800MB and 2.5GB depending on the complexity of the rendered content. Plan your storage accordingly for batch workflows.

Path 2: PNG Sequence

A PNG sequence exports each frame as a separate PNG file with a full 32-bit RGBA alpha channel. This is the most universally compatible transparency format — every professional NLE, compositing application, and motion graphics tool on the market supports PNG sequences.

npx remotion render src/index.ts MyComposition out/frames/ \
  --codec png

Programmatically:

await renderMedia({
  composition,
  serveUrl: BUNDLE_URL,
  codec: 'png',
  outputLocation: './out/frames/',
});

Remotion outputs files named frame000000.png, frame000001.png, and so on. Import these into Premiere, Resolve, or After Effects as an image sequence, specify the frame rate, and the NLE treats them as a video clip with transparency.

File size comparison: A 30-second, 1920×1080 PNG sequence is typically 300–800MB depending on content density. Individual frames with sparse content (e.g., a simple lower third on a transparent field) compress significantly better than frames with complex gradients or many detailed elements.

---

Configuring Transparency in Your Composition

Avoiding AbsoluteFill Background

The most common mistake when attempting transparent export is accidentally adding an opaque background. In Remotion, AbsoluteFill is a helper that creates a div spanning 100% of the composition dimensions. If you add backgroundColor to it, that fills the entire frame with solid color.

Incorrect — this creates an opaque background:

export const MyOverlay: React.FC = () => (
  <AbsoluteFill style={{ backgroundColor: '#000000' }}>
    <LowerThirdText text="Breaking News" />
  </AbsoluteFill>
);

Correct — no background on the root AbsoluteFill:

export const MyOverlay: React.FC = () => (
  <AbsoluteFill>
    {/* Elements here are on a transparent field */}
    <LowerThirdText text="Breaking News" />
  </AbsoluteFill>
);

Your animated elements (text boxes, shapes, icons) can and should have their own background colors or gradients. Those are element backgrounds, not composition backgrounds — they will have transparent regions everywhere the element does not cover.

Using rgba() for Semi-Transparent Elements

Part of what makes Remotion compositing powerful is that individual elements can use rgba() colors for partial transparency. A lower third background with rgba(0, 0, 0, 0.8) renders as 80% opaque black, while the surrounding field is 0% opaque (fully transparent). This composites perfectly over live video.

const LowerThirdBar: React.FC<{ text: string }> = ({ text }) => (
  <div style={{
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 120,
    backgroundColor: 'rgba(0, 0, 0, 0.78)',
    borderTop: '4px solid #FF4500',
    display: 'flex',
    alignItems: 'center',
    padding: '0 40px',
  }}>
    <span style={{
      fontSize: 36,
      fontWeight: 700,
      color: '#FFFFFF',
      fontFamily: '-apple-system, "Segoe UI", Roboto, sans-serif',
    }}>
      {text}
    </span>
  </div>
);

When this exports with a transparent codec, the bar itself is 78% opaque, the text is fully opaque white, and everything outside the bar area is fully transparent — exactly what compositing over live video requires.

---

Compositing in Premiere Pro

Importing a transparent Remotion export into Adobe Premiere Pro:

ProRes 4444 (.mov):

1. Import the .mov file into your project bin
2. Drag it onto a video track above your footage timeline
3. Premiere automatically recognizes the alpha channel — no additional settings required
4. Verify transparency by checking that the lower tracks are visible through the transparent regions

PNG Sequence:

1. Import → navigate to the frames/ folder
2. Select the first frame (e.g., frame000000.png)
3. Check “Image Sequence” in the import dialog
4. Set the frame rate to match your composition (typically 30fps or 25fps)
5. The resulting clip appears in your bin with the correct duration and transparency

For both formats, if transparency is not immediately visible, check the clip in the Effect Controls panel → Opacity settings. Ensure the Composite in Linear Color option is enabled for accurate alpha blending.

---

Compositing in DaVinci Resolve

DaVinci Resolve handles transparent imports slightly differently depending on whether you are in Edit mode or Fusion compositing mode.

Edit mode (ProRes 4444):

1. Import the .mov into the Media Pool
2. Set the timeline so your live footage is on V1
3. Place the Remotion overlay on V2 or higher
4. Resolve reads the ProRes 4444 alpha automatically — no Alpha Matte node required

Edit mode (PNG Sequence):

1. Import → right-click in Media Pool → Import Media
2. Navigate to the frames folder and select the first frame000000.png
3. In the import dialog, check “Show Individual Frames” first if shown, then Resolve should detect the sequence
4. Alternatively, use Media Storage → navigate to folder → right-click → Import as Clip

Fusion compositing workflow: For complex compositing (chroma keying, motion tracking, 3D integration), bring the transparent Remotion export into Fusion as a MediaIn node. Connect it to a Merge node with your background footage. The alpha channel from the Remotion export drives the mask automatically — no rotoscoping or manual keying required.

---

Compositing in Final Cut Pro

Final Cut Pro has native ProRes support and handles ProRes 4444 alpha channels without any additional steps:

1. Import the .mov into an Event
2. Place it in the timeline above your footage
3. Final Cut reads the alpha channel automatically and composites it

For PNG sequences in Final Cut, use Compressor first to convert the sequence to ProRes 4444 .mov format, which Final Cut then handles natively. Alternatively, import the sequence folder directly — Final Cut will detect it as a clip if the files are named sequentially.

---

Use Cases

Lower Thirds Over Live Video

Lower thirds are the classic use case for transparent compositing. A Remotion-generated lower third — animated name card, title reveal, broadcast-style crawl — layers onto interview footage, live event coverage, or talking-head video.

The advantage over static lower thirds: Remotion lower thirds are data-driven. Generate 50 different presenter name cards, each with their name and title pulled from a JSON roster, in a single batch script. No manual editing per person.

Motion Graphics Overlays

Animated overlays — kinetic typography, brand watermarks, corner decorators, section transition cards — can all be built in Remotion and composited in post. Design once, apply to multiple timelines.

Virtual Set Elements

For green screen productions, Remotion can generate virtual set elements (desk surfaces, window views, lower panels) with clean edges and alpha-masked transparency. These composite onto the keyed footage in the NLE, adding production value without physical set construction.

Social Media Sticker-Style Overlays

Short-form content creators use transparent Remotion exports as sticker-style animated overlays that appear over recorded video content — animated captions, reaction effects, branded elements — which are then composited in the final edit.

---

ProRes vs PNG Sequence: When to Use Each

Factor	ProRes 4444	PNG Sequence
File size	Large (800MB–2.5GB / 30s)	Medium (300–800MB / 30s)
Color depth	12-bit + 16-bit alpha	8-bit RGBA
NLE compatibility	macOS native; Windows needs codec	Universal
Render time	Faster (video codec)	Slower (one file per frame)
Archival quality	Professional broadcast standard	Lossless per-frame
Recommended for	Broadcast, professional post	Maximum compatibility, web delivery

For most professional video production workflows on macOS, ProRes 4444 is the correct choice. For cross-platform workflows or situations where you cannot guarantee ProRes codec availability, PNG sequence is the safer option.

---

Avoiding the Green Screen Workaround

Some Remotion users attempt to use a green background (#00FF00) and then chroma-key it in the NLE as a workaround for exporting transparency. This approach has several problems:

1. Color spill: Green from the background bleeds onto the edges of animated elements, creating green fringes that are visible in the final composite
2. Matching greens: If any element in your animation uses a color similar to the key color, it will be incorrectly keyed out
3. Extra steps: Every NLE use requires a keying step rather than dropping the clip and getting immediate results
4. Quality loss: Chroma keying always introduces some fringing artifacts that reduce perceived quality

Use ProRes 4444 or PNG sequence instead. The alpha channel is mathematically perfect — there are no fringing artifacts because there is no keying step. The transparent pixels are exactly where you specified rgba(0,0,0,0) in your React component.

---

A Practical Lower Third Template

Here is a complete, production-ready lower third composition with entrance animation and clean transparency:

import {
  AbsoluteFill,
  useCurrentFrame,
  useVideoConfig,
  spring,
  interpolate,
} from 'remotion';

type LowerThirdProps = {
  name: string;
  title: string;
  accentColor?: string;
};

export const LowerThird: React.FC<LowerThirdProps> = ({
  name,
  title,
  accentColor = '#0080FF',
}) => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();

  // Slide in from left
  const entrance = spring({
    frame,
    fps,
    config: { damping: 16, stiffness: 90, mass: 0.8 },
    durationInFrames: 24,
  });

  // Fade out at end
  const exitOpacity = interpolate(
    frame,
    [durationInFrames - 18, durationInFrames],
    [1, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  const translateX = interpolate(entrance, [0, 1], [-500, 0]);

  // Title staggered after bar
  const titleOpacity = interpolate(
    frame,
    [12, 28],
    [0, 1],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  return (
    // NO backgroundColor on AbsoluteFill — transparent composition
    <AbsoluteFill>
      <div style={{
        position: 'absolute',
        bottom: 100,
        left: 80,
        transform: `translateX(${translateX}px)`,
        opacity: exitOpacity,
        fontFamily: '-apple-system, "Segoe UI", Roboto, sans-serif',
      }}>
        {/* Accent bar */}
        <div style={{
          width: 4,
          height: '100%',
          backgroundColor: accentColor,
          position: 'absolute',
          left: 0,
          top: 0,
          borderRadius: 2,
        }} />

        {/* Content */}
        <div style={{
          backgroundColor: 'rgba(0, 0, 0, 0.82)',
          padding: '14px 28px 14px 20px',
          borderRadius: '0 8px 8px 0',
          display: 'flex',
          flexDirection: 'column',
          gap: 4,
          minWidth: 340,
        }}>
          <div style={{
            fontSize: 30,
            fontWeight: 700,
            color: '#FFFFFF',
            letterSpacing: '-0.01em',
          }}>
            {name}
          </div>
          <div style={{
            fontSize: 16,
            color: accentColor,
            fontWeight: 500,
            opacity: titleOpacity,
          }}>
            {title}
          </div>
        </div>
      </div>
    </AbsoluteFill>
  );
};

This composition, exported as ProRes 4444, drops onto any NLE timeline and displays a professional broadcast lower third with genuine transparency.

---

RenderComp Transparent Overlay Templates

Building well-crafted transparent compositions requires careful attention to how alpha values interact across semi-transparent layers — particularly with gradients, blurred glows, and animated opacity transitions. Getting this right from scratch takes iteration.

RenderComp provides a collection of Remotion compositions purpose-built for transparent export, including lower thirds, broadcast overlays, kinetic title cards, and corner decorators — all pre-configured for ProRes 4444 output and tested for clean compositing in Premiere, Resolve, and Final Cut.

---

FAQ

Q: Can I export with transparency to H.264 or H.265? A: H.264 does not support an alpha channel. H.265 (HEVC) has an alpha channel variant (HEVC+Alpha) that Apple supports on macOS, but Remotion does not currently implement it. For transparency, use ProRes 4444 (.mov) or PNG sequence. If your delivery target only accepts H.264, composite the transparent layer over your background in an NLE first, then export the final composite as H.264.

Q: How do I verify that my export actually contains transparency before bringing it into an NLE? A: For PNG sequences, open any individual frame in a standard image viewer — transparent regions will show as a checkerboard pattern. For ProRes 4444, open QuickTime Player on macOS, which will show transparency as a gray checkerboard. Alternatively, open in After Effects or Motion and check against a colored solid layer underneath.

Q: Does transparent export work with Remotion Lambda (cloud rendering)? A: Yes. Remotion Lambda supports all the same codec options as local rendering, including prores with 4444 profile. The output is uploaded to an S3 bucket. The only additional consideration is that ProRes 4444 files are large, so S3 transfer costs and egress bandwidth are worth factoring into your budget for high-volume workflows.

Q: Can I use blur effects on transparent backgrounds without getting dark halos? A: Blur on transparent backgrounds can produce premultiplication artifacts (dark or light halos around edges) in some compositing environments. The solution is to use unpremultiplied alpha in your NLE’s import settings. In DaVinci Resolve, this is found in the clip attributes dialog. In Premiere, check the Alpha Channel type in the Interpret Footage dialog. Setting it to “Straight - Unmatted” resolves most halo artifacts.

Q: My PNG sequence has thousands of files — how do I manage them efficiently? A: Keep each render’s PNG sequence in its own dated, named subdirectory (e.g., out/2026-06-05_lower-thirds/). After verifying the render looks correct, consider archiving sequences you use regularly to ProRes 4444 using FFmpeg — this reduces thousands of individual files to a single .mov for storage and backup. Remotion’s PNG sequences are also useful as an intermediate for feeding into compositing software that works better with frame-by-frame access.

Q: Is there a way to reduce ProRes 4444 file size for easier transfer? A: ProRes 4444 files are inherently large due to the high color depth and uncompressed alpha channel. If pure file size is the primary concern, consider ProRes 422 HQ (which does not include alpha) for opaque elements, or switch to PNG sequence for alpha-required content and then zip the folder (PNG’s lossless compression still reduces ZIP sizes meaningfully for sparse content). There is no way to reduce ProRes 4444 file size without either converting to a different format or accepting lossy encoding.

Q: Can I export individual elements on separate transparent layers for multi-layer compositing? A: Yes — create separate Remotion compositions for each overlay element (e.g., one composition for the lower third bar, another for the name text, another for a logo bug) and export each independently. This gives your compositor full control over blending modes and element ordering, which can be valuable for complex motion graphics sequences where individual elements need to interact with different layers in the NLE timeline.