MotionScript

Invert

Inverts a color channel or color space component. channel controls which part of the color is inverted; strength blends from the original (0) to fully inverted (1).

Invert effect demo

Usage

import { Effects } from '@motion-script/core';

// Full RGB invert
<Rect effects={Effects.invert()} />

// Hue rotation (180°)
<Rect effects={Effects.invert({ channel: 'hue' })} />

// Partial invert with blend
<Rect effects={Effects.invert(0.6)} />

// Raw object
<Rect effects={[{ type: 'invert', channel: 'rgba', strength: 1 }]} />

Props

PropTypeDefaultDescription
type'invert'–Effect identifier
channelInvertChannel'rgba'Which channel or color component to invert (see table below)
strengthnumber1Blend from original (0) to fully inverted (1)
mode'foreground' | 'backdrop''foreground''backdrop' inverts the content beneath the node, clipped to its silhouette, leaving the node's own content untouched

InvertChannel values

ValueDescription
'rgba'Inverts red, green, and blue (alpha untouched)
'red'Inverts the red channel only
'green'Inverts the green channel only
'blue'Inverts the blue channel only
'alpha'Inverts the alpha channel
'hue'Rotates hue by 180°
'luminance'Inverts perceptual luminance (BT.709) while preserving chroma

Animating

import { createScene, Rect, Effects, tween, lerpNumber, easeInOut } from '@motion-script/core';

export default createScene(function* (stage) {
  const photo = new Rect({
    width: 600,
    height: 400,
    fill: { type: 'image', src: './photo.jpg', fit: 'fill' },
  });
  photo.set({ effects: Effects.invert(0) });
  stage.add(photo);

  yield* tween(1, (t) => {
    photo.set({ effects: Effects.invert(lerpNumber(0, 1, easeInOut(t))) });
  });
});

Stacking with other effects

// Inverted and desaturated
<Rect effects={Effects.invert({ channel: 'luminance' }).grayscale(0.5)} />