MotionScript

Grayscale

Desaturates any node. amount ranges from 0 (full color) to 1 (fully grayscale).

Grayscale effect demo

Usage

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

// Fully grayscale
<Rect fill={{ type: 'image', src: './photo.jpg', fit: 'fill' }} effects={Effects.grayscale(1)} />

// Partial desaturation
<Rect fill={{ type: 'image', src: './photo.jpg', fit: 'fill' }} effects={Effects.grayscale(0.5)} />

// Raw object
<Rect effects={[{ type: 'grayscale', amount: 0.8 }]} />

Props

PropTypeDefaultDescription
type'grayscale'–Effect identifier
amountnumber–Desaturation amount: 0 = full color, 1 = fully grayscale
mode'foreground' | 'backdrop''foreground''backdrop' desaturates the content beneath the node, clipped to its silhouette, leaving the node's own content untouched

Animating

Use a tween with lerpNumber to animate between color and grayscale:

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.grayscale(1) });
  stage.add(photo);

  // Colorize over 1.5 seconds
  yield* tween(1.5, (t) => {
    photo.set({ effects: Effects.grayscale(lerpNumber(1, 0, easeInOut(t))) });
  });
});

Stacking with other effects

// Grayscale then blur
<Rect effects={Effects.grayscale(1).blur(4)} />

// Grayscale with pixelate
<Rect effects={Effects.grayscale(0.8).pixelate(60)} />