Chapter 906: Common mistake with <MotionBlur> and <Trail>

Core Idea

The <Trail> and <CameraMotionBlur> components manipulate the React context that holds the current time. This means that the motion blur effect doesn't work if you use the useCurrentFrame() hook outside of a motion blur component.

Key Concepts

• See also

Code Examples

export const MyComp = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill>
      <CameraMotionBlur>
        <AbsoluteFill
          style={{
            backgroundColor: 'red',
            justifyContent: 'center',
            alignItems: 'center',
            color: 'white',
            fontSize: frame,
          }}
        >
          A
        </AbsoluteFill>
      </CameraMotionBlur>
    </AbsoluteFill>
  );
};

• What it demonstrates: Usage pattern for Common mistake with <MotionBlur> and <Trail> from the official docs.

Key Takeaways

1. Understand see also when working with Common mistake with <MotionBlur> and <Trail>.

Connects To

• Camera Motion Blur: related page in the Motion Blur (@remotion/motion-blur) section.
• Motion Blur: related page in the Motion Blur (@remotion/motion-blur) section.
• Trail: related page in the Motion Blur (@remotion/motion-blur) section.