CameraMotionBlur makes the first frame disappear

[JonnyBurger]

Video.tsx

import {Composition, getInputProps} from 'remotion';
import {CompositionLocationAd003} from "./compositions/LocationAd-003/CompositionLocationAd003";

const {
    durationInSec = 15,
    fps = 25,
    width = 1080,
    height = 1920,
} = getInputProps();

const durationInFrames = Math.round(fps * durationInSec);

export const LocationAdVideo: React.FC<{
    videoInput: string;
}> = ({videoInput}) => {

    return (
        <>
            <Composition
                id="LocationAd-003"
                component={CompositionLocationAd003}
                durationInFrames={durationInFrames}
                fps={fps}
                width={width}
                height={height}
            />
        </>
    );
};

CompositionLocationAd003.tsx

import {AbsoluteFill, staticFile, Video} from "remotion";
import Animation from "../../components/Animation";
import {CameraMotionBlur} from "@remotion/motion-blur";

export const CompositionLocationAd003 = () => {
    return (
        <>
            <AbsoluteFill>
                <Video src={staticFile("images/vid_0.mp4")}/>
            </AbsoluteFill>

            <CameraMotionBlur>
                <AbsoluteFill>
                    <Animation/>
                </AbsoluteFill>
            </CameraMotionBlur>
        </>
    );
};

Animation.tsx:

import {Lottie, LottieAnimationData} from "@remotion/lottie";
import {useEffect, useState} from "react";
import {cancelRender, continueRender, delayRender, staticFile,} from "remotion";

const Balloons = () => {
    const [handle] = useState(() => delayRender("Loading Lottie animation"));

    const [animationData, setAnimationData] =
        useState<LottieAnimationData | null>(null);

    useEffect(() => {
        fetch(staticFile("data.json"))
            .then((data) => data.json())
            .then((json) => {
                setAnimationData(json);
                continueRender(handle);
            })
            .catch((err) => {
                cancelRender(err);
                console.log("Animation failed to load", err);
            });
    }, [handle]);

    if (!animationData) {
        return null;
    }

    return <Lottie
        animationData={animationData}
        style={{
            filter: "blur(1px)",
        }}
    />;
};

export default Balloons;

https://discord.com/channels/809501355504959528/1090912684104495186/1097894205533212692

[JonnyBurger]

@patsalv would be awesome if you can try to see if you can reproduce this bug on wednesday!

[JonnyBurger]

Regression:

The initial problem has been solved, but there is a new bug now. I think it appeared here: #2032. The animation has a slight flickering in the first few frames that wasn't there before.

Screen_Recording_2023-05-25_at_09.13.05.mov

https://discord.com/channels/809501355504959528/1090912684104495186/1111190373956591657

[stuible]

I also believe I am encountering this bug. I have a series of videos setup like so:

          <Series>
            {videoArray.map((x) => (
              <Series.Sequence
                key={x.name}
                durationInFrames={Math.floor(x.frames)}
              >
                <LoopedOffthreadVideo
                  key={x.name + 'video'}
                  muted
                  src={x.src}
                />
              </Series.Sequence>
            ))}
          </Series>

When I render it without a CameraMotionBlur it all seems fine, but with CameraMotionBlur, the first frame of every Sequence is blank / black.