ContextQMD
Back to Remotion

vignette()

packages/docs/docs/effects/vignette.mdx

4.0.5152.5 KB
Original Source

vignette()<AvailableFrom v="4.0.468" />

Part of the @remotion/effects package.

A vignette effect that darkens, colors, or fades out the edges of canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

It respects the source alpha mask. Transparent regions stay transparent.

Preview

<EffectsDemo type="effects-vignette" />

Example

tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {vignette} from '@remotion/effects/vignette';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          vignette({
            amount: 0.75,
            radius: 0.55,
            feather: 0.35,
            center: [0.35, 0.5],
            color: '#000000',
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API

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

amount?

Strength from 0 to 1. Defaults to 0.5.

  • 0 leaves the layer unchanged.
  • 1 applies the full vignette at the outer edges.

radius?

Size of the unaffected center from 0 to 1. Defaults to 0.65.

Higher values move the vignette closer to the outer edge.

center?

Center of the vignette in UV coordinates. Defaults to [0.5, 0.5].

Values below 0 or above 1 are allowed.

feather?

Softness of the transition from 0 to 1. Defaults to 0.35.

Use 0 for a hard edge.

roundness?

Shape from 0 to 1. Defaults to 1.

  • 0 makes the vignette more rectangular.
  • 1 makes the vignette elliptical.

color?

The color blended into the edges when mode is 'color'. Defaults to '#000000'.

Accepts any CSS color string (for example '#000000', 'black', or 'rgba(0, 0, 0, 0.8)').

mode?

How the vignette is applied. Defaults to 'color'.

  • 'color' composites color into the edges, including transparent areas.
  • 'alpha' fades the edges transparent instead of adding color.

disabled?

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

Requirements

vignette() uses a WebGL2 backend. See Using WebGL and WebGPU during renders.

See also