Skip to main content

<Experimental.Clipper>

This package is currently a proof of technology.

The API may change in any version. Monitor this documentation page to see breaking changes when upgrading.

This is a special component that will cause Remotion to only partially capture the frame of the video. The remaining area will stay black (if the render image format is jpeg) or transparent (if the render image format is png).

This component cannot be used if you use renderStill() to render a PDF or WebP.

Example​

Only the left half of the component will be rendered:

EmptyFrame.tsx
tsx
import { AbsoluteFill, Experimental, useVideoConfig } from "remotion";
 
export const MyComp: React.FC = () => {
  const { width, height } = useVideoConfig();
  return (
    <AbsoluteFill>
      <Experimental.Clipper x={0} y={0} width={width / 2} height={height} />
      <AbsoluteFill style={{ backgroundColor: "red" }}></AbsoluteFill>
    </AbsoluteFill>
  );
};
EmptyFrame.tsx
tsx
import { AbsoluteFill, Experimental, useVideoConfig } from "remotion";
 
export const MyComp: React.FC = () => {
  const { width, height } = useVideoConfig();
  return (
    <AbsoluteFill>
      <Experimental.Clipper x={0} y={0} width={width / 2} height={height} />
      <AbsoluteFill style={{ backgroundColor: "red" }}></AbsoluteFill>
    </AbsoluteFill>
  );
};

API​

The properties x, y, width and height define a rect in pixels that should be captured. All props are mandatory and require an integer.

Rules​

1 Even elements outside of the {""} component will be clipped.
2 If the imageFormat is jpeg, the remaining frame will become black, if the imageFormat is png, the remaining frame will become transparent.
3 Only one {""} or {""} component can be rendered per frame. Rendering multiple is an error.

See also​