Deft
Ask AI

Search

Search skills, authors and topics

remotion-dev / skills

remotion-interactivity

Add interactive and input-driven behavior to Remotion compositions and player experiences.

View sourceVideoRemotionInteraction

Install

npx skills add https://github.com/remotion-dev/skills --skill remotion-interactivity

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.

tsx
// 👍 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,    }),  ] : []}/>

Render separate elements if one version should have effects and another should not.