Subchapter 1.19

Inline Effects

remotion-interactivity/inline-effects.mdMarkdown993 BView on GitHub

Effects should be inline too

The effects array should not be computed. The same rules for setting keyframes as interpolate() apply too here: All values should also be hardcoded: Input range, output range, easing, extrapolation, output property.

Inline Effects · Remotion Best Practices · remotion-dev/skills · Skills Docs

// 👍 Parameters are inline and the array shape is stable
<CanvasImage
  src={src}
  width={1280}
  height={720}
  effects={[
    radialProgressiveBlur({
      center: [0.5, 0.5],
      width: 1.2,
      height: 0.8,
      start: 0.2,
      disabled: true,
      rotation: interpolate(frame, [0, 120], [0, 180]),
    }),
  ]}
/>

const center = [0.5, 0.5] as const;
const rotation = frame * 1.5;

<CanvasImage
  src={src}
  width={1280}
  height={720}
  // ❌ Conditional effect is not animateable
  effects={enabled ? [
    radialProgressiveBlur({
      // ❌ Not inline
      center,
      rotation,
    }),
  ] : []}
/>