How to Use the Clipper Component for Partial Frame Capture in Remotion

The <Clipper> component was removed in Remotion v4.0.228; use the frameRange option in renderMedia() or the --frame-range CLI flag instead for partial frame capture.

The Remotion library once provided an experimental <Clipper> component for rendering only specific segments of a composition. While this feature was deprecated and removed due to performance and maintenance concerns, modern Remotion offers a native frameRange API that achieves the same partial frame capture goals more efficiently.

What Was the Clipper Component?

<Clipper> was an experimental React component designed to "clip" rendered output to a specific frame range without re-rendering the entire composition. It allowed developers to generate previews or extract short video segments by specifying start and end frames as props.

According to the source code in packages/core/src/Clipper.tsx, the component now contains a permanent deprecation notice:

@deprecated <Clipper> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time…

The documentation at packages/docs/docs/clipper.mdx confirms this removal, noting that the API "made renders oftentimes slower rather than faster and increased complexity of the codebase."

Why Was Clipper Removed?

The Remotion team removed <Clipper> for three primary reasons documented in the source analysis:

• Performance regressions – Rendering with <Clipper> was frequently slower than standard full renders due to overhead in the experimental clipping logic.
• Maintenance burden – The clipping implementation added significant complexity to the renderer core while serving a narrow use case.
• Superior alternatives – The frameRange option provides the same functionality natively within the rendering pipeline without experimental wrappers.

How to Capture Partial Frames in Modern Remotion

Use the frameRange parameter available in renderFrames(), renderMedia(), and the Remotion CLI. This option accepts a tuple [start, end] specifying the inclusive frame range to render.

Using frameRange with renderMedia()

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

(async () => {
  const serveUrl = 'path/to/bundle';
  
  const composition = await selectComposition({
    serveUrl,
    id: 'my-video',
  });

  await renderMedia({
    composition,
    serveUrl,
    outputLocation: 'out/partial-video.mp4',
    // Render only frames 100 through 199
    frameRange: [100, 199],
    codec: 'h264',
  });
})();

Using the CLI with --frame-range

remotion render \
  --serve-url path/to/bundle \
  --composition-id my-video \
  --frame-range 100-199 \
  --output partial-video.mp4

To render from a specific frame to the end of the composition, pass null as the second element: frameRange: [100, null].

Comparing Clipper vs. frameRange Approaches

Feature	<Clipper> (Removed)	frameRange (Current)
Start frame	<Clipper start={100}>	frameRange: [100, …]
End frame	<Clipper end={200}>	frameRange: […, 200]
Performance	Often slower than full render	Optimized; only required frames processed
Stability	Experimental, removed v4.0.228	Stable, core API
Implementation	React component wrapper	Native renderer parameter

Summary

• The <Clipper> component was an experimental feature for partial frame capture that has been removed in Remotion v4.0.228.
• Attempting to import <Clipper> from packages/core/src/Clipper.tsx will result in a compilation error.
• Use the frameRange option in renderMedia(), renderFrames(), or the CLI --frame-range flag to render specific frame subsets efficiently.
• The frameRange approach is fully supported, performs better than the deprecated <Clipper>, and covers all previous use cases.

Frequently Asked Questions

Can I still use the Clipper component in older versions?

No version of Remotion currently supports <Clipper> in production. The component was marked as experimental from its introduction and was completely removed in version 4.0.228. The source file now contains only a deprecation stub that throws an error if imported.

Why is frameRange more performant than the old Clipper?

The <Clipper> component added a React wrapper layer that processed frames through an experimental clipping pipeline, often introducing overhead that slowed renders. In contrast, frameRange is implemented natively in the renderer core at packages/renderer/src/render-media.ts, allowing the engine to skip decoding and processing of frames outside the specified range entirely.

How do I render from a specific frame to the end of the composition?

Pass null as the second element of the frameRange tuple. For example: frameRange: [150, null] renders from frame 150 through the final frame of the composition. In the CLI, you can use --frame-range 150-Infinity or simply omit the end value depending on your shell environment.

Where can I find the deprecation notice for Clipper?

The official deprecation notice resides in packages/core/src/Clipper.tsx within the Remotion repository. The documentation at packages/docs/docs/clipper.mdx also details the removal rationale and directs users to the frameRange alternative.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}