Common mistake with <MotionBlur> and <Trail>

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.

❌ Wrong - useCurrentFrame() outside of CameraMotionBlur
tsx
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {CameraMotionBlur} from '@remotion/motion-blur';
 
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>
  );
};

❌ Wrong - useCurrentFrame() outside of CameraMotionBlur
tsx
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {CameraMotionBlur} from '@remotion/motion-blur';
 
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>
  );
};

You can fix this by extracting the animation into a separate component:

✅ Correct - useCurrentFrame() inside the child component
tsx
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {CameraMotionBlur} from '@remotion/motion-blur';
 
const A: React.FC = () => {
  const frame = useCurrentFrame();
 
  return (
    <AbsoluteFill
      style={{
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center',
        color: 'white',
        fontSize: frame,
      }}
    >
      A
    </AbsoluteFill>
  );
};
 
export const MyComp = () => {
  return (
    <AbsoluteFill>
      <CameraMotionBlur>
        <A />
      </CameraMotionBlur>
    </AbsoluteFill>
  );
};

✅ Correct - useCurrentFrame() inside the child component
tsx
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {CameraMotionBlur} from '@remotion/motion-blur';
 
const A: React.FC = () => {
  const frame = useCurrentFrame();
 
  return (
    <AbsoluteFill
      style={{
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center',
        color: 'white',
        fontSize: frame,
      }}
    >
      A
    </AbsoluteFill>
  );
};
 
export const MyComp = () => {
  return (
    <AbsoluteFill>
      <CameraMotionBlur>
        <A />
      </CameraMotionBlur>
    </AbsoluteFill>
  );
};

See also​

See also