grayscale()<AvailableFrom v="4.0.466" />

Part of the @remotion/effects package.

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

Use it when you want a dedicated black-and-white pass whose order can be controlled in the effects array.

Preview

Example

import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {grayscale} from '@remotion/effects/grayscale';

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

API

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

amount?

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

disabled?

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

See also

• @remotion/effects
• blur()
• wave()
• HTML-in-canvas guide
• Source code for this effect