Skip to main content

thermalVision()v4.0.479

Part of the @remotion/effects package.

Maps source luminance to a thermal heat-map color ramp. 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​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {thermalVision} from '@remotion/effects/thermal-vision';
import {AbsoluteFill, CanvasImage, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <CanvasImage
        src={staticFile('image.png')}
        width={1280}
        height={720}
        fit="cover"
        effects={[
          thermalVision({
            amount: 1,
            palette: [
              '#020617',
              '#1238ff',
              '#00a6ff',
              '#00c853',
              '#d6f542',
              '#ffb000',
              '#ff2f00',
              '#ffffff',
            ],
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

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

amount?​

Blend amount from 0 to 1. Defaults to 1.

Use 0 to leave the layer unchanged. Use 1 to fully remap luminance to the thermal color ramp.

palette?​

Color ramp used from dark to bright pixels. Accepts an array of at least two CSS color strings.

Defaults to a dark blue, blue, cyan, green, yellow, orange, red and white ramp.

disabled?​

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

Requirements​

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

See also​