Don't let frames go into the negative for CameraMotionBlur

packages/motion-blur/src/CameraMotionBlur.tsx

@@ -7,6 +7,26 @@ export type CameraMotionBlurProps = {
 	samples?: number;
 };
 
+/**
+ * If the current frame is 0, then it is rendered with low opacity,
+ * and the trailing elements have frame numbers -1, -2, -3, -4, etc.
+ * To fix this, we instead reduce the number of samples to not go into negative territory.
+ */
+const getNumberOfSamples = ({
+	shutterFraction,
+	samples,
+	currentFrame,
+}: {
+	shutterFraction: number;
+	samples: number;
+	currentFrame: number;
+}) => {
+	const maxOffset = shutterFraction * samples;
+	const maxTimeReverse = currentFrame - maxOffset;
+	const factor = Math.min(1, Math.max(0, maxTimeReverse / maxOffset + 1));
+	return Math.max(1, Math.round(Math.min(factor * samples, samples)));
+};
+
 /**
  * @description Produces natural looking motion blur similar to what would be produced by a film camera.
  * @see [Documentation](https://www.remotion.dev/docs/motion-blur/camera-motion-blur)
@@ -60,17 +80,24 @@ export const CameraMotionBlur: React.FC<CameraMotionBlurProps> = ({
 
 	const shutterFraction = shutterAngle / 360;
 
+	const actualSamples = getNumberOfSamples({
+		currentFrame,
+		samples,
+		shutterFraction,
+	});
+
 	return (
 		<AbsoluteFill style={{isolation: 'isolate'}}>
-			{new Array(samples).fill(true).map((_, i) => {
+			{new Array(actualSamples).fill(true).map((_, i) => {
 				const sample = i + 1;
-				const sampleFrameOffset = shutterFraction * (sample / samples);
+				const sampleFrameOffset = shutterFraction * (sample / actualSamples);
+
 				return (
 					<AbsoluteFill
 						key={`frame-${i.toString()}`}
 						style={{
 							mixBlendMode: 'plus-lighter',
-							filter: `opacity(${1 / samples})`,
+							filter: `opacity(${1 / actualSamples})`,
 						}}
 					>
 						<Freeze frame={currentFrame - sampleFrameOffset}>{children}</Freeze>