ContextQMD
Back to Remotion

glow()

packages/docs/docs/effects/glow.mdx

4.0.4752.0 KB
Original Source

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

<EffectsDemo type="effects-glow" />

Example

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('angle'). See Using WebGL during renders.

See also