vibrance()v4.0.508

Part of the @remotion/effects package.

Adjusts muted colors more strongly than colors that are already saturated.

Preview

::Drag current effect onto a layer in the Studio

Amount

0

Example

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

export const MyComp: React.FC = () => {
  return (
    <Video
      src="https://remotion.media/video.mp4"
      effects={[vibrance({amount: 0.4})]}
    />
  );
};

API

You can call vibrance() without arguments or pass an object with the following properties.

amount?

The vibrance adjustment from -1 to 1. Positive values increase HSL saturation, with a larger adjustment for colors that have more saturation available. Negative values reduce saturation, and -1 produces grayscale. Defaults to 0.

The calculation uses unpremultiplied sRGB values and preserves HSL lightness. Grayscale pixels remain unchanged because they have no hue.

disabled?

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

Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio

See also

• @remotion/effects
• saturation()
• whiteBalance()
• Source code for this effect