ContextQMD
Back to Remotion

thermalVision()

packages/docs/docs/effects/thermal-vision.mdx

4.0.4812.3 KB
Original Source

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

<EffectsDemo type="effects-thermal-vision" />

Example

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