Skip to main content

glow()v4.0.468

Part of the @remotion/effects package.

Adds a soft halo around bright parts of canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Use it when an element should appear to emit light.

Preview​

Example​

MyComp.tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {glow} from '@remotion/effects/glow';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          glow({
            radius: 24,
            intensity: 1.5,
            threshold: 0.35,
            color: '#00d8ff',
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

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

radius?​

Blur radius of the glow in pixels. Defaults to 20. Must be at least 0.

intensity?​

Brightness multiplier for the glow. Defaults to 1. Must be at least 0.

threshold?​

Luminance threshold from 0 to 1. Defaults to 0.

Pixels brighter than this value contribute to the glow. Increase it to glow only the brightest parts.

color?​

Color of the glow. Defaults to white.

disabled?​

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

Requirements​

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

See also​