ContextQMD
Back to Remotion

chromaticAberration()

packages/docs/docs/effects/chromatic-aberration.mdx

4.0.4741.9 KB
Original Source

chromaticAberration()<AvailableFrom v="4.0.467" />

Part of the @remotion/effects package.

A linear chromatic aberration effect that separates the red and blue channels on canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Use it for an RGB split or lens-fringe look while still controlling effect order through the effects array.

Preview

<EffectsDemo type="effects-chromatic-aberration" />

Example

tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {chromaticAberration} from '@remotion/effects/chromatic-aberration';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          chromaticAberration({
            amount: 8,
            angle: 0,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API

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

amount?

RGB channel separation in pixels. Defaults to 8.

Use 0 for no separation.

angle?

Direction of the split in degrees. Defaults to 0.

0 splits horizontally. 90 splits vertically.

disabled?

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

Requirements

chromaticAberration() uses a WebGL2 backend. During renders, enable WebGL via Config.setChromiumOpenGlRenderer('angle'). See Using WebGL during renders.

See also