Skip to main content

outline()v4.0.515

Part of the @remotion/effects package.

Draws a solid outline around the non-transparent pixels of a canvas-based component such as <Video>, <HtmlInCanvas> or <Solid>.

Preview​

Drag current effect onto a layer in the Studio

The preview applies colorKey() before outline() so the outline follows the subject after the green background has been removed.

Example​

MyComp.tsx
import {colorKey} from '@remotion/effects/color-key';
import {outline} from '@remotion/effects/outline';
import {Video} from '@remotion/media';
import {AbsoluteFill} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill style={{backgroundColor: '#15171e'}}>
      <Video
        src="https://remotion.media/greenscreen.mp4"
        effects={[
          colorKey({similarity: 0.45}),
          outline({width: 12, edgeSimplification: 12, color: '#00ffff'}),
        ]}
      />
    </AbsoluteFill>
  );
};

Effects run in array order. Place outline() after an effect that creates transparency, such as colorKey(), to outline the resulting alpha silhouette.

API​

All parameters are optional. You can call outline() without arguments.

width?​

Width of the outline in pixels. Defaults to 8. Must be at least 0.

edgeSimplification?​

Pixel tolerance used to simplify the alpha contour into straight edges. Larger values remove more contour points and make the outline more polygonal. 0 disables simplification and is the default.

The source remains unchanged. With outlineOnly: true, the simplified contour is used for the filled mask as well.

Values above 0 extract and simplify the alpha contour on the CPU for every frame, which is more expensive than the default outline.

color?​

Color of the outline. Accepts any CSS color string. Defaults to white.

opacity?​

Opacity of the outline from 0 to 1. Defaults to 1.

outlineOnly?​

When true, replaces the source with a filled mask in the outline color. The mask includes both the original alpha silhouette and the outline around it. Defaults to false.

disabled?​

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

Canvas bounds​

The outline is clipped at the canvas boundary. Leave transparent space around the source if the outline should extend beyond its current bounds.

Implementations​

  • WebGL2

See: Preferred effect backend.

See also​