Skip to main content

duotone()v4.0.468

Part of the @remotion/effects package.

A duotone effect that maps every non-transparent pixel to one of two colors based on its luminance. It can be applied to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

The source alpha channel is preserved, so transparent and semi-transparent regions keep their original transparency.

Preview​

Example​

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

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          duotone({
            darkColor: 'black',
            lightColor: 'white',
            threshold: 0.18,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

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

darkColor?​

Color used for pixels below the luminance threshold. Accepts any CSS color string. Defaults to '#000000'.

lightColor?​

Color used for pixels at or above the luminance threshold. Accepts any CSS color string. Defaults to '#ffffff'.

threshold?​

Luminance threshold from 0 to 1. Defaults to 0.5.

Lower values assign more pixels to lightColor; higher values assign more pixels to darkColor.

disabled?​

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

Requirements​

duotone() uses a WebGL2 backend. During renders, enable WebGL via Config.setChromiumOpenGlRenderer() (for example 'angle'). See Using WebGL during renders.

See also​