Skip to main content

invert()v4.0.466

Part of the @remotion/effects package.

An invert effect that can be applied to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Use it for negative-color looks, x-ray style passes, or as a preprocessing step before stacking additional effects.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {Video} from '@remotion/media';
import {invert} from '@remotion/effects/invert';

export const MyComp: React.FC = () => {
  return (
    <>
      <Video src="https://remotion.media/video.mp4" effects={[invert({amount: 1})]} />
    </>
  );
};

API​

Pass an object with the following properties. You can also call invert() without arguments.

amount?​

Mix between original and inverted color. 0 leaves the layer unchanged, 1 makes it fully inverted. Defaults to 1.

The alpha channel is preserved.

disabled?​

When true, the effect is skipped. Defaults to false.

See also​