Skip to main content

tvSignalOff()v4.0.476

Part of the @remotion/effects package.

Blends canvas-based components such as <Video>, <HtmlInCanvas> and <Solid> into a TV color bars test pattern.

The effect generates color bars, calibration blocks, and a grayscale ramp. The source alpha mask is preserved.

Preview​

Drag current effect into a layer in the Studio

Example​

MyComp.tsx
import {AbsoluteFill, CanvasImage, staticFile} from 'remotion';
import {tvSignalOff} from '@remotion/effects/tv-signal-off';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <CanvasImage
        src={staticFile('image.png')}
        width={1280}
        height={720}
        fit="cover"
        effects={[
          tvSignalOff({
            amount: 1,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

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

amount?​

Blend amount from 0 to 1. Defaults to 1.

Use 0 to leave the layer unchanged. Use 1 to fully apply the TV color bars pattern inside the source alpha mask.

disabled?​

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

Requirements​

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

See also​