Skip to main content

brightness()v4.0.466

Part of the @remotion/effects package.

A brightness adjustment effect that can be applied to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Preview​

Drag current effect onto a layer in the Studio

Example​

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

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

API​

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

amount?​

Brightness adjustment amount from -1 to 1.

  • 0 leaves the layer unchanged
  • positive values brighten the layer
  • negative values darken the layer

Defaults to 0.

disabled?​

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

Effect order​

If you stack color-correction effects, a common order is:

brightness() → contrast() → saturation() → hue()

This keeps each stage predictable and easier to tweak.

See also​