Adding Effects

Our card is laid out nicely. Now let's make it pop. Effects are visual filters you drop onto any node with the effects prop, like blur, glow, or grayscale. They run after the node is drawn, so they apply to everything it contains.

Blur a node

The simplest effect is a blur. Reach for the Effects builder and pass it to a node.

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

export default createScene(function* (stage) {
  stage.add(
    <Rect
      group="column"
      gap={16}
      padding={32}
      fill="#1e293b"
      cornerRadius={16}
      effects={Effects.blur(8)}
    >
      <Rect width={80} height={80} fill="royalblue" cornerRadius={12} />
      <Text text="Motion Script" fontSize={40} fontWeight={700} fill="white" />
    </Rect>
  );
});

That blurs the whole card, square, text, and all. Because the effect is on the container, it covers the children too.

Animate an effect for a focus pull

Effects shine when you animate them. A classic move is to start blurry and snap into focus. Animate the blur with .to() like any other property.

import { createScene, Rect, Text, createRef, Effects, easeOut } from '@motion-script/core';

export default createScene(function* (stage) {
  const card = createRef<Rect>();

  stage.add(
    <Rect
      ref={card}
      group="column"
      gap={16}
      padding={32}
      fill="#1e293b"
      cornerRadius={16}
      effects={Effects.blur(20)}
    >
      <Rect width={80} height={80} fill="royalblue" cornerRadius={12} />
      <Text text="Motion Script" fontSize={40} fontWeight={700} fill="white" />
    </Rect>
  );

  // pull into focus
  yield* card().to({ effects: Effects.blur(0) }, 1, easeOut);
});

The card resolves from a soft blur into a crisp image. A small touch that makes an intro feel polished.

Stack effects together

You can chain effects, and they apply in order. Each call adds to the chain:

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

More effects to play with

Blur and grayscale are just the start. There's a whole catalog, glow, pixelate, chromatic aberration, vintage film looks, and more, each with its own page in the Effects reference. They all attach the same way: build a chain and hand it to effects.

We've animated, laid out, and styled our scene. For the grand finale, let's reveal it with a mask.