packages/docs/docs/motion-blur/common-mistake.mdx
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.
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:
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>
);
};