ContextQMD
Back to Remotion

tint()

packages/docs/docs/effects/tint.mdx

4.0.4761.4 KB
Original Source

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

Part of the @remotion/effects package.

A tint effect that blends a flat color over canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

The tint respects the source's alpha mask, so transparent regions are left untouched.

Preview

<EffectsDemo type="effects-tint" />

Example

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

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[tint({color: '#1ec8ff', amount: 0.7})]}
      />
    </AbsoluteFill>
  );
};

API

Pass an object with the following properties.

color

The color to tint the layer with. Accepts any CSS color string (e.g. '#ff0080', 'red', 'rgb(255, 0, 128)').

amount?

Blend strength from 0 to 1. Defaults to 0.5.

  • 0 leaves the layer unchanged.
  • 1 paints the color fully over opaque pixels.

disabled?

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

See also