Skip to main content

contrast()v4.0.467

Part of the @remotion/effects package.

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

Preview​

Example​

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

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

API​

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

amount?​

Contrast multiplier. Must be >= 0.

  • 1 leaves the layer unchanged
  • 0 produces a flat mid-gray image
  • values above 1 increase contrast
  • values between 0 and 1 reduce contrast

Defaults to 1.

disabled?​

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

Effect order​

If you stack color-correction effects, a common order is:

brightness() → contrast() → saturation() → hue()

brightness() and contrast() are not commutative – swapping their order changes the result, because contrast scales around the mid-gray point (128) of the current layer.

See also​