ContextQMD
Back to Remotion

duotone()

packages/docs/docs/effects/duotone.mdx

4.0.4712.1 KB
Original Source

duotone()<AvailableFrom v="4.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

<EffectsDemo type="effects-duotone" />

Example

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